diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000000..4d4f41e301f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+temp
+coverage
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 04ecf049ca9..65653f40da2 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,84 +1,130 @@
+const { builtinModules } = require('node:module')
 const DOMGlobals = ['window', 'document']
 const NodeGlobals = ['module', 'require']
 
+const banConstEnum = {
+  selector: 'TSEnumDeclaration[const=true]',
+  message:
+    'Please use non-const enums. This project automatically inlines enums.',
+}
+
+/**
+ * @type {import('eslint-define-config').ESLintConfig}
+ */
 module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: ['jest'],
+  plugins: ['jest', 'import', '@typescript-eslint'],
   rules: {
     'no-debugger': 'error',
-    'no-unused-vars': [
-      'error',
-      // we are only using this rule to check for unused arguments since TS
-      // catches unused variables but not args.
-      { varsIgnorePattern: '.*', args: 'none' }
-    ],
+    'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
     // most of the codebase are expected to be env agnostic
     'no-restricted-globals': ['error', ...DOMGlobals, ...NodeGlobals],
 
     'no-restricted-syntax': [
       'error',
+      banConstEnum,
       // since we target ES2015 for baseline support, we need to forbid object
       // rest spread usage in destructure as it compiles into a verbose helper.
       'ObjectPattern > RestElement',
       // tsc compiles assignment spread into Object.assign() calls, but esbuild
       // still generates verbose helpers, so spread assignment is also prohiboted
       'ObjectExpression > SpreadElement',
-      'AwaitExpression'
-    ]
+      'AwaitExpression',
+    ],
+    'sort-imports': ['error', { ignoreDeclarationSort: true }],
+
+    'import/no-nodejs-modules': [
+      'error',
+      { allow: builtinModules.map(mod => `node:${mod}`) },
+    ],
+    // This rule enforces the preference for using '@ts-expect-error' comments in TypeScript
+    // code to indicate intentional type errors, improving code clarity and maintainability.
+    '@typescript-eslint/prefer-ts-expect-error': 'error',
+    // Enforce the use of 'import type' for importing types
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        fixStyle: 'inline-type-imports',
+        disallowTypeAnnotations: false,
+      },
+    ],
+    // Enforce the use of top-level import type qualifier when an import only has specifiers with inline type qualifiers
+    '@typescript-eslint/no-import-type-side-effects': 'error',
   },
   overrides: [
     // tests, no restrictions (runs in Node / jest with jsdom)
     {
       files: ['**/__tests__/**', 'packages/dts-test/**'],
       rules: {
+        'no-console': 'off',
         'no-restricted-globals': 'off',
         'no-restricted-syntax': 'off',
         'jest/no-disabled-tests': 'error',
-        'jest/no-focused-tests': 'error'
-      }
+        'jest/no-focused-tests': 'error',
+      },
     },
     // shared, may be used in any env
     {
-      files: ['packages/shared/**'],
+      files: ['packages/shared/**', '.eslintrc.cjs'],
       rules: {
-        'no-restricted-globals': 'off'
-      }
+        'no-restricted-globals': 'off',
+      },
     },
     // Packages targeting DOM
     {
       files: ['packages/{vue,vue-compat,runtime-dom}/**'],
       rules: {
-        'no-restricted-globals': ['error', ...NodeGlobals]
-      }
+        'no-restricted-globals': ['error', ...NodeGlobals],
+      },
     },
     // Packages targeting Node
     {
-      files: [
-        'packages/{compiler-sfc,compiler-ssr,server-renderer,reactivity-transform}/**'
-      ],
+      files: ['packages/{compiler-sfc,compiler-ssr,server-renderer}/**'],
       rules: {
         'no-restricted-globals': ['error', ...DOMGlobals],
-        'no-restricted-syntax': 'off'
-      }
+        'no-restricted-syntax': ['error', banConstEnum],
+      },
     },
     // Private package, browser only + no syntax restrictions
     {
       files: ['packages/template-explorer/**', 'packages/sfc-playground/**'],
       rules: {
         'no-restricted-globals': ['error', ...NodeGlobals],
-        'no-restricted-syntax': 'off'
-      }
+        'no-restricted-syntax': ['error', banConstEnum],
+        'no-console': 'off',
+      },
+    },
+    // JavaScript files
+    {
+      files: ['*.js', '*.cjs'],
+      rules: {
+        // We only do `no-unused-vars` checks for js files, TS files are checked by TypeScript itself.
+        'no-unused-vars': ['error', { vars: 'all', args: 'none' }],
+      },
     },
     // Node scripts
     {
-      files: ['scripts/**', '*.{js,ts}', 'packages/**/index.js'],
+      files: [
+        'scripts/**',
+        './*.{js,ts}',
+        'packages/*/*.js',
+        'packages/vue/*/*.js',
+      ],
       rules: {
         'no-restricted-globals': 'off',
-        'no-restricted-syntax': 'off'
-      }
-    }
-  ]
+        'no-restricted-syntax': ['error', banConstEnum],
+        'no-console': 'off',
+      },
+    },
+    // Import nodejs modules in compiler-sfc
+    {
+      files: ['packages/compiler-sfc/src/**'],
+      rules: {
+        'import/no-nodejs-modules': ['error', { allow: builtinModules }],
+      },
+    },
+  ],
 }
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
new file mode 100644
index 00000000000..d06b03a3f89
--- /dev/null
+++ b/.git-blame-ignore-revs
@@ -0,0 +1,2 @@
+# update prettier & eslint config (#9162)
+bfe6b459d3a0ce6168611ee1ac7e6e789709df9d
diff --git a/.github/contributing.md b/.github/contributing.md
index 9c385f1bcc9..da1bd5ec453 100644
--- a/.github/contributing.md
+++ b/.github/contributing.md
@@ -17,7 +17,11 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 ## Pull Request Guidelines
 
-- Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch.
+- Vue core has two primary work branches: `main` and `minor`.
+
+  - If your pull request is a feature that adds new API surface, it should be submitted against the `minor` branch.
+
+  - Otherwise, it should be submitted against the `main` branch.
 
 - [Make sure to tick the "Allow edits from maintainers" box](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork). This allows us to directly make minor edits / refactors and saves a lot of time.
 
@@ -59,7 +63,7 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 You will need [Node.js](https://nodejs.org) **version 18.12+**, and [PNPM](https://pnpm.io) **version 8+**.
 
-We also recommend installing [ni](https://github.com/antfu/ni) to help switching between repos using different package managers. `ni` also provides the handy `nr` command which running npm scripts easier.
+We also recommend installing [@antfu/ni](https://github.com/antfu/ni) to help switching between repos using different package managers. `ni` also provides the handy `nr` command which running npm scripts easier.
 
 After cloning the repo, run:
 
@@ -82,11 +86,11 @@ The project uses [simple-git-hooks](https://github.com/toplenboren/simple-git-ho
 
 - Type check the entire project
 - Automatically format changed files using Prettier
-- Verify commit message format (logic in `scripts/verifyCommit.js`)
+- Verify commit message format (logic in `scripts/verify-commit.js`)
 
 ## Scripts
 
-**The examples below will be using the `nr` command from the [ni](https://github.com/antfu/ni) package.** You can also use plain `npm run`, but you will need to pass all additional arguments after the command after an extra `--`. For example, `nr build runtime --all` is equivalent to `npm run build -- runtime --all`.
+**The examples below will be using the `nr` command from the [@antfu/ni](https://github.com/antfu/ni) package.** You can also use plain `npm run`, but you will need to pass all additional arguments after the command after an extra `--`. For example, `nr build runtime --all` is equivalent to `npm run build -- runtime --all`.
 
 The `run-s` and `run-p` commands found in some scripts are from [npm-run-all](https://github.com/mysticatea/npm-run-all) for orchestrating multiple scripts. `run-s` means "run in sequence" while `run-p` means "run in parallel".
 
@@ -181,7 +185,7 @@ Shortcut for starting the SFC Playground in local dev mode. This provides the fa
 
 ### `nr dev-esm`
 
-Builds and watches `vue/dist/vue-runtime.esm-bundler.js` with all deps inlined using esbuild. This is useful when debugging the ESM build in a reproductions that require real build setups: link `packages/vue` globally, then link it into the project being debugged.
+Builds and watches `vue/dist/vue-runtime.esm-bundler.js` with all deps inlined using esbuild. This is useful when debugging the ESM build in a reproduction that requires real build setups: link `packages/vue` globally, then link it into the project being debugged.
 
 ### `nr dev-compiler`
 
diff --git a/.github/git-branch-workflow.excalidraw b/.github/git-branch-workflow.excalidraw
new file mode 100644
index 00000000000..dd9127938da
--- /dev/null
+++ b/.github/git-branch-workflow.excalidraw
@@ -0,0 +1,1746 @@
+{
+  "type": "excalidraw",
+  "version": 2,
+  "source": "https://excalidraw.com",
+  "elements": [
+    {
+      "type": "arrow",
+      "version": 799,
+      "versionNonce": 529220601,
+      "isDeleted": false,
+      "id": "Gao2krnDddLMCj468JSWD",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 860.0129225738813,
+      "y": 663.9911710635109,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 133.75296854079784,
+      "height": 149.58016791936518,
+      "seed": 1415631543,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "hDC6an14QljktaZCUhcPF",
+        "focus": 0.09950793234484598,
+        "gap": 1.2432497743127229
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          25.209039386719837,
+          85.96948921803892
+        ],
+        [
+          133.75296854079784,
+          149.58016791936518
+        ]
+      ]
+    },
+    {
+      "type": "arrow",
+      "version": 563,
+      "versionNonce": 290881303,
+      "isDeleted": false,
+      "id": "N3wyyEU7TQ8BsOQgxCmlR",
+      "fillStyle": "hachure",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 292.88008929085873,
+      "y": 660.7027503334302,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 936.9972134376155,
+      "height": 1.3184243543457796,
+      "seed": 534235417,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          936.9972134376155,
+          -1.3184243543457796
+        ]
+      ]
+    },
+    {
+      "type": "arrow",
+      "version": 302,
+      "versionNonce": 883286489,
+      "isDeleted": false,
+      "id": "nRDWQs5nQa37yzCWTBiXC",
+      "fillStyle": "hachure",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 293.1231624544633,
+      "y": 820.6017661012943,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 790.7091601354882,
+      "height": 0.35284814071621895,
+      "seed": 515907671,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "ggogfJT7E_bbfEog7Hjnp",
+        "focus": -0.14000162237652433,
+        "gap": 1
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          790.7091601354882,
+          -0.35284814071621895
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 36,
+      "versionNonce": 981763127,
+      "isDeleted": false,
+      "id": "ZPdMAnEUq5Jgj1W07Zqiw",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 292.0450153578305,
+      "y": 619.3959946602608,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#b2f2bb",
+      "width": 46.875,
+      "height": 24,
+      "seed": 1311694519,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 3,
+      "text": "main",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "main",
+      "lineHeight": 1.2,
+      "baseline": 20
+    },
+    {
+      "type": "text",
+      "version": 94,
+      "versionNonce": 18759353,
+      "isDeleted": false,
+      "id": "g9IkEIfu4vA8Qkwtw01Hi",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 290.88990199912035,
+      "y": 779.1760596323645,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#b2f2bb",
+      "width": 58.59375,
+      "height": 24,
+      "seed": 329886135,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "fontSize": 20,
+      "fontFamily": 3,
+      "text": "minor",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "minor",
+      "lineHeight": 1.2,
+      "baseline": 20
+    },
+    {
+      "type": "ellipse",
+      "version": 50,
+      "versionNonce": 1442112855,
+      "isDeleted": false,
+      "id": "RrdEQ7hwgGGDPhzDnuZj1",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 361.55609907891005,
+      "y": 649.8742329483416,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 2077639991,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 79,
+      "versionNonce": 1547173785,
+      "isDeleted": false,
+      "id": "Zmp49FKWxGSzKnVKomjQc",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 427.3015090315691,
+      "y": 650.256485100784,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 372652121,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 76,
+      "versionNonce": 586949239,
+      "isDeleted": false,
+      "id": "UOl9nLBksM7RPdH9mzjJa",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 490.9435520120701,
+      "y": 651.2601420343765,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 508667545,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 120,
+      "versionNonce": 874947705,
+      "isDeleted": false,
+      "id": "oMC55V0VO_hOXoZ1se8Kl",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 555.4481126698772,
+      "y": 650.7975189165487,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1914963513,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 66,
+      "versionNonce": 39762839,
+      "isDeleted": false,
+      "id": "DZY5DC5uVP7-U5c3ngIZ4",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 622.5167031502219,
+      "y": 649.3743647489936,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 165914713,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 107,
+      "versionNonce": 1689103705,
+      "isDeleted": false,
+      "id": "Vsw6oIiTM3fQypkiCic3f",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 690.330195260967,
+      "y": 650.6681412649529,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 280044345,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "lwYvAs-7FTjcwxKjcx0KV",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 148,
+      "versionNonce": 1986194201,
+      "isDeleted": false,
+      "id": "D14w9erv_2l53mINe2nSt",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 361.004283792179,
+      "y": 810.2809579853473,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1203257975,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 179,
+      "versionNonce": 1172811511,
+      "isDeleted": false,
+      "id": "6WO8xOpG0rf673b_bT0m7",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 426.74969374483805,
+      "y": 810.6632101377896,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 2056706967,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "mE8Mu0qKfFaWPCC5vmF_f",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 173,
+      "versionNonce": 820518905,
+      "isDeleted": false,
+      "id": "VB9U8oH-78hf530hIb_mG",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 490.391736725339,
+      "y": 811.6668670713822,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1149587639,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 218,
+      "versionNonce": 1227143191,
+      "isDeleted": false,
+      "id": "Bxv1hcS0VmxUwI0JLFH97",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 554.8962973831461,
+      "y": 811.2042439535543,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1864901079,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "M14Q0Uo1DBy2Ss2SOFSgW",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 167,
+      "versionNonce": 1387509977,
+      "isDeleted": false,
+      "id": "4v23gkfhy-hzk18YdkfLz",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 621.9648878634908,
+      "y": 809.7810897859994,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 462671607,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "vEF1cIIYYWKm84KLKqEz3",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 200,
+      "versionNonce": 774085943,
+      "isDeleted": false,
+      "id": "AtEf7o4WZQn4Zxq8EN5fH",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 689.7783799742359,
+      "y": 811.0748663019584,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1414322199,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "3heKY3vfe3-6ni4dX7Uqo",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 199,
+      "versionNonce": 1834563001,
+      "isDeleted": false,
+      "id": "ugDby5sBv4NKdNt8eC1sg",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 762.6179978227377,
+      "y": 810.2986003923828,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1598537015,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 211,
+      "versionNonce": 407428695,
+      "isDeleted": false,
+      "id": "Fwe4F2sB_0jptOZGYsusj",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 837.1081608628116,
+      "y": 810.859236882632,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1340669527,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "M14Q0Uo1DBy2Ss2SOFSgW",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "arrow",
+      "version": 57,
+      "versionNonce": 335287961,
+      "isDeleted": false,
+      "id": "mE8Mu0qKfFaWPCC5vmF_f",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 437.60867586595543,
+      "y": 830.4227236701945,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 0.5232394659406623,
+      "height": 33.25787987764363,
+      "seed": 482155929,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": {
+        "elementId": "6WO8xOpG0rf673b_bT0m7",
+        "focus": -0.1727591064041787,
+        "gap": 1.046152088903881
+      },
+      "endBinding": {
+        "elementId": "JALHBtowuh3_a86loej2x",
+        "focus": 0.015156451076917701,
+        "gap": 15.586906139714472
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -0.5232394659406623,
+          33.25787987764363
+        ]
+      ]
+    },
+    {
+      "type": "arrow",
+      "version": 59,
+      "versionNonce": 1248394103,
+      "isDeleted": false,
+      "id": "AI-_jSAuzesxTqwRvpk0s",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 501.2878833373983,
+      "y": 652.3088851192829,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#ffc9c9",
+      "width": 0,
+      "height": 40.40111211199792,
+      "seed": 1052632343,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          -40.40111211199792
+        ]
+      ]
+    },
+    {
+      "type": "arrow",
+      "version": 261,
+      "versionNonce": 693099385,
+      "isDeleted": false,
+      "id": "lwYvAs-7FTjcwxKjcx0KV",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 786.7392304423553,
+      "y": 649.6016935672433,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#ffc9c9",
+      "width": 0,
+      "height": 40.40111211199792,
+      "seed": 1233043511,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": {
+        "elementId": "s0PKxsWTJSDbQeEl_WI-C",
+        "focus": 0.016372633695398757,
+        "gap": 1
+      },
+      "endBinding": {
+        "elementId": "9ia1Uwc5X0fRw5iaahmcT",
+        "focus": 0.025318405829282714,
+        "gap": 14.862364635333904
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          0,
+          -40.40111211199792
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 121,
+      "versionNonce": 952661143,
+      "isDeleted": false,
+      "id": "qWW8uxDIcV3Bkj28uvRLr",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 454.32425448306674,
+      "y": 537.8854189061962,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 93.75,
+      "height": 57.599999999999994,
+      "seed": 809847769,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "patch\nrelease\ne.g. 3.3.8",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "patch\nrelease\ne.g. 3.3.8",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "text",
+      "version": 257,
+      "versionNonce": 1838679129,
+      "isDeleted": false,
+      "id": "9ia1Uwc5X0fRw5iaahmcT",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 741.0510307156029,
+      "y": 536.7382168199114,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 93.75,
+      "height": 57.599999999999994,
+      "seed": 213765431,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "lwYvAs-7FTjcwxKjcx0KV",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "patch\nrelease\ne.g. 3.3.9",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "patch\nrelease\ne.g. 3.3.9",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "text",
+      "version": 222,
+      "versionNonce": 1528547767,
+      "isDeleted": false,
+      "id": "JALHBtowuh3_a86loej2x",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 350.7264132088442,
+      "y": 879.2675096875524,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 168.75,
+      "height": 57.599999999999994,
+      "seed": 41180921,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "mE8Mu0qKfFaWPCC5vmF_f",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "pre minor\nrelease\ne.g. 3.4.0-alpha.1",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "pre minor\nrelease\ne.g. 3.4.0-alpha.1",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "arrow",
+      "version": 345,
+      "versionNonce": 1286082873,
+      "isDeleted": false,
+      "id": "3heKY3vfe3-6ni4dX7Uqo",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 699.5281288163526,
+      "y": 831.0290882554708,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 0.5502191262773977,
+      "height": 33.25154356841597,
+      "seed": 627698359,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "startBinding": {
+        "elementId": "AtEf7o4WZQn4Zxq8EN5fH",
+        "focus": -0.05612657009295625,
+        "gap": 1.1451322685712295
+      },
+      "endBinding": {
+        "elementId": "9t6qH-tAxVUexkHHi2pd2",
+        "focus": 0.015156451076917755,
+        "gap": 15.586906139714358
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -0.5502191262773977,
+          33.25154356841597
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 365,
+      "versionNonce": 1049066199,
+      "isDeleted": false,
+      "id": "9t6qH-tAxVUexkHHi2pd2",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 617.3409291322284,
+      "y": 879.8675379636011,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 159.375,
+      "height": 57.599999999999994,
+      "seed": 1013545943,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "3heKY3vfe3-6ni4dX7Uqo",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613071,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "pre minor\nrelease\ne.g. 3.4.0-beta.1",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "pre minor\nrelease\ne.g. 3.4.0-beta.1",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "arrow",
+      "version": 788,
+      "versionNonce": 1810072089,
+      "isDeleted": false,
+      "id": "vEF1cIIYYWKm84KLKqEz3",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 630.3597332113623,
+      "y": 667.2735668205443,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 2.258228100583324,
+      "height": 140.75112333166828,
+      "seed": 2091697367,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "4v23gkfhy-hzk18YdkfLz",
+        "focus": 0.13930391883256707,
+        "gap": 1.8256906627890626
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          1.8426514015177418,
+          69.09942755691065
+        ],
+        [
+          2.258228100583324,
+          140.75112333166828
+        ]
+      ]
+    },
+    {
+      "type": "arrow",
+      "version": 687,
+      "versionNonce": 2017318649,
+      "isDeleted": false,
+      "id": "M14Q0Uo1DBy2Ss2SOFSgW",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 370.5976915356099,
+      "y": 667.5155013947814,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 1.5329291446666957,
+      "height": 145.39303664953377,
+      "seed": 361678233,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": null,
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -0.34892760581925586,
+          83.56228079137543
+        ],
+        [
+          1.1840015388474399,
+          145.39303664953377
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 537,
+      "versionNonce": 342487319,
+      "isDeleted": false,
+      "id": "CHAOOJMz7tNaG1VsG_uzT",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 384.81046417498214,
+      "y": 725.4677076298137,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 131.25,
+      "height": 57.599999999999994,
+      "seed": 1656007289,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "merge main\ninto minor\nbefore release",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "merge main\ninto minor\nbefore release",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "ellipse",
+      "version": 202,
+      "versionNonce": 876253145,
+      "isDeleted": false,
+      "id": "hDC6an14QljktaZCUhcPF",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 993.0386151813434,
+      "y": 810.335845473903,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1433430105,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "Gao2krnDddLMCj468JSWD",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "arrow",
+      "version": 1525,
+      "versionNonce": 777631287,
+      "isDeleted": false,
+      "id": "ces8IwHCpQlTnELpjFDIn",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 1092.5386800881793,
+      "y": 827.5114796878765,
+      "strokeColor": "#f08c00",
+      "backgroundColor": "#ffc9c9",
+      "width": 0.3315362017829102,
+      "height": 49.45191086419197,
+      "seed": 225867737,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "8rWUxp-jRNGrGRmhHHfm4",
+        "focus": -0.2047594653982401,
+        "gap": 10.392197401393389
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          -0.3315362017829102,
+          49.45191086419197
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 894,
+      "versionNonce": 1173171385,
+      "isDeleted": false,
+      "id": "8rWUxp-jRNGrGRmhHHfm4",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 1047.251646167428,
+      "y": 887.3555879534618,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 112.5,
+      "height": 57.599999999999994,
+      "seed": 1600918713,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [
+        {
+          "id": "ces8IwHCpQlTnELpjFDIn",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "stable minor\nrelease\ne.g. 3.4.0",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "stable minor\nrelease\ne.g. 3.4.0",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "ellipse",
+      "version": 201,
+      "versionNonce": 78435447,
+      "isDeleted": false,
+      "id": "3RHuRn_evSK0YUe02B4MY",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 909.9742423218671,
+      "y": 810.4142561718397,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 1199705047,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 371,
+      "versionNonce": 2093872087,
+      "isDeleted": false,
+      "id": "9h2Cu__8owLUgUGjGcWDe",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 848.4414471158692,
+      "y": 650.826922928275,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 603147257,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 361,
+      "versionNonce": 1981618457,
+      "isDeleted": false,
+      "id": "s0PKxsWTJSDbQeEl_WI-C",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 777.1778842958995,
+      "y": 650.2466837635417,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#b2f2bb",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 326722777,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "lwYvAs-7FTjcwxKjcx0KV",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 871,
+      "versionNonce": 1528156247,
+      "isDeleted": false,
+      "id": "3JAdSa7kqqSDSom5ZFDoE",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 904.3603861670398,
+      "y": 707.2413714353705,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 140.625,
+      "height": 57.599999999999994,
+      "seed": 1011049431,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "final merge\nmain into minor\nbefore release",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "final merge\nmain into minor\nbefore release",
+      "lineHeight": 1.2,
+      "baseline": 53
+    },
+    {
+      "type": "arrow",
+      "version": 591,
+      "versionNonce": 1714373785,
+      "isDeleted": false,
+      "id": "7kFBLq2Iczmj0lVnVk8Ad",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "dotted",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 1100.7141458557703,
+      "y": 814.2034531496416,
+      "strokeColor": "#2f9e44",
+      "backgroundColor": "#ffffff",
+      "width": 127.38209933342364,
+      "height": 144.5383600420214,
+      "seed": 25829591,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "startBinding": null,
+      "endBinding": {
+        "elementId": "Y7VXnuc9QEz2N2l9i0xrc",
+        "focus": 0.3932764551319699,
+        "gap": 5.928572790502042
+      },
+      "lastCommittedPoint": null,
+      "startArrowhead": null,
+      "endArrowhead": "arrow",
+      "points": [
+        [
+          0,
+          0
+        ],
+        [
+          88.94909573964219,
+          -43.721805169626464
+        ],
+        [
+          127.38209933342364,
+          -144.5383600420214
+        ]
+      ]
+    },
+    {
+      "type": "text",
+      "version": 1208,
+      "versionNonce": 1254600055,
+      "isDeleted": false,
+      "id": "gwFWlPLabuYhxCOweJjWz",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 1223.0464288187204,
+      "y": 725.1565933898091,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 150,
+      "height": 38.4,
+      "seed": 51102743,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "main merge minor\n(fast forward)",
+      "textAlign": "center",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "main merge minor\n(fast forward)",
+      "lineHeight": 1.2,
+      "baseline": 34
+    },
+    {
+      "type": "ellipse",
+      "version": 597,
+      "versionNonce": 1760381305,
+      "isDeleted": false,
+      "id": "Y7VXnuc9QEz2N2l9i0xrc",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 1227.4473966637659,
+      "y": 647.6689320688656,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 412038615,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "7kFBLq2Iczmj0lVnVk8Ad",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "ellipse",
+      "version": 547,
+      "versionNonce": 1585505943,
+      "isDeleted": false,
+      "id": "ggogfJT7E_bbfEog7Hjnp",
+      "fillStyle": "solid",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 1083.7911569735343,
+      "y": 809.5203742153592,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "width": 18.814646969963974,
+      "height": 18.814646969963974,
+      "seed": 741463161,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": {
+        "type": 2
+      },
+      "boundElements": [
+        {
+          "id": "nRDWQs5nQa37yzCWTBiXC",
+          "type": "arrow"
+        }
+      ],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false
+    },
+    {
+      "type": "text",
+      "version": 229,
+      "versionNonce": 1935127129,
+      "isDeleted": false,
+      "id": "eU-EgpwDD42CLYUEIDLaD",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "dotted",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 305.8405004265049,
+      "y": 389.31989430571576,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "width": 581.25,
+      "height": 19.2,
+      "seed": 1086231577,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "- merge feature PRs into, and release minors from minor branch",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "- merge feature PRs into, and release minors from minor branch",
+      "lineHeight": 1.2,
+      "baseline": 15
+    },
+    {
+      "type": "text",
+      "version": 397,
+      "versionNonce": 116088535,
+      "isDeleted": false,
+      "id": "Kt6VBAVD4sLM4IexsRGoX",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "dotted",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 305.4136207977353,
+      "y": 358.61173442109686,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "width": 618.75,
+      "height": 19.2,
+      "seed": 273353945,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927617946,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "- merge fix / chore PRs into, and release patches from main branch",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "- merge fix / chore PRs into, and release patches from main branch",
+      "lineHeight": 1.2,
+      "baseline": 15
+    },
+    {
+      "type": "text",
+      "version": 459,
+      "versionNonce": 440532793,
+      "isDeleted": false,
+      "id": "JwKEdnU6H_Nu74WbEAX5M",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "dotted",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 305.6723761009271,
+      "y": 418.3724478537203,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "width": 459.375,
+      "height": 19.2,
+      "seed": 1001222329,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "- merge main into minor before each minor release",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "- merge main into minor before each minor release",
+      "lineHeight": 1.2,
+      "baseline": 15
+    },
+    {
+      "type": "text",
+      "version": 602,
+      "versionNonce": 1108720119,
+      "isDeleted": false,
+      "id": "mb9ZoP803MiH7MTO8wH-2",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "dotted",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 305.0895924262568,
+      "y": 447.44321411383333,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#a5d8ff",
+      "width": 534.375,
+      "height": 19.2,
+      "seed": 264651479,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "- fast forward main to minor after a stable minor release",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "- fast forward main to minor after a stable minor release",
+      "lineHeight": 1.2,
+      "baseline": 15
+    },
+    {
+      "type": "text",
+      "version": 612,
+      "versionNonce": 1588872441,
+      "isDeleted": false,
+      "id": "IfJPOFiwrCibpaBQqc5g-",
+      "fillStyle": "solid",
+      "strokeWidth": 2,
+      "strokeStyle": "solid",
+      "roughness": 2,
+      "opacity": 100,
+      "angle": 0,
+      "x": 646.7131179044119,
+      "y": 724.4984335940012,
+      "strokeColor": "#1e1e1e",
+      "backgroundColor": "#ffc9c9",
+      "width": 131.25,
+      "height": 57.599999999999994,
+      "seed": 1301100087,
+      "groupIds": [],
+      "frameId": null,
+      "roundness": null,
+      "boundElements": [],
+      "updated": 1698927613072,
+      "link": null,
+      "locked": false,
+      "fontSize": 16,
+      "fontFamily": 3,
+      "text": "merge main\ninto minor\nbefore release",
+      "textAlign": "left",
+      "verticalAlign": "top",
+      "containerId": null,
+      "originalText": "merge main\ninto minor\nbefore release",
+      "lineHeight": 1.2,
+      "baseline": 53
+    }
+  ],
+  "appState": {
+    "gridSize": null,
+    "viewBackgroundColor": "#ffffff"
+  },
+  "files": {}
+}
\ No newline at end of file
diff --git a/.github/git-branch-workflow.png b/.github/git-branch-workflow.png
new file mode 100644
index 00000000000..6c8ee07d484
Binary files /dev/null and b/.github/git-branch-workflow.png differ
diff --git a/.github/issue-workflow.png b/.github/issue-workflow.png
new file mode 100644
index 00000000000..92b1de0633c
Binary files /dev/null and b/.github/issue-workflow.png differ
diff --git a/.github/maintenance.md b/.github/maintenance.md
new file mode 100644
index 00000000000..8d4317c6b01
--- /dev/null
+++ b/.github/maintenance.md
@@ -0,0 +1,122 @@
+# Vue Core Maintenance Handbook
+
+Unlike [contributing.md](./contributing.md), which targets external contributors, this document is mainly intended for team members responsible for maintaining the project. It provides guidelines on how to triage issues, review & merge PRs, and publish releases. However, it should also be valuable to external contributors even if you are not a maintainer, as it gives you a better idea of how the maintainers operate, and how you can better collaborate with them. And who knows - maybe one day you will join as a maintainer as well!
+
+- [Issue Triage Workflow](#issue-triage-workflow)
+- [Pull Request Review Guidelines](#pull-request-review-guidelines)
+  - [Reviewing a Fix](#reviewing-a-fix)
+  - [Reviewing a Refactor](#reviewing-a-refactor)
+  - [Reviewing a Feature](#reviewing-a-feature)
+  - [Common Considerations for All PRs](#common-considerations-for-all-prs)
+- [PR Merge Rules for Team Members](#pr-merge-rules-for-team-members)
+- [Git Branch and Release Workflow](#git-branch-and-release-workflow)
+
+## Issue Triage Workflow
+
+![Workflow](./issue-workflow.png)
+
+## Pull Request Review Guidelines
+
+The first step of reviewing a PR is to identify its purpose. We can usually put a PR in one of these categories:
+
+- **Fix**: fixes some wrong behavior. Usually associated with an issue that has a reproduction of the behavior being fixed.
+- **Refactor**: improves performance or code quality, but does not affect behavior.
+- **Feature**: implements something that increases the public API surface.
+
+Depending on the type of the PR, different considerations need to be taken into account.
+
+### Reviewing a Fix
+
+- Is the PR fixing a well defined issue / bug report?
+  - If not, ask to clarify context / provide reproduction or failing test case
+- In most cases, a fix PR should include a test case that fails without the fix.
+- Is it the right fix?
+  - If not, guide user to rework the PR.
+  - If the needed change is small and obvious, can directly push to the PR or add inline suggestions to reduce the back-and-forth.
+- Is the cost justified?
+  - Sometimes the fix for a rare edge case might be introducing disproportionately large overhead (perf or code size). We should try our best to reduce the overhead to make the fix a reasonable tradeoff.
+- If the reviewer is not sure about a fix, try to leave a comment explaining the concerns / reservations so the contributor at least gets some feedback.
+
+#### Verifying a Fix
+
+- **Always locally verify that the fix indeed fixes the original behavior, either through a reproduction or a failing test case.**
+- We will run [ecosystem-ci](https://github.com/vuejs/ecosystem-ci) before every release, but if you are concerned about the potential impact of a change, it never hurts to manually run ecosystem-ci by leaving a `/ecosystem-ci run` comment (only works for team members).
+- Take extra caution with snapshot tests! The CI can be "passing" even if the code generated in the snapshot contains bugs. It's best to always accompany a snapshot test with extra `expect(code).toMatch(...)` assertions.
+
+### Reviewing a Refactor
+
+- Performance: if a refactor PR claims to improve performance, there should be benchmarks showcasing said performance unless the improvement is self-explanatory.
+
+- Code quality / stylistic PRs: we should be conservative on merging this type PRs because (1) they can be subjective in many cases, and (2) they often come with large git diffs, causing merge conflicts with other pending PRs, and leading to unwanted noise when tracing changes through git history. Use your best judgement on this type of PRs on whether they are worth it.
+
+  - For PRs in this category that are approved, do not merge immediately. Group them before releasing a new minor, after all feature-oriented PRs are merged.
+
+### Reviewing a Feature
+
+- Feature PRs should always have clear context and explanation on why the feature should be added, ideally in the form of an RFC. If the PR doesn't explain what real-world problem it is solving, ask the contributor to clarify.
+
+- Decide if the feature should require an RFC process. The line isn't always clear, but a rough criteria is whether it is augmenting an existing API vs. adding a new API. Some examples:
+
+  - Adding a new built-in component or directive is "significant" and definitely requires an RFC.
+  - Template syntax additions like adding a new `v-on` modifier or a new `v-bind` syntax sugar are "substantial". It would be nice to have an RFC for it, but a detailed explanation on the use case and reasoning behind the design directly in the PR itself can be acceptable.
+  - Small, low-impact additions like exposing a new utility type or adding a new app config option can be self-explanatory, but should still provide enough context in the PR.
+
+- Always ask if the use case can be solved with existing APIs. Vue already has a pretty large API surface, so we want to make sure every new addition either solves something that wasn't possible before, or significantly improves the DX of a common task.
+
+### Common Considerations for All PRs
+
+- Scope: a PR should only contain changes directly related to the problem being addressed. It should not contain unnecessary code style changes.
+
+- Implementation: code style should be consistent with the rest of the codebase, follow common best practices. Prefer code that is boring but easy to understand over "clever" code.
+
+- Size: bundle size matters. We have a GitHub action that compares the size change for every PR. We should always aim to realize the desired changes with the smallest amount of code size increase.
+
+  - Sometimes we need to compare the size increase vs. perceived benefits to decide whether a change is justifiable. Also take extra care to make sure added code can be tree-shaken if not needed.
+
+  - Make sure to put dev-only code in `__DEV__` branches so they are tree-shakable.
+
+  - Runtime code is more sensitive to size increase than compiler code.
+
+  - Make sure it doesn't accidentally cause dev-only or compiler-only code branches to be included in the runtime build. Notable case is that some functions in @vue/shared are compiler-only and should not be used in runtime code, e.g. `isHTMLTag` and `isSVGTag`.
+
+- Performance
+  - Be careful about code changes in "hot paths", in particular the Virtual DOM renderer (`runtime-core/src/renderer.ts`) and component instantiation code.
+
+- Potential Breakage
+  - avoiding runtime behavior breakage is the highest priority
+    - if not sure, use `ecosystem-ci` to verify!
+  - some fix inevitably cause behavior change, these must be discussed case-by-case
+  - type level breakage (e.g upgrading TS) is possible between minors
+
+## PR Merge Rules for Team Members
+
+Given that the PR meets the review requirements:
+
+- Chore / dependencies bumps: can merge directly.
+- Fixes / refactors: can merge with two or more approvals from team members.
+  - If you believe a PR looks good but you are not 100% confident to merge, label with "ready for merge" and Evan will provide a final review before merging.
+- Features: if approved by two or more team members, label with "ready to merge". Evan will review periodically, or they can be raised and discussed at team meetings.
+
+## Git Branch and Release Workflow
+
+We use two primary work branches: `main` and `minor`.
+
+- The `main` branch is for stable releases. Changes that are bug fixes or refactors that do not affect the public API surface should land in this branch. We periodically release patch releases from the `main` branch.
+
+- The `minor` branch is the WIP branch for the next minor release. Changes that are new features or those that affect public API behavior should land in this branch. We will periodically release pre-releases (alpha / beta) for the next minor from this branch.
+
+Before each release, we merge latest `main` into `minor` so it would include the latest bug fixes.
+
+When the minor is ready, we do a final merge of `main` into `minor`, and then release a stable minor from this branch (e.g. `3.4.0`). After that, the `main` branch is fast-forwarded to the release commit, so the two branches are synced at each stable minor release.
+
+![Workflow](./git-branch-workflow.png)
+
+### Reasoning Behind the Workflow
+
+The reason behind this workflow is to allow merging and releasing of fixes and features in parallel. In the past, we used a linear trunk-based development model. While the linear model results in a clean git history, the downside is that we need to be careful about when to merge patches vs. features.
+
+Vue typically groups a number of features with the same scope in a minor release. We don't want to release a minor just because we happened to merge a feature PR along with a bunch of small bug fixes. So we usually "wait" until we feel we are ready to start working on a minor release before merging feature PRs.
+
+But in reality, there are always bugs to fix and patch release to work on - this caused the intervals between minors to drag on longer than we had hoped, and many feature PRs were left waiting for a long period of time.
+
+This is why we decided to separate bug fixes and feature PRs into separate branches. With this two-branch model, we are able to merge and release both types of changes in parallel.
diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 088913317c7..db0e457a641 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -7,35 +7,35 @@
   packageRules: [
     {
       depTypeList: ['peerDependencies'],
-      enabled: false
+      enabled: false,
     },
     {
       groupName: 'test',
       matchPackageNames: ['vitest', 'jsdom', 'puppeteer'],
-      matchPackagePrefixes: ['@vitest']
+      matchPackagePrefixes: ['@vitest'],
     },
     {
       groupName: 'playground',
       matchFileNames: [
         'packages/sfc-playground/package.json',
-        'packages/template-explorer/package.json'
-      ]
+        'packages/template-explorer/package.json',
+      ],
     },
     {
       groupName: 'compiler',
       matchPackageNames: ['magic-string'],
-      matchPackagePrefixes: ['@babel', 'postcss']
+      matchPackagePrefixes: ['@babel', 'postcss'],
     },
     {
       groupName: 'build',
       matchPackageNames: ['vite', 'terser'],
-      matchPackagePrefixes: ['rollup', 'esbuild', '@rollup', '@vitejs']
+      matchPackagePrefixes: ['rollup', 'esbuild', '@rollup', '@vitejs'],
     },
     {
       groupName: 'lint',
       matchPackageNames: ['simple-git-hooks', 'lint-staged'],
-      matchPackagePrefixes: ['@typescript-eslint', 'eslint', 'prettier']
-    }
+      matchPackagePrefixes: ['@typescript-eslint', 'eslint', 'prettier'],
+    },
   ],
   ignoreDeps: [
     'vue',
@@ -45,6 +45,10 @@
     'typescript',
 
     // ESM only
-    'estree-walker'
-  ]
+    'estree-walker',
+
+    // pinned
+    // https://github.com/vuejs/core/issues/10300#issuecomment-1940855364
+    'lru-cache',
+  ],
 }
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index 1c81ece394d..d7f11b0d220 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -17,7 +17,7 @@ jobs:
         uses: pnpm/action-setup@v2
 
       - name: Set node version to 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: pnpm
@@ -30,4 +30,4 @@ jobs:
       - name: Run prettier
         run: pnpm run format
 
-      - uses: autofix-ci/action@d3e591514b99d0fca6779455ff8338516663f7cc
+      - uses: autofix-ci/action@ea32e3a12414e6d3183163c3424a7d7a8631ad84
diff --git a/.github/workflows/canary-minor.yml b/.github/workflows/canary-minor.yml
index 2aa6db12b36..27fbd42c90c 100644
--- a/.github/workflows/canary-minor.yml
+++ b/.github/workflows/canary-minor.yml
@@ -20,7 +20,7 @@ jobs:
         uses: pnpm/action-setup@v2
 
       - name: Set node version to 18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: 'https://registry.npmjs.org'
diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml
index e2f411c8e09..61490232f66 100644
--- a/.github/workflows/canary.yml
+++ b/.github/workflows/canary.yml
@@ -17,10 +17,10 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 18
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           registry-url: 'https://registry.npmjs.org'
           cache: 'pnpm'
 
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8fd0389f41c..b80b142a3a2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,10 +22,10 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 18
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           cache: 'pnpm'
 
       - run: pnpm install
@@ -44,10 +44,10 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 18
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           cache: 'pnpm'
 
       - run: pnpm install
@@ -65,7 +65,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Setup cache for Chromium binary
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/puppeteer
           key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
@@ -73,18 +73,21 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 18
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           cache: 'pnpm'
 
       - run: pnpm install
-      - run: node node_modules/puppeteer/install.js
+      - run: node node_modules/puppeteer/install.mjs
 
       - name: Run e2e tests
         run: pnpm run test-e2e
 
+      - name: verify treeshaking
+        run: node scripts/verify-treeshaking.js
+
   lint-and-test-dts:
     runs-on: ubuntu-latest
     if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
@@ -96,10 +99,10 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 18
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version-file: '.node-version'
           cache: 'pnpm'
 
       - run: pnpm install
@@ -112,3 +115,28 @@ jobs:
 
       - name: Run type declaration tests
         run: pnpm run test-dts
+
+  # benchmarks:
+  #   runs-on: ubuntu-latest
+  #   if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
+  #   env:
+  #     PUPPETEER_SKIP_DOWNLOAD: 'true'
+  #   steps:
+  #     - uses: actions/checkout@v4
+
+  #     - name: Install pnpm
+  #       uses: pnpm/action-setup@v2
+
+  #     - name: Install Node.js
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version-file: '.node-version'
+  #         cache: 'pnpm'
+
+  #     - run: pnpm install
+
+  #     - name: Run benchmarks
+  #       uses: CodSpeedHQ/action@v2
+  #       with:
+  #         run: pnpm vitest bench --run
+  #         token: ${{ secrets.CODSPEED_TOKEN }}
diff --git a/.github/workflows/ecosystem-ci-trigger.yml b/.github/workflows/ecosystem-ci-trigger.yml
index bd3a2749431..25adf7c85f4 100644
--- a/.github/workflows/ecosystem-ci-trigger.yml
+++ b/.github/workflows/ecosystem-ci-trigger.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository == 'vuejs/core' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/ecosystem-ci run')
     steps:
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         with:
           script: |
             const user = context.payload.sender.login
@@ -43,7 +43,7 @@ jobs:
               })
               throw new Error('not allowed')
             }
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         id: get-pr-data
         with:
           script: |
@@ -58,7 +58,7 @@ jobs:
               branchName: pr.head.ref,
               repo: pr.head.repo.full_name
             }
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         id: trigger
         env:
           COMMENT: ${{ github.event.comment.body }}
diff --git a/.github/workflows/lock-closed-issues.yml b/.github/workflows/lock-closed-issues.yml
index cf01a5f6cdf..68a7d6c7a15 100644
--- a/.github/workflows/lock-closed-issues.yml
+++ b/.github/workflows/lock-closed-issues.yml
@@ -12,7 +12,7 @@ jobs:
     if: github.repository == 'vuejs/core'
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           issue-inactive-days: '14'
diff --git a/.github/workflows/size-data.yml b/.github/workflows/size-data.yml
index 8068b8645b6..42d4aa52f93 100644
--- a/.github/workflows/size-data.yml
+++ b/.github/workflows/size-data.yml
@@ -24,10 +24,10 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to LTS
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version-file: '.node-version'
           cache: pnpm
 
       - name: Install dependencies
@@ -36,7 +36,7 @@ jobs:
       - run: pnpm run size
 
       - name: Upload Size Data
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: size-data
           path: temp/size
@@ -45,7 +45,7 @@ jobs:
         if: ${{github.event_name == 'pull_request'}}
         run: echo ${{ github.event.number }} > ./pr.txt
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: ${{github.event_name == 'pull_request'}}
         with:
           name: pr-number
diff --git a/.github/workflows/size-report.yml b/.github/workflows/size-report.yml
index 8acf464ae37..b6f1f4728ba 100644
--- a/.github/workflows/size-report.yml
+++ b/.github/workflows/size-report.yml
@@ -26,17 +26,17 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to LTS
-        uses: actions/setup-node@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version-file: '.node-version'
           cache: pnpm
 
       - name: Install dependencies
         run: pnpm install
 
       - name: Download PR number
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
         with:
           name: pr-number
           run_id: ${{ github.event.workflow_run.id }}
@@ -48,14 +48,14 @@ jobs:
           path: ./pr.txt
 
       - name: Download Size Data
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
         with:
           name: size-data
           run_id: ${{ github.event.workflow_run.id }}
           path: temp/size
 
       - name: Download Previous Size Data
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
         with:
           branch: main
           workflow: size-data.yml
diff --git a/.node-version b/.node-version
new file mode 100644
index 00000000000..209e3ef4b62
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+20
diff --git a/.prettierignore b/.prettierignore
index 1521c8b7652..fbd3dca8ca3 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,4 @@
 dist
+*.md
+*.html
+pnpm-lock.yaml
diff --git a/.prettierrc b/.prettierrc
index ef93d94821a..759232e7cf6 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
-semi: false
-singleQuote: true
-printWidth: 80
-trailingComma: 'none'
-arrowParens: 'avoid'
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
index b63ffc79b80..b616400b48e 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -21,7 +21,7 @@
       "console": "integratedTerminal",
       "sourceMaps": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     }
   ]
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd2d4775424..0e79cebb333 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,443 +1,686 @@
-## [3.3.5](https://github.com/vuejs/core/compare/v3.3.4...v3.3.5) (2023-10-20)
-
-
-### Bug Fixes
-
-* add isGloballyWhitelisted back, but deprecated ([#8556](https://github.com/vuejs/core/issues/8556)) ([63dfe8e](https://github.com/vuejs/core/commit/63dfe8eab499979bcc2f7829e82464e13899c895)), closes [/github.com/vuejs/core/issues/8416#issuecomment-1566583260](https://github.com//github.com/vuejs/core/issues/8416/issues/issuecomment-1566583260)
-* **build:** disable useDefineForClassFields in esbuild ([#9252](https://github.com/vuejs/core/issues/9252)) ([6d14fa8](https://github.com/vuejs/core/commit/6d14fa88e85d4c9e264be394ddb37a54ca6738a8))
-* **compat:** return value of vue compat set() ([#9377](https://github.com/vuejs/core/issues/9377)) ([e3c2d69](https://github.com/vuejs/core/commit/e3c2d699f694d9500ddee78571172a24f0e3b17a))
-* **compiler-sfc:** don't hoist props and emit ([#8535](https://github.com/vuejs/core/issues/8535)) ([24db951](https://github.com/vuejs/core/commit/24db9516d8b4857182ec1a3af86cb7346691679b)), closes [#7805](https://github.com/vuejs/core/issues/7805) [#7812](https://github.com/vuejs/core/issues/7812)
-* **compiler-sfc:** don't registerTS when bundling for browsers ([#8582](https://github.com/vuejs/core/issues/8582)) ([6f45f76](https://github.com/vuejs/core/commit/6f45f76df2c43796b35067ef8f8b9a7bca454040))
-* **compiler-sfc:** fix using imported ref as template ref during dev ([#7593](https://github.com/vuejs/core/issues/7593)) ([776ebf2](https://github.com/vuejs/core/commit/776ebf25b2e7570e78ac1c148fc45c823c21a542)), closes [#7567](https://github.com/vuejs/core/issues/7567)
-* **compiler-sfc:** handle dynamic directive arguments in template usage check ([#8538](https://github.com/vuejs/core/issues/8538)) ([e404a69](https://github.com/vuejs/core/commit/e404a699f48ae5c5a5da947f42679343192158c7)), closes [#8537](https://github.com/vuejs/core/issues/8537)
-* **compiler-sfc:** ignore style v-bind in double slash comments ([#5409](https://github.com/vuejs/core/issues/5409)) ([381b497](https://github.com/vuejs/core/commit/381b4977af25ba5392704f72ec6b3f2394d87ae7))
-* **compiler-sfc:** pass options directly to stylus ([#3848](https://github.com/vuejs/core/issues/3848)) ([d6446a6](https://github.com/vuejs/core/commit/d6446a6d40774b79045a9ddba7b5fd5201d51450))
-* **compiler-sfc:** support resolve multiple re-export /w same source type name ([#8365](https://github.com/vuejs/core/issues/8365)) ([4fa8da8](https://github.com/vuejs/core/commit/4fa8da8576717c619e1e8c04d19038488c75fbea)), closes [#8364](https://github.com/vuejs/core/issues/8364)
-* **compiler-sfc:** typo in experimental feature warnings ([#8513](https://github.com/vuejs/core/issues/8513)) ([fd1a3f9](https://github.com/vuejs/core/commit/fd1a3f95990d7c372fa1c0c40c55caca761a33a4))
-* **deps:** update dependency monaco-editor to ^0.44.0 ([#9237](https://github.com/vuejs/core/issues/9237)) ([8611874](https://github.com/vuejs/core/commit/8611874e09a827b6491173836c8942284d5de22c))
-* **deps:** update playground ([#9154](https://github.com/vuejs/core/issues/9154)) ([c8566a2](https://github.com/vuejs/core/commit/c8566a22b7cf37e6aefab7bad7b97ce2db9fae4c))
-* **playground:** fix github button style ([#7722](https://github.com/vuejs/core/issues/7722)) ([5ee992c](https://github.com/vuejs/core/commit/5ee992cfeabc6c4b871980c6057d0ac7140ad2fa))
-* **runtime-core:** swap client/server debug labels ([#9089](https://github.com/vuejs/core/issues/9089)) ([8f311c6](https://github.com/vuejs/core/commit/8f311c6f823f6776ca1c49bfbbbf8c7d9dea9cf1))
-* **ssr:** render correct initial selected state for select with v-model ([#7432](https://github.com/vuejs/core/issues/7432)) ([201c46d](https://github.com/vuejs/core/commit/201c46df07a38f3c2b73f384e8e6846dc62f224e)), closes [#7392](https://github.com/vuejs/core/issues/7392)
-* **ssr:** reset current instance if setting up options component errors ([#7743](https://github.com/vuejs/core/issues/7743)) ([020851e](https://github.com/vuejs/core/commit/020851e57d9a9f727c6ea07e9c1575430af02b73)), closes [#7733](https://github.com/vuejs/core/issues/7733)
-* **teleport:** handle target change while disabled ([#7837](https://github.com/vuejs/core/issues/7837)) ([140a89b](https://github.com/vuejs/core/commit/140a89b833bceed60838182b875d2953c70af114)), closes [#7835](https://github.com/vuejs/core/issues/7835)
-* **transition:** handle possible auto value for transition/animation durations ([96c76fa](https://github.com/vuejs/core/commit/96c76facb7de37fc241ccd55e121fd60a49a1452)), closes [#8409](https://github.com/vuejs/core/issues/8409)
-* **types/jsx:** add `inert` attribute and missing `hidden` values ([#8090](https://github.com/vuejs/core/issues/8090)) ([ceb0732](https://github.com/vuejs/core/commit/ceb0732e0b1bb4c8c505d80e97ff6fc89035fa90))
-* **types/jsx:** add missing loading attr for img element ([#6160](https://github.com/vuejs/core/issues/6160)) ([68d6b43](https://github.com/vuejs/core/commit/68d6b43f7e29b76aab2c6c1882885380a43fa3e3))
-* **types:** correct withDefaults return type for boolean prop with undefined default value ([#8602](https://github.com/vuejs/core/issues/8602)) ([f07cb18](https://github.com/vuejs/core/commit/f07cb18fedf9a446545aadf76bcdfb957c7ebcbd))
-* **types:** ensure nextTick return type reflect correct Promise value ([#8406](https://github.com/vuejs/core/issues/8406)) ([6a22b1f](https://github.com/vuejs/core/commit/6a22b1f6c287b60eda385df8a514335af8e040ea))
-* **types:** support correct types for style on svg elements ([#6322](https://github.com/vuejs/core/issues/6322)) ([364dc53](https://github.com/vuejs/core/commit/364dc53c7cc6f97d812ad175199c698faa92538e))
+## [3.4.19](https://github.com/vuejs/core/compare/v3.4.18...v3.4.19) (2024-02-13)
+
+
+### Bug Fixes
+
+* **deps:** pin lru-cache to avoid hashing error ([b8be990](https://github.com/vuejs/core/commit/b8be99018ceae92d1732dfb414df12b36b90b31f)), closes [#10300](https://github.com/vuejs/core/issues/10300)
+* **hydration:** fix css vars hydration mismatch false positive on non-root nodes ([995d2fd](https://github.com/vuejs/core/commit/995d2fdcca485c24849c99f498c1edc163722e04)), closes [#10317](https://github.com/vuejs/core/issues/10317) [#10325](https://github.com/vuejs/core/issues/10325)
+* **runtime-dom:** should not trigger transition when v-show value is falsy ([#10311](https://github.com/vuejs/core/issues/10311)) ([e509639](https://github.com/vuejs/core/commit/e50963903d93a7f24003b6e2c03647fdf7454b1e))
+
+
+### Features
+
+> Note: this warning is categorized as a feature but released in a patch because it does not affect public APIs.
+
+* **dx:** warn users when computed is self-triggering ([#10299](https://github.com/vuejs/core/issues/10299)) ([f7ba97f](https://github.com/vuejs/core/commit/f7ba97f9754a9882c1f6b1c07ca1a4040479dd13))
 
 
 ### Performance Improvements
 
-* **compiler-sfc:** lazy require typescript ([d2c3d8b](https://github.com/vuejs/core/commit/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f))
-* **custom-element:** cancel `MutationObserver` listener when disconnected ([#8666](https://github.com/vuejs/core/issues/8666)) ([24d98f0](https://github.com/vuejs/core/commit/24d98f03276de5b0fbced5a4c9d61b24e7d9d084))
-* mark `defineComponent` as side-effects-free ([#8512](https://github.com/vuejs/core/issues/8512)) ([438027c](https://github.com/vuejs/core/commit/438027cf9ecb63260f59d3027e0b188717694795))
+* **runtime:** improve `getType()` GC and speed ([#10327](https://github.com/vuejs/core/issues/10327)) ([603a1e1](https://github.com/vuejs/core/commit/603a1e1f5ad587c077f0d974c1bbe856be22ebe9))
 
 
 
-## [3.3.4](https://github.com/vuejs/core/compare/v3.3.3...v3.3.4) (2023-05-18)
+## [3.4.18](https://github.com/vuejs/core/compare/v3.4.17...v3.4.18) (2024-02-09)
 
 
 ### Bug Fixes
 
-* **build:** ensure correct typing for node esm ([d621d4c](https://github.com/vuejs/core/commit/d621d4c646b2d7b190fbd44ad1fd04512b3de300))
-* **build:** fix __DEV__ flag replacement edge case ([8b7c04b](https://github.com/vuejs/core/commit/8b7c04b18f73aad9a08dd57eba90101b5b2aef28)), closes [#8353](https://github.com/vuejs/core/issues/8353)
-* **compiler-sfc:** handle imported types from default exports ([5aec717](https://github.com/vuejs/core/commit/5aec717a2402652306085f58432ba3ab91848a74)), closes [#8355](https://github.com/vuejs/core/issues/8355)
+* **dx:** warn against reserved keys as prop name ([77a804b](https://github.com/vuejs/core/commit/77a804b1d0d6a3f12fb3674cdceb85ebd6481e02)), closes [#10281](https://github.com/vuejs/core/issues/10281)
+* **runtime-dom:**  ensure v-show respects display value set via v-bind ([#10297](https://github.com/vuejs/core/issues/10297)) ([c224897](https://github.com/vuejs/core/commit/c224897dd4e189a10ec601a97fe08cb638ebee19)), closes [#10151](https://github.com/vuejs/core/issues/10151)
 
 
 
-## [3.3.3](https://github.com/vuejs/core/compare/v3.3.2...v3.3.3) (2023-05-18)
+## [3.4.17](https://github.com/vuejs/core/compare/v3.4.16...v3.4.17) (2024-02-09)
 
 
-### Bug Fixes
+### Reverts
 
-* avoid regex s flag for old browsers ([91f1c62](https://github.com/vuejs/core/commit/91f1c62e6384a8b09f90e7e43b8d347901e529a0)), closes [#8316](https://github.com/vuejs/core/issues/8316)
-* **build:** fix dev flag replacement in esm-builder builds ([#8314](https://github.com/vuejs/core/issues/8314)) ([003836f](https://github.com/vuejs/core/commit/003836f90e1f00ebd04b77ec07ccfa4e649a2ff4)), closes [#8312](https://github.com/vuejs/core/issues/8312)
-* **compiler-sfc:** don't hoist regexp literial ([#8300](https://github.com/vuejs/core/issues/8300)) ([8ec73a3](https://github.com/vuejs/core/commit/8ec73a3aea7a52e9479f107ae5737761166ddae6))
-* **compiler-sfc:** fix props destructing default value type checking with unresolved type ([#8340](https://github.com/vuejs/core/issues/8340)) ([f69dbab](https://github.com/vuejs/core/commit/f69dbabf8794426c3e9ed33ae77dd8ce655eafd2)), closes [#8326](https://github.com/vuejs/core/issues/8326)
-* **compiler-sfc:** fix type import from path aliased vue file ([fab9c72](https://github.com/vuejs/core/commit/fab9c727805c6186c490f99023e8cf5401b0b5a9)), closes [#8348](https://github.com/vuejs/core/issues/8348)
-* **compiler-sfc:** handle ts files with relative imports with .js extension ([b36addd](https://github.com/vuejs/core/commit/b36addd3bde07467e9ff5641bd1c2bdc3085944c)), closes [#8339](https://github.com/vuejs/core/issues/8339)
-* **compiler-sfc:** parses correctly when inline mode is off ([#8337](https://github.com/vuejs/core/issues/8337)) ([ecbd42a](https://github.com/vuejs/core/commit/ecbd42a1444e3c599e464dec002e43d548d99669)), closes [#6088](https://github.com/vuejs/core/issues/6088)
-* **compiler-sfc:** support defineEmits type reference with unions ([#8299](https://github.com/vuejs/core/issues/8299)) ([b133e0f](https://github.com/vuejs/core/commit/b133e0fd97b0b4fabbb43151c19031b8fb47c05b)), closes [#7943](https://github.com/vuejs/core/issues/7943)
-* **types:** support generic usage with withDefaults + defineProps ([#8335](https://github.com/vuejs/core/issues/8335)) ([216f269](https://github.com/vuejs/core/commit/216f26995b63c2df26ca0f39f390fe8d59cdabfa)), closes [#8310](https://github.com/vuejs/core/issues/8310) [#8331](https://github.com/vuejs/core/issues/8331) [#8325](https://github.com/vuejs/core/issues/8325)
+* fix(runtime-dom): ensure v-show respects display value set via v-bind ([#10161](https://github.com/vuejs/core/issues/10161)) ([2cd5b05](https://github.com/vuejs/core/commit/2cd5b05c3bf171be5c0b473c084c01704a058ffa)), closes [#10294](https://github.com/vuejs/core/issues/10294) [#10151](https://github.com/vuejs/core/issues/10151)
 
 
 
-## [3.3.2](https://github.com/vuejs/core/compare/v3.3.1...v3.3.2) (2023-05-12)
+## [3.4.16](https://github.com/vuejs/core/compare/v3.4.15...v3.4.16) (2024-02-08)
 
 
 ### Bug Fixes
 
-* **compiler-core:** treat floating point numbers as constants ([8dc8cf8](https://github.com/vuejs/core/commit/8dc8cf852bf8057aa5c4b5670f09e8c28a168b73)), closes [#8295](https://github.com/vuejs/core/issues/8295)
-* **compiler-dom:** do not throw in production on side effect tags ([c454b9d](https://github.com/vuejs/core/commit/c454b9d7f431d57abedb7184d1e4059914c4463f)), closes [#8287](https://github.com/vuejs/core/issues/8287) [#8292](https://github.com/vuejs/core/issues/8292)
-* **compiler-sfc:** fix regression on props destructure when transform is not enabled ([f25bd37](https://github.com/vuejs/core/commit/f25bd37c6707fde19d164d90a38de41168941f4b)), closes [#8289](https://github.com/vuejs/core/issues/8289)
-* **compiler-sfc:** handle prop keys that need escaping ([#7803](https://github.com/vuejs/core/issues/7803)) ([690ef29](https://github.com/vuejs/core/commit/690ef296357c7fc09f66ba9408df548e117f686f)), closes [#8291](https://github.com/vuejs/core/issues/8291)
-* **compiler-sfc:** properly parse d.ts files when resolving types ([aa1e77d](https://github.com/vuejs/core/commit/aa1e77d532b951ea5d3a5e26214a8b0c9c02fb6f)), closes [#8285](https://github.com/vuejs/core/issues/8285)
-* **compiler-sfc:** raise specific warning for failed extends and allow ignoring extends ([8235072](https://github.com/vuejs/core/commit/82350721a408e1f552c613c05971439d6c218d87)), closes [#8286](https://github.com/vuejs/core/issues/8286)
+* **compiler-core:** handle same-name shorthand edge case for in-DOM templates ([cb87b62](https://github.com/vuejs/core/commit/cb87b6213d7b003fa7280712c285c7c9d9f291ca)), closes [#10280](https://github.com/vuejs/core/issues/10280)
+* **compiler-core:** support v-bind shorthand syntax for dynamic slot name ([#10218](https://github.com/vuejs/core/issues/10218)) ([91f058a](https://github.com/vuejs/core/commit/91f058a90cd603492649633d153b120977c4df6b)), closes [#10213](https://github.com/vuejs/core/issues/10213)
+* **deps:** update compiler ([#10269](https://github.com/vuejs/core/issues/10269)) ([336bb65](https://github.com/vuejs/core/commit/336bb65820243006efdf990e6ea3610696467508))
+* **hydration:** fix SFC style v-bind hydration mismatch warnings ([#10250](https://github.com/vuejs/core/issues/10250)) ([f0b5f7e](https://github.com/vuejs/core/commit/f0b5f7ed8ddf74f9f5ba47cb65e8300370875291)), closes [#10215](https://github.com/vuejs/core/issues/10215)
+* **reactivity:** avoid infinite recursion from side effects in computed getter ([#10232](https://github.com/vuejs/core/issues/10232)) ([0bced13](https://github.com/vuejs/core/commit/0bced13ee5c53a02d5f10e5db76fe38b6e131440)), closes [#10214](https://github.com/vuejs/core/issues/10214)
+* **reactivity:** handle `MaybeDirty` recurse ([#10187](https://github.com/vuejs/core/issues/10187)) ([6c7e0bd](https://github.com/vuejs/core/commit/6c7e0bd88f021b0b6365370e97b0c7e243d7d70b)), closes [#10185](https://github.com/vuejs/core/issues/10185)
+* **reactivity:** skip non-extensible objects when using `markRaw` ([#10289](https://github.com/vuejs/core/issues/10289)) ([2312184](https://github.com/vuejs/core/commit/2312184bc335e0d32aa4c0c0b49190b6334849b4)), closes [#10288](https://github.com/vuejs/core/issues/10288)
+* **runtime-core:** avoid inlining isShallow ([#10238](https://github.com/vuejs/core/issues/10238)) ([53eee72](https://github.com/vuejs/core/commit/53eee72c3a96420db35236b5e8e4d9308a56e1b4))
+* **runtime-core:** support for nested calls to runWithContext ([#10261](https://github.com/vuejs/core/issues/10261)) ([75e02b5](https://github.com/vuejs/core/commit/75e02b5099a08166bdf407127916734c48209ee9)), closes [#10260](https://github.com/vuejs/core/issues/10260)
+* **runtime-dom:** ensure v-show respects display value set via v-bind ([#10161](https://github.com/vuejs/core/issues/10161)) ([9b19f09](https://github.com/vuejs/core/commit/9b19f0912104bfccb10c8cf5beab02b21a648935)), closes [#10151](https://github.com/vuejs/core/issues/10151)
+* **runtime-dom:** fix option selected update failed ([#10200](https://github.com/vuejs/core/issues/10200)) ([f31d782](https://github.com/vuejs/core/commit/f31d782e4668050a188ac0f11ba8d5b861b913ca)), closes [#10194](https://github.com/vuejs/core/issues/10194) [#10267](https://github.com/vuejs/core/issues/10267)
+
+
+### Reverts
+
+* perf(templateRef): avoid double render when using template ref on v-for ([eb1b911](https://github.com/vuejs/core/commit/eb1b9116d7cd4a5747e8dadcdc5ba921df011f64)), closes [#9908](https://github.com/vuejs/core/issues/9908) [#10210](https://github.com/vuejs/core/issues/10210) [#10234](https://github.com/vuejs/core/issues/10234)
 
 
 
-## [3.3.1](https://github.com/vuejs/core/compare/v3.3.0...v3.3.1) (2023-05-11)
+## [3.4.15](https://github.com/vuejs/core/compare/v3.4.14...v3.4.15) (2024-01-18)
 
 
 ### Bug Fixes
 
-* **suspense:** handle nested sync suspense for hydration ([a3f5485](https://github.com/vuejs/core/commit/a3f54857858c8ca0e6b9f12618d151ab255fb040))
+* **compiler-sfc:** fix type resolution for symlinked node_modules structure w/ pnpm ([75e866b](https://github.com/vuejs/core/commit/75e866bd4ef368b4e037a4933dbaf188920dc683)), closes [#10121](https://github.com/vuejs/core/issues/10121)
+* correct url for production error reference links ([c3087ff](https://github.com/vuejs/core/commit/c3087ff2cce7d96c60a870f8233441311ab4dfb4))
+* **hydration:** fix incorect mismatch warning for option with non-string value and inner text ([d16a213](https://github.com/vuejs/core/commit/d16a2138a33b106b9e1499bbb9e1c67790370c97))
+* **reactivity:** re-fix [#10114](https://github.com/vuejs/core/issues/10114) ([#10123](https://github.com/vuejs/core/issues/10123)) ([c2b274a](https://github.com/vuejs/core/commit/c2b274a887f61deb7e0185d1bef3b77d31e991cc))
+* **runtime-core:** should not warn out-of-render slot fn usage when mounting another app in setup ([#10125](https://github.com/vuejs/core/issues/10125)) ([6fa33e6](https://github.com/vuejs/core/commit/6fa33e67ec42af140a86fbdb86939032c3a1f345)), closes [#10124](https://github.com/vuejs/core/issues/10124)
 
 
+### Performance Improvements
+
+* **templateRef:** avoid double render when using template ref on v-for ([de4d2e2](https://github.com/vuejs/core/commit/de4d2e2143ea8397cebeb1c7a57a60007b283c9f)), closes [#9908](https://github.com/vuejs/core/issues/9908)
+* **v-model:** optimize v-model multiple select w/ large lists ([2ffb956](https://github.com/vuejs/core/commit/2ffb956efe692da059f4895669084c5278871351)), closes [#10014](https://github.com/vuejs/core/issues/10014)
 
-# [3.3.0 Rurouni Kenshin](https://github.com/vuejs/core/compare/v3.3.0-beta.5...v3.3.0) (2023-05-11)
 
-- For a detailed walkthrough of the new features in 3.3, please read the [release blog post](https://blog.vuejs.org/posts/vue-3-3).
 
-- Features and deprecations listed here are aggregated from the beta and alpha releases. For full chronological history, bug fixes, and other minor features, please consult the individual logs of the 3.3 beta and alpha releases.
+## [3.4.14](https://github.com/vuejs/core/compare/v3.4.13...v3.4.14) (2024-01-15)
 
-## Features
 
-* **sfc:** support imported types in SFC macros ([#8083](https://github.com/vuejs/core/pull/8083))
-* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
-* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
-* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
-* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
-* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
-* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
-* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
-* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
-* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
-* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
-* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
-* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
-* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
-* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
-* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+### Bug Fixes
+
+* **compiler-sfc:** enable prefixIdentifiers by default when reparsing on consumed AST ([#10105](https://github.com/vuejs/core/issues/10105)) ([48bf8e4](https://github.com/vuejs/core/commit/48bf8e4c708ec620e4852d71c8713394457108ee))
+* **deps:** update dependency postcss to ^8.4.33 ([#10110](https://github.com/vuejs/core/issues/10110)) ([a557006](https://github.com/vuejs/core/commit/a557006f8e7f110c6f322de38931dceaab8e9cbb))
+* **reactivity:** fix regression for computed with mutation ([#10119](https://github.com/vuejs/core/issues/10119)) ([20f62af](https://github.com/vuejs/core/commit/20f62afaafd422e42b99dde9c16f9a4ebfb9c5f7)), closes [#10114](https://github.com/vuejs/core/issues/10114)
 
-## Deprecations
 
-* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
-* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
-* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
 
-# [3.3.0-beta.5](https://github.com/vuejs/core/compare/v3.3.0-beta.4...v3.3.0-beta.5) (2023-05-08)
+## [3.4.13](https://github.com/vuejs/core/compare/v3.4.12...v3.4.13) (2024-01-13)
 
 
 ### Bug Fixes
 
-* **build:** retain defineComponent() treeshakability in Rollup ([c2172f3](https://github.com/vuejs/core/commit/c2172f3a0ebbd7153e209dd8df6d9724bc524d9a)), closes [#8236](https://github.com/vuejs/core/issues/8236)
-* **compiler-sfc:** enable props destructure when reactivity transform option is enabled ([862edfd](https://github.com/vuejs/core/commit/862edfd91a2c2f6b75f943cb1a9682c4be5d7fa8))
-* **compiler-sfc:** fix built-in type resolving in external files ([6b194bc](https://github.com/vuejs/core/commit/6b194bcf3b8143895c2a472cd87998ebf9856146)), closes [#8244](https://github.com/vuejs/core/issues/8244)
-* **compiler-sfc:** transform destructured props when reactivity transform option is enabled ([#8252](https://github.com/vuejs/core/issues/8252)) ([287bd99](https://github.com/vuejs/core/commit/287bd999942e58925377f50540c7134cff2a9279))
-* **runtime-core:** ensure defineComponent name in extraOptions takes higher priority ([b2be75b](https://github.com/vuejs/core/commit/b2be75bad4ba70da1da6930eb914e51ce2c630b2))
-* **runtime-dom:** check attribute value when setting option value ([#8246](https://github.com/vuejs/core/issues/8246)) ([4495373](https://github.com/vuejs/core/commit/4495373d28d9fa4479eedd224adb16248ae0b9f4)), closes [#8227](https://github.com/vuejs/core/issues/8227)
-* **suspense:** fix nested suspensible suspense with no asyn deps ([e147512](https://github.com/vuejs/core/commit/e1475129fc6f8c086c2ec667476900b8c8f46774)), closes [#8206](https://github.com/vuejs/core/issues/8206)
-* **types:** remove short syntax support in defineSlots() ([1279b17](https://github.com/vuejs/core/commit/1279b1730079f77692a0817d51bbba57eb2b871b))
+* **reactivity:** fix dirtyLevel checks for recursive effects ([#10101](https://github.com/vuejs/core/issues/10101)) ([e45a8d2](https://github.com/vuejs/core/commit/e45a8d24b46c174deb46ed952bdaf54c81ad5a85)), closes [#10082](https://github.com/vuejs/core/issues/10082)
 
 
 
-# [3.3.0-beta.4](https://github.com/vuejs/core/compare/v3.3.0-beta.3...v3.3.0-beta.4) (2023-05-05)
+## [3.4.12](https://github.com/vuejs/core/compare/v3.4.11...v3.4.12) (2024-01-13)
+
+
+### Reverts
+
+* fix(reactivity): correct dirty assign in render function ([#10091](https://github.com/vuejs/core/issues/10091)) ([8b18481](https://github.com/vuejs/core/commit/8b1848173b0bc8fd84ce1da1af8d373c044bf073)), closes [#10098](https://github.com/vuejs/core/issues/10098) [#10100](https://github.com/vuejs/core/issues/10100)
+
+
+
+## [3.4.11](https://github.com/vuejs/core/compare/v3.4.10...v3.4.11) (2024-01-12)
 
 
 ### Bug Fixes
 
-* **runtime-core:** handle template ref with number values ([#8233](https://github.com/vuejs/core/issues/8233)) ([1b1242f](https://github.com/vuejs/core/commit/1b1242f4d1349e361335b2815f41742d41283a94)), closes [#8230](https://github.com/vuejs/core/issues/8230)
-* **types:** retain compatibility for provide() usage with explicit type parameter ([038cd83](https://github.com/vuejs/core/commit/038cd830d5b34b47d7e7e1c61f0973d27cd8b915))
+* **hydration:** improve mismatch when client value is null or undefined ([#10086](https://github.com/vuejs/core/issues/10086)) ([08b60f5](https://github.com/vuejs/core/commit/08b60f5d0d5b57fcf3347ef66cbeab472c475a88))
+* **reactivity:** correct dirty assign in render function ([#10091](https://github.com/vuejs/core/issues/10091)) ([8d04205](https://github.com/vuejs/core/commit/8d042050411fdf04d9d1d6c153287164b12e0255)), closes [#10082](https://github.com/vuejs/core/issues/10082)
+* **runtime-core:** filter single root for nested DEV_ROOT_FRAGMENT ([#8593](https://github.com/vuejs/core/issues/8593)) ([d35b877](https://github.com/vuejs/core/commit/d35b87725ab3e2bdc86fb5781ab34939f7ec1029)), closes [#5203](https://github.com/vuejs/core/issues/5203) [#8581](https://github.com/vuejs/core/issues/8581) [#10087](https://github.com/vuejs/core/issues/10087)
 
 
-### Features
 
-* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
-* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
-* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
+## [3.4.10](https://github.com/vuejs/core/compare/v3.4.9...v3.4.10) (2024-01-11)
 
 
+### Bug Fixes
+
+* **hydration:** should not warn on falsy bindings of non-property keys ([3907c87](https://github.com/vuejs/core/commit/3907c87ce23cc6ef4a739b5a66ddb553e8723114))
 
-# [3.3.0-beta.3](https://github.com/vuejs/core/compare/v3.3.0-beta.2...v3.3.0-beta.3) (2023-05-01)
+
+
+## [3.4.9](https://github.com/vuejs/core/compare/v3.4.8...v3.4.9) (2024-01-11)
 
 
 ### Bug Fixes
 
-* **compiler-core:** handle slot argument parsing edge case ([b434d12](https://github.com/vuejs/core/commit/b434d12bf6cbd49a7c99b1646d9517d8393ea49f))
-* **hmr:** keep slots proxy mutable for hmr ([c117d9c](https://github.com/vuejs/core/commit/c117d9c257820481b85304db26ce5c77af5d050c)), closes [#8188](https://github.com/vuejs/core/issues/8188)
-* **types:** fix provide type checking for ref value ([de87e6e](https://github.com/vuejs/core/commit/de87e6e405dfaf9a917d7eb423fcee35237c2020)), closes [#8201](https://github.com/vuejs/core/issues/8201)
+* **build:** avoid accessing __FEATURE_PROD_DEVTOOLS__ flag in root scope ([dfd9654](https://github.com/vuejs/core/commit/dfd9654665890d1bc7129f6e3c2faaa5b1f28f72))
+* **hydration:** do not warn against bindings w/ object values ([dcc68ef](https://github.com/vuejs/core/commit/dcc68ef7d48973abd8dd3178b46e50e3b0785ea4))
+* **runtime-dom:** unify behavior for v-show + style display binding ([#10075](https://github.com/vuejs/core/issues/10075)) ([cd419ae](https://github.com/vuejs/core/commit/cd419aec3cb615eaea8b2324356f38f4c0ff1fcc)), closes [#10074](https://github.com/vuejs/core/issues/10074)
+* **suspense:** avoid double-patching nested suspense when parent suspense is not resolved ([#10055](https://github.com/vuejs/core/issues/10055)) ([bcda96b](https://github.com/vuejs/core/commit/bcda96b525801eb7a1d397300fb3f2f9b827ddfb)), closes [#8678](https://github.com/vuejs/core/issues/8678)
 
 
-### Features
 
-* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+## [3.4.8](https://github.com/vuejs/core/compare/v3.4.7...v3.4.8) (2024-01-10)
 
 
+### Bug Fixes
+
+* **hydration:** fix class and style hydration mismatch message ([5af3987](https://github.com/vuejs/core/commit/5af398729168481c3bee741b4f36fa4f375e0f4a)), closes [#10067](https://github.com/vuejs/core/issues/10067)
+* **hydration:** improve attr hydration mismatch check for boolean attrs ([972face](https://github.com/vuejs/core/commit/972facee0d892a1b6d9d4ad1da5da9306ed45c3f)), closes [#10057](https://github.com/vuejs/core/issues/10057) [#10060](https://github.com/vuejs/core/issues/10060)
+* **suspense:** fix more suspense patch before resolve edge cases ([70ad4ca](https://github.com/vuejs/core/commit/70ad4caad7d19938f8ccf1ede3228a81254dd4bf)), closes [#10017](https://github.com/vuejs/core/issues/10017)
 
-# [3.3.0-beta.2](https://github.com/vuejs/core/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-04-25)
+
+
+## [3.4.7](https://github.com/vuejs/core/compare/v3.4.6...v3.4.7) (2024-01-09)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** avoid all hard errors when inferring runtime type ([2d9f6f9](https://github.com/vuejs/core/commit/2d9f6f926453c46f542789927bcd30d15da9c24b))
-* **compiler-sfc:** normalize windows paths when resolving types ([#8136](https://github.com/vuejs/core/issues/8136)) ([29da504](https://github.com/vuejs/core/commit/29da50468770fcee16ba5d5bec7166dd5bc120ee))
-* **compiler-sfc:** props bindings should not override user declared bindings ([433a58c](https://github.com/vuejs/core/commit/433a58ccb61c25512dcc3df155b8e285256917ef)), closes [#8148](https://github.com/vuejs/core/issues/8148)
+* **parser:** skip compat mode check for SFC root `<template>` tags ([#10034](https://github.com/vuejs/core/issues/10034)) ([923d560](https://github.com/vuejs/core/commit/923d560d0b6713144671809b6dfeb1e2da503b1f))
+* **types:** fix functional component for `h` ([#9991](https://github.com/vuejs/core/issues/9991)) ([438a74a](https://github.com/vuejs/core/commit/438a74aad840183286fbdb488178510f37218a73))
 
 
-### Features
+### Reverts
 
-* **compiler-sfc:** support project references when resolving types ([1c0be5c](https://github.com/vuejs/core/commit/1c0be5c7444966fa444460e87633cf44ec60292a)), closes [#8140](https://github.com/vuejs/core/issues/8140)
+* "dx(computed): warn incorrect use of getCurrentInstance inside computed" ([2fd3905](https://github.com/vuejs/core/commit/2fd39057386644c8bfee426c60a51f2b07a79b09))
 
 
-### Performance Improvements
 
-* **compiler-sfc:** infer ref binding type for more built-in methods ([a370e80](https://github.com/vuejs/core/commit/a370e8006a70ea49a7d04c8c1a42d0947eba5dea))
+## [3.4.6](https://github.com/vuejs/core/compare/v3.4.5...v3.4.6) (2024-01-08)
 
 
+### Bug Fixes
 
-# [3.3.0-beta.1](https://github.com/vuejs/core/compare/v3.3.0-alpha.13...v3.3.0-beta.1) (2023-04-21)
+* **build:** revert "build: add production/development export conditions ([#9977](https://github.com/vuejs/core/issues/9977))" ([7bd4e90](https://github.com/vuejs/core/commit/7bd4e90506547c42234165776b01793abd37b148)), closes [#10012](https://github.com/vuejs/core/issues/10012) [#10020](https://github.com/vuejs/core/issues/10020)
+* fix post watcher fire timing on nested app mounts ([3c3561e](https://github.com/vuejs/core/commit/3c3561e7203091f49d57f1da6d822c91e462bc46)), closes [#10005](https://github.com/vuejs/core/issues/10005)
+* **hydration:** avoid hydration mismatch warning for styles with different order ([#10011](https://github.com/vuejs/core/issues/10011)) ([2701355](https://github.com/vuejs/core/commit/2701355e8eb07ab664e398d9fc05d6c4e2e9b20e)), closes [#10000](https://github.com/vuejs/core/issues/10000) [#10006](https://github.com/vuejs/core/issues/10006)
+* **runtime-core:** handle fragment with null children ([#10010](https://github.com/vuejs/core/issues/10010)) ([3bf34b7](https://github.com/vuejs/core/commit/3bf34b767e4dd3cf6a974301ecf0363ae4dda4ec)), closes [#10007](https://github.com/vuejs/core/issues/10007)
+* **scheduler:** sort nested postFlushCbs ([d9162df](https://github.com/vuejs/core/commit/d9162dfc2ee0c3a369fb9bf32ff413e74761bee6)), closes [#10003](https://github.com/vuejs/core/issues/10003)
+* **suspense:** fix anchor for suspense with transition out-in ([#9999](https://github.com/vuejs/core/issues/9999)) ([a3fbf21](https://github.com/vuejs/core/commit/a3fbf2132b0cd3655e969e290548c8fabc08fd33)), closes [#9996](https://github.com/vuejs/core/issues/9996)
+* **types:** allow `null` type for textarea value ([#9997](https://github.com/vuejs/core/issues/9997)) ([c379bc2](https://github.com/vuejs/core/commit/c379bc29efc70d6ac5840de10c357ee3dad998c0)), closes [#9904](https://github.com/vuejs/core/issues/9904)
 
 
-### Features
 
-* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
-* **compiler-sfc:** improve utility type Partial and Required ([#8103](https://github.com/vuejs/core/issues/8103)) ([1d1d728](https://github.com/vuejs/core/commit/1d1d72894995fde14bd09e2990462c19d5176bf9))
-* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
-* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
-* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
-* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
+## [3.4.5](https://github.com/vuejs/core/compare/v3.4.4...v3.4.5) (2024-01-04)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** fix co-usage of defineModel transform options and props destructure ([b20350d](https://github.com/vuejs/core/commit/b20350ded562d27e5901f308d0bc13344f840c4a)), closes [#9972](https://github.com/vuejs/core/issues/9972)
+* **compiler-sfc:** fix sfc template unref rewrite for class instantiation ([ae60a91](https://github.com/vuejs/core/commit/ae60a91cc23424493071ad9088782763eb1e8ff7)), closes [#6483](https://github.com/vuejs/core/issues/6483) [#6491](https://github.com/vuejs/core/issues/6491)
+* **compiler-ssr:** fix node clone edge case caused by AST reuse ([#9983](https://github.com/vuejs/core/issues/9983)) ([7dbdb3e](https://github.com/vuejs/core/commit/7dbdb3edf0ab648965331ca42f069387c97a1c8a)), closes [#9981](https://github.com/vuejs/core/issues/9981)
+* **watch:** cleanup watcher effect from scope when manually stopped ([#9978](https://github.com/vuejs/core/issues/9978)) ([d2d8955](https://github.com/vuejs/core/commit/d2d89551bb06dc05cb7ae0496b8f345ae0de78ed))
 
 
 
-# [3.3.0-alpha.13](https://github.com/vuejs/core/compare/v3.3.0-alpha.12...v3.3.0-alpha.13) (2023-04-20)
+## [3.4.4](https://github.com/vuejs/core/compare/v3.4.3...v3.4.4) (2024-01-03)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** handle type merging + fix namespace access when inferring type ([d53e157](https://github.com/vuejs/core/commit/d53e157805678db7a3b9ca2fccc74530e1dfbc48)), closes [#8102](https://github.com/vuejs/core/issues/8102)
-* **compiler-sfc:** normalize filename when invalidating cache ([9b5a34b](https://github.com/vuejs/core/commit/9b5a34bf8c0d1b4c6ec3cf1434076b7e25065f84))
-* **hmr:** always traverse static children in dev ([f17a82c](https://github.com/vuejs/core/commit/f17a82c769cfb60ee6785ef5d34d91191d153542)), closes [#7921](https://github.com/vuejs/core/issues/7921) [#8100](https://github.com/vuejs/core/issues/8100)
-* **hmr:** force update cached slots during HMR ([94fa67a](https://github.com/vuejs/core/commit/94fa67a4f73b3646c8c1e29512a71b17bd56efc3)), closes [#7155](https://github.com/vuejs/core/issues/7155) [#7158](https://github.com/vuejs/core/issues/7158)
+* **compiler-sfc:** fix scss source map regression ([71d3121](https://github.com/vuejs/core/commit/71d3121b72c449351e718ee1539bdfa35b68bb32)), closes [#9970](https://github.com/vuejs/core/issues/9970) [#9969](https://github.com/vuejs/core/issues/9969)
+* **compiler-sfc:** use compilerOptions when re-parsing consumed AST ([d94d8d4](https://github.com/vuejs/core/commit/d94d8d4bffd1daf171a655b292745ffc3e63052d))
+* **defineModel:** support kebab-case/camelCase mismatches ([#9950](https://github.com/vuejs/core/issues/9950)) ([10ccb9b](https://github.com/vuejs/core/commit/10ccb9bfa0f5f3016207fc32b9611bab98e6f090))
+* **runtime-core:** correctly assign suspenseId to avoid conflicts with the default id ([#9966](https://github.com/vuejs/core/issues/9966)) ([0648804](https://github.com/vuejs/core/commit/06488047c184dae3070d0008379716690edceb46)), closes [#9944](https://github.com/vuejs/core/issues/9944)
+* **ssr:** avoid rendering transition-group slot content as a fragment ([#9961](https://github.com/vuejs/core/issues/9961)) ([0160264](https://github.com/vuejs/core/commit/0160264d677478ee928e8e851f39a9e94f97e337)), closes [#9933](https://github.com/vuejs/core/issues/9933)
+* **watch:** remove instance unmounted short circuit in getter of `watchEffect` ([#9948](https://github.com/vuejs/core/issues/9948)) ([f300a40](https://github.com/vuejs/core/commit/f300a4001ec40cadef2520267eb5841ab48cf005))
+* **watch:** revert watch behavior when watching shallow reactive objects ([a9f781a](https://github.com/vuejs/core/commit/a9f781a92cbc7de7b25c9e3d5b1295ca99eb6d86)), closes [#9965](https://github.com/vuejs/core/issues/9965)
 
 
-### Features
+### Performance Improvements
 
-* **compiler-sfc:** support dynamic imports when resolving types ([4496456](https://github.com/vuejs/core/commit/4496456d7d9947560ef1e35ccb176b97a27bd8f4))
-* **compiler-sfc:** support export * when resolving types ([7c3ca3c](https://github.com/vuejs/core/commit/7c3ca3cc3e122fe273e80a950c57d492a7f0bf4a))
-* **compiler-sfc:** support ExtractPropTypes when resolving types ([50c0bbe](https://github.com/vuejs/core/commit/50c0bbe5221dbc1dc353d4960e69ec7c8ba12905)), closes [#8104](https://github.com/vuejs/core/issues/8104)
-* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
+* **watch:** avoid double traverse for reactive source ([24d77c2](https://github.com/vuejs/core/commit/24d77c25ce5d5356adb5367beef1d23e6e340b35))
 
 
 
-# [3.3.0-alpha.12](https://github.com/vuejs/core/compare/v3.3.0-alpha.11...v3.3.0-alpha.12) (2023-04-18)
+## [3.4.3](https://github.com/vuejs/core/compare/v3.4.2...v3.4.3) (2023-12-30)
 
 
 ### Bug Fixes
 
-* **compiler:** fix expression codegen for literal const bindings in non-inline mode ([0f77a2b](https://github.com/vuejs/core/commit/0f77a2b1d1047d66ccdfda70382d1a223886130c))
+* **compiler-sfc:** respect sfc parse options in cache key ([b8d58ec](https://github.com/vuejs/core/commit/b8d58ec4f42cbeb9443bf06138add46158db9af0))
 
 
 
-# [3.3.0-alpha.11](https://github.com/vuejs/core/compare/v3.3.0-alpha.10...v3.3.0-alpha.11) (2023-04-17)
+## [3.4.2](https://github.com/vuejs/core/compare/v3.4.1...v3.4.2) (2023-12-30)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** normalize windows paths when resolving types ([271df09](https://github.com/vuejs/core/commit/271df09470c61d073185ba6cf3cf50358713c500))
+* **compiler-sfc:** fix dev regression for dot / namespace component usage ([dce99c1](https://github.com/vuejs/core/commit/dce99c12df981ca45a4d848c37ba8b16496025f0)), closes [#9947](https://github.com/vuejs/core/issues/9947)
+* **runtime-core:** support deep: false when watch reactive ([#9928](https://github.com/vuejs/core/issues/9928)) ([4f703d1](https://github.com/vuejs/core/commit/4f703d120d76d711084346f73ea295c73e6ef6b6)), closes [#9916](https://github.com/vuejs/core/issues/9916)
+* **ssr:** fix hydration error for slot outlet inside transition-group ([#9937](https://github.com/vuejs/core/issues/9937)) ([6cb00ed](https://github.com/vuejs/core/commit/6cb00ed0f9b64428ec18fada0f68467d6a813fde)), closes [#9933](https://github.com/vuejs/core/issues/9933)
 
 
 
-# [3.3.0-alpha.10](https://github.com/vuejs/core/compare/v3.3.0-alpha.9...v3.3.0-alpha.10) (2023-04-17)
+## [3.4.1](https://github.com/vuejs/core/compare/v3.4.0...v3.4.1) (2023-12-30)
 
 
 ### Bug Fixes
 
-* **hmr:** invalidate cached props/emits options on hmr ([4b5b384](https://github.com/vuejs/core/commit/4b5b384485cf8f6124f6738b89e3d047358f3a11))
-* **runtime-core:** properly merge props and emits options from mixins ([#8052](https://github.com/vuejs/core/issues/8052)) ([c94ef02](https://github.com/vuejs/core/commit/c94ef02421d7422bc59d10cf2eee9f4e7dcea6c8)), closes [#7989](https://github.com/vuejs/core/issues/7989)
+* **compat:** correct enum value for COMPILER_FILTERS feature ([#9875](https://github.com/vuejs/core/issues/9875)) ([77d33e2](https://github.com/vuejs/core/commit/77d33e263cf19983caf4e5c53a0eb0bee374843c))
+* **defineModel:** always default modifiers to empty object ([9bc3c7e](https://github.com/vuejs/core/commit/9bc3c7e29cf15f5ca96703542d10cfd786a3fc55)), closes [#9945](https://github.com/vuejs/core/issues/9945)
+* **defineModel:** support local mutation when only prop but no listener is passed ([97ce041](https://github.com/vuejs/core/commit/97ce041910b6ca4bef10f939493d6b5a06ea5b07))
+* **types:** fix defineModel watch type error ([#9942](https://github.com/vuejs/core/issues/9942)) ([4af8583](https://github.com/vuejs/core/commit/4af85835f7e593a7dffa7dc7e99f14877eb70fd1)), closes [#9939](https://github.com/vuejs/core/issues/9939)
 
 
 ### Features
 
-* **compiler-sfc:** expose type import deps on compiled script block ([8d8ddd6](https://github.com/vuejs/core/commit/8d8ddd686c832b2ea29b87ef47666b13c4ad5d4c))
-* **compiler-sfc:** expose type resolve APIs ([f22e32e](https://github.com/vuejs/core/commit/f22e32e365bf6292cb606cb7289609e82da8b790))
-* **compiler-sfc:** mark props destructure as experimental and require explicit opt-in ([6b13e04](https://github.com/vuejs/core/commit/6b13e04b4c83fcdbb180dc1d59f536a1309c2960))
-* **compiler-sfc:** support intersection and union types in macros ([d1f973b](https://github.com/vuejs/core/commit/d1f973bff82581fb335d6fc05623d1ad3d84fb7c)), closes [#7553](https://github.com/vuejs/core/issues/7553)
-* **compiler-sfc:** support limited built-in utility types in macros ([1cfab4c](https://github.com/vuejs/core/commit/1cfab4c695b0c28f549f8c97faee5099581792a7))
-* **compiler-sfc:** support mapped types, string types & template type in macros ([fb8ecc8](https://github.com/vuejs/core/commit/fb8ecc803e58bfef0971346c63fefc529812daa7))
-* **compiler-sfc:** support namespace members type in macros ([5ff40bb](https://github.com/vuejs/core/commit/5ff40bb0dc2918b7db15fe9f49db2a135a925572))
-* **compiler-sfc:** support relative imported types in macros ([8aa4ea8](https://github.com/vuejs/core/commit/8aa4ea81d6e4d3110aa1619cca594543da4c9b63))
-* **compiler-sfc:** support resolving type imports from modules ([3982bef](https://github.com/vuejs/core/commit/3982bef533b451d1b59fa243560184a13fe8c18c))
-* **compiler-sfc:** support specifying global types for sfc macros ([4e028b9](https://github.com/vuejs/core/commit/4e028b966991937c83fb2529973fd3d41080bb61)), closes [/github.com/vuejs/core/pull/8083#issuecomment-1508468713](https://github.com//github.com/vuejs/core/pull/8083/issues/issuecomment-1508468713)
-* **compiler-sfc:** support string indexed type in macros ([3f779dd](https://github.com/vuejs/core/commit/3f779ddbf85054c8915fa4537f8a79baab392d5c))
-* **compiler-sfc:** support string/number indexed types in macros ([760755f](https://github.com/vuejs/core/commit/760755f4f83680bee13ad546cdab2e48ade38dff))
+* **compiler-sfc:** support passing template parsing options when parsing sfc ([6fab855](https://github.com/vuejs/core/commit/6fab8551e4aeef4610987640de8b435b1ae321bb)) (necessary to fix https://github.com/vitejs/vite-plugin-vue/issues/322)
+
+
+
+# [3.4.0 Slam Dunk](https://github.com/vuejs/core/compare/v3.4.0-rc.3...v3.4.0) (2023-12-29)
+
+> Read [this blog post](https://blog.vuejs.org/posts/vue-3-4) for an overview of the release highlights.
+
+### Potential Actions Needed
+
+1. To fully leverage new features in 3.4, it is recommended to also update the following dependencies when upgrading to 3.4:
+
+   - Volar / vue-tsc@^1.8.27 (**required**)
+   - @vitejs/plugin-vue@^5.0.0 (if using Vite)
+   - nuxt@^3.9.0 (if using Nuxt)
+   - vue-loader@^17.4.0 (if using webpack or vue-cli)
+
+2. If using TSX with Vue, check actions needed in [Removed: Global JSX Namespace](https://blog.vuejs.org/posts/vue-3-4#global-jsx-namespace).
+
+3. Make sure you are no longer using any deprecated features (if you are, you should have warnings in the console telling you so). They may have been [removed in 3.4](https://blog.vuejs.org/posts/vue-3-4#other-removed-features).
+
+### Features
+
+* **general:** MathML support ([#7836](https://github.com/vuejs/core/issues/7836)) ([d42b6ba](https://github.com/vuejs/core/commit/d42b6ba3f530746eb1221eb7a4be0f44eb56f7d3)), closes [#7820](https://github.com/vuejs/core/issues/7820)
+* **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)
+* **reactivity:** expose last result for computed getter ([#9497](https://github.com/vuejs/core/issues/9497)) ([48b47a1](https://github.com/vuejs/core/commit/48b47a1ab63577e2dbd91947eea544e3ef185b85))
+* **runtime-core / dx:** link errors to docs in prod build ([#9165](https://github.com/vuejs/core/issues/9165)) ([9f8ba98](https://github.com/vuejs/core/commit/9f8ba9821fe166f77e63fa940e9e7e13ec3344fa))
+* **runtime-core:** add `once` option to watch ([#9034](https://github.com/vuejs/core/issues/9034)) ([a645e7a](https://github.com/vuejs/core/commit/a645e7aa51006516ba668b3a4365d296eb92ee7d))
+* **runtime-core:** provide full props to props validator functions ([#3258](https://github.com/vuejs/core/issues/3258)) ([8e27692](https://github.com/vuejs/core/commit/8e27692029a4645cd54287f776c0420f2b82740b))
+* **compiler-core:** export error message ([#8729](https://github.com/vuejs/core/issues/8729)) ([f7e80ee](https://github.com/vuejs/core/commit/f7e80ee4a065a9eaba98720abf415d9e87756cbd))
+* **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-core:** improve parsing tolerance for language-tools ([41ff68e](https://github.com/vuejs/core/commit/41ff68ea579d933333392146625560359acb728a))
+* **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-core:** lift vnode hooks deprecation warning to error ([8abc754](https://github.com/vuejs/core/commit/8abc754d5d86d9dfd5a7927b846f1a743f352364))
+* **compiler-core:** export runtime error strings ([#9301](https://github.com/vuejs/core/issues/9301)) ([feb2f2e](https://github.com/vuejs/core/commit/feb2f2edce2d91218a5e9a52c81e322e4033296b))
+* **compiler-core:** add current filename to TransformContext ([#8950](https://github.com/vuejs/core/issues/8950)) ([638f1ab](https://github.com/vuejs/core/commit/638f1abbb632000553e2b7d75e87c95d8ca192d6))
+* **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:** expose resolve type-based props and emits ([#8874](https://github.com/vuejs/core/issues/8874)) ([9e77580](https://github.com/vuejs/core/commit/9e77580c0c2f0d977bd0031a1d43cc334769d433))
+* **compiler-sfc:** bump postcss-modules to v6 ([2a507e3](https://github.com/vuejs/core/commit/2a507e32f0e2ef73813705a568b8633f68bda7a9))
+* **compiler-sfc:** promote defineModel stable ([#9598](https://github.com/vuejs/core/issues/9598)) ([ef688ba](https://github.com/vuejs/core/commit/ef688ba92bfccbc8b7ea3997eb297665d13e5249))
+* **compiler-sfc:** support import attributes and `using` syntax ([#8786](https://github.com/vuejs/core/issues/8786)) ([5b2bd1d](https://github.com/vuejs/core/commit/5b2bd1df78e8ff524c3a184adaa284681aba6574))
+* **compiler-sfc:** `defineModel` support local mutation by default, remove local option ([f74785b](https://github.com/vuejs/core/commit/f74785bc4ad351102dde17fdfd2c7276b823111f)), closes [/github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278](https://github.com//github.com/vuejs/rfcs/discussions/503/issues/discussioncomment-7566278)
+* **ssr:** add `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` feature flag ([#9550](https://github.com/vuejs/core/issues/9550)) ([bc7698d](https://github.com/vuejs/core/commit/bc7698dbfed9b5327a93565f9df336ae5a94d605))
+* **ssr:** improve ssr hydration mismatch checks ([#5953](https://github.com/vuejs/core/issues/5953)) ([2ffc1e8](https://github.com/vuejs/core/commit/2ffc1e8cfdc6ec9c45c4a4dd8e3081b2aa138f1e)), closes [#5063](https://github.com/vuejs/core/issues/5063)
+* **types:** 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)
+* **types:** add emits and slots type to `FunctionalComponent` ([#8644](https://github.com/vuejs/core/issues/8644)) ([927ab17](https://github.com/vuejs/core/commit/927ab17cfc645e82d061fdf227c34689491268e1))
+* **types:** export `AriaAttributes` type ([#8909](https://github.com/vuejs/core/issues/8909)) ([fd0b6ba](https://github.com/vuejs/core/commit/fd0b6ba01660499fa07b0cf360eefaac8cca8287))
+* **types:** export `ObjectPlugin` and `FunctionPlugin` types ([#8946](https://github.com/vuejs/core/issues/8946)) ([fa4969e](https://github.com/vuejs/core/commit/fa4969e7a3aefa6863203f9294fc5e769ddf6d8f)), closes [#8577](https://github.com/vuejs/core/issues/8577)
+* **types:** expose `DefineProps` type ([096ba81](https://github.com/vuejs/core/commit/096ba81817b7da15f61bc55fc1a93f72ac9586e0))
+* **types:** expose `PublicProps` type ([#2403](https://github.com/vuejs/core/issues/2403)) ([44135dc](https://github.com/vuejs/core/commit/44135dc95fb8fea26b84d1433839d28b8c21f708))
+* **types:** improve event type inference when using `h` with native elements  ([#9756](https://github.com/vuejs/core/issues/9756)) ([a625376](https://github.com/vuejs/core/commit/a625376ac8901eea81bf3c66cb531f2157f073ef))
+* **types:** provide `ComponentInstance` type ([#5408](https://github.com/vuejs/core/issues/5408)) ([bfb8565](https://github.com/vuejs/core/commit/bfb856565d3105db4b18991ae9e404e7cc989b25))
+* **types:** support passing generics when registering global directives ([#9660](https://github.com/vuejs/core/issues/9660)) ([a41409e](https://github.com/vuejs/core/commit/a41409ed02a8c7220e637f56caf6813edeb077f8))
 
 
 ### Performance Improvements
 
-* **compiler:** use source-map-js ([19e17a9](https://github.com/vuejs/core/commit/19e17a951c3387cbd6a1597e6cd9048a4aad4528))
+* **compiler-sfc:** avoid sfc source map unnecessary serialization and parsing ([f15d2f6](https://github.com/vuejs/core/commit/f15d2f6cf69c0c39f8dfb5c33122790c68bf92e2))
+* **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))
+* **compiler-core:** optimize away isBuiltInType ([66c0ed0](https://github.com/vuejs/core/commit/66c0ed0a3c1c6f37dafc6b1c52b75c6bf60e3136))
+* **compiler-core:** optimize position cloning ([2073236](https://github.com/vuejs/core/commit/20732366b9b3530d33b842cf1fc985919afb9317))
+* **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))
+* **shared:** optimize makeMap ([ae6fba9](https://github.com/vuejs/core/commit/ae6fba94954bac6430902f77b0d1113a98a75b18))
+
+
+### BREAKING CHANGES
+
+#### Global JSX Registration Removed
+
+Starting in 3.4, Vue no longer registers the global `JSX` namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
+
+If you are using TSX, there are two options:
+
+1. Explicitly set [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `'vue'` in `tsconfig.json` before upgrading to 3.4. You can also opt-in per file by adding a `/* @jsxImportSource vue */` comment at the top of the file.
 
+2. If you have code that depends on the presence of the global `JSX` namespace, e.g. usage of types like `JSX.Element` etc., you can retain the exact pre-3.4 global behavior by explicitly referencing `vue/jsx`, which registers the global `JSX` namespace.
 
+Note that this is a type-only breaking change in a minor release, which adheres to our [release policy](https://vuejs.org/about/releases.html#semantic-versioning-edge-cases).
 
-# [3.3.0-alpha.9](https://github.com/vuejs/core/compare/v3.3.0-alpha.8...v3.3.0-alpha.9) (2023-04-08)
+#### Deprecated Features Removed
+
+- [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) 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 [Vue Macros plugin](https://vue-macros.dev/features/reactivity-transform.html).
+- `app.config.unwrapInjectedRef` has been removed. It was deprecated and enabled by default in 3.3. In 3.4 it is no longer possible to disable this behavior.
+- `@vnodeXXX` event listeners in templates are now a compiler error instead of a deprecation warning. Use `@vue:XXX` listeners instead.
+- `v-is` directive has been removed. It was deprecated in 3.3. Use the [`is` attribute with `vue:` prefix](https://vuejs.org/api/built-in-special-attributes.html#is) instead.
+
+# [3.4.0-rc.3](https://github.com/vuejs/core/compare/v3.4.0-rc.2...v3.4.0-rc.3) (2023-12-27)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** accept `StringLiteral` node in `defineEmit` tuple syntax ([#8041](https://github.com/vuejs/core/issues/8041)) ([3ccbea0](https://github.com/vuejs/core/commit/3ccbea08e09217b50a410d7b49ebb138e0c4c1e7)), closes [#8040](https://github.com/vuejs/core/issues/8040)
-* **compiler-sfc:** fix binding type for constants when hoistStatic is disabled ([#8029](https://github.com/vuejs/core/issues/8029)) ([f7f4624](https://github.com/vuejs/core/commit/f7f4624191bbdc09600dbb0eb048b947c3a4f761))
-* **compiler-sfc:** skip empty `defineOptions` and support TypeScript type assertions ([#8028](https://github.com/vuejs/core/issues/8028)) ([9557529](https://github.com/vuejs/core/commit/955752951e1d31b90d817bd20830fe3f89018771))
-* **compiler-ssr:** disable v-once transform in ssr vdom fallback branch ([05f94cf](https://github.com/vuejs/core/commit/05f94cf7b01dd05ed7d3170916a38b175d5df292)), closes [#7644](https://github.com/vuejs/core/issues/7644)
-* **types:** improve defineProps return type with generic arguments ([91a931a](https://github.com/vuejs/core/commit/91a931ae8707b8d43f10216e1ce8e18b12158f99))
-* **types:** more public type argument order fix ([af563bf](https://github.com/vuejs/core/commit/af563bf428200367b6f5bb7944f690c85d810202))
-* **types:** retain type parameters order for public types ([bdf557f](https://github.com/vuejs/core/commit/bdf557f6f233c039fff8007b1b16aec00c4e68aa))
+* also export runtime error strings in all cjs builds ([38706e4](https://github.com/vuejs/core/commit/38706e4a1e5e5380e7df910b2a784d0a9bc9db29))
 
 
 ### Features
 
-* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
-* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
+* **defineModel:** support modifiers and transformers ([a772031](https://github.com/vuejs/core/commit/a772031ea8431bd732ffeaeaac09bd76a0daec9b))
 
 
-### Reverts
 
-* Revert "chore: remove unused args passed to ssrRender" ([b117b88](https://github.com/vuejs/core/commit/b117b8844881a732a021432066230ff2215049ea))
+# [3.4.0-rc.2](https://github.com/vuejs/core/compare/v3.4.0-rc.1...v3.4.0-rc.2) (2023-12-26)
 
 
+### Bug Fixes
+
+* **deps:** update dependency @vue/repl to ^3.1.0 ([#9911](https://github.com/vuejs/core/issues/9911)) ([f96c413](https://github.com/vuejs/core/commit/f96c413e8ef2f24cacda5bb499492922f62c6e8b))
+* **types:** fix distribution of union types when unwrapping setup bindings ([#9909](https://github.com/vuejs/core/issues/9909)) ([0695c69](https://github.com/vuejs/core/commit/0695c69e0dfaf99882a623fe75b433c9618ea648)), closes [#9903](https://github.com/vuejs/core/issues/9903)
+* **warning:** ensure prod hydration warnings actually work ([b4ebe7a](https://github.com/vuejs/core/commit/b4ebe7ae8b904f28cdda33caf87bc05718d3a08a))
+
+
+### Features
+
+* **compiler-sfc:** export aggregated error messages for compiler-core and compiler-dom ([25c726e](https://github.com/vuejs/core/commit/25c726eca81fc384b41fafbeba5e8dfcda1f030f))
 
-# [3.3.0-alpha.8](https://github.com/vuejs/core/compare/v3.3.0-alpha.7...v3.3.0-alpha.8) (2023-04-04)
+
+
+# [3.4.0-rc.1](https://github.com/vuejs/core/compare/v3.4.0-beta.4...v3.4.0-rc.1) (2023-12-25)
 
 
 ### Bug Fixes
 
-* **compiler-sfc:** check binding is prop before erroring ([f3145a9](https://github.com/vuejs/core/commit/f3145a915aaec11c915f1df258c5209ae4782bcc)), closes [#8017](https://github.com/vuejs/core/issues/8017)
+* **compiler-core:** fix parsing `<script setup>` generics with > ([7aa3f25](https://github.com/vuejs/core/commit/7aa3f250f26d58ee2db82af907de8b9105e6e418)), closes [#9890](https://github.com/vuejs/core/issues/9890)
+* **compiler-sfc:** fix type resolution for shared type w/ different generic parameters ([a8d0b1b](https://github.com/vuejs/core/commit/a8d0b1b38b092ec2d10b32bedcee2eea33b77657)), closes [#9871](https://github.com/vuejs/core/issues/9871)
+* **ssr:** avoid hydration mismatch warning for classes with different order ([e585b0d](https://github.com/vuejs/core/commit/e585b0db43150c8b8b3d78f71e12efccc018a38d))
 
 
 
-# [3.3.0-alpha.7](https://github.com/vuejs/core/compare/v3.3.0-alpha.6...v3.3.0-alpha.7) (2023-04-03)
+# [3.4.0-beta.4](https://github.com/vuejs/core/compare/v3.3.13...v3.4.0-beta.4) (2023-12-19)
 
 
 ### Bug Fixes
 
-* **compiler-dom:** handle newlines when evaluating constants during stringification ([#7995](https://github.com/vuejs/core/issues/7995)) ([5261085](https://github.com/vuejs/core/commit/52610851137b9c5f6f57d771fd604fba309b3c97)), closes [#7994](https://github.com/vuejs/core/issues/7994)
-* **compiler-sfc:** use dynamic defaults merging for methods with computed keys ([482f2e3](https://github.com/vuejs/core/commit/482f2e3434a1edc47a181890354838e206d08922)), closes [#7113](https://github.com/vuejs/core/issues/7113)
+* **compile-sfc:** fix identifier prefixing edge case caused by reused AST ([#9867](https://github.com/vuejs/core/issues/9867)) ([eb51b23](https://github.com/vuejs/core/commit/eb51b23d8512f15665d6f8bcdfd51582e0cd8ce8)), closes [#9853](https://github.com/vuejs/core/issues/9853) [#9863](https://github.com/vuejs/core/issues/9863)
+* **ssr:** fix hydration prop mismatch check for class on SVG elements ([e8448b0](https://github.com/vuejs/core/commit/e8448b018d9f837c08eace90cab404a27f68e31a))
 
 
 ### Features
 
-* **compiler-sfc:** codegen support for defineEmits() short syntax (followup of [#7992](https://github.com/vuejs/core/issues/7992)) ([ef73ea5](https://github.com/vuejs/core/commit/ef73ea53eaf853d43e70946d2d448ae8c0a83e4f))
-* **compiler-sfc:** support arbitrary expression as withDefaults argument ([fe61944](https://github.com/vuejs/core/commit/fe619443d2e99301975de120685dbae8d66c03a6)), closes [#6459](https://github.com/vuejs/core/issues/6459)
-* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
-* **sfc:** revert withDefaults() deprecation ([4af5d1b](https://github.com/vuejs/core/commit/4af5d1b0754035058436f9e4e5c12aedef199177))
-* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
-* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
+* **runtime-core:** throw real error when scheduler detects infinite loop during dev ([#7447](https://github.com/vuejs/core/issues/7447)) ([1d79b64](https://github.com/vuejs/core/commit/1d79b64ebce884d97136d71aa722347470b13e35)), closes [#7437](https://github.com/vuejs/core/issues/7437)
+
+
+
+## [3.3.13](https://github.com/vuejs/core/compare/v3.3.12...v3.3.13) (2023-12-19)
 
 
+### Bug Fixes
+
+* **compiler-core:** fix v-on with modifiers on inline expression of undefined ([#9866](https://github.com/vuejs/core/issues/9866)) ([bae79dd](https://github.com/vuejs/core/commit/bae79ddf8564a2da4a5365cfeb8d811990f42335)), closes [#9865](https://github.com/vuejs/core/issues/9865)
+* **runtime-dom:** cache event handlers by key/modifiers ([#9851](https://github.com/vuejs/core/issues/9851)) ([04d2c05](https://github.com/vuejs/core/commit/04d2c05054c26b02fbc1d84839b0ed5cd36455b6)), closes [#9849](https://github.com/vuejs/core/issues/9849)
+* **types:** extract properties from extended collections ([#9854](https://github.com/vuejs/core/issues/9854)) ([24b1c1d](https://github.com/vuejs/core/commit/24b1c1dd57fd55d998aa231a147500e010b10219)), closes [#9852](https://github.com/vuejs/core/issues/9852)
+
 
-# [3.3.0-alpha.6](https://github.com/vuejs/core/compare/v3.3.0-alpha.5...v3.3.0-alpha.6) (2023-03-30)
+
+# [3.4.0-beta.3](https://github.com/vuejs/core/compare/v3.3.12...v3.4.0-beta.3) (2023-12-16)
 
 
 ### Bug Fixes
 
-* **compiler-core:** check if expression is constant ([#7974](https://github.com/vuejs/core/issues/7974)) ([77686cf](https://github.com/vuejs/core/commit/77686cf4765e7e345bef364c0b03739e3c2da91d)), closes [#7973](https://github.com/vuejs/core/issues/7973)
-* **compiler-core:** fix codegen for literal const in non-inline mode ([6bda4b6](https://github.com/vuejs/core/commit/6bda4b66886240b28993c88b7ecd4640a199be65))
-* **compiler-sfc:** allow `<script>` with lang='js' ([#7398](https://github.com/vuejs/core/issues/7398)) ([9f5e20c](https://github.com/vuejs/core/commit/9f5e20ccff235946159f0e50519f5be09bc89d5b))
-* **compiler-sfc:** avoid codegen conflict with user variable named `expose` ([#7949](https://github.com/vuejs/core/issues/7949)) ([c839129](https://github.com/vuejs/core/commit/c839129ab9d46f56a019b0ff234b35f27cac1e35)), closes [#7890](https://github.com/vuejs/core/issues/7890)
-* **compiler-sfc:** disallow `expose` property in `defineOptions` ([#7967](https://github.com/vuejs/core/issues/7967)) ([93f7729](https://github.com/vuejs/core/commit/93f77292c9f2c4dcc83aae6b5943a8b1d7443092))
-* **compiler-sfc:** fix defineExpose() codegen regression from [#7949](https://github.com/vuejs/core/issues/7949) ([a94072d](https://github.com/vuejs/core/commit/a94072dd2ca1aca4ce1fbe5da51ca2a9a07a4637))
-* **compiler-sfc:** fix edge case of default export call with no args ([#7536](https://github.com/vuejs/core/issues/7536)) ([d60e58c](https://github.com/vuejs/core/commit/d60e58c9f62ae7bd1f9c888cd2e55982a64d9e96)), closes [#7534](https://github.com/vuejs/core/issues/7534)
-* **compiler-sfc:** fix function default value handling w/ props destructure ([e10a89e](https://github.com/vuejs/core/commit/e10a89e608d3486c0c9a0457ee7c56d208e0aa91))
-* **compiler-sfc:** handle more TS built-in utilities in defineProps inference ([4355d24](https://github.com/vuejs/core/commit/4355d2492dccdb175b18d083e20f3ec39a52801f))
-* **compiler-sfc:** infer function prop type from type literal w/ callable signature ([#7119](https://github.com/vuejs/core/issues/7119)) ([3a7572c](https://github.com/vuejs/core/commit/3a7572cdb2074c5cac2231e4525296104141411c))
-* **compiler-sfc:** infer object type for empty type literal ([1a04fba](https://github.com/vuejs/core/commit/1a04fba10b6462303c65f1095da86ce05c14f1f4))
-* **compiler-sfc:** infer runtime type in defineProps ([#7972](https://github.com/vuejs/core/issues/7972)) ([ba4cec3](https://github.com/vuejs/core/commit/ba4cec31b91da60555892c381b00c2fa5b3e0e39))
-* **compiler-sfc:** infer TS Extract&Exclude runtime type ([#7339](https://github.com/vuejs/core/issues/7339)) ([6391daf](https://github.com/vuejs/core/commit/6391daf6586e49e165b3195863b602c3cbb92ace)), closes [#7337](https://github.com/vuejs/core/issues/7337) [#6252](https://github.com/vuejs/core/issues/6252)
-* **compiler-sfc:** infer TSIntersectionType in defineProps ([#7394](https://github.com/vuejs/core/issues/7394)) ([151a8ad](https://github.com/vuejs/core/commit/151a8ad6b9288784c3b2514820a112b93ecf2dca))
-* **compiler-sfc:** properly handle unknown types in runtime prop inference ([5fb406e](https://github.com/vuejs/core/commit/5fb406e3e1d585076779e9ce4a588a4f9a61ef23)), closes [#7511](https://github.com/vuejs/core/issues/7511)
-* **compiler-sfc:** properly remove comma of multiple macros in the same declaration ([#7423](https://github.com/vuejs/core/issues/7423)) ([336a3d7](https://github.com/vuejs/core/commit/336a3d7b9199aeda19672832ce173de298b1105a)), closes [#7422](https://github.com/vuejs/core/issues/7422) [#6778](https://github.com/vuejs/core/issues/6778)
-* **compiler-sfc:** rewrite default export with AST analysis instead of regex ([#7068](https://github.com/vuejs/core/issues/7068)) ([701b95f](https://github.com/vuejs/core/commit/701b95ff3d2bad0284c03865a0b052fc8324beec)), closes [#7038](https://github.com/vuejs/core/issues/7038) [#7041](https://github.com/vuejs/core/issues/7041) [#7078](https://github.com/vuejs/core/issues/7078)
-* **compiler-sfc:** unwrap TS node for defineProps ([#7340](https://github.com/vuejs/core/issues/7340)) ([1b69d5f](https://github.com/vuejs/core/commit/1b69d5f2f49ee60af4b10137c7833a76420dbba1))
-* **compiler-sfc:** use prependLeft to handle CSSVars ([#7760](https://github.com/vuejs/core/issues/7760)) ([139104b](https://github.com/vuejs/core/commit/139104ba2695eecae672db98f978de78e17ab7e1))
-* **jsx-runtime:** fix automatic runtime implementation ([#7959](https://github.com/vuejs/core/issues/7959)) ([5838950](https://github.com/vuejs/core/commit/5838950ecf7e4e17dd5a23acd621077390666b76))
-* **jsx-runtime:** handle keys ([#7976](https://github.com/vuejs/core/issues/7976)) ([ff60b93](https://github.com/vuejs/core/commit/ff60b933ae4e02422393664ee7818cffadf9b58b))
-* **types/jsx:** jsx-runtime types for global JSX namespace registration ([#7978](https://github.com/vuejs/core/issues/7978)) ([0f73f39](https://github.com/vuejs/core/commit/0f73f394dafd709298bd8c71107a323bf322a1d2))
-* **types/jsx:** move JSX DOM types back to `@vue/runtime-dom` ([#7979](https://github.com/vuejs/core/issues/7979)) ([ffe679c](https://github.com/vuejs/core/commit/ffe679c490986b69956daec7166f1ab6d9f23073))
-* **types/jsx:** remove $slots children override ([28e30c8](https://github.com/vuejs/core/commit/28e30c819df5e4fc301c98f7be938fa13e8be3bc))
-* **types:** revert jsx global removal (to be removed in 3.4) ([e224922](https://github.com/vuejs/core/commit/e224922e972e78b4fb6cbd129d685c2317018ad1))
+* **compiler-core:** vnode hooks error message ([#9842](https://github.com/vuejs/core/issues/9842)) ([7bc3c9e](https://github.com/vuejs/core/commit/7bc3c9e205c5158230772d9fcd25bf300809342e))
+* **defineModel:** ensure trigger effect when prop changed ([#9841](https://github.com/vuejs/core/issues/9841)) ([eb12f21](https://github.com/vuejs/core/commit/eb12f211b8e312fd64d91ef1a58b2c2db618bdee)), closes [#9838](https://github.com/vuejs/core/issues/9838)
+* **mathml:** update known mathML tags ([#9829](https://github.com/vuejs/core/issues/9829)) ([ebd78d2](https://github.com/vuejs/core/commit/ebd78d2c99d9587307e444e6b7baa7bc920d42e7))
+* **Suspense:** fix edge case of Suspense being patched during async HOC child remount ([f0f6f7c](https://github.com/vuejs/core/commit/f0f6f7cea6e16650181e71dcfccbee405a1db503))
+
+
+
+## [3.3.12](https://github.com/vuejs/core/compare/v3.3.11...v3.3.12) (2023-12-16)
+
+### Bug Fixes
+
+* **hydration:** handle appear transition before patch props ([#9837](https://github.com/vuejs/core/issues/9837)) ([e70f4c4](https://github.com/vuejs/core/commit/e70f4c47c553b6e16d8fad70743271ca23802fe7)), closes [#9832](https://github.com/vuejs/core/issues/9832)
+* **sfc/cssVars:** fix loss of CSS v-bind variables when setting inline style with string value ([#9824](https://github.com/vuejs/core/issues/9824)) ([0a387df](https://github.com/vuejs/core/commit/0a387dfb1d04afb6eae4296b6da76dfdaca77af4)), closes [#9821](https://github.com/vuejs/core/issues/9821)
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** fix `shallowRef` type error ([#9839](https://github.com/vuejs/core/issues/9839)) ([9a57158](https://github.com/vuejs/core/commit/9a571582b53220270e498d8712ea59312c0bef3a))
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
+
+
+
+# [3.4.0-beta.2](https://github.com/vuejs/core/compare/v3.4.0-beta.1...v3.4.0-beta.2) (2023-12-14)
 
 
 ### Features
 
-* **compiler-core:** support parsing `const` modifier in type parameters ([#7912](https://github.com/vuejs/core/issues/7912)) ([b7bd50f](https://github.com/vuejs/core/commit/b7bd50f5059e8755c0204f01a8c55b1724688e7e))
-* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
-* **compiler-sfc:** enable reactive props destructure by default ([#7986](https://github.com/vuejs/core/issues/7986)) ([ba9c2ae](https://github.com/vuejs/core/commit/ba9c2ae247fcc3960b238a04cb635158daa82004))
-* **compiler-sfc:** improve runtime props inference for enum ([eded947](https://github.com/vuejs/core/commit/eded94712e37856f258dc8c85f98a26fa41ae05f))
-* **compiler-sfc:** support generating variable instead of default export in compileScript ([71635be](https://github.com/vuejs/core/commit/71635be68d25887f91d624bb7f78281a851bc0cb))
-* **compiler-sfc:** support module string names syntax ([#7428](https://github.com/vuejs/core/issues/7428)) ([0002567](https://github.com/vuejs/core/commit/000256772816d54976e462330a7be342c49c7304))
-* **complier-sfc:** hoist literal constants for script ([#5752](https://github.com/vuejs/core/issues/5752)) ([7def8b1](https://github.com/vuejs/core/commit/7def8b15b89aa78accd9a00927db91e8091a12b7)), closes [#5750](https://github.com/vuejs/core/issues/5750)
-* **runtime-core:** add skipCheck for prop ([#7548](https://github.com/vuejs/core/issues/7548)) ([63ad77f](https://github.com/vuejs/core/commit/63ad77f6f65751780aa52f817387165b4773cfe4))
-* **sfc:** deprecate reactivity transform ([efb54e7](https://github.com/vuejs/core/commit/efb54e7315e93f4be7004d1c0a4de8c523dab334))
-* **types:** `defineComponent()` with generics support ([#7963](https://github.com/vuejs/core/issues/7963)) ([d77557c](https://github.com/vuejs/core/commit/d77557c4038f88a676903b379505b280a88cc774)), closes [#3102](https://github.com/vuejs/core/issues/3102)
+* **types:** remove default jsx global registration ([92b8d9c](https://github.com/vuejs/core/commit/92b8d9cef69146540db2bf7f2a5632ab5d38f672))
 
 
 ### BREAKING CHANGES
 
-* **types:** The type of `defineComponent()` when passing in a function has changed. This overload signature is rarely used in practice and the breakage will be minimal, so repurposing it to something more useful should be worth it.
+* **types:** Vue no longer registers the global `JSX` namespace by
+default.
+
 
 
+# [3.4.0-beta.1](https://github.com/vuejs/core/compare/v3.3.11...v3.4.0-beta.1) (2023-12-13)
 
-# [3.3.0-alpha.5](https://github.com/vuejs/core/compare/v3.3.0-alpha.4...v3.3.0-alpha.5) (2023-03-26)
 
 ### Bug Fixes
 
-* **runtime-core:** support `getCurrentInstance` across mutiple builds of Vue ([8d2d5bf](https://github.com/vuejs/core/commit/8d2d5bf48a24dab44e5b03cb8fa0c5faa4b696e3))
-* **types:** ensure defineProps with generics return correct types ([c288c7b](https://github.com/vuejs/core/commit/c288c7b0bd6077d690f42153c3fc49a45454a66a))
+* **compiler-core:** use the same resolved options for all compile stages ([#9760](https://github.com/vuejs/core/issues/9760)) ([0dc875d](https://github.com/vuejs/core/commit/0dc875d53e5d869b44d0c1a70736ec859337b58f))
+* **hydration:** should not warn mismatch for nullish prop ([33159a5](https://github.com/vuejs/core/commit/33159a5916bf7686fe53517befa59b450b34e974))
+* **hydration:** swap client/server labels for hydration mismatch warnings ([f41fd86](https://github.com/vuejs/core/commit/f41fd86d5f26bd0009b4ca285ddc3cefaafa9f7c)), closes [#9098](https://github.com/vuejs/core/issues/9098) [#5953](https://github.com/vuejs/core/issues/5953)
+* **runtime-core:** fix suspense crash when patching non-resolved async setup component ([#7290](https://github.com/vuejs/core/issues/7290)) ([bb0c889](https://github.com/vuejs/core/commit/bb0c8899cadd03af22e23c0383aaab363635c5b4)), closes [#5993](https://github.com/vuejs/core/issues/5993) [#6463](https://github.com/vuejs/core/issues/6463) [#6949](https://github.com/vuejs/core/issues/6949) [#6095](https://github.com/vuejs/core/issues/6095) [#8121](https://github.com/vuejs/core/issues/8121)
+* **runtime-core:** properly pop warning context when mounting components with async setup ([69a2acc](https://github.com/vuejs/core/commit/69a2acc6ea159da8300a68ecc8953f19932c251b))
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **ssr:** make isInSSRComponentSetup state sharable across copies of Vue ([e04d821](https://github.com/vuejs/core/commit/e04d821422102446704e223c03e50d26cbb1fe69))
+* **Suspense:** handle switching away from kept-alive component before resolve ([aa0c13f](https://github.com/vuejs/core/commit/aa0c13f637df7eb27faa2545ee731f543c0813ec)), closes [#6416](https://github.com/vuejs/core/issues/6416) [#6467](https://github.com/vuejs/core/issues/6467)
+* **Suspense:** properly fix [#6416](https://github.com/vuejs/core/issues/6416) ([0db336f](https://github.com/vuejs/core/commit/0db336ff6c640fb9d3e48943c69f4c1737412be4))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
 
 
 ### Features
 
-* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
-* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
+* **compiler-core:** add current filename to TransformContext ([#8950](https://github.com/vuejs/core/issues/8950)) ([638f1ab](https://github.com/vuejs/core/commit/638f1abbb632000553e2b7d75e87c95d8ca192d6))
+* **compiler-sfc:** promote defineModel stable ([#9598](https://github.com/vuejs/core/issues/9598)) ([ef688ba](https://github.com/vuejs/core/commit/ef688ba92bfccbc8b7ea3997eb297665d13e5249))
+* **compiler-sfc:** support import attributes and `using` syntax ([#8786](https://github.com/vuejs/core/issues/8786)) ([5b2bd1d](https://github.com/vuejs/core/commit/5b2bd1df78e8ff524c3a184adaa284681aba6574))
+* **defineModel:** support local mutation by default, remove local option ([f74785b](https://github.com/vuejs/core/commit/f74785bc4ad351102dde17fdfd2c7276b823111f)), closes [/github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278](https://github.com//github.com/vuejs/rfcs/discussions/503/issues/discussioncomment-7566278)
+* MathML support ([#7836](https://github.com/vuejs/core/issues/7836)) ([d42b6ba](https://github.com/vuejs/core/commit/d42b6ba3f530746eb1221eb7a4be0f44eb56f7d3)), closes [#7820](https://github.com/vuejs/core/issues/7820)
+* **runtime-core:** provide full props to props validator functions ([#3258](https://github.com/vuejs/core/issues/3258)) ([8e27692](https://github.com/vuejs/core/commit/8e27692029a4645cd54287f776c0420f2b82740b))
+* **ssr:** add `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` feature flag ([#9550](https://github.com/vuejs/core/issues/9550)) ([bc7698d](https://github.com/vuejs/core/commit/bc7698dbfed9b5327a93565f9df336ae5a94d605))
+* **ssr:** improve ssr hydration mismatch checks ([#5953](https://github.com/vuejs/core/issues/5953)) ([2ffc1e8](https://github.com/vuejs/core/commit/2ffc1e8cfdc6ec9c45c4a4dd8e3081b2aa138f1e)), closes [#5063](https://github.com/vuejs/core/issues/5063)
+* **types:** add emits and slots type to `FunctionalComponent` ([#8644](https://github.com/vuejs/core/issues/8644)) ([927ab17](https://github.com/vuejs/core/commit/927ab17cfc645e82d061fdf227c34689491268e1))
+* **types:** export AriaAttributes type ([#8909](https://github.com/vuejs/core/issues/8909)) ([fd0b6ba](https://github.com/vuejs/core/commit/fd0b6ba01660499fa07b0cf360eefaac8cca8287))
+* **types:** export ObjectPlugin and FunctionPlugin types ([#8946](https://github.com/vuejs/core/issues/8946)) ([fa4969e](https://github.com/vuejs/core/commit/fa4969e7a3aefa6863203f9294fc5e769ddf6d8f)), closes [#8577](https://github.com/vuejs/core/issues/8577)
+* **types:** expose `DefineProps` type ([096ba81](https://github.com/vuejs/core/commit/096ba81817b7da15f61bc55fc1a93f72ac9586e0))
+* **types:** expose `PublicProps` type ([#2403](https://github.com/vuejs/core/issues/2403)) ([44135dc](https://github.com/vuejs/core/commit/44135dc95fb8fea26b84d1433839d28b8c21f708))
+* **types:** improve event type inference when using `h` with native elements  ([#9756](https://github.com/vuejs/core/issues/9756)) ([a625376](https://github.com/vuejs/core/commit/a625376ac8901eea81bf3c66cb531f2157f073ef))
+* **types:** provide ComponentInstance type ([#5408](https://github.com/vuejs/core/issues/5408)) ([bfb8565](https://github.com/vuejs/core/commit/bfb856565d3105db4b18991ae9e404e7cc989b25))
+* **types:** support passing generics when registering global directives ([#9660](https://github.com/vuejs/core/issues/9660)) ([a41409e](https://github.com/vuejs/core/commit/a41409ed02a8c7220e637f56caf6813edeb077f8))
+
+
+### Performance Improvements
+
+* use sync watcher for defineModel local mode ([7e60d10](https://github.com/vuejs/core/commit/7e60d1058ff06e3d37c8608f3449453321220edc)), closes [/github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278](https://github.com//github.com/vuejs/rfcs/discussions/503/issues/discussioncomment-7566278)
+
+
+
+## [3.3.11](https://github.com/vuejs/core/compare/v3.3.10...v3.3.11) (2023-12-08)
+
+
+### Bug Fixes
+
+* **custom-element:** correctly handle number type props in prod ([#8989](https://github.com/vuejs/core/issues/8989)) ([d74d364](https://github.com/vuejs/core/commit/d74d364d62db8e48881af6b5a75ce4fb5f36cc35))
+* **reactivity:** fix mutation on user proxy of reactive Array ([6ecbd5c](https://github.com/vuejs/core/commit/6ecbd5ce2a7f59314a8326a1d193874b87f4d8c8)), closes [#9742](https://github.com/vuejs/core/issues/9742) [#9751](https://github.com/vuejs/core/issues/9751) [#9750](https://github.com/vuejs/core/issues/9750)
+* **runtime-dom:** fix width and height prop check condition ([5b00286](https://github.com/vuejs/core/commit/5b002869c533220706f9788b496b8ca8d8e98609)), closes [#9762](https://github.com/vuejs/core/issues/9762)
+* **shared:** handle Map with symbol keys in toDisplayString ([#9731](https://github.com/vuejs/core/issues/9731)) ([364821d](https://github.com/vuejs/core/commit/364821d6bdb1775e2f55a69bcfb9f40f7acf1506)), closes [#9727](https://github.com/vuejs/core/issues/9727)
+* **shared:** handle more Symbol cases in toDisplayString ([983d45d](https://github.com/vuejs/core/commit/983d45d4f8eb766b5a16b7ea93b86d3c51618fa6))
+* **Suspense:** properly get anchor when mount fallback vnode ([#9770](https://github.com/vuejs/core/issues/9770)) ([b700328](https://github.com/vuejs/core/commit/b700328342e17dc16b19316c2e134a26107139d2)), closes [#9769](https://github.com/vuejs/core/issues/9769)
+* **types:** ref() return type should not be any when initial value is any ([#9768](https://github.com/vuejs/core/issues/9768)) ([cdac121](https://github.com/vuejs/core/commit/cdac12161ec27b45ded48854c3d749664b6d4a6d))
+* **watch:** should not fire pre watcher on child component unmount ([#7181](https://github.com/vuejs/core/issues/7181)) ([6784f0b](https://github.com/vuejs/core/commit/6784f0b1f8501746ea70d87d18ed63a62cf6b76d)), closes [#7030](https://github.com/vuejs/core/issues/7030)
+
+
+
+# [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))
 
-### Note on JSX Types Change
 
-* In the next minor (3.4), Vue no longer registers the global `JSX` namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
+### Features
 
-  For TSX users, it is suggested to set [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `'vue'` in `tsconfig.json` after upgrading to 3.3, or opt-in per file with `/* @jsxImportSource vue */`. This will allow you to opt-in to the new behavior now and upgrade seamlessly when 3.4 releases.
+* **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)
 
-  If there is code that depends on the presence of the global `JSX` namespace,  you can retain the exact pre-3.4 global behavior by explicitly referencing `vue/jsx`, which registers the global `JSX` namespace.
 
-  Note that the planned change in 3.4 is a type-only breaking change in a minor release, which adheres to our [release policy](https://vuejs.org/about/releases.html#semantic-versioning-edge-cases).
 
-# [3.3.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.0-alpha.3...v3.3.0-alpha.4) (2023-02-06)
+## [3.3.10](https://github.com/vuejs/core/compare/v3.3.9...v3.3.10) (2023-12-04)
 
 
 ### Bug Fixes
 
-* **build:** fix const enum w/ number values ([92bb189](https://github.com/vuejs/core/commit/92bb189ca7ecae221ebf5411da87c715780d2de3))
+* **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.0-alpha.3](https://github.com/vuejs/core/compare/v3.3.0-alpha.2...v3.3.0-alpha.3) (2023-02-06)
+# [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
 
-* **build:** avoid const enum conflicts ([d1181ad](https://github.com/vuejs/core/commit/d1181ad692861c140e687372efbc67a1d65d642a))
+* **deps:** update compiler to ^7.23.4 ([#9681](https://github.com/vuejs/core/issues/9681)) ([31f6ebc](https://github.com/vuejs/core/commit/31f6ebc4df84490ed29fb75e7bf4259200eb51f0))
+* **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.3.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.0-alpha.1...v3.3.0-alpha.2) (2023-02-05)
+
+# [3.4.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.9...v3.4.0-alpha.2) (2023-11-27)
 
 
 ### Bug Fixes
 
-* **build:** fix dev flag replacement in esm-bundler builds ([5851eaa](https://github.com/vuejs/core/commit/5851eaa9339364d41860a277a99f2352de2a3834))
+* 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)
 
 
-# [3.3.0-alpha.1](https://github.com/vuejs/core/compare/v3.2.47...v3.3.0-alpha.1) (2023-02-05)
+### 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.3.9](https://github.com/vuejs/core/compare/v3.3.8...v3.3.9) (2023-11-25)
 
 
 ### Bug Fixes
 
-* **build:** ensure BaseTransition functions can be tree-shaken ([3a6f5eb](https://github.com/vuejs/core/commit/3a6f5eb0f7d60dc87d17a69c66e88ae5688b11a5))
+* **compiler-core:** avoid rewriting scope variables in inline for loops ([#7245](https://github.com/vuejs/core/issues/7245)) ([a2d810e](https://github.com/vuejs/core/commit/a2d810eb40cef631f61991ca68b426ee9546aba0)), closes [#7238](https://github.com/vuejs/core/issues/7238)
+* **compiler-core:** fix `resolveParserPlugins` decorators check ([#9566](https://github.com/vuejs/core/issues/9566)) ([9d0eba9](https://github.com/vuejs/core/commit/9d0eba916f3bf6fb5c03222400edae1a2db7444f)), closes [#9560](https://github.com/vuejs/core/issues/9560)
+* **compiler-sfc:** consistently escape type-only prop names ([#8654](https://github.com/vuejs/core/issues/8654)) ([3e08d24](https://github.com/vuejs/core/commit/3e08d246dfd8523c54fb8e7a4a6fd5506ffb1bcc)), closes [#8635](https://github.com/vuejs/core/issues/8635) [#8910](https://github.com/vuejs/core/issues/8910) [vitejs/vite-plugin-vue#184](https://github.com/vitejs/vite-plugin-vue/issues/184)
+* **compiler-sfc:** malformed filename on windows using path.posix.join() ([#9478](https://github.com/vuejs/core/issues/9478)) ([f18a174](https://github.com/vuejs/core/commit/f18a174979626b3429db93c5d5b7ae5448917c70)), closes [#8671](https://github.com/vuejs/core/issues/8671) [#9583](https://github.com/vuejs/core/issues/9583) [#9446](https://github.com/vuejs/core/issues/9446) [#9473](https://github.com/vuejs/core/issues/9473)
+* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([3227e50](https://github.com/vuejs/core/commit/3227e50b32105f8893f7dff2f29278c5b3a9f621))
+* **compiler-sfc:** support resolve extends interface for defineEmits ([#8470](https://github.com/vuejs/core/issues/8470)) ([9e1b74b](https://github.com/vuejs/core/commit/9e1b74bcd5fa4151f5d1bc02c69fbbfa4762f577)), closes [#8465](https://github.com/vuejs/core/issues/8465)
+* **hmr/transition:** fix kept-alive component inside transition disappearing after hmr ([#7126](https://github.com/vuejs/core/issues/7126)) ([d11e978](https://github.com/vuejs/core/commit/d11e978fc98dcc83526c167e603b8308f317f786)), closes [#7121](https://github.com/vuejs/core/issues/7121)
+* **hydration:** force hydration for v-bind with .prop modifier ([364f319](https://github.com/vuejs/core/commit/364f319d214226770d97c98d8fcada80c9e8dde3)), closes [#7490](https://github.com/vuejs/core/issues/7490)
+* **hydration:** properly hydrate indeterminate prop ([34b5a5d](https://github.com/vuejs/core/commit/34b5a5da4ae9c9faccac237acd7acc8e7e017571)), closes [#7476](https://github.com/vuejs/core/issues/7476)
+* **reactivity:** clear method on readonly collections should return undefined ([#7316](https://github.com/vuejs/core/issues/7316)) ([657476d](https://github.com/vuejs/core/commit/657476dcdb964be4fbb1277c215c073f3275728e))
+* **reactivity:** onCleanup also needs to be cleaned ([#8655](https://github.com/vuejs/core/issues/8655)) ([73fd810](https://github.com/vuejs/core/commit/73fd810eebdd383a2b4629f67736c4db1f428abd)), closes [#5151](https://github.com/vuejs/core/issues/5151) [#7695](https://github.com/vuejs/core/issues/7695)
+* **ssr:** hydration `__vnode` missing for devtools ([#9328](https://github.com/vuejs/core/issues/9328)) ([5156ac5](https://github.com/vuejs/core/commit/5156ac5b38cfa80d3db26f2c9bf40cb22a7521cb))
+* **types:** allow falsy value types in `StyleValue` ([#7954](https://github.com/vuejs/core/issues/7954)) ([17aa92b](https://github.com/vuejs/core/commit/17aa92b79b31d8bb8b5873ddc599420cb9806db8)), closes [#7955](https://github.com/vuejs/core/issues/7955)
+* **types:** defineCustomElement using defineComponent return type with emits ([#7937](https://github.com/vuejs/core/issues/7937)) ([5d932a8](https://github.com/vuejs/core/commit/5d932a8e6d14343c9d7fc7c2ecb58ac618b2f938)), closes [#7782](https://github.com/vuejs/core/issues/7782)
+* **types:** fix `unref` and `toValue` when input union type contains ComputedRef ([#8748](https://github.com/vuejs/core/issues/8748)) ([176d476](https://github.com/vuejs/core/commit/176d47671271b1abc21b1508e9a493c7efca6451)), closes [#8747](https://github.com/vuejs/core/issues/8747) [#8857](https://github.com/vuejs/core/issues/8857)
+* **types:** fix instance type when props type is incompatible with setup returned type ([#7338](https://github.com/vuejs/core/issues/7338)) ([0e1e8f9](https://github.com/vuejs/core/commit/0e1e8f919e5a74cdaadf9c80ee135088b25e7fa3)), closes [#5885](https://github.com/vuejs/core/issues/5885)
+* **types:** fix shallowRef return type with union value type ([#7853](https://github.com/vuejs/core/issues/7853)) ([7c44800](https://github.com/vuejs/core/commit/7c448000b0def910c2cfabfdf7ff20a3d6bc844f)), closes [#7852](https://github.com/vuejs/core/issues/7852)
+* **types:** more precise types for class bindings ([#8012](https://github.com/vuejs/core/issues/8012)) ([46e3374](https://github.com/vuejs/core/commit/46e33744c890bd49482c5e5c5cdea44e00ec84d5))
+* **types:** remove optional properties from defineProps return type ([#6421](https://github.com/vuejs/core/issues/6421)) ([94c049d](https://github.com/vuejs/core/commit/94c049d930d922069e38ea8700d7ff0970f71e61)), closes [#6420](https://github.com/vuejs/core/issues/6420)
+* **types:** return type of withDefaults should be readonly ([#8601](https://github.com/vuejs/core/issues/8601)) ([f15debc](https://github.com/vuejs/core/commit/f15debc01acb22d23f5acee97e6f02db88cef11a))
+* **types:** revert class type restrictions ([5d077c8](https://github.com/vuejs/core/commit/5d077c8754cc14f85d2d6d386df70cf8c0d93842)), closes [#8012](https://github.com/vuejs/core/issues/8012)
+* **types:** update jsx type definitions ([#8607](https://github.com/vuejs/core/issues/8607)) ([58e2a94](https://github.com/vuejs/core/commit/58e2a94871ae06a909c5f8bad07fb401193e6a38))
+* **types:** widen ClassValue type ([2424013](https://github.com/vuejs/core/commit/242401305944422d0c361b16101a4d18908927af))
+* **v-model:** avoid overwriting number input with same value ([#7004](https://github.com/vuejs/core/issues/7004)) ([40f4b77](https://github.com/vuejs/core/commit/40f4b77bb570868cb6e47791078767797e465989)), closes [#7003](https://github.com/vuejs/core/issues/7003)
+* **v-model:** unnecessary value binding error should apply to dynamic instead of static binding ([2859b65](https://github.com/vuejs/core/commit/2859b653c9a22460e60233cac10fe139e359b046)), closes [#3596](https://github.com/vuejs/core/issues/3596)
+
+
+
+## [3.3.8](https://github.com/vuejs/core/compare/v3.3.7...v3.3.8) (2023-11-06)
+
+
+### Bug Fixes
+
+* **compile-sfc:** support `Error` type in `defineProps` ([#5955](https://github.com/vuejs/core/issues/5955)) ([a989345](https://github.com/vuejs/core/commit/a9893458ec519aae442e1b99e64e6d74685cd22c))
+* **compiler-core:** known global should be shadowed by local variables in expression rewrite ([#9492](https://github.com/vuejs/core/issues/9492)) ([a75d1c5](https://github.com/vuejs/core/commit/a75d1c5c6242e91a73cc5ba01e6da620dea0b3d9)), closes [#9482](https://github.com/vuejs/core/issues/9482)
+* **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 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))
+
+
+
+# [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))
+
 
 ## Previous Changelogs
 
+### 3.3.x (2023-02-05 - 2023-12-29)
+
+See [3.3 changelog](./changelogs/CHANGELOG-3.3.md)
+
 ### 3.2.x (2021-07-16 - 2023-02-02)
 
 See [3.2 changelog](./changelogs/CHANGELOG-3.2.md)
diff --git a/LICENSE b/LICENSE
index 15f1f7e7a49..8fd17290c81 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-present, Yuxi (Evan) You
+Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 17d9abc6bae..cbc05311ae7 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ Vue.js is an MIT-licensed open source project with its ongoing development made
 
 <p align="center">
   <a target="_blank" href="https://vuejs.org/sponsor/#current-sponsors">
-    <img alt="sponsors" src="https://sponsors.vuejs.org/sponsors.svg?v2">
+    <img alt="sponsors" src="https://sponsors.vuejs.org/sponsors.svg?v3">
   </a>
 </p>
 
diff --git a/changelogs/CHANGELOG-3.3.md b/changelogs/CHANGELOG-3.3.md
new file mode 100644
index 00000000000..cc55c3bec18
--- /dev/null
+++ b/changelogs/CHANGELOG-3.3.md
@@ -0,0 +1,598 @@
+## [3.3.13](https://github.com/vuejs/core/compare/v3.3.12...v3.3.13) (2023-12-19)
+
+
+### Bug Fixes
+
+* **compiler-core:** fix v-on with modifiers on inline expression of undefined ([#9866](https://github.com/vuejs/core/issues/9866)) ([bae79dd](https://github.com/vuejs/core/commit/bae79ddf8564a2da4a5365cfeb8d811990f42335)), closes [#9865](https://github.com/vuejs/core/issues/9865)
+* **runtime-dom:** cache event handlers by key/modifiers ([#9851](https://github.com/vuejs/core/issues/9851)) ([04d2c05](https://github.com/vuejs/core/commit/04d2c05054c26b02fbc1d84839b0ed5cd36455b6)), closes [#9849](https://github.com/vuejs/core/issues/9849)
+* **types:** extract properties from extended collections ([#9854](https://github.com/vuejs/core/issues/9854)) ([24b1c1d](https://github.com/vuejs/core/commit/24b1c1dd57fd55d998aa231a147500e010b10219)), closes [#9852](https://github.com/vuejs/core/issues/9852)
+
+
+
+## [3.3.12](https://github.com/vuejs/core/compare/v3.3.11...v3.3.12) (2023-12-16)
+
+
+### Bug Fixes
+
+* **hydration:** handle appear transition before patch props ([#9837](https://github.com/vuejs/core/issues/9837)) ([e70f4c4](https://github.com/vuejs/core/commit/e70f4c47c553b6e16d8fad70743271ca23802fe7)), closes [#9832](https://github.com/vuejs/core/issues/9832)
+* **sfc/cssVars:** fix loss of CSS v-bind variables when setting inline style with string value ([#9824](https://github.com/vuejs/core/issues/9824)) ([0a387df](https://github.com/vuejs/core/commit/0a387dfb1d04afb6eae4296b6da76dfdaca77af4)), closes [#9821](https://github.com/vuejs/core/issues/9821)
+* **ssr:** fix suspense hydration of fallback content ([#7188](https://github.com/vuejs/core/issues/7188)) ([60415b5](https://github.com/vuejs/core/commit/60415b5d67df55f1fd6b176615299c08640fa142))
+* **types:** add `xmlns:xlink` to `SVGAttributes` ([#9300](https://github.com/vuejs/core/issues/9300)) ([0d61b42](https://github.com/vuejs/core/commit/0d61b429ecf63591d31e09702058fa4c7132e1a7)), closes [#9299](https://github.com/vuejs/core/issues/9299)
+* **types:** fix `shallowRef` type error ([#9839](https://github.com/vuejs/core/issues/9839)) ([9a57158](https://github.com/vuejs/core/commit/9a571582b53220270e498d8712ea59312c0bef3a))
+* **types:** support for generic keyof slots ([#8374](https://github.com/vuejs/core/issues/8374)) ([213eba4](https://github.com/vuejs/core/commit/213eba479ce080efc1053fe636f6be4a4c889b44))
+
+
+
+## [3.3.11](https://github.com/vuejs/core/compare/v3.3.10...v3.3.11) (2023-12-08)
+
+
+### Bug Fixes
+
+* **custom-element:** correctly handle number type props in prod ([#8989](https://github.com/vuejs/core/issues/8989)) ([d74d364](https://github.com/vuejs/core/commit/d74d364d62db8e48881af6b5a75ce4fb5f36cc35))
+* **reactivity:** fix mutation on user proxy of reactive Array ([6ecbd5c](https://github.com/vuejs/core/commit/6ecbd5ce2a7f59314a8326a1d193874b87f4d8c8)), closes [#9742](https://github.com/vuejs/core/issues/9742) [#9751](https://github.com/vuejs/core/issues/9751) [#9750](https://github.com/vuejs/core/issues/9750)
+* **runtime-dom:** fix width and height prop check condition ([5b00286](https://github.com/vuejs/core/commit/5b002869c533220706f9788b496b8ca8d8e98609)), closes [#9762](https://github.com/vuejs/core/issues/9762)
+* **shared:** handle Map with symbol keys in toDisplayString ([#9731](https://github.com/vuejs/core/issues/9731)) ([364821d](https://github.com/vuejs/core/commit/364821d6bdb1775e2f55a69bcfb9f40f7acf1506)), closes [#9727](https://github.com/vuejs/core/issues/9727)
+* **shared:** handle more Symbol cases in toDisplayString ([983d45d](https://github.com/vuejs/core/commit/983d45d4f8eb766b5a16b7ea93b86d3c51618fa6))
+* **Suspense:** properly get anchor when mount fallback vnode ([#9770](https://github.com/vuejs/core/issues/9770)) ([b700328](https://github.com/vuejs/core/commit/b700328342e17dc16b19316c2e134a26107139d2)), closes [#9769](https://github.com/vuejs/core/issues/9769)
+* **types:** ref() return type should not be any when initial value is any ([#9768](https://github.com/vuejs/core/issues/9768)) ([cdac121](https://github.com/vuejs/core/commit/cdac12161ec27b45ded48854c3d749664b6d4a6d))
+* **watch:** should not fire pre watcher on child component unmount ([#7181](https://github.com/vuejs/core/issues/7181)) ([6784f0b](https://github.com/vuejs/core/commit/6784f0b1f8501746ea70d87d18ed63a62cf6b76d)), closes [#7030](https://github.com/vuejs/core/issues/7030)
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* **compiler-core:** avoid rewriting scope variables in inline for loops ([#7245](https://github.com/vuejs/core/issues/7245)) ([a2d810e](https://github.com/vuejs/core/commit/a2d810eb40cef631f61991ca68b426ee9546aba0)), closes [#7238](https://github.com/vuejs/core/issues/7238)
+* **compiler-core:** fix `resolveParserPlugins` decorators check ([#9566](https://github.com/vuejs/core/issues/9566)) ([9d0eba9](https://github.com/vuejs/core/commit/9d0eba916f3bf6fb5c03222400edae1a2db7444f)), closes [#9560](https://github.com/vuejs/core/issues/9560)
+* **compiler-sfc:** consistently escape type-only prop names ([#8654](https://github.com/vuejs/core/issues/8654)) ([3e08d24](https://github.com/vuejs/core/commit/3e08d246dfd8523c54fb8e7a4a6fd5506ffb1bcc)), closes [#8635](https://github.com/vuejs/core/issues/8635) [#8910](https://github.com/vuejs/core/issues/8910) [vitejs/vite-plugin-vue#184](https://github.com/vitejs/vite-plugin-vue/issues/184)
+* **compiler-sfc:** malformed filename on windows using path.posix.join() ([#9478](https://github.com/vuejs/core/issues/9478)) ([f18a174](https://github.com/vuejs/core/commit/f18a174979626b3429db93c5d5b7ae5448917c70)), closes [#8671](https://github.com/vuejs/core/issues/8671) [#9583](https://github.com/vuejs/core/issues/9583) [#9446](https://github.com/vuejs/core/issues/9446) [#9473](https://github.com/vuejs/core/issues/9473)
+* **compiler-sfc:** support `:is` and `:where` selector in scoped css rewrite ([#8929](https://github.com/vuejs/core/issues/8929)) ([3227e50](https://github.com/vuejs/core/commit/3227e50b32105f8893f7dff2f29278c5b3a9f621))
+* **compiler-sfc:** support resolve extends interface for defineEmits ([#8470](https://github.com/vuejs/core/issues/8470)) ([9e1b74b](https://github.com/vuejs/core/commit/9e1b74bcd5fa4151f5d1bc02c69fbbfa4762f577)), closes [#8465](https://github.com/vuejs/core/issues/8465)
+* **hmr/transition:** fix kept-alive component inside transition disappearing after hmr ([#7126](https://github.com/vuejs/core/issues/7126)) ([d11e978](https://github.com/vuejs/core/commit/d11e978fc98dcc83526c167e603b8308f317f786)), closes [#7121](https://github.com/vuejs/core/issues/7121)
+* **hydration:** force hydration for v-bind with .prop modifier ([364f319](https://github.com/vuejs/core/commit/364f319d214226770d97c98d8fcada80c9e8dde3)), closes [#7490](https://github.com/vuejs/core/issues/7490)
+* **hydration:** properly hydrate indeterminate prop ([34b5a5d](https://github.com/vuejs/core/commit/34b5a5da4ae9c9faccac237acd7acc8e7e017571)), closes [#7476](https://github.com/vuejs/core/issues/7476)
+* **reactivity:** clear method on readonly collections should return undefined ([#7316](https://github.com/vuejs/core/issues/7316)) ([657476d](https://github.com/vuejs/core/commit/657476dcdb964be4fbb1277c215c073f3275728e))
+* **reactivity:** onCleanup also needs to be cleaned ([#8655](https://github.com/vuejs/core/issues/8655)) ([73fd810](https://github.com/vuejs/core/commit/73fd810eebdd383a2b4629f67736c4db1f428abd)), closes [#5151](https://github.com/vuejs/core/issues/5151) [#7695](https://github.com/vuejs/core/issues/7695)
+* **ssr:** hydration `__vnode` missing for devtools ([#9328](https://github.com/vuejs/core/issues/9328)) ([5156ac5](https://github.com/vuejs/core/commit/5156ac5b38cfa80d3db26f2c9bf40cb22a7521cb))
+* **types:** allow falsy value types in `StyleValue` ([#7954](https://github.com/vuejs/core/issues/7954)) ([17aa92b](https://github.com/vuejs/core/commit/17aa92b79b31d8bb8b5873ddc599420cb9806db8)), closes [#7955](https://github.com/vuejs/core/issues/7955)
+* **types:** defineCustomElement using defineComponent return type with emits ([#7937](https://github.com/vuejs/core/issues/7937)) ([5d932a8](https://github.com/vuejs/core/commit/5d932a8e6d14343c9d7fc7c2ecb58ac618b2f938)), closes [#7782](https://github.com/vuejs/core/issues/7782)
+* **types:** fix `unref` and `toValue` when input union type contains ComputedRef ([#8748](https://github.com/vuejs/core/issues/8748)) ([176d476](https://github.com/vuejs/core/commit/176d47671271b1abc21b1508e9a493c7efca6451)), closes [#8747](https://github.com/vuejs/core/issues/8747) [#8857](https://github.com/vuejs/core/issues/8857)
+* **types:** fix instance type when props type is incompatible with setup returned type ([#7338](https://github.com/vuejs/core/issues/7338)) ([0e1e8f9](https://github.com/vuejs/core/commit/0e1e8f919e5a74cdaadf9c80ee135088b25e7fa3)), closes [#5885](https://github.com/vuejs/core/issues/5885)
+* **types:** fix shallowRef return type with union value type ([#7853](https://github.com/vuejs/core/issues/7853)) ([7c44800](https://github.com/vuejs/core/commit/7c448000b0def910c2cfabfdf7ff20a3d6bc844f)), closes [#7852](https://github.com/vuejs/core/issues/7852)
+* **types:** more precise types for class bindings ([#8012](https://github.com/vuejs/core/issues/8012)) ([46e3374](https://github.com/vuejs/core/commit/46e33744c890bd49482c5e5c5cdea44e00ec84d5))
+* **types:** remove optional properties from defineProps return type ([#6421](https://github.com/vuejs/core/issues/6421)) ([94c049d](https://github.com/vuejs/core/commit/94c049d930d922069e38ea8700d7ff0970f71e61)), closes [#6420](https://github.com/vuejs/core/issues/6420)
+* **types:** return type of withDefaults should be readonly ([#8601](https://github.com/vuejs/core/issues/8601)) ([f15debc](https://github.com/vuejs/core/commit/f15debc01acb22d23f5acee97e6f02db88cef11a))
+* **types:** revert class type restrictions ([5d077c8](https://github.com/vuejs/core/commit/5d077c8754cc14f85d2d6d386df70cf8c0d93842)), closes [#8012](https://github.com/vuejs/core/issues/8012)
+* **types:** update jsx type definitions ([#8607](https://github.com/vuejs/core/issues/8607)) ([58e2a94](https://github.com/vuejs/core/commit/58e2a94871ae06a909c5f8bad07fb401193e6a38))
+* **types:** widen ClassValue type ([2424013](https://github.com/vuejs/core/commit/242401305944422d0c361b16101a4d18908927af))
+* **v-model:** avoid overwriting number input with same value ([#7004](https://github.com/vuejs/core/issues/7004)) ([40f4b77](https://github.com/vuejs/core/commit/40f4b77bb570868cb6e47791078767797e465989)), closes [#7003](https://github.com/vuejs/core/issues/7003)
+* **v-model:** unnecessary value binding error should apply to dynamic instead of static binding ([2859b65](https://github.com/vuejs/core/commit/2859b653c9a22460e60233cac10fe139e359b046)), closes [#3596](https://github.com/vuejs/core/issues/3596)
+
+
+
+## [3.3.8](https://github.com/vuejs/core/compare/v3.3.7...v3.3.8) (2023-11-06)
+
+
+### Bug Fixes
+
+* **compile-sfc:** support `Error` type in `defineProps` ([#5955](https://github.com/vuejs/core/issues/5955)) ([a989345](https://github.com/vuejs/core/commit/a9893458ec519aae442e1b99e64e6d74685cd22c))
+* **compiler-core:** known global should be shadowed by local variables in expression rewrite ([#9492](https://github.com/vuejs/core/issues/9492)) ([a75d1c5](https://github.com/vuejs/core/commit/a75d1c5c6242e91a73cc5ba01e6da620dea0b3d9)), closes [#9482](https://github.com/vuejs/core/issues/9482)
+* **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 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))
+
+
+
+## [3.3.7](https://github.com/vuejs/core/compare/v3.3.6...v3.3.7) (2023-10-24)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** avoid gen useCssVars when targeting SSR ([#6979](https://github.com/vuejs/core/issues/6979)) ([c568778](https://github.com/vuejs/core/commit/c568778ea3265d8e57f788b00864c9509bf88a4e)), closes [#6926](https://github.com/vuejs/core/issues/6926)
+* **compiler-ssr:**  proper scope analysis for ssr vnode slot fallback ([#7184](https://github.com/vuejs/core/issues/7184)) ([e09c26b](https://github.com/vuejs/core/commit/e09c26bc9bc4394c2c2d928806d382515c2676f3)), closes [#7095](https://github.com/vuejs/core/issues/7095)
+* correctly resolve types from relative paths on Windows ([#9446](https://github.com/vuejs/core/issues/9446)) ([089d36d](https://github.com/vuejs/core/commit/089d36d167dc7834065b03ca689f9b6a44eead8a)), closes [#8671](https://github.com/vuejs/core/issues/8671)
+* **hmr:** fix hmr error for hoisted children array in v-for ([7334376](https://github.com/vuejs/core/commit/733437691f70ebca8dd6cc3bc8356f5b57d4d5d8)), closes [#6978](https://github.com/vuejs/core/issues/6978) [#7114](https://github.com/vuejs/core/issues/7114)
+* **reactivity:** assigning array.length while observing a symbol property ([#7568](https://github.com/vuejs/core/issues/7568)) ([e9e2778](https://github.com/vuejs/core/commit/e9e2778e9ec5cca07c1df5f0c9b7b3595a1a3244))
+* **scheduler:** ensure jobs are in the correct order ([#7748](https://github.com/vuejs/core/issues/7748)) ([a8f6638](https://github.com/vuejs/core/commit/a8f663867b8cd2736b82204bc58756ef02441276)), closes [#7576](https://github.com/vuejs/core/issues/7576)
+* **ssr:** fix hydration mismatch for disabled teleport at component root ([#9399](https://github.com/vuejs/core/issues/9399)) ([d8990fc](https://github.com/vuejs/core/commit/d8990fc6182d1c2cf0a8eab7b35a9d04df668507)), closes [#6152](https://github.com/vuejs/core/issues/6152)
+* **Suspense:** calling hooks before the transition finishes ([#9388](https://github.com/vuejs/core/issues/9388)) ([00de3e6](https://github.com/vuejs/core/commit/00de3e61ed7a55e7d6c2e1987551d66ad0f909ff)), closes [#5844](https://github.com/vuejs/core/issues/5844) [#5952](https://github.com/vuejs/core/issues/5952)
+* **transition/ssr:** make transition appear work with SSR ([#8859](https://github.com/vuejs/core/issues/8859)) ([5ea8a8a](https://github.com/vuejs/core/commit/5ea8a8a4fab4e19a71e123e4d27d051f5e927172)), closes [#6951](https://github.com/vuejs/core/issues/6951)
+* **types:** fix ComponentCustomProps augmentation ([#9468](https://github.com/vuejs/core/issues/9468)) ([7374e93](https://github.com/vuejs/core/commit/7374e93f0281f273b90ab5a6724cc47332a01d6c)), closes [#8376](https://github.com/vuejs/core/issues/8376)
+* **types:** improve `h` overload to support union of string and component ([#5432](https://github.com/vuejs/core/issues/5432)) ([16ecb44](https://github.com/vuejs/core/commit/16ecb44c89cd8299a3b8de33cccc2e2cc36f065b)), closes [#5431](https://github.com/vuejs/core/issues/5431)
+
+
+
+## [3.3.6](https://github.com/vuejs/core/compare/v3.3.5...v3.3.6) (2023-10-20)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** model name conflict ([#8798](https://github.com/vuejs/core/issues/8798)) ([df81da8](https://github.com/vuejs/core/commit/df81da8be97c8a1366563c7e3e01076ef02eb8f7))
+* **compiler-sfc:** support asset paths containing spaces ([#8752](https://github.com/vuejs/core/issues/8752)) ([36c99a9](https://github.com/vuejs/core/commit/36c99a9c6bb6bc306be054c3c8a85ff8ce50605a))
+* **compiler-ssr:** fix missing scopeId on server-rendered TransitionGroup ([#7557](https://github.com/vuejs/core/issues/7557)) ([61c1357](https://github.com/vuejs/core/commit/61c135742795aa5e3189a79c7dec6afa21bbc8d9)), closes [#7554](https://github.com/vuejs/core/issues/7554)
+* **compiler-ssr:** fix ssr compile error for select with non-option children ([#9442](https://github.com/vuejs/core/issues/9442)) ([cdb2e72](https://github.com/vuejs/core/commit/cdb2e725e7ea297f1f4180fb04889a3b757bc84e)), closes [#9440](https://github.com/vuejs/core/issues/9440)
+* **runtime-core:** delete stale slots which are present but undefined ([#6484](https://github.com/vuejs/core/issues/6484)) ([75b8722](https://github.com/vuejs/core/commit/75b872213574cb37e2c9e8a15f65613f867ca9a6)), closes [#9109](https://github.com/vuejs/core/issues/9109)
+* **runtime-core:** fix error when using cssvars with disabled teleport ([#7341](https://github.com/vuejs/core/issues/7341)) ([8f0472c](https://github.com/vuejs/core/commit/8f0472c9abedb337dc256143b69d8ab8759dbf5c)), closes [#7342](https://github.com/vuejs/core/issues/7342)
+* **teleport:** ensure descendent component would be unmounted correctly ([#6529](https://github.com/vuejs/core/issues/6529)) ([4162311](https://github.com/vuejs/core/commit/4162311efdb0db5ca458542e1604b19efa2fae0e)), closes [#6347](https://github.com/vuejs/core/issues/6347)
+* **types:** support contenteditable="plaintext-only" ([#8796](https://github.com/vuejs/core/issues/8796)) ([26ca89e](https://github.com/vuejs/core/commit/26ca89e5cf734fbef81e182050d2a215ec8a437b))
+
+
+### Performance Improvements
+
+* replace Map/Set with WeakMap/WeakSet ([#8549](https://github.com/vuejs/core/issues/8549)) ([712f96d](https://github.com/vuejs/core/commit/712f96d6ac4d3d984732cba448cb84624daba850))
+
+
+
+## [3.3.5](https://github.com/vuejs/core/compare/v3.3.4...v3.3.5) (2023-10-20)
+
+
+### Bug Fixes
+
+* add isGloballyWhitelisted back, but deprecated ([#8556](https://github.com/vuejs/core/issues/8556)) ([63dfe8e](https://github.com/vuejs/core/commit/63dfe8eab499979bcc2f7829e82464e13899c895)), closes [#8416](https://github.com/vuejs/core/issues/8416)
+* **build:** disable useDefineForClassFields in esbuild ([#9252](https://github.com/vuejs/core/issues/9252)) ([6d14fa8](https://github.com/vuejs/core/commit/6d14fa88e85d4c9e264be394ddb37a54ca6738a8))
+* **compat:** return value of vue compat set() ([#9377](https://github.com/vuejs/core/issues/9377)) ([e3c2d69](https://github.com/vuejs/core/commit/e3c2d699f694d9500ddee78571172a24f0e3b17a))
+* **compiler-sfc:** don't hoist props and emit ([#8535](https://github.com/vuejs/core/issues/8535)) ([24db951](https://github.com/vuejs/core/commit/24db9516d8b4857182ec1a3af86cb7346691679b)), closes [#7805](https://github.com/vuejs/core/issues/7805) [#7812](https://github.com/vuejs/core/issues/7812)
+* **compiler-sfc:** don't registerTS when bundling for browsers ([#8582](https://github.com/vuejs/core/issues/8582)) ([6f45f76](https://github.com/vuejs/core/commit/6f45f76df2c43796b35067ef8f8b9a7bca454040))
+* **compiler-sfc:** fix using imported ref as template ref during dev ([#7593](https://github.com/vuejs/core/issues/7593)) ([776ebf2](https://github.com/vuejs/core/commit/776ebf25b2e7570e78ac1c148fc45c823c21a542)), closes [#7567](https://github.com/vuejs/core/issues/7567)
+* **compiler-sfc:** handle dynamic directive arguments in template usage check ([#8538](https://github.com/vuejs/core/issues/8538)) ([e404a69](https://github.com/vuejs/core/commit/e404a699f48ae5c5a5da947f42679343192158c7)), closes [#8537](https://github.com/vuejs/core/issues/8537)
+* **compiler-sfc:** ignore style v-bind in double slash comments ([#5409](https://github.com/vuejs/core/issues/5409)) ([381b497](https://github.com/vuejs/core/commit/381b4977af25ba5392704f72ec6b3f2394d87ae7))
+* **compiler-sfc:** pass options directly to stylus ([#3848](https://github.com/vuejs/core/issues/3848)) ([d6446a6](https://github.com/vuejs/core/commit/d6446a6d40774b79045a9ddba7b5fd5201d51450))
+* **compiler-sfc:** support resolve multiple re-export /w same source type name ([#8365](https://github.com/vuejs/core/issues/8365)) ([4fa8da8](https://github.com/vuejs/core/commit/4fa8da8576717c619e1e8c04d19038488c75fbea)), closes [#8364](https://github.com/vuejs/core/issues/8364)
+* **compiler-sfc:** typo in experimental feature warnings ([#8513](https://github.com/vuejs/core/issues/8513)) ([fd1a3f9](https://github.com/vuejs/core/commit/fd1a3f95990d7c372fa1c0c40c55caca761a33a4))
+* **deps:** update dependency monaco-editor to ^0.44.0 ([#9237](https://github.com/vuejs/core/issues/9237)) ([8611874](https://github.com/vuejs/core/commit/8611874e09a827b6491173836c8942284d5de22c))
+* **deps:** update playground ([#9154](https://github.com/vuejs/core/issues/9154)) ([c8566a2](https://github.com/vuejs/core/commit/c8566a22b7cf37e6aefab7bad7b97ce2db9fae4c))
+* **playground:** fix github button style ([#7722](https://github.com/vuejs/core/issues/7722)) ([5ee992c](https://github.com/vuejs/core/commit/5ee992cfeabc6c4b871980c6057d0ac7140ad2fa))
+* **runtime-core:** swap client/server debug labels ([#9089](https://github.com/vuejs/core/issues/9089)) ([8f311c6](https://github.com/vuejs/core/commit/8f311c6f823f6776ca1c49bfbbbf8c7d9dea9cf1))
+* **ssr:** render correct initial selected state for select with v-model ([#7432](https://github.com/vuejs/core/issues/7432)) ([201c46d](https://github.com/vuejs/core/commit/201c46df07a38f3c2b73f384e8e6846dc62f224e)), closes [#7392](https://github.com/vuejs/core/issues/7392)
+* **ssr:** reset current instance if setting up options component errors ([#7743](https://github.com/vuejs/core/issues/7743)) ([020851e](https://github.com/vuejs/core/commit/020851e57d9a9f727c6ea07e9c1575430af02b73)), closes [#7733](https://github.com/vuejs/core/issues/7733)
+* **teleport:** handle target change while disabled ([#7837](https://github.com/vuejs/core/issues/7837)) ([140a89b](https://github.com/vuejs/core/commit/140a89b833bceed60838182b875d2953c70af114)), closes [#7835](https://github.com/vuejs/core/issues/7835)
+* **transition:** handle possible auto value for transition/animation durations ([96c76fa](https://github.com/vuejs/core/commit/96c76facb7de37fc241ccd55e121fd60a49a1452)), closes [#8409](https://github.com/vuejs/core/issues/8409)
+* **types/jsx:** add `inert` attribute and missing `hidden` values ([#8090](https://github.com/vuejs/core/issues/8090)) ([ceb0732](https://github.com/vuejs/core/commit/ceb0732e0b1bb4c8c505d80e97ff6fc89035fa90))
+* **types/jsx:** add missing loading attr for img element ([#6160](https://github.com/vuejs/core/issues/6160)) ([68d6b43](https://github.com/vuejs/core/commit/68d6b43f7e29b76aab2c6c1882885380a43fa3e3))
+* **types:** correct withDefaults return type for boolean prop with undefined default value ([#8602](https://github.com/vuejs/core/issues/8602)) ([f07cb18](https://github.com/vuejs/core/commit/f07cb18fedf9a446545aadf76bcdfb957c7ebcbd))
+* **types:** ensure nextTick return type reflect correct Promise value ([#8406](https://github.com/vuejs/core/issues/8406)) ([6a22b1f](https://github.com/vuejs/core/commit/6a22b1f6c287b60eda385df8a514335af8e040ea))
+* **types:** support correct types for style on svg elements ([#6322](https://github.com/vuejs/core/issues/6322)) ([364dc53](https://github.com/vuejs/core/commit/364dc53c7cc6f97d812ad175199c698faa92538e))
+
+
+### Performance Improvements
+
+* **compiler-sfc:** lazy require typescript ([d2c3d8b](https://github.com/vuejs/core/commit/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f))
+* **custom-element:** cancel `MutationObserver` listener when disconnected ([#8666](https://github.com/vuejs/core/issues/8666)) ([24d98f0](https://github.com/vuejs/core/commit/24d98f03276de5b0fbced5a4c9d61b24e7d9d084))
+* mark `defineComponent` as side-effects-free ([#8512](https://github.com/vuejs/core/issues/8512)) ([438027c](https://github.com/vuejs/core/commit/438027cf9ecb63260f59d3027e0b188717694795))
+
+
+
+## [3.3.4](https://github.com/vuejs/core/compare/v3.3.3...v3.3.4) (2023-05-18)
+
+
+### Bug Fixes
+
+* **build:** ensure correct typing for node esm ([d621d4c](https://github.com/vuejs/core/commit/d621d4c646b2d7b190fbd44ad1fd04512b3de300))
+* **build:** fix __DEV__ flag replacement edge case ([8b7c04b](https://github.com/vuejs/core/commit/8b7c04b18f73aad9a08dd57eba90101b5b2aef28)), closes [#8353](https://github.com/vuejs/core/issues/8353)
+* **compiler-sfc:** handle imported types from default exports ([5aec717](https://github.com/vuejs/core/commit/5aec717a2402652306085f58432ba3ab91848a74)), closes [#8355](https://github.com/vuejs/core/issues/8355)
+
+
+
+## [3.3.3](https://github.com/vuejs/core/compare/v3.3.2...v3.3.3) (2023-05-18)
+
+
+### Bug Fixes
+
+* avoid regex s flag for old browsers ([91f1c62](https://github.com/vuejs/core/commit/91f1c62e6384a8b09f90e7e43b8d347901e529a0)), closes [#8316](https://github.com/vuejs/core/issues/8316)
+* **build:** fix dev flag replacement in esm-builder builds ([#8314](https://github.com/vuejs/core/issues/8314)) ([003836f](https://github.com/vuejs/core/commit/003836f90e1f00ebd04b77ec07ccfa4e649a2ff4)), closes [#8312](https://github.com/vuejs/core/issues/8312)
+* **compiler-sfc:** don't hoist regexp literial ([#8300](https://github.com/vuejs/core/issues/8300)) ([8ec73a3](https://github.com/vuejs/core/commit/8ec73a3aea7a52e9479f107ae5737761166ddae6))
+* **compiler-sfc:** fix props destructing default value type checking with unresolved type ([#8340](https://github.com/vuejs/core/issues/8340)) ([f69dbab](https://github.com/vuejs/core/commit/f69dbabf8794426c3e9ed33ae77dd8ce655eafd2)), closes [#8326](https://github.com/vuejs/core/issues/8326)
+* **compiler-sfc:** fix type import from path aliased vue file ([fab9c72](https://github.com/vuejs/core/commit/fab9c727805c6186c490f99023e8cf5401b0b5a9)), closes [#8348](https://github.com/vuejs/core/issues/8348)
+* **compiler-sfc:** handle ts files with relative imports with .js extension ([b36addd](https://github.com/vuejs/core/commit/b36addd3bde07467e9ff5641bd1c2bdc3085944c)), closes [#8339](https://github.com/vuejs/core/issues/8339)
+* **compiler-sfc:** parses correctly when inline mode is off ([#8337](https://github.com/vuejs/core/issues/8337)) ([ecbd42a](https://github.com/vuejs/core/commit/ecbd42a1444e3c599e464dec002e43d548d99669)), closes [#6088](https://github.com/vuejs/core/issues/6088)
+* **compiler-sfc:** support defineEmits type reference with unions ([#8299](https://github.com/vuejs/core/issues/8299)) ([b133e0f](https://github.com/vuejs/core/commit/b133e0fd97b0b4fabbb43151c19031b8fb47c05b)), closes [#7943](https://github.com/vuejs/core/issues/7943)
+* **types:** support generic usage with withDefaults + defineProps ([#8335](https://github.com/vuejs/core/issues/8335)) ([216f269](https://github.com/vuejs/core/commit/216f26995b63c2df26ca0f39f390fe8d59cdabfa)), closes [#8310](https://github.com/vuejs/core/issues/8310) [#8331](https://github.com/vuejs/core/issues/8331) [#8325](https://github.com/vuejs/core/issues/8325)
+
+
+
+## [3.3.2](https://github.com/vuejs/core/compare/v3.3.1...v3.3.2) (2023-05-12)
+
+
+### Bug Fixes
+
+* **compiler-core:** treat floating point numbers as constants ([8dc8cf8](https://github.com/vuejs/core/commit/8dc8cf852bf8057aa5c4b5670f09e8c28a168b73)), closes [#8295](https://github.com/vuejs/core/issues/8295)
+* **compiler-dom:** do not throw in production on side effect tags ([c454b9d](https://github.com/vuejs/core/commit/c454b9d7f431d57abedb7184d1e4059914c4463f)), closes [#8287](https://github.com/vuejs/core/issues/8287) [#8292](https://github.com/vuejs/core/issues/8292)
+* **compiler-sfc:** fix regression on props destructure when transform is not enabled ([f25bd37](https://github.com/vuejs/core/commit/f25bd37c6707fde19d164d90a38de41168941f4b)), closes [#8289](https://github.com/vuejs/core/issues/8289)
+* **compiler-sfc:** handle prop keys that need escaping ([#7803](https://github.com/vuejs/core/issues/7803)) ([690ef29](https://github.com/vuejs/core/commit/690ef296357c7fc09f66ba9408df548e117f686f)), closes [#8291](https://github.com/vuejs/core/issues/8291)
+* **compiler-sfc:** properly parse d.ts files when resolving types ([aa1e77d](https://github.com/vuejs/core/commit/aa1e77d532b951ea5d3a5e26214a8b0c9c02fb6f)), closes [#8285](https://github.com/vuejs/core/issues/8285)
+* **compiler-sfc:** raise specific warning for failed extends and allow ignoring extends ([8235072](https://github.com/vuejs/core/commit/82350721a408e1f552c613c05971439d6c218d87)), closes [#8286](https://github.com/vuejs/core/issues/8286)
+
+
+
+## [3.3.1](https://github.com/vuejs/core/compare/v3.3.0...v3.3.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* **suspense:** handle nested sync suspense for hydration ([a3f5485](https://github.com/vuejs/core/commit/a3f54857858c8ca0e6b9f12618d151ab255fb040))
+
+
+
+# [3.3.0 Rurouni Kenshin](https://github.com/vuejs/core/compare/v3.3.0-beta.5...v3.3.0) (2023-05-11)
+
+- For a detailed walkthrough of the new features in 3.3, please read the [release blog post](https://blog.vuejs.org/posts/vue-3-3).
+
+- Features and deprecations listed here are aggregated from the beta and alpha releases. For full chronological history, bug fixes, and other minor features, please consult the individual logs of the 3.3 beta and alpha releases.
+
+## Features
+
+* **sfc:** support imported types in SFC macros ([#8083](https://github.com/vuejs/core/pull/8083))
+* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
+* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
+* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
+* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
+* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
+* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
+* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
+* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
+* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
+* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
+* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
+* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
+* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
+* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
+* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+
+## Deprecations
+
+* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
+* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
+* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
+
+# [3.3.0-beta.5](https://github.com/vuejs/core/compare/v3.3.0-beta.4...v3.3.0-beta.5) (2023-05-08)
+
+
+### Bug Fixes
+
+* **build:** retain defineComponent() treeshakability in Rollup ([c2172f3](https://github.com/vuejs/core/commit/c2172f3a0ebbd7153e209dd8df6d9724bc524d9a)), closes [#8236](https://github.com/vuejs/core/issues/8236)
+* **compiler-sfc:** enable props destructure when reactivity transform option is enabled ([862edfd](https://github.com/vuejs/core/commit/862edfd91a2c2f6b75f943cb1a9682c4be5d7fa8))
+* **compiler-sfc:** fix built-in type resolving in external files ([6b194bc](https://github.com/vuejs/core/commit/6b194bcf3b8143895c2a472cd87998ebf9856146)), closes [#8244](https://github.com/vuejs/core/issues/8244)
+* **compiler-sfc:** transform destructured props when reactivity transform option is enabled ([#8252](https://github.com/vuejs/core/issues/8252)) ([287bd99](https://github.com/vuejs/core/commit/287bd999942e58925377f50540c7134cff2a9279))
+* **runtime-core:** ensure defineComponent name in extraOptions takes higher priority ([b2be75b](https://github.com/vuejs/core/commit/b2be75bad4ba70da1da6930eb914e51ce2c630b2))
+* **runtime-dom:** check attribute value when setting option value ([#8246](https://github.com/vuejs/core/issues/8246)) ([4495373](https://github.com/vuejs/core/commit/4495373d28d9fa4479eedd224adb16248ae0b9f4)), closes [#8227](https://github.com/vuejs/core/issues/8227)
+* **suspense:** fix nested suspensible suspense with no asyn deps ([e147512](https://github.com/vuejs/core/commit/e1475129fc6f8c086c2ec667476900b8c8f46774)), closes [#8206](https://github.com/vuejs/core/issues/8206)
+* **types:** remove short syntax support in defineSlots() ([1279b17](https://github.com/vuejs/core/commit/1279b1730079f77692a0817d51bbba57eb2b871b))
+
+
+
+# [3.3.0-beta.4](https://github.com/vuejs/core/compare/v3.3.0-beta.3...v3.3.0-beta.4) (2023-05-05)
+
+
+### Bug Fixes
+
+* **runtime-core:** handle template ref with number values ([#8233](https://github.com/vuejs/core/issues/8233)) ([1b1242f](https://github.com/vuejs/core/commit/1b1242f4d1349e361335b2815f41742d41283a94)), closes [#8230](https://github.com/vuejs/core/issues/8230)
+* **types:** retain compatibility for provide() usage with explicit type parameter ([038cd83](https://github.com/vuejs/core/commit/038cd830d5b34b47d7e7e1c61f0973d27cd8b915))
+
+
+### Features
+
+* **compiler-dom:** treat inert as boolean attribute ([#8209](https://github.com/vuejs/core/issues/8209)) ([918ec8a](https://github.com/vuejs/core/commit/918ec8a5cbc825a3947cd35fe966671c245af087)), closes [#8208](https://github.com/vuejs/core/issues/8208)
+* **types:** add slots types for built-in components ([#6033](https://github.com/vuejs/core/issues/6033)) ([3cb4dc9](https://github.com/vuejs/core/commit/3cb4dc9e5538e1c2bde9fa691b001615a848c546))
+* **types:** provide ExtractPublicPropTypes utility type ([bff63c5](https://github.com/vuejs/core/commit/bff63c5498f5fa098689c18defe48ae08d47eadb)), closes [#5272](https://github.com/vuejs/core/issues/5272) [#8168](https://github.com/vuejs/core/issues/8168)
+
+
+
+# [3.3.0-beta.3](https://github.com/vuejs/core/compare/v3.3.0-beta.2...v3.3.0-beta.3) (2023-05-01)
+
+
+### Bug Fixes
+
+* **compiler-core:** handle slot argument parsing edge case ([b434d12](https://github.com/vuejs/core/commit/b434d12bf6cbd49a7c99b1646d9517d8393ea49f))
+* **hmr:** keep slots proxy mutable for hmr ([c117d9c](https://github.com/vuejs/core/commit/c117d9c257820481b85304db26ce5c77af5d050c)), closes [#8188](https://github.com/vuejs/core/issues/8188)
+* **types:** fix provide type checking for ref value ([de87e6e](https://github.com/vuejs/core/commit/de87e6e405dfaf9a917d7eb423fcee35237c2020)), closes [#8201](https://github.com/vuejs/core/issues/8201)
+
+
+### Features
+
+* **compiler-sfc:** expose parseCache ([4576548](https://github.com/vuejs/core/commit/45765488d498d94f8760c9e82f1177070057b17c)), closes [#8202](https://github.com/vuejs/core/issues/8202)
+
+
+
+# [3.3.0-beta.2](https://github.com/vuejs/core/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-04-25)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** avoid all hard errors when inferring runtime type ([2d9f6f9](https://github.com/vuejs/core/commit/2d9f6f926453c46f542789927bcd30d15da9c24b))
+* **compiler-sfc:** normalize windows paths when resolving types ([#8136](https://github.com/vuejs/core/issues/8136)) ([29da504](https://github.com/vuejs/core/commit/29da50468770fcee16ba5d5bec7166dd5bc120ee))
+* **compiler-sfc:** props bindings should not override user declared bindings ([433a58c](https://github.com/vuejs/core/commit/433a58ccb61c25512dcc3df155b8e285256917ef)), closes [#8148](https://github.com/vuejs/core/issues/8148)
+
+
+### Features
+
+* **compiler-sfc:** support project references when resolving types ([1c0be5c](https://github.com/vuejs/core/commit/1c0be5c7444966fa444460e87633cf44ec60292a)), closes [#8140](https://github.com/vuejs/core/issues/8140)
+
+
+### Performance Improvements
+
+* **compiler-sfc:** infer ref binding type for more built-in methods ([a370e80](https://github.com/vuejs/core/commit/a370e8006a70ea49a7d04c8c1a42d0947eba5dea))
+
+
+
+# [3.3.0-beta.1](https://github.com/vuejs/core/compare/v3.3.0-alpha.13...v3.3.0-beta.1) (2023-04-21)
+
+
+### Features
+
+* allow accessing console in template ([#6508](https://github.com/vuejs/core/issues/6508)) ([fe76224](https://github.com/vuejs/core/commit/fe762247f8035d28d543bc5602ad01b0c258f6d6)), closes [#7939](https://github.com/vuejs/core/issues/7939)
+* **compiler-sfc:** improve utility type Partial and Required ([#8103](https://github.com/vuejs/core/issues/8103)) ([1d1d728](https://github.com/vuejs/core/commit/1d1d72894995fde14bd09e2990462c19d5176bf9))
+* **deprecation:** deprecate [@vnode](https://github.com/vnode) hooks in favor of vue: prefix ([5f0394a](https://github.com/vuejs/core/commit/5f0394a5ab88c82c74e240161499721f63d5462e))
+* **deprecation:** deprecate v-is directive ([bbd8301](https://github.com/vuejs/core/commit/bbd8301a1344b02de635ea16d4822db1c343bd12))
+* **deprecation:** unwrap injected refs in Options API by default, deprecate app.config.unwrapInjectedRefs ([526fa3b](https://github.com/vuejs/core/commit/526fa3b2ccf038375e76f8af2f1ddf79a7388878))
+* **suspense:** introduce suspensible option for `<Suspense>` ([#6736](https://github.com/vuejs/core/issues/6736)) ([cb37d0b](https://github.com/vuejs/core/commit/cb37d0b9ffb5d4bb81a0367d84295dec8dd4448c)), closes [#5513](https://github.com/vuejs/core/issues/5513)
+
+
+
+# [3.3.0-alpha.13](https://github.com/vuejs/core/compare/v3.3.0-alpha.12...v3.3.0-alpha.13) (2023-04-20)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** handle type merging + fix namespace access when inferring type ([d53e157](https://github.com/vuejs/core/commit/d53e157805678db7a3b9ca2fccc74530e1dfbc48)), closes [#8102](https://github.com/vuejs/core/issues/8102)
+* **compiler-sfc:** normalize filename when invalidating cache ([9b5a34b](https://github.com/vuejs/core/commit/9b5a34bf8c0d1b4c6ec3cf1434076b7e25065f84))
+* **hmr:** always traverse static children in dev ([f17a82c](https://github.com/vuejs/core/commit/f17a82c769cfb60ee6785ef5d34d91191d153542)), closes [#7921](https://github.com/vuejs/core/issues/7921) [#8100](https://github.com/vuejs/core/issues/8100)
+* **hmr:** force update cached slots during HMR ([94fa67a](https://github.com/vuejs/core/commit/94fa67a4f73b3646c8c1e29512a71b17bd56efc3)), closes [#7155](https://github.com/vuejs/core/issues/7155) [#7158](https://github.com/vuejs/core/issues/7158)
+
+
+### Features
+
+* **compiler-sfc:** support dynamic imports when resolving types ([4496456](https://github.com/vuejs/core/commit/4496456d7d9947560ef1e35ccb176b97a27bd8f4))
+* **compiler-sfc:** support export * when resolving types ([7c3ca3c](https://github.com/vuejs/core/commit/7c3ca3cc3e122fe273e80a950c57d492a7f0bf4a))
+* **compiler-sfc:** support ExtractPropTypes when resolving types ([50c0bbe](https://github.com/vuejs/core/commit/50c0bbe5221dbc1dc353d4960e69ec7c8ba12905)), closes [#8104](https://github.com/vuejs/core/issues/8104)
+* hasInjectionContext() for libraries ([#8111](https://github.com/vuejs/core/issues/8111)) ([5510ce3](https://github.com/vuejs/core/commit/5510ce385abfa151c07a5253cccf4abccabdd01d))
+
+
+
+# [3.3.0-alpha.12](https://github.com/vuejs/core/compare/v3.3.0-alpha.11...v3.3.0-alpha.12) (2023-04-18)
+
+
+### Bug Fixes
+
+* **compiler:** fix expression codegen for literal const bindings in non-inline mode ([0f77a2b](https://github.com/vuejs/core/commit/0f77a2b1d1047d66ccdfda70382d1a223886130c))
+
+
+
+# [3.3.0-alpha.11](https://github.com/vuejs/core/compare/v3.3.0-alpha.10...v3.3.0-alpha.11) (2023-04-17)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** normalize windows paths when resolving types ([271df09](https://github.com/vuejs/core/commit/271df09470c61d073185ba6cf3cf50358713c500))
+
+
+
+# [3.3.0-alpha.10](https://github.com/vuejs/core/compare/v3.3.0-alpha.9...v3.3.0-alpha.10) (2023-04-17)
+
+
+### Bug Fixes
+
+* **hmr:** invalidate cached props/emits options on hmr ([4b5b384](https://github.com/vuejs/core/commit/4b5b384485cf8f6124f6738b89e3d047358f3a11))
+* **runtime-core:** properly merge props and emits options from mixins ([#8052](https://github.com/vuejs/core/issues/8052)) ([c94ef02](https://github.com/vuejs/core/commit/c94ef02421d7422bc59d10cf2eee9f4e7dcea6c8)), closes [#7989](https://github.com/vuejs/core/issues/7989)
+
+
+### Features
+
+* **compiler-sfc:** expose type import deps on compiled script block ([8d8ddd6](https://github.com/vuejs/core/commit/8d8ddd686c832b2ea29b87ef47666b13c4ad5d4c))
+* **compiler-sfc:** expose type resolve APIs ([f22e32e](https://github.com/vuejs/core/commit/f22e32e365bf6292cb606cb7289609e82da8b790))
+* **compiler-sfc:** mark props destructure as experimental and require explicit opt-in ([6b13e04](https://github.com/vuejs/core/commit/6b13e04b4c83fcdbb180dc1d59f536a1309c2960))
+* **compiler-sfc:** support intersection and union types in macros ([d1f973b](https://github.com/vuejs/core/commit/d1f973bff82581fb335d6fc05623d1ad3d84fb7c)), closes [#7553](https://github.com/vuejs/core/issues/7553)
+* **compiler-sfc:** support limited built-in utility types in macros ([1cfab4c](https://github.com/vuejs/core/commit/1cfab4c695b0c28f549f8c97faee5099581792a7))
+* **compiler-sfc:** support mapped types, string types & template type in macros ([fb8ecc8](https://github.com/vuejs/core/commit/fb8ecc803e58bfef0971346c63fefc529812daa7))
+* **compiler-sfc:** support namespace members type in macros ([5ff40bb](https://github.com/vuejs/core/commit/5ff40bb0dc2918b7db15fe9f49db2a135a925572))
+* **compiler-sfc:** support relative imported types in macros ([8aa4ea8](https://github.com/vuejs/core/commit/8aa4ea81d6e4d3110aa1619cca594543da4c9b63))
+* **compiler-sfc:** support resolving type imports from modules ([3982bef](https://github.com/vuejs/core/commit/3982bef533b451d1b59fa243560184a13fe8c18c))
+* **compiler-sfc:** support specifying global types for sfc macros ([4e028b9](https://github.com/vuejs/core/commit/4e028b966991937c83fb2529973fd3d41080bb61)), closes [/github.com/vuejs/core/pull/8083#issuecomment-1508468713](https://github.com//github.com/vuejs/core/pull/8083/issues/issuecomment-1508468713)
+* **compiler-sfc:** support string indexed type in macros ([3f779dd](https://github.com/vuejs/core/commit/3f779ddbf85054c8915fa4537f8a79baab392d5c))
+* **compiler-sfc:** support string/number indexed types in macros ([760755f](https://github.com/vuejs/core/commit/760755f4f83680bee13ad546cdab2e48ade38dff))
+
+
+### Performance Improvements
+
+* **compiler:** use source-map-js ([19e17a9](https://github.com/vuejs/core/commit/19e17a951c3387cbd6a1597e6cd9048a4aad4528))
+
+
+
+# [3.3.0-alpha.9](https://github.com/vuejs/core/compare/v3.3.0-alpha.8...v3.3.0-alpha.9) (2023-04-08)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** accept `StringLiteral` node in `defineEmit` tuple syntax ([#8041](https://github.com/vuejs/core/issues/8041)) ([3ccbea0](https://github.com/vuejs/core/commit/3ccbea08e09217b50a410d7b49ebb138e0c4c1e7)), closes [#8040](https://github.com/vuejs/core/issues/8040)
+* **compiler-sfc:** fix binding type for constants when hoistStatic is disabled ([#8029](https://github.com/vuejs/core/issues/8029)) ([f7f4624](https://github.com/vuejs/core/commit/f7f4624191bbdc09600dbb0eb048b947c3a4f761))
+* **compiler-sfc:** skip empty `defineOptions` and support TypeScript type assertions ([#8028](https://github.com/vuejs/core/issues/8028)) ([9557529](https://github.com/vuejs/core/commit/955752951e1d31b90d817bd20830fe3f89018771))
+* **compiler-ssr:** disable v-once transform in ssr vdom fallback branch ([05f94cf](https://github.com/vuejs/core/commit/05f94cf7b01dd05ed7d3170916a38b175d5df292)), closes [#7644](https://github.com/vuejs/core/issues/7644)
+* **types:** improve defineProps return type with generic arguments ([91a931a](https://github.com/vuejs/core/commit/91a931ae8707b8d43f10216e1ce8e18b12158f99))
+* **types:** more public type argument order fix ([af563bf](https://github.com/vuejs/core/commit/af563bf428200367b6f5bb7944f690c85d810202))
+* **types:** retain type parameters order for public types ([bdf557f](https://github.com/vuejs/core/commit/bdf557f6f233c039fff8007b1b16aec00c4e68aa))
+
+
+### Features
+
+* **app:** app.runWithContext() ([#7451](https://github.com/vuejs/core/issues/7451)) ([869f3fb](https://github.com/vuejs/core/commit/869f3fb93e61400be4fd925e0850c2b1564749e2))
+* **sfc:** introduce `defineModel` macro and `useModel` helper ([#8018](https://github.com/vuejs/core/issues/8018)) ([14f3d74](https://github.com/vuejs/core/commit/14f3d747a34d45415b0036b274517d70a27ec0d3))
+
+
+### Reverts
+
+* Revert "chore: remove unused args passed to ssrRender" ([b117b88](https://github.com/vuejs/core/commit/b117b8844881a732a021432066230ff2215049ea))
+
+
+
+# [3.3.0-alpha.8](https://github.com/vuejs/core/compare/v3.3.0-alpha.7...v3.3.0-alpha.8) (2023-04-04)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** check binding is prop before erroring ([f3145a9](https://github.com/vuejs/core/commit/f3145a915aaec11c915f1df258c5209ae4782bcc)), closes [#8017](https://github.com/vuejs/core/issues/8017)
+
+
+
+# [3.3.0-alpha.7](https://github.com/vuejs/core/compare/v3.3.0-alpha.6...v3.3.0-alpha.7) (2023-04-03)
+
+
+### Bug Fixes
+
+* **compiler-dom:** handle newlines when evaluating constants during stringification ([#7995](https://github.com/vuejs/core/issues/7995)) ([5261085](https://github.com/vuejs/core/commit/52610851137b9c5f6f57d771fd604fba309b3c97)), closes [#7994](https://github.com/vuejs/core/issues/7994)
+* **compiler-sfc:** use dynamic defaults merging for methods with computed keys ([482f2e3](https://github.com/vuejs/core/commit/482f2e3434a1edc47a181890354838e206d08922)), closes [#7113](https://github.com/vuejs/core/issues/7113)
+
+
+### Features
+
+* **compiler-sfc:** codegen support for defineEmits() short syntax (followup of [#7992](https://github.com/vuejs/core/issues/7992)) ([ef73ea5](https://github.com/vuejs/core/commit/ef73ea53eaf853d43e70946d2d448ae8c0a83e4f))
+* **compiler-sfc:** support arbitrary expression as withDefaults argument ([fe61944](https://github.com/vuejs/core/commit/fe619443d2e99301975de120685dbae8d66c03a6)), closes [#6459](https://github.com/vuejs/core/issues/6459)
+* **reactivity:** improve support of getter usage in reactivity APIs ([#7997](https://github.com/vuejs/core/issues/7997)) ([59e8284](https://github.com/vuejs/core/commit/59e828448e7f37643cd0eaea924a764e9d314448))
+* **sfc:** revert withDefaults() deprecation ([4af5d1b](https://github.com/vuejs/core/commit/4af5d1b0754035058436f9e4e5c12aedef199177))
+* **sfc:** support more ergnomic defineEmits type syntax ([#7992](https://github.com/vuejs/core/issues/7992)) ([8876dcc](https://github.com/vuejs/core/commit/8876dccf42a7f05375d97cb18c1afdfd0fc51c94))
+* **types/slots:** support slot presence / props type checks via `defineSlots` macro and `slots` option ([#7982](https://github.com/vuejs/core/issues/7982)) ([5a2f5d5](https://github.com/vuejs/core/commit/5a2f5d59cffa36a99e6f2feab6b3ba7958b7362f))
+
+
+
+# [3.3.0-alpha.6](https://github.com/vuejs/core/compare/v3.3.0-alpha.5...v3.3.0-alpha.6) (2023-03-30)
+
+
+### Bug Fixes
+
+* **compiler-core:** check if expression is constant ([#7974](https://github.com/vuejs/core/issues/7974)) ([77686cf](https://github.com/vuejs/core/commit/77686cf4765e7e345bef364c0b03739e3c2da91d)), closes [#7973](https://github.com/vuejs/core/issues/7973)
+* **compiler-core:** fix codegen for literal const in non-inline mode ([6bda4b6](https://github.com/vuejs/core/commit/6bda4b66886240b28993c88b7ecd4640a199be65))
+* **compiler-sfc:** allow `<script>` with lang='js' ([#7398](https://github.com/vuejs/core/issues/7398)) ([9f5e20c](https://github.com/vuejs/core/commit/9f5e20ccff235946159f0e50519f5be09bc89d5b))
+* **compiler-sfc:** avoid codegen conflict with user variable named `expose` ([#7949](https://github.com/vuejs/core/issues/7949)) ([c839129](https://github.com/vuejs/core/commit/c839129ab9d46f56a019b0ff234b35f27cac1e35)), closes [#7890](https://github.com/vuejs/core/issues/7890)
+* **compiler-sfc:** disallow `expose` property in `defineOptions` ([#7967](https://github.com/vuejs/core/issues/7967)) ([93f7729](https://github.com/vuejs/core/commit/93f77292c9f2c4dcc83aae6b5943a8b1d7443092))
+* **compiler-sfc:** fix defineExpose() codegen regression from [#7949](https://github.com/vuejs/core/issues/7949) ([a94072d](https://github.com/vuejs/core/commit/a94072dd2ca1aca4ce1fbe5da51ca2a9a07a4637))
+* **compiler-sfc:** fix edge case of default export call with no args ([#7536](https://github.com/vuejs/core/issues/7536)) ([d60e58c](https://github.com/vuejs/core/commit/d60e58c9f62ae7bd1f9c888cd2e55982a64d9e96)), closes [#7534](https://github.com/vuejs/core/issues/7534)
+* **compiler-sfc:** fix function default value handling w/ props destructure ([e10a89e](https://github.com/vuejs/core/commit/e10a89e608d3486c0c9a0457ee7c56d208e0aa91))
+* **compiler-sfc:** handle more TS built-in utilities in defineProps inference ([4355d24](https://github.com/vuejs/core/commit/4355d2492dccdb175b18d083e20f3ec39a52801f))
+* **compiler-sfc:** infer function prop type from type literal w/ callable signature ([#7119](https://github.com/vuejs/core/issues/7119)) ([3a7572c](https://github.com/vuejs/core/commit/3a7572cdb2074c5cac2231e4525296104141411c))
+* **compiler-sfc:** infer object type for empty type literal ([1a04fba](https://github.com/vuejs/core/commit/1a04fba10b6462303c65f1095da86ce05c14f1f4))
+* **compiler-sfc:** infer runtime type in defineProps ([#7972](https://github.com/vuejs/core/issues/7972)) ([ba4cec3](https://github.com/vuejs/core/commit/ba4cec31b91da60555892c381b00c2fa5b3e0e39))
+* **compiler-sfc:** infer TS Extract&Exclude runtime type ([#7339](https://github.com/vuejs/core/issues/7339)) ([6391daf](https://github.com/vuejs/core/commit/6391daf6586e49e165b3195863b602c3cbb92ace)), closes [#7337](https://github.com/vuejs/core/issues/7337) [#6252](https://github.com/vuejs/core/issues/6252)
+* **compiler-sfc:** infer TSIntersectionType in defineProps ([#7394](https://github.com/vuejs/core/issues/7394)) ([151a8ad](https://github.com/vuejs/core/commit/151a8ad6b9288784c3b2514820a112b93ecf2dca))
+* **compiler-sfc:** properly handle unknown types in runtime prop inference ([5fb406e](https://github.com/vuejs/core/commit/5fb406e3e1d585076779e9ce4a588a4f9a61ef23)), closes [#7511](https://github.com/vuejs/core/issues/7511)
+* **compiler-sfc:** properly remove comma of multiple macros in the same declaration ([#7423](https://github.com/vuejs/core/issues/7423)) ([336a3d7](https://github.com/vuejs/core/commit/336a3d7b9199aeda19672832ce173de298b1105a)), closes [#7422](https://github.com/vuejs/core/issues/7422) [#6778](https://github.com/vuejs/core/issues/6778)
+* **compiler-sfc:** rewrite default export with AST analysis instead of regex ([#7068](https://github.com/vuejs/core/issues/7068)) ([701b95f](https://github.com/vuejs/core/commit/701b95ff3d2bad0284c03865a0b052fc8324beec)), closes [#7038](https://github.com/vuejs/core/issues/7038) [#7041](https://github.com/vuejs/core/issues/7041) [#7078](https://github.com/vuejs/core/issues/7078)
+* **compiler-sfc:** unwrap TS node for defineProps ([#7340](https://github.com/vuejs/core/issues/7340)) ([1b69d5f](https://github.com/vuejs/core/commit/1b69d5f2f49ee60af4b10137c7833a76420dbba1))
+* **compiler-sfc:** use prependLeft to handle CSSVars ([#7760](https://github.com/vuejs/core/issues/7760)) ([139104b](https://github.com/vuejs/core/commit/139104ba2695eecae672db98f978de78e17ab7e1))
+* **jsx-runtime:** fix automatic runtime implementation ([#7959](https://github.com/vuejs/core/issues/7959)) ([5838950](https://github.com/vuejs/core/commit/5838950ecf7e4e17dd5a23acd621077390666b76))
+* **jsx-runtime:** handle keys ([#7976](https://github.com/vuejs/core/issues/7976)) ([ff60b93](https://github.com/vuejs/core/commit/ff60b933ae4e02422393664ee7818cffadf9b58b))
+* **types/jsx:** jsx-runtime types for global JSX namespace registration ([#7978](https://github.com/vuejs/core/issues/7978)) ([0f73f39](https://github.com/vuejs/core/commit/0f73f394dafd709298bd8c71107a323bf322a1d2))
+* **types/jsx:** move JSX DOM types back to `@vue/runtime-dom` ([#7979](https://github.com/vuejs/core/issues/7979)) ([ffe679c](https://github.com/vuejs/core/commit/ffe679c490986b69956daec7166f1ab6d9f23073))
+* **types/jsx:** remove $slots children override ([28e30c8](https://github.com/vuejs/core/commit/28e30c819df5e4fc301c98f7be938fa13e8be3bc))
+* **types:** revert jsx global removal (to be removed in 3.4) ([e224922](https://github.com/vuejs/core/commit/e224922e972e78b4fb6cbd129d685c2317018ad1))
+
+
+### Features
+
+* **compiler-core:** support parsing `const` modifier in type parameters ([#7912](https://github.com/vuejs/core/issues/7912)) ([b7bd50f](https://github.com/vuejs/core/commit/b7bd50f5059e8755c0204f01a8c55b1724688e7e))
+* **compiler-sfc:** add defineOptions macro ([#5738](https://github.com/vuejs/core/issues/5738)) ([bcf5841](https://github.com/vuejs/core/commit/bcf5841ddecc64d0bdbd56ce1463eb8ebf01bb9d))
+* **compiler-sfc:** enable reactive props destructure by default ([#7986](https://github.com/vuejs/core/issues/7986)) ([ba9c2ae](https://github.com/vuejs/core/commit/ba9c2ae247fcc3960b238a04cb635158daa82004))
+* **compiler-sfc:** improve runtime props inference for enum ([eded947](https://github.com/vuejs/core/commit/eded94712e37856f258dc8c85f98a26fa41ae05f))
+* **compiler-sfc:** support generating variable instead of default export in compileScript ([71635be](https://github.com/vuejs/core/commit/71635be68d25887f91d624bb7f78281a851bc0cb))
+* **compiler-sfc:** support module string names syntax ([#7428](https://github.com/vuejs/core/issues/7428)) ([0002567](https://github.com/vuejs/core/commit/000256772816d54976e462330a7be342c49c7304))
+* **complier-sfc:** hoist literal constants for script ([#5752](https://github.com/vuejs/core/issues/5752)) ([7def8b1](https://github.com/vuejs/core/commit/7def8b15b89aa78accd9a00927db91e8091a12b7)), closes [#5750](https://github.com/vuejs/core/issues/5750)
+* **runtime-core:** add skipCheck for prop ([#7548](https://github.com/vuejs/core/issues/7548)) ([63ad77f](https://github.com/vuejs/core/commit/63ad77f6f65751780aa52f817387165b4773cfe4))
+* **sfc:** deprecate reactivity transform ([efb54e7](https://github.com/vuejs/core/commit/efb54e7315e93f4be7004d1c0a4de8c523dab334))
+* **types:** `defineComponent()` with generics support ([#7963](https://github.com/vuejs/core/issues/7963)) ([d77557c](https://github.com/vuejs/core/commit/d77557c4038f88a676903b379505b280a88cc774)), closes [#3102](https://github.com/vuejs/core/issues/3102)
+
+
+### BREAKING CHANGES
+
+* **types:** The type of `defineComponent()` when passing in a function has changed. This overload signature is rarely used in practice and the breakage will be minimal, so repurposing it to something more useful should be worth it.
+
+
+
+# [3.3.0-alpha.5](https://github.com/vuejs/core/compare/v3.3.0-alpha.4...v3.3.0-alpha.5) (2023-03-26)
+
+### Bug Fixes
+
+* **runtime-core:** support `getCurrentInstance` across mutiple builds of Vue ([8d2d5bf](https://github.com/vuejs/core/commit/8d2d5bf48a24dab44e5b03cb8fa0c5faa4b696e3))
+* **types:** ensure defineProps with generics return correct types ([c288c7b](https://github.com/vuejs/core/commit/c288c7b0bd6077d690f42153c3fc49a45454a66a))
+
+
+### Features
+
+* **dx:** improve readability of displayed types for props ([4c9bfd2](https://github.com/vuejs/core/commit/4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e))
+* **types/jsx:** support jsxImportSource, avoid global JSX conflict ([#7958](https://github.com/vuejs/core/issues/7958)) ([d0b7ef3](https://github.com/vuejs/core/commit/d0b7ef3b61d5f83e35e5854b3c2c874e23463102))
+
+### Note on JSX Types Change
+
+* In the next minor (3.4), Vue no longer registers the global `JSX` namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.
+
+  For TSX users, it is suggested to set [jsxImportSource](https://www.typescriptlang.org/tsconfig#jsxImportSource) to `'vue'` in `tsconfig.json` after upgrading to 3.3, or opt-in per file with `/* @jsxImportSource vue */`. This will allow you to opt-in to the new behavior now and upgrade seamlessly when 3.4 releases.
+
+  If there is code that depends on the presence of the global `JSX` namespace,  you can retain the exact pre-3.4 global behavior by explicitly referencing `vue/jsx`, which registers the global `JSX` namespace.
+
+  Note that the planned change in 3.4 is a type-only breaking change in a minor release, which adheres to our [release policy](https://vuejs.org/about/releases.html#semantic-versioning-edge-cases).
+
+# [3.3.0-alpha.4](https://github.com/vuejs/core/compare/v3.3.0-alpha.3...v3.3.0-alpha.4) (2023-02-06)
+
+
+### Bug Fixes
+
+* **build:** fix const enum w/ number values ([92bb189](https://github.com/vuejs/core/commit/92bb189ca7ecae221ebf5411da87c715780d2de3))
+
+
+
+# [3.3.0-alpha.3](https://github.com/vuejs/core/compare/v3.3.0-alpha.2...v3.3.0-alpha.3) (2023-02-06)
+
+
+### Bug Fixes
+
+* **build:** avoid const enum conflicts ([d1181ad](https://github.com/vuejs/core/commit/d1181ad692861c140e687372efbc67a1d65d642a))
+
+
+
+# [3.3.0-alpha.2](https://github.com/vuejs/core/compare/v3.3.0-alpha.1...v3.3.0-alpha.2) (2023-02-05)
+
+
+### Bug Fixes
+
+* **build:** fix dev flag replacement in esm-bundler builds ([5851eaa](https://github.com/vuejs/core/commit/5851eaa9339364d41860a277a99f2352de2a3834))
+
+
+
+# [3.3.0-alpha.1](https://github.com/vuejs/core/compare/v3.2.47...v3.3.0-alpha.1) (2023-02-05)
+
+
+### Bug Fixes
+
+* **build:** ensure BaseTransition functions can be tree-shaken ([3a6f5eb](https://github.com/vuejs/core/commit/3a6f5eb0f7d60dc87d17a69c66e88ae5688b11a5))
diff --git a/package.json b/package.json
index d28f5a77c45..9f894fa57f8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
-  "version": "3.3.5",
-  "packageManager": "pnpm@8.9.2",
+  "version": "3.4.19",
+  "packageManager": "pnpm@8.15.1",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
@@ -13,28 +13,30 @@
     "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime",
     "size-esm": "node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler",
     "check": "tsc --incremental --noEmit",
-    "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
-    "format": "prettier --write --cache \"**/*.[tj]s?(x)\"",
-    "format-check": "prettier --check --cache \"**/*.[tj]s?(x)\"",
+    "lint": "eslint --cache --ext .js,.ts,.tsx . --ignore-path .gitignore",
+    "format": "prettier --write --cache .",
+    "format-check": "prettier --check --cache .",
     "test": "vitest",
     "test-unit": "vitest -c vitest.unit.config.ts",
     "test-e2e": "node scripts/build.js vue -f global -d && vitest -c vitest.e2e.config.ts",
     "test-dts": "run-s build-dts test-dts-only",
     "test-dts-only": "tsc -p ./packages/dts-test/tsconfig.test.json",
     "test-coverage": "vitest -c vitest.unit.config.ts --coverage",
+    "test-bench": "vitest bench",
     "release": "node scripts/release.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
     "dev-compiler": "run-p \"dev template-explorer\" serve",
     "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",
-    "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-compiler-cjs",
+    "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-all-cjs",
     "dev-sfc-serve": "vite packages/sfc-playground --host",
-    "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
+    "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-all-cjs": "node scripts/build.js vue runtime compiler reactivity reactivity-transform shared -af cjs",
+    "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 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",
@@ -42,14 +44,14 @@
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged && pnpm check",
-    "commit-msg": "node scripts/verifyCommit.js"
+    "commit-msg": "node scripts/verify-commit.js"
   },
   "lint-staged": {
     "*.{js,json}": [
       "prettier --write"
     ],
     "*.ts?(x)": [
-      "eslint",
+      "eslint --fix",
       "prettier --parser=typescript --write"
     ]
   },
@@ -57,54 +59,60 @@
     "node": ">=18.12.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.23.0",
-    "@babel/types": "^7.23.0",
-    "@rollup/plugin-alias": "^5.0.1",
+    "@babel/parser": "^7.23.9",
+    "@babel/types": "^7.23.9",
+    "@codspeed/vitest-plugin": "^2.3.1",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.4",
+    "@rollup/plugin-replace": "5.0.4",
     "@rollup/plugin-terser": "^0.4.4",
-    "@types/hash-sum": "^1.0.1",
-    "@types/node": "^18.18.6",
-    "@typescript-eslint/parser": "^6.8.0",
-    "@vitest/coverage-istanbul": "^0.34.4",
+    "@types/hash-sum": "^1.0.2",
+    "@types/minimist": "^1.2.5",
+    "@types/node": "^20.11.16",
+    "@types/semver": "^7.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@vitest/coverage-istanbul": "^1.2.2",
     "@vue/consolidate": "0.17.3",
     "conventional-changelog-cli": "^4.1.0",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.19.5",
+    "esbuild": "^0.20.0",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^8.51.0",
-    "eslint-plugin-jest": "^27.4.2",
+    "eslint": "^8.56.0",
+    "eslint-define-config": "^1.24.1",
+    "eslint-plugin-import": "npm:eslint-plugin-i@^2.29.1",
+    "eslint-plugin-jest": "^27.6.3",
     "estree-walker": "^2.0.2",
     "execa": "^8.0.1",
-    "jsdom": "^22.1.0",
-    "lint-staged": "^15.0.2",
+    "jsdom": "^23.2.0",
+    "lint-staged": "^15.2.0",
     "lodash": "^4.17.21",
-    "magic-string": "^0.30.5",
+    "magic-string": "^0.30.6",
     "markdown-table": "^3.0.3",
-    "marked": "^9.1.2",
+    "marked": "^11.2.0",
     "minimist": "^1.2.8",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.1.2",
     "picocolors": "^1.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.2",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.2",
-    "puppeteer": "~21.2.1",
+    "puppeteer": "~21.11.0",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
+    "rollup": "4.9.2",
     "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-esbuild": "^6.1.0",
-    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "semver": "^7.5.4",
     "serve": "^14.2.1",
     "simple-git-hooks": "^2.9.0",
-    "terser": "^5.22.0",
-    "todomvc-app-css": "^2.4.2",
+    "terser": "^5.27.0",
+    "todomvc-app-css": "^2.4.3",
     "tslib": "^2.6.2",
-    "tsx": "^3.14.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.3.0",
-    "vitest": "^0.34.4"
+    "tsx": "^4.7.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.12",
+    "vitest": "^1.2.2"
   }
 }
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..678548e35b5 100644
--- a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
@@ -1,38 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template><!--></template> 1`] = `
+exports[`compiler: parse > Edge Cases > invalid html 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
+              "column": 1,
+              "line": 3,
+              "offset": 13,
             },
-            "source": "<!-->",
+            "source": "<span>
+",
             "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
+              "column": 1,
+              "line": 2,
+              "offset": 6,
             },
           },
-          "type": 3,
+          "ns": 0,
+          "props": [],
+          "tag": "span",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 27,
-          "line": 1,
-          "offset": 26,
+          "column": 7,
+          "line": 3,
+          "offset": 19,
         },
-        "source": "<template><!--></template>",
+        "source": "<div>
+<span>
+</div>",
         "start": {
           "column": 1,
           "line": 1,
@@ -41,7 +48,7 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
       },
       "ns": 0,
       "props": [],
-      "tag": "template",
+      "tag": "div",
       "tagType": 0,
       "type": 1,
     },
@@ -54,55 +61,44 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
   "imports": [],
   "loc": {
     "end": {
-      "column": 27,
-      "line": 1,
-      "offset": 26,
+      "column": 8,
+      "line": 4,
+      "offset": 27,
     },
-    "source": "<template><!--></template>",
+    "source": "<div>
+<span>
+</div>
+</span>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div>
+<span>
+</div>
+</span>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template><!---></template> 1`] = `
+exports[`compiler: parse > Edge Cases > self closing multiple tag 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 17,
-              "line": 1,
-              "offset": 16,
-            },
-            "source": "<!--->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
+      "isSelfClosing": true,
       "loc": {
         "end": {
-          "column": 28,
+          "column": 37,
           "line": 1,
-          "offset": 27,
+          "offset": 36,
         },
-        "source": "<template><!---></template>",
+        "source": "<div :class="{ some: condition }" />",
         "start": {
           "column": 1,
           "line": 1,
@@ -110,78 +106,147 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
         },
       },
       "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 28,
-      "line": 1,
-      "offset": 27,
-    },
-    "source": "<template><!---></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template><!----></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
+      "props": [
         {
-          "content": "",
+          "arg": {
+            "constType": 3,
+            "content": "class",
+            "isStatic": true,
+            "loc": {
+              "end": {
+                "column": 12,
+                "line": 1,
+                "offset": 11,
+              },
+              "source": "class",
+              "start": {
+                "column": 7,
+                "line": 1,
+                "offset": 6,
+              },
+            },
+            "type": 4,
+          },
+          "exp": {
+            "constType": 0,
+            "content": "{ some: condition }",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 33,
+                "line": 1,
+                "offset": 32,
+              },
+              "source": "{ some: condition }",
+              "start": {
+                "column": 14,
+                "line": 1,
+                "offset": 13,
+              },
+            },
+            "type": 4,
+          },
           "loc": {
             "end": {
-              "column": 18,
+              "column": 34,
               "line": 1,
-              "offset": 17,
+              "offset": 33,
             },
-            "source": "<!---->",
+            "source": ":class="{ some: condition }"",
             "start": {
-              "column": 11,
+              "column": 6,
               "line": 1,
-              "offset": 10,
+              "offset": 5,
             },
           },
-          "type": 3,
+          "modifiers": [],
+          "name": "bind",
+          "rawName": ":class",
+          "type": 7,
         },
       ],
+      "tag": "div",
+      "tagType": 0,
+      "type": 1,
+    },
+    {
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
+      "isSelfClosing": true,
       "loc": {
         "end": {
-          "column": 29,
-          "line": 1,
-          "offset": 28,
+          "column": 37,
+          "line": 2,
+          "offset": 73,
         },
-        "source": "<template><!----></template>",
+        "source": "<p v-bind:style="{ color: 'red' }"/>",
         "start": {
           "column": 1,
-          "line": 1,
-          "offset": 0,
+          "line": 2,
+          "offset": 37,
         },
       },
       "ns": 0,
-      "props": [],
-      "tag": "template",
+      "props": [
+        {
+          "arg": {
+            "constType": 3,
+            "content": "style",
+            "isStatic": true,
+            "loc": {
+              "end": {
+                "column": 16,
+                "line": 2,
+                "offset": 52,
+              },
+              "source": "style",
+              "start": {
+                "column": 11,
+                "line": 2,
+                "offset": 47,
+              },
+            },
+            "type": 4,
+          },
+          "exp": {
+            "constType": 0,
+            "content": "{ color: 'red' }",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 34,
+                "line": 2,
+                "offset": 70,
+              },
+              "source": "{ color: 'red' }",
+              "start": {
+                "column": 18,
+                "line": 2,
+                "offset": 54,
+              },
+            },
+            "type": 4,
+          },
+          "loc": {
+            "end": {
+              "column": 35,
+              "line": 2,
+              "offset": 71,
+            },
+            "source": "v-bind:style="{ color: 'red' }"",
+            "start": {
+              "column": 4,
+              "line": 2,
+              "offset": 40,
+            },
+          },
+          "modifiers": [],
+          "name": "bind",
+          "rawName": "v-bind:style",
+          "type": 7,
+        },
+      ],
+      "tag": "p",
       "tagType": 0,
       "type": 1,
     },
@@ -194,48 +259,250 @@ exports[`compiler: parse > Errors > ABRUPT_CLOSING_OF_EMPTY_COMMENT > <template>
   "imports": [],
   "loc": {
     "end": {
-      "column": 29,
-      "line": 1,
-      "offset": 28,
+      "column": 37,
+      "line": 2,
+      "offset": 73,
     },
-    "source": "<template><!----></template>",
+    "source": "<div :class="{ some: condition }" />
+<p v-bind:style="{ color: 'red' }"/>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div :class="{ some: condition }" />
+<p v-bind:style="{ color: 'red' }"/>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[cdata]]></template> 1`] = `
+exports[`compiler: parse > Edge Cases > valid html 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "[CDATA[cdata]]",
+          "children": [],
+          "codegenNode": undefined,
+          "isSelfClosing": true,
           "loc": {
             "end": {
-              "column": 28,
-              "line": 1,
-              "offset": 27,
+              "column": 39,
+              "line": 2,
+              "offset": 73,
             },
-            "source": "<![CDATA[cdata]]>",
+            "source": "<p v-bind:style="{ color: 'red' }"/>",
             "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
+              "column": 3,
+              "line": 2,
+              "offset": 37,
             },
           },
-          "type": 3,
-        },
-      ],
+          "ns": 0,
+          "props": [
+            {
+              "arg": {
+                "constType": 3,
+                "content": "style",
+                "isStatic": true,
+                "loc": {
+                  "end": {
+                    "column": 18,
+                    "line": 2,
+                    "offset": 52,
+                  },
+                  "source": "style",
+                  "start": {
+                    "column": 13,
+                    "line": 2,
+                    "offset": 47,
+                  },
+                },
+                "type": 4,
+              },
+              "exp": {
+                "constType": 0,
+                "content": "{ color: 'red' }",
+                "isStatic": false,
+                "loc": {
+                  "end": {
+                    "column": 36,
+                    "line": 2,
+                    "offset": 70,
+                  },
+                  "source": "{ color: 'red' }",
+                  "start": {
+                    "column": 20,
+                    "line": 2,
+                    "offset": 54,
+                  },
+                },
+                "type": 4,
+              },
+              "loc": {
+                "end": {
+                  "column": 37,
+                  "line": 2,
+                  "offset": 71,
+                },
+                "source": "v-bind:style="{ color: 'red' }"",
+                "start": {
+                  "column": 6,
+                  "line": 2,
+                  "offset": 40,
+                },
+              },
+              "modifiers": [],
+              "name": "bind",
+              "rawName": "v-bind:style",
+              "type": 7,
+            },
+          ],
+          "tag": "p",
+          "tagType": 0,
+          "type": 1,
+        },
+        {
+          "content": " a comment with <html> inside it ",
+          "loc": {
+            "end": {
+              "column": 43,
+              "line": 3,
+              "offset": 116,
+            },
+            "source": "<!-- a comment with <html> inside it -->",
+            "start": {
+              "column": 3,
+              "line": 3,
+              "offset": 76,
+            },
+          },
+          "type": 3,
+        },
+      ],
+      "codegenNode": undefined,
+      "loc": {
+        "end": {
+          "column": 7,
+          "line": 4,
+          "offset": 123,
+        },
+        "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
+  <!-- a comment with <html> inside it -->
+</div>",
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "ns": 0,
+      "props": [
+        {
+          "arg": {
+            "constType": 3,
+            "content": "class",
+            "isStatic": true,
+            "loc": {
+              "end": {
+                "column": 12,
+                "line": 1,
+                "offset": 11,
+              },
+              "source": "class",
+              "start": {
+                "column": 7,
+                "line": 1,
+                "offset": 6,
+              },
+            },
+            "type": 4,
+          },
+          "exp": {
+            "constType": 0,
+            "content": "{ some: condition }",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 33,
+                "line": 1,
+                "offset": 32,
+              },
+              "source": "{ some: condition }",
+              "start": {
+                "column": 14,
+                "line": 1,
+                "offset": 13,
+              },
+            },
+            "type": 4,
+          },
+          "loc": {
+            "end": {
+              "column": 34,
+              "line": 1,
+              "offset": 33,
+            },
+            "source": ":class="{ some: condition }"",
+            "start": {
+              "column": 6,
+              "line": 1,
+              "offset": 5,
+            },
+          },
+          "modifiers": [],
+          "name": "bind",
+          "rawName": ":class",
+          "type": 7,
+        },
+      ],
+      "tag": "div",
+      "tagType": 0,
+      "type": 1,
+    },
+  ],
+  "codegenNode": undefined,
+  "components": [],
+  "directives": [],
+  "helpers": Set {},
+  "hoists": [],
+  "imports": [],
+  "loc": {
+    "end": {
+      "column": 7,
+      "line": 4,
+      "offset": 123,
+    },
+    "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
+  <!-- a comment with <html> inside it -->
+</div>",
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "source": "<div :class="{ some: condition }">
+  <p v-bind:style="{ color: 'red' }"/>
+  <!-- a comment with <html> inside it -->
+</div>",
+  "temps": 0,
+  "type": 0,
+}
+`;
+
+exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[cdata]]></template> 1`] = `
+{
+  "cached": 0,
+  "children": [
+    {
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 39,
@@ -275,6 +542,7 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><![CDATA[c
       "offset": 0,
     },
   },
+  "source": "<template><![CDATA[cdata]]></template>",
   "temps": 0,
   "type": 0,
 }
@@ -307,7 +575,6 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
             },
           ],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 39,
@@ -329,7 +596,6 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 50,
@@ -369,6 +635,7 @@ exports[`compiler: parse > Errors > CDATA_IN_HTML_CONTENT > <template><svg><![CD
       "offset": 0,
     },
   },
+  "source": "<template><svg><![CDATA[cdata]]></svg></template>",
   "temps": 0,
   "type": 0,
 }
@@ -383,14 +650,13 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 34,
               "line": 1,
               "offset": 33,
             },
-            "source": "<div id=\\"\\" id=\\"\\"></div>",
+            "source": "<div id="" id=""></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -406,7 +672,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                   "line": 1,
                   "offset": 20,
                 },
-                "source": "id=\\"\\"",
+                "source": "id=""",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -414,6 +680,19 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "",
@@ -423,7 +702,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                     "line": 1,
                     "offset": 20,
                   },
-                  "source": "\\"\\"",
+                  "source": """",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -440,7 +719,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                   "line": 1,
                   "offset": 26,
                 },
-                "source": "id=\\"\\"",
+                "source": "id=""",
                 "start": {
                   "column": 22,
                   "line": 1,
@@ -448,6 +727,19 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 24,
+                  "line": 1,
+                  "offset": 23,
+                },
+                "source": "id",
+                "start": {
+                  "column": 22,
+                  "line": 1,
+                  "offset": 21,
+                },
+              },
               "type": 6,
               "value": {
                 "content": "",
@@ -457,7 +749,7 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
                     "line": 1,
                     "offset": 26,
                   },
-                  "source": "\\"\\"",
+                  "source": """",
                   "start": {
                     "column": 25,
                     "line": 1,
@@ -474,14 +766,13 @@ exports[`compiler: parse > Errors > DUPLICATE_ATTRIBUTE > <template><div id="" i
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 45,
           "line": 1,
           "offset": 44,
         },
-        "source": "<template><div id=\\"\\" id=\\"\\"></div></template>",
+        "source": "<template><div id="" id=""></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -507,57 +798,51 @@ 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,
       "offset": 0,
     },
   },
+  "source": "<template><div id="" id=""></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > END_TAG_WITH_ATTRIBUTES > <template><div></div id=""></template> 1`] = `
+exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "<",
           "loc": {
             "end": {
-              "column": 28,
+              "column": 12,
               "line": 1,
-              "offset": 27,
+              "offset": 11,
             },
-            "source": "<div></div id=\\"\\">",
+            "source": "<",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 39,
+          "column": 12,
           "line": 1,
-          "offset": 38,
+          "offset": 11,
         },
-        "source": "<template><div></div id=\\"\\"></template>",
+        "source": "<template><",
         "start": {
           "column": 1,
           "line": 1,
@@ -579,194 +864,48 @@ exports[`compiler: parse > Errors > END_TAG_WITH_ATTRIBUTES > <template><div></d
   "imports": [],
   "loc": {
     "end": {
-      "column": 39,
+      "column": 12,
       "line": 1,
-      "offset": 38,
+      "offset": 11,
     },
-    "source": "<template><div></div id=\\"\\"></template>",
+    "source": "<template><",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > END_TAG_WITH_TRAILING_SOLIDUS > <template><div></div/></template> 1`] = `
+exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "</",
           "loc": {
             "end": {
-              "column": 23,
+              "column": 13,
               "line": 1,
-              "offset": 22,
+              "offset": 12,
             },
-            "source": "<div></div/>",
+            "source": "</",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 34,
-          "line": 1,
-          "offset": 33,
-        },
-        "source": "<template><div></div/></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 34,
-      "line": 1,
-      "offset": 33,
-    },
-    "source": "<template><div></div/></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template>< 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "<",
-          "loc": {
-            "end": {
-              "column": 12,
-              "line": 1,
-              "offset": 11,
-            },
-            "source": "<",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 12,
-          "line": 1,
-          "offset": 11,
-        },
-        "source": "<template><",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 12,
-      "line": 1,
-      "offset": 11,
-    },
-    "source": "<template><",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "</",
-          "loc": {
-            "end": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
-            },
-            "source": "</",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 13,
@@ -806,6 +945,7 @@ exports[`compiler: parse > Errors > EOF_BEFORE_TAG_NAME > <template></ 1`] = `
       "offset": 0,
     },
   },
+  "source": "<template></",
   "temps": 0,
   "type": 0,
 }
@@ -820,7 +960,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`]
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 25,
@@ -842,7 +981,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`]
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
@@ -882,6 +1020,7 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[ 1`]
       "offset": 0,
     },
   },
+  "source": "<template><svg><![CDATA[",
   "temps": 0,
   "type": 0,
 }
@@ -914,7 +1053,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
             },
           ],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 30,
@@ -936,7 +1074,6 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 30,
@@ -976,44 +1113,26 @@ exports[`compiler: parse > Errors > EOF_IN_CDATA > <template><svg><![CDATA[cdata
       "offset": 0,
     },
   },
+  "source": "<template><svg><![CDATA[cdata",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><! 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
-            },
-            "source": "<!",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 13,
+          "column": 15,
           "line": 1,
-          "offset": 12,
+          "offset": 14,
         },
-        "source": "<template><!",
+        "source": "<template><!--",
         "start": {
           "column": 1,
           "line": 1,
@@ -1035,37 +1154,38 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><! 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 13,
+      "column": 15,
       "line": 1,
-      "offset": 12,
+      "offset": 14,
     },
-    "source": "<template><!",
+    "source": "<template><!--",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><!--",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!- 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "-",
+          "content": "comment",
           "loc": {
             "end": {
-              "column": 14,
+              "column": 25,
               "line": 1,
-              "offset": 13,
+              "offset": 24,
             },
-            "source": "<!-",
+            "source": "<!--comment",
             "start": {
               "column": 11,
               "line": 1,
@@ -1076,14 +1196,13 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!- 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 14,
+          "column": 22,
           "line": 1,
-          "offset": 13,
+          "offset": 21,
         },
-        "source": "<template><!-",
+        "source": "<template><!--comment",
         "start": {
           "column": 1,
           "line": 1,
@@ -1105,55 +1224,37 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!- 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 14,
+      "column": 22,
       "line": 1,
-      "offset": 13,
+      "offset": 21,
     },
-    "source": "<template><!-",
+    "source": "<template><!--comment",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><!--comment",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "",
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "<!--",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 15,
+          "column": 11,
           "line": 1,
-          "offset": 14,
+          "offset": 10,
         },
-        "source": "<template><!--",
+        "source": "<div></div",
         "start": {
           "column": 1,
           "line": 1,
@@ -1162,7 +1263,7 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
       },
       "ns": 0,
       "props": [],
-      "tag": "template",
+      "tag": "div",
       "tagType": 0,
       "type": 1,
     },
@@ -1175,55 +1276,37 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!-- 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 15,
+      "column": 11,
       "line": 1,
-      "offset": 14,
+      "offset": 10,
     },
-    "source": "<template><!--",
+    "source": "<div></div",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div></div",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div  1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "comment",
-          "loc": {
-            "end": {
-              "column": 22,
-              "line": 1,
-              "offset": 21,
-            },
-            "source": "<!--comment",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 22,
+          "column": 16,
           "line": 1,
-          "offset": 21,
+          "offset": 15,
         },
-        "source": "<template><!--comment",
+        "source": "<template><div ",
         "start": {
           "column": 1,
           "line": 1,
@@ -1245,55 +1328,37 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!--comment 1`] =
   "imports": [],
   "loc": {
     "end": {
-      "column": 22,
+      "column": 16,
       "line": 1,
-      "offset": 21,
+      "offset": 15,
     },
-    "source": "<template><!--comment",
+    "source": "<template><div ",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div ",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!abc 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "abc",
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "<!abc",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 16,
+          "column": 15,
           "line": 1,
-          "offset": 15,
+          "offset": 14,
         },
-        "source": "<template><!abc",
+        "source": "<template><div",
         "start": {
           "column": 1,
           "line": 1,
@@ -1315,55 +1380,37 @@ exports[`compiler: parse > Errors > EOF_IN_COMMENT > <template><!abc 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 16,
+      "column": 15,
       "line": 1,
-      "offset": 15,
+      "offset": 14,
     },
-    "source": "<template><!abc",
+    "source": "<template><div",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <script><!--console.log('hello') 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id  1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "<!--console.log('hello')",
-          "loc": {
-            "end": {
-              "column": 33,
-              "line": 1,
-              "offset": 32,
-            },
-            "source": "<!--console.log('hello')",
-            "start": {
-              "column": 9,
-              "line": 1,
-              "offset": 8,
-            },
-          },
-          "type": 2,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 33,
+          "column": 19,
           "line": 1,
-          "offset": 32,
+          "offset": 18,
         },
-        "source": "<script><!--console.log('hello')",
+        "source": "<template><div id ",
         "start": {
           "column": 1,
           "line": 1,
@@ -1372,7 +1419,7 @@ exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <scri
       },
       "ns": 0,
       "props": [],
-      "tag": "script",
+      "tag": "template",
       "tagType": 0,
       "type": 1,
     },
@@ -1385,55 +1432,37 @@ exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <scri
   "imports": [],
   "loc": {
     "end": {
-      "column": 33,
+      "column": 19,
       "line": 1,
-      "offset": 32,
+      "offset": 18,
     },
-    "source": "<script><!--console.log('hello')",
+    "source": "<template><div id ",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id ",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <script>console.log('hello') 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id = 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "console.log('hello')",
-          "loc": {
-            "end": {
-              "column": 29,
-              "line": 1,
-              "offset": 28,
-            },
-            "source": "console.log('hello')",
-            "start": {
-              "column": 9,
-              "line": 1,
-              "offset": 8,
-            },
-          },
-          "type": 2,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 29,
+          "column": 20,
           "line": 1,
-          "offset": 28,
+          "offset": 19,
         },
-        "source": "<script>console.log('hello')",
+        "source": "<template><div id =",
         "start": {
           "column": 1,
           "line": 1,
@@ -1442,7 +1471,7 @@ exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <scri
       },
       "ns": 0,
       "props": [],
-      "tag": "script",
+      "tag": "template",
       "tagType": 0,
       "type": 1,
     },
@@ -1455,37 +1484,37 @@ exports[`compiler: parse > Errors > EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT > <scri
   "imports": [],
   "loc": {
     "end": {
-      "column": 29,
+      "column": 20,
       "line": 1,
-      "offset": 28,
+      "offset": 19,
     },
-    "source": "<script>console.log('hello')",
+    "source": "<template><div id =",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id =",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 11,
+          "column": 18,
           "line": 1,
-          "offset": 10,
+          "offset": 17,
         },
-        "source": "<div></div",
+        "source": "<template><div id",
         "start": {
           "column": 1,
           "line": 1,
@@ -1494,7 +1523,7 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
       },
       "ns": 0,
       "props": [],
-      "tag": "div",
+      "tag": "template",
       "tagType": 0,
       "type": 1,
     },
@@ -1507,61 +1536,37 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <div></div 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 11,
+      "column": 18,
       "line": 1,
-      "offset": 10,
+      "offset": 17,
     },
-    "source": "<div></div",
+    "source": "<template><div id",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div  1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "<div ",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 16,
+          "column": 23,
           "line": 1,
-          "offset": 15,
+          "offset": 22,
         },
-        "source": "<template><div ",
+        "source": "<template><div id="abc",
         "start": {
           "column": 1,
           "line": 1,
@@ -1583,61 +1588,37 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div  1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 16,
+      "column": 23,
       "line": 1,
-      "offset": 15,
+      "offset": 22,
     },
-    "source": "<template><div ",
+    "source": "<template><div id="abc",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="abc",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "<div",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 15,
+          "column": 24,
           "line": 1,
-          "offset": 14,
+          "offset": 23,
         },
-        "source": "<template><div",
+        "source": "<template><div id="abc"",
         "start": {
           "column": 1,
           "line": 1,
@@ -1659,80 +1640,55 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 15,
+      "column": 24,
       "line": 1,
-      "offset": 14,
+      "offset": 23,
     },
-    "source": "<template><div",
+    "source": "<template><div id="abc"",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="abc"",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id  1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "/",
           "loc": {
             "end": {
-              "column": 19,
+              "column": 25,
               "line": 1,
-              "offset": 18,
+              "offset": 24,
             },
-            "source": "<div id ",
+            "source": "/",
             "start": {
-              "column": 11,
+              "column": 0,
               "line": 1,
-              "offset": 10,
+              "offset": -1,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 18,
-                  "line": 1,
-                  "offset": 17,
-                },
-                "source": "id",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 19,
+          "column": 25,
           "line": 1,
-          "offset": 18,
+          "offset": 24,
         },
-        "source": "<template><div id ",
+        "source": "<template><div id="abc"/",
         "start": {
           "column": 1,
           "line": 1,
@@ -1754,80 +1710,37 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id  1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 19,
+      "column": 25,
       "line": 1,
-      "offset": 18,
+      "offset": 24,
     },
-    "source": "<template><div id ",
+    "source": "<template><div id="abc"/",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id="abc"/",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id = 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 20,
-              "line": 1,
-              "offset": 19,
-            },
-            "source": "<div id =",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 20,
-                  "line": 1,
-                  "offset": 19,
-                },
-                "source": "id =",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 20,
+          "column": 23,
           "line": 1,
-          "offset": 19,
+          "offset": 22,
         },
-        "source": "<template><div id =",
+        "source": "<template><div id='abc",
         "start": {
           "column": 1,
           "line": 1,
@@ -1849,80 +1762,37 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id = 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 20,
+      "column": 23,
       "line": 1,
-      "offset": 19,
+      "offset": 22,
     },
-    "source": "<template><div id =",
+    "source": "<template><div id='abc",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id='abc",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 18,
-              "line": 1,
-              "offset": 17,
-            },
-            "source": "<div id",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 18,
-                  "line": 1,
-                  "offset": 17,
-                },
-                "source": "id",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 18,
+          "column": 24,
           "line": 1,
-          "offset": 17,
+          "offset": 23,
         },
-        "source": "<template><div id",
+        "source": "<template><div id='abc'",
         "start": {
           "column": 1,
           "line": 1,
@@ -1944,96 +1814,55 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 18,
+      "column": 24,
       "line": 1,
-      "offset": 17,
+      "offset": 23,
     },
-    "source": "<template><div id",
+    "source": "<template><div id='abc'",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id='abc'",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc'/ 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "/",
           "loc": {
             "end": {
-              "column": 23,
+              "column": 25,
               "line": 1,
-              "offset": 22,
+              "offset": 24,
             },
-            "source": "<div id=\\"abc",
+            "source": "/",
             "start": {
-              "column": 11,
+              "column": 0,
               "line": 1,
-              "offset": 10,
+              "offset": -1,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 23,
-                  "line": 1,
-                  "offset": 22,
-                },
-                "source": "id=\\"abc",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 23,
-                    "line": 1,
-                    "offset": 22,
-                  },
-                  "source": "\\"abc",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 23,
+          "column": 25,
           "line": 1,
-          "offset": 22,
+          "offset": 24,
         },
-        "source": "<template><div id=\\"abc",
+        "source": "<template><div id='abc'/",
         "start": {
           "column": 1,
           "line": 1,
@@ -2055,96 +1884,55 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 23,
+      "column": 25,
       "line": 1,
-      "offset": 22,
+      "offset": 24,
     },
-    "source": "<template><div id=\\"abc",
+    "source": "<template><div id='abc'/",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id='abc'/",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc" 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "/",
           "loc": {
             "end": {
               "column": 24,
               "line": 1,
               "offset": 23,
             },
-            "source": "<div id=\\"abc\\"",
+            "source": "/",
             "start": {
-              "column": 11,
+              "column": 0,
               "line": 1,
-              "offset": 10,
+              "offset": -1,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"abc\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"abc\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 24,
           "line": 1,
           "offset": 23,
         },
-        "source": "<template><div id=\\"abc\\"",
+        "source": "<template><div id=abc /",
         "start": {
           "column": 1,
           "line": 1,
@@ -2170,19 +1958,72 @@ 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,
       "offset": 0,
     },
   },
+  "source": "<template><div id=abc /",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] = `
+exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
+{
+  "cached": 0,
+  "children": [
+    {
+      "children": [],
+      "codegenNode": undefined,
+      "loc": {
+        "end": {
+          "column": 22,
+          "line": 1,
+          "offset": 21,
+        },
+        "source": "<template><div id=abc",
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "ns": 0,
+      "props": [],
+      "tag": "template",
+      "tagType": 0,
+      "type": 1,
+    },
+  ],
+  "codegenNode": undefined,
+  "components": [],
+  "directives": [],
+  "helpers": Set {},
+  "hoists": [],
+  "imports": [],
+  "loc": {
+    "end": {
+      "column": 22,
+      "line": 1,
+      "offset": 21,
+    },
+    "source": "<template><div id=abc",
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "source": "<template><div id=abc",
+  "temps": 0,
+  "type": 0,
+}
+`;
+
+exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= /></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -2191,14 +2032,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 25,
+              "column": 28,
               "line": 1,
-              "offset": 24,
+              "offset": 27,
             },
-            "source": "<div id=\\"abc\\"/",
+            "source": "<div id= /></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -2210,11 +2050,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
             {
               "loc": {
                 "end": {
-                  "column": 24,
+                  "column": 21,
                   "line": 1,
-                  "offset": 23,
+                  "offset": 20,
                 },
-                "source": "id=\\"abc\\"",
+                "source": "id= /",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -2222,20 +2062,33 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
-                "content": "abc",
+                "content": "/",
                 "loc": {
                   "end": {
-                    "column": 24,
+                    "column": 21,
                     "line": 1,
-                    "offset": 23,
+                    "offset": 20,
                   },
-                  "source": "\\"abc\\"",
+                  "source": "/",
                   "start": {
-                    "column": 19,
+                    "column": 20,
                     "line": 1,
-                    "offset": 18,
+                    "offset": 19,
                   },
                 },
                 "type": 2,
@@ -2248,14 +2101,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 25,
+          "column": 39,
           "line": 1,
-          "offset": 24,
+          "offset": 38,
         },
-        "source": "<template><div id=\\"abc\\"/",
+        "source": "<template><div id= /></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -2277,23 +2129,24 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id="abc"/ 1`] =
   "imports": [],
   "loc": {
     "end": {
-      "column": 25,
+      "column": 39,
       "line": 1,
-      "offset": 24,
+      "offset": 38,
     },
-    "source": "<template><div id=\\"abc\\"/",
+    "source": "<template><div id= /></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id= /></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
+exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= ></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -2302,14 +2155,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 23,
+              "column": 27,
               "line": 1,
-              "offset": 22,
+              "offset": 26,
             },
-            "source": "<div id='abc",
+            "source": "<div id= ></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -2321,11 +2173,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
             {
               "loc": {
                 "end": {
-                  "column": 23,
+                  "column": 20,
                   "line": 1,
-                  "offset": 22,
+                  "offset": 19,
                 },
-                "source": "id='abc",
+                "source": "id= ",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -2333,20 +2185,33 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
-                "content": "abc",
+                "content": "",
                 "loc": {
                   "end": {
-                    "column": 23,
+                    "column": 20,
                     "line": 1,
-                    "offset": 22,
+                    "offset": 19,
                   },
-                  "source": "'abc",
+                  "source": "",
                   "start": {
-                    "column": 19,
+                    "column": 20,
                     "line": 1,
-                    "offset": 18,
+                    "offset": 19,
                   },
                 },
                 "type": 2,
@@ -2359,14 +2224,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 23,
+          "column": 38,
           "line": 1,
-          "offset": 22,
+          "offset": 37,
         },
-        "source": "<template><div id='abc",
+        "source": "<template><div id= ></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -2388,23 +2252,24 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 23,
+      "column": 38,
       "line": 1,
-      "offset": 22,
+      "offset": 37,
     },
-    "source": "<template><div id='abc",
+    "source": "<template><div id= ></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id= ></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
+exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -2413,14 +2278,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 24,
+              "column": 26,
               "line": 1,
-              "offset": 23,
+              "offset": 25,
             },
-            "source": "<div id='abc'",
+            "source": "<div id=></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -2432,11 +2296,11 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
             {
               "loc": {
                 "end": {
-                  "column": 24,
+                  "column": 19,
                   "line": 1,
-                  "offset": 23,
+                  "offset": 18,
                 },
-                "source": "id='abc'",
+                "source": "id=",
                 "start": {
                   "column": 16,
                   "line": 1,
@@ -2444,16 +2308,29 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
                 },
               },
               "name": "id",
+              "nameLoc": {
+                "end": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+                "source": "id",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
               "type": 6,
               "value": {
-                "content": "abc",
+                "content": "",
                 "loc": {
                   "end": {
-                    "column": 24,
+                    "column": 19,
                     "line": 1,
-                    "offset": 23,
+                    "offset": 18,
                   },
-                  "source": "'abc'",
+                  "source": "",
                   "start": {
                     "column": 19,
                     "line": 1,
@@ -2470,14 +2347,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 24,
+          "column": 37,
           "line": 1,
-          "offset": 23,
+          "offset": 36,
         },
-        "source": "<template><div id='abc'",
+        "source": "<template><div id=></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -2499,96 +2375,37 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc' 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 24,
+      "column": 37,
       "line": 1,
-      "offset": 23,
+      "offset": 36,
     },
-    "source": "<template><div id='abc'",
+    "source": "<template><div id=></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div id=></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc'/ 1`] = `
+exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 25,
-              "line": 1,
-              "offset": 24,
-            },
-            "source": "<div id='abc'/",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id='abc'",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "abc",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "'abc'",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 25,
           "line": 1,
           "offset": 24,
         },
-        "source": "<template><div id='abc'/",
+        "source": "<template></></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -2614,19 +2431,20 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id='abc'/ 1`] =
       "line": 1,
       "offset": 24,
     },
-    "source": "<template><div id='abc'/",
+    "source": "<template></></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template></></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a"bc=''></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -2635,14 +2453,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 24,
+              "column": 30,
               "line": 1,
-              "offset": 23,
+              "offset": 29,
             },
-            "source": "<div id=abc /",
+            "source": "<div a"bc=''></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -2654,32 +2471,45 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
             {
               "loc": {
                 "end": {
-                  "column": 22,
+                  "column": 23,
                   "line": 1,
-                  "offset": 21,
+                  "offset": 22,
                 },
-                "source": "id=abc",
+                "source": "a"bc=''",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "a"bc",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "a"bc",
                 "start": {
                   "column": 16,
                   "line": 1,
                   "offset": 15,
                 },
               },
-              "name": "id",
               "type": 6,
               "value": {
-                "content": "abc",
+                "content": "",
                 "loc": {
                   "end": {
-                    "column": 22,
+                    "column": 23,
                     "line": 1,
-                    "offset": 21,
+                    "offset": 22,
                   },
-                  "source": "abc",
+                  "source": "''",
                   "start": {
-                    "column": 19,
+                    "column": 21,
                     "line": 1,
-                    "offset": 18,
+                    "offset": 20,
                   },
                 },
                 "type": 2,
@@ -2692,14 +2522,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 24,
+          "column": 41,
           "line": 1,
-          "offset": 23,
+          "offset": 40,
         },
-        "source": "<template><div id=abc /",
+        "source": "<template><div a"bc=''></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -2721,23 +2550,24 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc / 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 24,
+      "column": 41,
       "line": 1,
-      "offset": 23,
+      "offset": 40,
     },
-    "source": "<template><div id=abc /",
+    "source": "<template><div a"bc=''></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div a"bc=''></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a'bc=''></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -2746,14 +2576,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 22,
+              "column": 30,
               "line": 1,
-              "offset": 21,
+              "offset": 29,
             },
-            "source": "<div id=abc",
+            "source": "<div a'bc=''></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -2765,32 +2594,45 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
             {
               "loc": {
                 "end": {
-                  "column": 22,
+                  "column": 23,
                   "line": 1,
-                  "offset": 21,
+                  "offset": 22,
                 },
-                "source": "id=abc",
+                "source": "a'bc=''",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "a'bc",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "a'bc",
                 "start": {
                   "column": 16,
                   "line": 1,
                   "offset": 15,
                 },
               },
-              "name": "id",
               "type": 6,
               "value": {
-                "content": "abc",
+                "content": "",
                 "loc": {
                   "end": {
-                    "column": 22,
+                    "column": 23,
                     "line": 1,
-                    "offset": 21,
+                    "offset": 22,
                   },
-                  "source": "abc",
+                  "source": "''",
                   "start": {
-                    "column": 19,
+                    "column": 21,
                     "line": 1,
-                    "offset": 18,
+                    "offset": 20,
                   },
                 },
                 "type": 2,
@@ -2803,14 +2645,13 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 22,
+          "column": 41,
           "line": 1,
-          "offset": 21,
+          "offset": 40,
         },
-        "source": "<template><div id=abc",
+        "source": "<template><div a'bc=''></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -2832,112 +2673,119 @@ exports[`compiler: parse > Errors > EOF_IN_TAG > <template><div id=abc 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 22,
+      "column": 41,
       "line": 1,
-      "offset": 21,
+      "offset": 40,
     },
-    "source": "<template><div id=abc",
+    "source": "<template><div a'bc=''></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div a'bc=''></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INCORRECTLY_CLOSED_COMMENT > <template><!--comment--!></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a<bc=''></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "comment",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 26,
+              "column": 30,
               "line": 1,
-              "offset": 25,
+              "offset": 29,
             },
-            "source": "<!--comment--!>",
+            "source": "<div a<bc=''></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 1,
-          "offset": 36,
-        },
-        "source": "<template><!--comment--!></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 37,
-      "line": 1,
-      "offset": 36,
-    },
-    "source": "<template><!--comment--!></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <!DOCTYPE html> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "content": "DOCTYPE html",
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 23,
+                  "line": 1,
+                  "offset": 22,
+                },
+                "source": "a<bc=''",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "a<bc",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "a<bc",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": {
+                "content": "",
+                "loc": {
+                  "end": {
+                    "column": 23,
+                    "line": 1,
+                    "offset": 22,
+                  },
+                  "source": "''",
+                  "start": {
+                    "column": 21,
+                    "line": 1,
+                    "offset": 20,
+                  },
+                },
+                "type": 2,
+              },
+            },
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
+        },
+      ],
+      "codegenNode": undefined,
       "loc": {
         "end": {
-          "column": 16,
+          "column": 41,
           "line": 1,
-          "offset": 15,
+          "offset": 40,
         },
-        "source": "<!DOCTYPE html>",
+        "source": "<template><div a<bc=''></div></template>",
         "start": {
           "column": 1,
           "line": 1,
           "offset": 0,
         },
       },
-      "type": 3,
+      "ns": 0,
+      "props": [],
+      "tag": "template",
+      "tagType": 0,
+      "type": 1,
     },
   ],
   "codegenNode": undefined,
@@ -2948,55 +2796,108 @@ exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <!DOCTYPE html>
   "imports": [],
   "loc": {
     "end": {
-      "column": 16,
+      "column": 41,
       "line": 1,
-      "offset": 15,
+      "offset": 40,
     },
-    "source": "<!DOCTYPE html>",
+    "source": "<template><div a<bc=''></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div a<bc=''></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar"></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 14,
+              "column": 31,
               "line": 1,
-              "offset": 13,
+              "offset": 30,
             },
-            "source": "<!>",
+            "source": "<div foo=bar"></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 24,
+                  "line": 1,
+                  "offset": 23,
+                },
+                "source": "foo=bar"",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": {
+                "content": "bar"",
+                "loc": {
+                  "end": {
+                    "column": 24,
+                    "line": 1,
+                    "offset": 23,
+                  },
+                  "source": "bar"",
+                  "start": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                },
+                "type": 2,
+              },
+            },
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 25,
+          "column": 42,
           "line": 1,
-          "offset": 24,
+          "offset": 41,
         },
-        "source": "<template><!></template>",
+        "source": "<template><div foo=bar"></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3018,55 +2919,108 @@ exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!></
   "imports": [],
   "loc": {
     "end": {
-      "column": 25,
+      "column": 42,
       "line": 1,
-      "offset": 24,
+      "offset": 41,
     },
-    "source": "<template><!></template>",
+    "source": "<template><div foo=bar"></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar"></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!-></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar'></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "-",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 15,
+              "column": 31,
               "line": 1,
-              "offset": 14,
+              "offset": 30,
             },
-            "source": "<!->",
+            "source": "<div foo=bar'></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 24,
+                  "line": 1,
+                  "offset": 23,
+                },
+                "source": "foo=bar'",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": {
+                "content": "bar'",
+                "loc": {
+                  "end": {
+                    "column": 24,
+                    "line": 1,
+                    "offset": 23,
+                  },
+                  "source": "bar'",
+                  "start": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                },
+                "type": 2,
+              },
+            },
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 26,
+          "column": 42,
           "line": 1,
-          "offset": 25,
+          "offset": 41,
         },
-        "source": "<template><!-></template>",
+        "source": "<template><div foo=bar'></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3088,125 +3042,108 @@ exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!-><
   "imports": [],
   "loc": {
     "end": {
-      "column": 26,
+      "column": 42,
       "line": 1,
-      "offset": 25,
+      "offset": 41,
     },
-    "source": "<template><!-></template>",
+    "source": "<template><div foo=bar'></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar'></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INCORRECTLY_OPENED_COMMENT > <template><!ELEMENT br EMPTY></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar<div></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "ELEMENT br EMPTY",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 30,
+              "column": 34,
               "line": 1,
-              "offset": 29,
+              "offset": 33,
             },
-            "source": "<!ELEMENT br EMPTY>",
+            "source": "<div foo=bar<div></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 41,
-          "line": 1,
-          "offset": 40,
-        },
-        "source": "<template><!ELEMENT br EMPTY></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 41,
-      "line": 1,
-      "offset": 40,
-    },
-    "source": "<template><!ELEMENT br EMPTY></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template></�></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "�",
-          "loc": {
-            "end": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-            "source": "</�>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 27,
+                  "line": 1,
+                  "offset": 26,
+                },
+                "source": "foo=bar<div",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": {
+                "content": "bar<div",
+                "loc": {
+                  "end": {
+                    "column": 27,
+                    "line": 1,
+                    "offset": 26,
+                  },
+                  "source": "bar<div",
+                  "start": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                },
+                "type": 2,
+              },
             },
-          },
-          "type": 3,
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 26,
+          "column": 45,
           "line": 1,
-          "offset": 25,
+          "offset": 44,
         },
-        "source": "<template></�></template>",
+        "source": "<template><div foo=bar<div></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3228,55 +3165,108 @@ exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <templ
   "imports": [],
   "loc": {
     "end": {
-      "column": 26,
+      "column": 45,
       "line": 1,
-      "offset": 25,
+      "offset": 44,
     },
-    "source": "<template></�></template>",
+    "source": "<template><div foo=bar<div></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar<div></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template><�></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar=baz></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "<�>",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 14,
+              "column": 34,
               "line": 1,
-              "offset": 13,
+              "offset": 33,
             },
-            "source": "<�>",
+            "source": "<div foo=bar=baz></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 2,
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 27,
+                  "line": 1,
+                  "offset": 26,
+                },
+                "source": "foo=bar=baz",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": {
+                "content": "bar=baz",
+                "loc": {
+                  "end": {
+                    "column": 27,
+                    "line": 1,
+                    "offset": 26,
+                  },
+                  "source": "bar=baz",
+                  "start": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                },
+                "type": 2,
+              },
+            },
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 25,
+          "column": 45,
           "line": 1,
-          "offset": 24,
+          "offset": 44,
         },
-        "source": "<template><�></template>",
+        "source": "<template><div foo=bar=baz></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3298,73 +3288,108 @@ exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <templ
   "imports": [],
   "loc": {
     "end": {
-      "column": 25,
+      "column": 45,
       "line": 1,
-      "offset": 24,
+      "offset": 44,
     },
-    "source": "<template><�></template>",
+    "source": "<template><div foo=bar=baz></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar=baz></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template>{{a < b}}</template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar\`></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": {
-            "constType": 0,
-            "content": "a < b",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 18,
-                "line": 1,
-                "offset": 17,
-              },
-              "source": "a < b",
-              "start": {
-                "column": 13,
-                "line": 1,
-                "offset": 12,
-              },
-            },
-            "type": 4,
-          },
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 20,
+              "column": 31,
               "line": 1,
-              "offset": 19,
+              "offset": 30,
             },
-            "source": "{{a < b}}",
+            "source": "<div foo=bar\`></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 5,
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 24,
+                  "line": 1,
+                  "offset": 23,
+                },
+                "source": "foo=bar\`",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "foo",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "foo",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": {
+                "content": "bar\`",
+                "loc": {
+                  "end": {
+                    "column": 24,
+                    "line": 1,
+                    "offset": 23,
+                  },
+                  "source": "bar\`",
+                  "start": {
+                    "column": 20,
+                    "line": 1,
+                    "offset": 19,
+                  },
+                },
+                "type": 2,
+              },
+            },
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 31,
+          "column": 42,
           "line": 1,
-          "offset": 30,
+          "offset": 41,
         },
-        "source": "<template>{{a < b}}</template>",
+        "source": "<template><div foo=bar\`></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3386,142 +3411,92 @@ exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <templ
   "imports": [],
   "loc": {
     "end": {
-      "column": 31,
+      "column": 42,
       "line": 1,
-      "offset": 30,
+      "offset": 41,
     },
-    "source": "<template>{{a < b}}</template>",
+    "source": "<template><div foo=bar\`></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div foo=bar\`></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template>a < b</template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME > <template><div =></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "a < b",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 16,
+              "column": 24,
               "line": 1,
-              "offset": 15,
-            },
-            "source": "a < b",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 27,
-          "line": 1,
-          "offset": 26,
-        },
-        "source": "<template>a < b</template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 27,
-      "line": 1,
-      "offset": 26,
-    },
-    "source": "<template>a < b</template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <template>a </ b</template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "a ",
-          "loc": {
-            "end": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
+              "offset": 23,
             },
-            "source": "a ",
+            "source": "<div =></div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 2,
-        },
-        {
-          "content": " b</template",
-          "loc": {
-            "end": {
-              "column": 28,
-              "line": 1,
-              "offset": 27,
-            },
-            "source": "</ b</template>",
-            "start": {
-              "column": 13,
-              "line": 1,
-              "offset": 12,
+          "ns": 0,
+          "props": [
+            {
+              "loc": {
+                "end": {
+                  "column": 17,
+                  "line": 1,
+                  "offset": 16,
+                },
+                "source": "=",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "=",
+              "nameLoc": {
+                "end": {
+                  "column": 17,
+                  "line": 1,
+                  "offset": 16,
+                },
+                "source": "=",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": undefined,
             },
-          },
-          "type": 3,
+          ],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 28,
+          "column": 35,
           "line": 1,
-          "offset": 27,
+          "offset": 34,
         },
-        "source": "<template>a </ b</template>",
+        "source": "<template><div =></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3543,23 +3518,24 @@ exports[`compiler: parse > Errors > INVALID_FIRST_CHARACTER_OF_TAG_NAME > <templ
   "imports": [],
   "loc": {
     "end": {
-      "column": 28,
+      "column": 35,
       "line": 1,
-      "offset": 27,
+      "offset": 34,
     },
-    "source": "<template>a </ b</template>",
+    "source": "<template><div =></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div =></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= /></div></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME > <template><div =foo=bar></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -3568,14 +3544,13 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 28,
+              "column": 31,
               "line": 1,
-              "offset": 27,
+              "offset": 30,
             },
-            "source": "<div id= /></div>",
+            "source": "<div =foo=bar></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -3587,32 +3562,45 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
             {
               "loc": {
                 "end": {
-                  "column": 21,
+                  "column": 24,
                   "line": 1,
-                  "offset": 20,
+                  "offset": 23,
                 },
-                "source": "id= /",
+                "source": "=foo=bar",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "name": "=foo",
+              "nameLoc": {
+                "end": {
+                  "column": 20,
+                  "line": 1,
+                  "offset": 19,
+                },
+                "source": "=foo",
                 "start": {
                   "column": 16,
                   "line": 1,
                   "offset": 15,
                 },
               },
-              "name": "id",
               "type": 6,
               "value": {
-                "content": "/",
+                "content": "bar",
                 "loc": {
                   "end": {
-                    "column": 21,
+                    "column": 24,
                     "line": 1,
-                    "offset": 20,
+                    "offset": 23,
                   },
-                  "source": "/",
+                  "source": "bar",
                   "start": {
-                    "column": 20,
+                    "column": 21,
                     "line": 1,
-                    "offset": 19,
+                    "offset": 20,
                   },
                 },
                 "type": 2,
@@ -3625,14 +3613,13 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 39,
+          "column": 42,
           "line": 1,
-          "offset": 38,
+          "offset": 41,
         },
-        "source": "<template><div id= /></div></template>",
+        "source": "<template><div =foo=bar></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3654,80 +3641,37 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
   "imports": [],
   "loc": {
     "end": {
-      "column": 39,
+      "column": 42,
       "line": 1,
-      "offset": 38,
+      "offset": 41,
     },
-    "source": "<template><div id= /></div></template>",
+    "source": "<template><div =foo=bar></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div =foo=bar></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id= ></div></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME > <template><?xml?></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 27,
-              "line": 1,
-              "offset": 26,
-            },
-            "source": "<div id= ></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 20,
-                  "line": 1,
-                  "offset": 19,
-                },
-                "source": "id= ",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 38,
+          "column": 29,
           "line": 1,
-          "offset": 37,
+          "offset": 28,
         },
-        "source": "<template><div id= ></div></template>",
+        "source": "<template><?xml?></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3749,23 +3693,24 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
   "imports": [],
   "loc": {
     "end": {
-      "column": 38,
+      "column": 29,
       "line": 1,
-      "offset": 37,
+      "offset": 28,
     },
-    "source": "<template><div id= ></div></template>",
+    "source": "<template><?xml?></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><?xml?></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=></div></template> 1`] = `
+exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a/b></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -3774,14 +3719,13 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
               "column": 26,
               "line": 1,
               "offset": 25,
             },
-            "source": "<div id=></div>",
+            "source": "<div a/b></div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -3793,36 +3737,79 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
             {
               "loc": {
                 "end": {
-                  "column": 19,
+                  "column": 17,
                   "line": 1,
-                  "offset": 18,
+                  "offset": 16,
                 },
-                "source": "id=",
+                "source": "a",
                 "start": {
                   "column": 16,
                   "line": 1,
                   "offset": 15,
                 },
               },
-              "name": "id",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
+              "name": "a",
+              "nameLoc": {
+                "end": {
+                  "column": 17,
+                  "line": 1,
+                  "offset": 16,
+                },
+                "source": "a",
+                "start": {
+                  "column": 16,
+                  "line": 1,
+                  "offset": 15,
+                },
+              },
+              "type": 6,
+              "value": undefined,
+            },
+            {
+              "loc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "b",
+                "start": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+              },
+              "name": "b",
+              "nameLoc": {
+                "end": {
+                  "column": 19,
+                  "line": 1,
+                  "offset": 18,
+                },
+                "source": "b",
+                "start": {
+                  "column": 18,
+                  "line": 1,
+                  "offset": 17,
+                },
+              },
+              "type": 6,
+              "value": undefined,
+            },
+          ],
+          "tag": "div",
           "tagType": 0,
           "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
           "column": 37,
           "line": 1,
           "offset": 36,
         },
-        "source": "<template><div id=></div></template>",
+        "source": "<template><div a/b></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -3848,42 +3835,60 @@ exports[`compiler: parse > Errors > MISSING_ATTRIBUTE_VALUE > <template><div id=
       "line": 1,
       "offset": 36,
     },
-    "source": "<template><div id=></div></template>",
+    "source": "<template><div a/b></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div a/b></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></template> 1`] = `
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><![CDATA[</div>]]></svg> 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [],
+      "children": [
+        {
+          "content": "</div>",
+          "loc": {
+            "end": {
+              "column": 21,
+              "line": 1,
+              "offset": 20,
+            },
+            "source": "</div>",
+            "start": {
+              "column": 15,
+              "line": 1,
+              "offset": 14,
+            },
+          },
+          "type": 2,
+        },
+      ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 25,
+          "column": 30,
           "line": 1,
-          "offset": 24,
+          "offset": 29,
         },
-        "source": "<template></></template>",
+        "source": "<svg><![CDATA[</div>]]></svg>",
         "start": {
           "column": 1,
           "line": 1,
           "offset": 0,
         },
       },
-      "ns": 0,
+      "ns": 1,
       "props": [],
-      "tag": "template",
+      "tag": "svg",
       "tagType": 0,
       "type": 1,
     },
@@ -3896,132 +3901,107 @@ exports[`compiler: parse > Errors > MISSING_END_TAG_NAME > <template></></templa
   "imports": [],
   "loc": {
     "end": {
-      "column": 25,
+      "column": 30,
       "line": 1,
-      "offset": 24,
+      "offset": 29,
     },
-    "source": "<template></></template>",
+    "source": "<svg><![CDATA[</div>]]></svg>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<svg><![CDATA[</div>]]></svg>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <template><div id="foo"\\x0d;\\x0a;class="bar"></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><!--</div>--></svg> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "</div>",
           "loc": {
             "end": {
               "column": 19,
-              "line": 2,
-              "offset": 43,
+              "line": 1,
+              "offset": 18,
             },
-            "source": "<div id=\\"foo\\"
-class=\\"bar\\"></div>",
+            "source": "<!--</div>-->",
             "start": {
-              "column": 11,
+              "column": 6,
               "line": 1,
-              "offset": 10,
+              "offset": 5,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"foo\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "foo",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"foo\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-            {
-              "loc": {
-                "end": {
-                  "column": 12,
-                  "line": 2,
-                  "offset": 36,
-                },
-                "source": "class=\\"bar\\"",
-                "start": {
-                  "column": 1,
-                  "line": 2,
-                  "offset": 25,
-                },
-              },
-              "name": "class",
-              "type": 6,
-              "value": {
-                "content": "bar",
-                "loc": {
-                  "end": {
-                    "column": 12,
-                    "line": 2,
-                    "offset": 36,
-                  },
-                  "source": "\\"bar\\"",
-                  "start": {
-                    "column": 7,
-                    "line": 2,
-                    "offset": 31,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 3,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 30,
-          "line": 2,
-          "offset": 54,
+          "column": 25,
+          "line": 1,
+          "offset": 24,
+        },
+        "source": "<svg><!--</div>--></svg>",
+        "start": {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "ns": 1,
+      "props": [],
+      "tag": "svg",
+      "tagType": 0,
+      "type": 1,
+    },
+  ],
+  "codegenNode": undefined,
+  "components": [],
+  "directives": [],
+  "helpers": Set {},
+  "hoists": [],
+  "imports": [],
+  "loc": {
+    "end": {
+      "column": 25,
+      "line": 1,
+      "offset": 24,
+    },
+    "source": "<svg><!--</div>--></svg>",
+    "start": {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "source": "<svg><!--</div>--></svg>",
+  "temps": 0,
+  "type": 0,
+}
+`;
+
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></div></template> 1`] = `
+{
+  "cached": 0,
+  "children": [
+    {
+      "children": [],
+      "codegenNode": undefined,
+      "loc": {
+        "end": {
+          "column": 34,
+          "line": 1,
+          "offset": 33,
         },
-        "source": "<template><div id=\\"foo\\"
-class=\\"bar\\"></div></template>",
+        "source": "<template></div></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4043,131 +4023,37 @@ class=\\"bar\\"></div></template>",
   "imports": [],
   "loc": {
     "end": {
-      "column": 30,
-      "line": 2,
-      "offset": 54,
+      "column": 34,
+      "line": 1,
+      "offset": 33,
     },
-    "source": "<template><div id=\\"foo\\"
-class=\\"bar\\"></div></template>",
+    "source": "<template></div></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template></div></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <template><div id="foo"class="bar"></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 42,
-              "line": 1,
-              "offset": 41,
-            },
-            "source": "<div id=\\"foo\\"class=\\"bar\\"></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "id=\\"foo\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "id",
-              "type": 6,
-              "value": {
-                "content": "foo",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "\\"foo\\"",
-                  "start": {
-                    "column": 19,
-                    "line": 1,
-                    "offset": 18,
-                  },
-                },
-                "type": 2,
-              },
-            },
-            {
-              "loc": {
-                "end": {
-                  "column": 35,
-                  "line": 1,
-                  "offset": 34,
-                },
-                "source": "class=\\"bar\\"",
-                "start": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-              },
-              "name": "class",
-              "type": 6,
-              "value": {
-                "content": "bar",
-                "loc": {
-                  "end": {
-                    "column": 35,
-                    "line": 1,
-                    "offset": 34,
-                  },
-                  "source": "\\"bar\\"",
-                  "start": {
-                    "column": 30,
-                    "line": 1,
-                    "offset": 29,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 53,
+          "column": 28,
           "line": 1,
-          "offset": 52,
+          "offset": 27,
         },
-        "source": "<template><div id=\\"foo\\"class=\\"bar\\"></div></template>",
+        "source": "<template></div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4189,55 +4075,73 @@ exports[`compiler: parse > Errors > MISSING_WHITESPACE_BETWEEN_ATTRIBUTES > <tem
   "imports": [],
   "loc": {
     "end": {
-      "column": 53,
+      "column": 28,
       "line": 1,
-      "offset": 52,
+      "offset": 27,
     },
-    "source": "<template><div id=\\"foo\\"class=\\"bar\\"></div></template>",
+    "source": "<template></div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template></div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!-- 1`] = `
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "a<!--",
+          "content": {
+            "constType": 0,
+            "content": "'</div>'",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 21,
+                "line": 1,
+                "offset": 20,
+              },
+              "source": "'</div>'",
+              "start": {
+                "column": 13,
+                "line": 1,
+                "offset": 12,
+              },
+            },
+            "type": 4,
+          },
           "loc": {
             "end": {
-              "column": 20,
+              "column": 23,
               "line": 1,
-              "offset": 19,
+              "offset": 22,
             },
-            "source": "<!--a<!--",
+            "source": "{{'</div>'}}",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
+          "type": 5,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 20,
+          "column": 34,
           "line": 1,
-          "offset": 19,
+          "offset": 33,
         },
-        "source": "<template><!--a<!--",
+        "source": "<template>{{'</div>'}}</template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4259,55 +4163,55 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!-- 1`] = `
   "imports": [],
   "loc": {
     "end": {
-      "column": 20,
+      "column": 34,
       "line": 1,
-      "offset": 19,
+      "offset": 33,
     },
-    "source": "<template><!--a<!--",
+    "source": "<template>{{'</div>'}}</template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template>{{'</div>'}}</template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--></template> 1`] = `
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>a </ b</template> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "a<!",
+          "content": "a ",
           "loc": {
             "end": {
-              "column": 21,
+              "column": 13,
               "line": 1,
-              "offset": 20,
+              "offset": 12,
             },
-            "source": "<!--a<!-->",
+            "source": "a ",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 32,
+          "column": 28,
           "line": 1,
-          "offset": 31,
+          "offset": 27,
         },
-        "source": "<template><!--a<!--></template>",
+        "source": "<template>a </ b</template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4329,55 +4233,55 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--></templ
   "imports": [],
   "loc": {
     "end": {
-      "column": 32,
+      "column": 28,
       "line": 1,
-      "offset": 31,
+      "offset": 27,
     },
-    "source": "<template><!--a<!--></template>",
+    "source": "<template>a </ b</template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template>a </ b</template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!----></template> 1`] = `
+exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textarea> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "a<!--b<!--",
+          "content": "</div>",
           "loc": {
             "end": {
-              "column": 28,
+              "column": 17,
               "line": 1,
-              "offset": 27,
+              "offset": 16,
             },
-            "source": "<!--a<!--b<!---->",
+            "source": "</div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 39,
+          "column": 28,
           "line": 1,
-          "offset": 38,
+          "offset": 27,
         },
-        "source": "<template><!--a<!--b<!----></template>",
+        "source": "<textarea></div></textarea>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4386,7 +4290,7 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!---->
       },
       "ns": 0,
       "props": [],
-      "tag": "template",
+      "tag": "textarea",
       "tagType": 0,
       "type": 1,
     },
@@ -4399,55 +4303,38 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!---->
   "imports": [],
   "loc": {
     "end": {
-      "column": 39,
+      "column": 28,
       "line": 1,
-      "offset": 38,
+      "offset": 27,
     },
-    "source": "<template><!--a<!--b<!----></template>",
+    "source": "<textarea></div></textarea>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<textarea></div></textarea>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!--c--></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <div v-foo:[sef fsef] /> 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "content": "a<!--b<!--c",
-          "loc": {
-            "end": {
-              "column": 29,
-              "line": 1,
-              "offset": 28,
-            },
-            "source": "<!--a<!--b<!--c-->",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
+      "children": [],
       "codegenNode": undefined,
-      "isSelfClosing": false,
+      "isSelfClosing": true,
       "loc": {
         "end": {
-          "column": 40,
+          "column": 25,
           "line": 1,
-          "offset": 39,
+          "offset": 24,
         },
-        "source": "<template><!--a<!--b<!--c--></template>",
+        "source": "<div v-foo:[sef fsef] />",
         "start": {
           "column": 1,
           "line": 1,
@@ -4455,8 +4342,79 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!--c--
         },
       },
       "ns": 0,
-      "props": [],
-      "tag": "template",
+      "props": [
+        {
+          "arg": {
+            "constType": 0,
+            "content": "sef",
+            "isStatic": false,
+            "loc": {
+              "end": {
+                "column": 17,
+                "line": 1,
+                "offset": 16,
+              },
+              "source": "[sef ",
+              "start": {
+                "column": 12,
+                "line": 1,
+                "offset": 11,
+              },
+            },
+            "type": 4,
+          },
+          "exp": undefined,
+          "loc": {
+            "end": {
+              "column": 16,
+              "line": 1,
+              "offset": 15,
+            },
+            "source": "v-foo:[sef",
+            "start": {
+              "column": 6,
+              "line": 1,
+              "offset": 5,
+            },
+          },
+          "modifiers": [],
+          "name": "foo",
+          "rawName": "v-foo:[sef",
+          "type": 7,
+        },
+        {
+          "loc": {
+            "end": {
+              "column": 22,
+              "line": 1,
+              "offset": 21,
+            },
+            "source": "fsef]",
+            "start": {
+              "column": 17,
+              "line": 1,
+              "offset": 16,
+            },
+          },
+          "name": "fsef]",
+          "nameLoc": {
+            "end": {
+              "column": 22,
+              "line": 1,
+              "offset": 21,
+            },
+            "source": "fsef]",
+            "start": {
+              "column": 17,
+              "line": 1,
+              "offset": 16,
+            },
+          },
+          "type": 6,
+          "value": undefined,
+        },
+      ],
+      "tag": "div",
       "tagType": 0,
       "type": 1,
     },
@@ -4469,55 +4427,60 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b<!--c--
   "imports": [],
   "loc": {
     "end": {
-      "column": 40,
+      "column": 25,
       "line": 1,
-      "offset": 39,
+      "offset": 24,
     },
-    "source": "<template><!--a<!--b<!--c--></template>",
+    "source": "<div v-foo:[sef fsef] />",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div v-foo:[sef fsef] />",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b--></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "content": "a<!--b",
+          "children": [],
+          "codegenNode": undefined,
           "loc": {
             "end": {
-              "column": 24,
+              "column": 16,
               "line": 1,
-              "offset": 23,
+              "offset": 15,
             },
-            "source": "<!--a<!--b-->",
+            "source": "<div>",
             "start": {
               "column": 11,
               "line": 1,
               "offset": 10,
             },
           },
-          "type": 3,
+          "ns": 0,
+          "props": [],
+          "tag": "div",
+          "tagType": 0,
+          "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 35,
+          "column": 16,
           "line": 1,
-          "offset": 34,
+          "offset": 15,
         },
-        "source": "<template><!--a<!--b--></template>",
+        "source": "<template><div>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4539,23 +4502,24 @@ exports[`compiler: parse > Errors > NESTED_COMMENT > <template><!--a<!--b--></te
   "imports": [],
   "loc": {
     "end": {
-      "column": 35,
+      "column": 16,
       "line": 1,
-      "offset": 34,
+      "offset": 15,
     },
-    "source": "<template><!--a<!--b--></template>",
+    "source": "<template><div>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a"bc=''></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></template> 1`] = `
 {
   "cached": 0,
   "children": [
@@ -4564,14 +4528,13 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
         {
           "children": [],
           "codegenNode": undefined,
-          "isSelfClosing": false,
           "loc": {
             "end": {
-              "column": 30,
+              "column": 16,
               "line": 1,
-              "offset": 29,
+              "offset": 15,
             },
-            "source": "<div a\\"bc=''></div>",
+            "source": "<div>",
             "start": {
               "column": 11,
               "line": 1,
@@ -4579,56 +4542,20 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
             },
           },
           "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 23,
-                  "line": 1,
-                  "offset": 22,
-                },
-                "source": "a\\"bc=''",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "a\\"bc",
-              "type": 6,
-              "value": {
-                "content": "",
-                "loc": {
-                  "end": {
-                    "column": 23,
-                    "line": 1,
-                    "offset": 22,
-                  },
-                  "source": "''",
-                  "start": {
-                    "column": 21,
-                    "line": 1,
-                    "offset": 20,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
+          "props": [],
           "tag": "div",
           "tagType": 0,
           "type": 1,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 41,
+          "column": 27,
           "line": 1,
-          "offset": 40,
+          "offset": 26,
         },
-        "source": "<template><div a\\"bc=''></div></template>",
+        "source": "<template><div></template>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4650,96 +4577,55 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
   "imports": [],
   "loc": {
     "end": {
-      "column": 41,
+      "column": 27,
       "line": 1,
-      "offset": 40,
+      "offset": 26,
     },
-    "source": "<template><div a\\"bc=''></div></template>",
+    "source": "<template><div></template>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<template><div></template>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a'bc=''></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > <div>{{ foo</div> 1`] = `
 {
   "cached": 0,
   "children": [
     {
       "children": [
         {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
+          "content": "{{ foo</div>",
           "loc": {
             "end": {
-              "column": 30,
+              "column": 18,
               "line": 1,
-              "offset": 29,
+              "offset": 17,
             },
-            "source": "<div a'bc=''></div>",
+            "source": "{{ foo</div>",
             "start": {
-              "column": 11,
+              "column": 6,
               "line": 1,
-              "offset": 10,
+              "offset": 5,
             },
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 23,
-                  "line": 1,
-                  "offset": 22,
-                },
-                "source": "a'bc=''",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "a'bc",
-              "type": 6,
-              "value": {
-                "content": "",
-                "loc": {
-                  "end": {
-                    "column": 23,
-                    "line": 1,
-                    "offset": 22,
-                  },
-                  "source": "''",
-                  "start": {
-                    "column": 21,
-                    "line": 1,
-                    "offset": 20,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
+          "type": 2,
         },
       ],
       "codegenNode": undefined,
-      "isSelfClosing": false,
       "loc": {
         "end": {
-          "column": 41,
+          "column": 18,
           "line": 1,
-          "offset": 40,
+          "offset": 17,
         },
-        "source": "<template><div a'bc=''></div></template>",
+        "source": "<div>{{ foo</div>",
         "start": {
           "column": 1,
           "line": 1,
@@ -4748,7 +4634,7 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
       },
       "ns": 0,
       "props": [],
-      "tag": "template",
+      "tag": "div",
       "tagType": 0,
       "type": 1,
     },
@@ -4761,107 +4647,43 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
   "imports": [],
   "loc": {
     "end": {
-      "column": 41,
+      "column": 18,
       "line": 1,
-      "offset": 40,
+      "offset": 17,
     },
-    "source": "<template><div a'bc=''></div></template>",
+    "source": "<div>{{ foo</div>",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "<div>{{ foo</div>",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <template><div a<bc=''></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 30,
-              "line": 1,
-              "offset": 29,
-            },
-            "source": "<div a<bc=''></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 23,
-                  "line": 1,
-                  "offset": 22,
-                },
-                "source": "a<bc=''",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "a<bc",
-              "type": 6,
-              "value": {
-                "content": "",
-                "loc": {
-                  "end": {
-                    "column": 23,
-                    "line": 1,
-                    "offset": 22,
-                  },
-                  "source": "''",
-                  "start": {
-                    "column": 21,
-                    "line": 1,
-                    "offset": 20,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
+      "content": "{{",
       "loc": {
         "end": {
-          "column": 41,
+          "column": 3,
           "line": 1,
-          "offset": 40,
+          "offset": 2,
         },
-        "source": "<template><div a<bc=''></div></template>",
+        "source": "{{",
         "start": {
           "column": 1,
           "line": 1,
           "offset": 0,
         },
       },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
+      "type": 2,
     },
   ],
   "codegenNode": undefined,
@@ -4872,107 +4694,43 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME > <te
   "imports": [],
   "loc": {
     "end": {
-      "column": 41,
+      "column": 3,
       "line": 1,
-      "offset": 40,
+      "offset": 2,
     },
-    "source": "<template><div a<bc=''></div></template>",
+    "source": "{{",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "{{",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar"></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ foo 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 31,
-              "line": 1,
-              "offset": 30,
-            },
-            "source": "<div foo=bar\\"></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "foo=bar\\"",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "foo",
-              "type": 6,
-              "value": {
-                "content": "bar\\"",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "bar\\"",
-                  "start": {
-                    "column": 20,
-                    "line": 1,
-                    "offset": 19,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
+      "content": "{{ foo",
       "loc": {
         "end": {
-          "column": 42,
+          "column": 7,
           "line": 1,
-          "offset": 41,
+          "offset": 6,
         },
-        "source": "<template><div foo=bar\\"></div></template>",
+        "source": "{{ foo",
         "start": {
           "column": 1,
           "line": 1,
           "offset": 0,
         },
       },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
+      "type": 2,
     },
   ],
   "codegenNode": undefined,
@@ -4983,218 +4741,61 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
   "imports": [],
   "loc": {
     "end": {
-      "column": 42,
+      "column": 7,
       "line": 1,
-      "offset": 41,
+      "offset": 6,
     },
-    "source": "<template><div foo=bar\\"></div></template>",
+    "source": "{{ foo",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "{{ foo",
   "temps": 0,
   "type": 0,
 }
 `;
 
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar'></div></template> 1`] = `
+exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{}} 1`] = `
 {
   "cached": 0,
   "children": [
     {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 31,
-              "line": 1,
-              "offset": 30,
-            },
-            "source": "<div foo=bar'></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
+      "content": {
+        "constType": 0,
+        "content": "",
+        "isStatic": false,
+        "loc": {
+          "end": {
+            "column": 3,
+            "line": 1,
+            "offset": 2,
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "foo=bar'",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "foo",
-              "type": 6,
-              "value": {
-                "content": "bar'",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "bar'",
-                  "start": {
-                    "column": 20,
-                    "line": 1,
-                    "offset": 19,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 42,
-          "line": 1,
-          "offset": 41,
-        },
-        "source": "<template><div foo=bar'></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 42,
-      "line": 1,
-      "offset": 41,
-    },
-    "source": "<template><div foo=bar'></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar<div></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 34,
-              "line": 1,
-              "offset": 33,
-            },
-            "source": "<div foo=bar<div></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
+          "source": "",
+          "start": {
+            "column": 3,
+            "line": 1,
+            "offset": 2,
           },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 27,
-                  "line": 1,
-                  "offset": 26,
-                },
-                "source": "foo=bar<div",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "foo",
-              "type": 6,
-              "value": {
-                "content": "bar<div",
-                "loc": {
-                  "end": {
-                    "column": 27,
-                    "line": 1,
-                    "offset": 26,
-                  },
-                  "source": "bar<div",
-                  "start": {
-                    "column": 20,
-                    "line": 1,
-                    "offset": 19,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
         },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
+        "type": 4,
+      },
       "loc": {
         "end": {
-          "column": 45,
+          "column": 5,
           "line": 1,
-          "offset": 44,
+          "offset": 4,
         },
-        "source": "<template><div foo=bar<div></div></template>",
+        "source": "{{}}",
         "start": {
           "column": 1,
           "line": 1,
           "offset": 0,
         },
       },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
+      "type": 5,
     },
   ],
   "codegenNode": undefined,
@@ -5205,1932 +4806,18 @@ exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_V
   "imports": [],
   "loc": {
     "end": {
-      "column": 45,
-      "line": 1,
-      "offset": 44,
-    },
-    "source": "<template><div foo=bar<div></div></template>",
-    "start": {
-      "column": 1,
+      "column": 5,
       "line": 1,
-      "offset": 0,
+      "offset": 4,
     },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar=baz></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 34,
-              "line": 1,
-              "offset": 33,
-            },
-            "source": "<div foo=bar=baz></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 27,
-                  "line": 1,
-                  "offset": 26,
-                },
-                "source": "foo=bar=baz",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "foo",
-              "type": 6,
-              "value": {
-                "content": "bar=baz",
-                "loc": {
-                  "end": {
-                    "column": 27,
-                    "line": 1,
-                    "offset": 26,
-                  },
-                  "source": "bar=baz",
-                  "start": {
-                    "column": 20,
-                    "line": 1,
-                    "offset": 19,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 45,
-          "line": 1,
-          "offset": 44,
-        },
-        "source": "<template><div foo=bar=baz></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 45,
-      "line": 1,
-      "offset": 44,
-    },
-    "source": "<template><div foo=bar=baz></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE > <template><div foo=bar\`></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 31,
-              "line": 1,
-              "offset": 30,
-            },
-            "source": "<div foo=bar\`></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "foo=bar\`",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "foo",
-              "type": 6,
-              "value": {
-                "content": "bar\`",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "bar\`",
-                  "start": {
-                    "column": 20,
-                    "line": 1,
-                    "offset": 19,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 42,
-          "line": 1,
-          "offset": 41,
-        },
-        "source": "<template><div foo=bar\`></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 42,
-      "line": 1,
-      "offset": 41,
-    },
-    "source": "<template><div foo=bar\`></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME > <template><div =></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 24,
-              "line": 1,
-              "offset": 23,
-            },
-            "source": "<div =></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 17,
-                  "line": 1,
-                  "offset": 16,
-                },
-                "source": "=",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "=",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 35,
-          "line": 1,
-          "offset": 34,
-        },
-        "source": "<template><div =></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 35,
-      "line": 1,
-      "offset": 34,
-    },
-    "source": "<template><div =></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME > <template><div =foo=bar></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 31,
-              "line": 1,
-              "offset": 30,
-            },
-            "source": "<div =foo=bar></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 24,
-                  "line": 1,
-                  "offset": 23,
-                },
-                "source": "=foo=bar",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "=foo",
-              "type": 6,
-              "value": {
-                "content": "bar",
-                "loc": {
-                  "end": {
-                    "column": 24,
-                    "line": 1,
-                    "offset": 23,
-                  },
-                  "source": "bar",
-                  "start": {
-                    "column": 21,
-                    "line": 1,
-                    "offset": 20,
-                  },
-                },
-                "type": 2,
-              },
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 42,
-          "line": 1,
-          "offset": 41,
-        },
-        "source": "<template><div =foo=bar></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 42,
-      "line": 1,
-      "offset": 41,
-    },
-    "source": "<template><div =foo=bar></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME > <template><?xml?></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "?xml?",
-          "loc": {
-            "end": {
-              "column": 18,
-              "line": 1,
-              "offset": 17,
-            },
-            "source": "<?xml?>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 29,
-          "line": 1,
-          "offset": 28,
-        },
-        "source": "<template><?xml?></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 29,
-      "line": 1,
-      "offset": 28,
-    },
-    "source": "<template><?xml?></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > UNEXPECTED_SOLIDUS_IN_TAG > <template><div a/b></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 26,
-              "line": 1,
-              "offset": 25,
-            },
-            "source": "<div a/b></div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "loc": {
-                "end": {
-                  "column": 17,
-                  "line": 1,
-                  "offset": 16,
-                },
-                "source": "a",
-                "start": {
-                  "column": 16,
-                  "line": 1,
-                  "offset": 15,
-                },
-              },
-              "name": "a",
-              "type": 6,
-              "value": undefined,
-            },
-            {
-              "loc": {
-                "end": {
-                  "column": 19,
-                  "line": 1,
-                  "offset": 18,
-                },
-                "source": "b",
-                "start": {
-                  "column": 18,
-                  "line": 1,
-                  "offset": 17,
-                },
-              },
-              "name": "b",
-              "type": 6,
-              "value": undefined,
-            },
-          ],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 1,
-          "offset": 36,
-        },
-        "source": "<template><div a/b></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 37,
-      "line": 1,
-      "offset": 36,
-    },
-    "source": "<template><div a/b></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><![CDATA[</div>]]></svg> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "</div>",
-          "loc": {
-            "end": {
-              "column": 21,
-              "line": 1,
-              "offset": 20,
-            },
-            "source": "</div>",
-            "start": {
-              "column": 15,
-              "line": 1,
-              "offset": 14,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 30,
-          "line": 1,
-          "offset": 29,
-        },
-        "source": "<svg><![CDATA[</div>]]></svg>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 1,
-      "props": [],
-      "tag": "svg",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 30,
-      "line": 1,
-      "offset": 29,
-    },
-    "source": "<svg><![CDATA[</div>]]></svg>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_INVALID_END_TAG > <svg><!--</div>--></svg> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "</div>",
-          "loc": {
-            "end": {
-              "column": 19,
-              "line": 1,
-              "offset": 18,
-            },
-            "source": "<!--</div>-->",
-            "start": {
-              "column": 6,
-              "line": 1,
-              "offset": 5,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 25,
-          "line": 1,
-          "offset": 24,
-        },
-        "source": "<svg><!--</div>--></svg>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 1,
-      "props": [],
-      "tag": "svg",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 25,
-      "line": 1,
-      "offset": 24,
-    },
-    "source": "<svg><!--</div>--></svg>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 34,
-          "line": 1,
-          "offset": 33,
-        },
-        "source": "<template></div></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 34,
-      "line": 1,
-      "offset": 33,
-    },
-    "source": "<template></div></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template></div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 28,
-          "line": 1,
-          "offset": 27,
-        },
-        "source": "<template></div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 28,
-      "line": 1,
-      "offset": 27,
-    },
-    "source": "<template></div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_INVALID_END_TAG > <template>{{'</div>'}}</template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": {
-            "constType": 0,
-            "content": "'</div>'",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 21,
-                "line": 1,
-                "offset": 20,
-              },
-              "source": "'</div>'",
-              "start": {
-                "column": 13,
-                "line": 1,
-                "offset": 12,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 23,
-              "line": 1,
-              "offset": 22,
-            },
-            "source": "{{'</div>'}}",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 5,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 34,
-          "line": 1,
-          "offset": 33,
-        },
-        "source": "<template>{{'</div>'}}</template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 34,
-      "line": 1,
-      "offset": 33,
-    },
-    "source": "<template>{{'</div>'}}</template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_INVALID_END_TAG > <textarea></div></textarea> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "content": "</div>",
-          "loc": {
-            "end": {
-              "column": 17,
-              "line": 1,
-              "offset": 16,
-            },
-            "source": "</div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "type": 2,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 28,
-          "line": 1,
-          "offset": 27,
-        },
-        "source": "<textarea></div></textarea>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "textarea",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 28,
-      "line": 1,
-      "offset": 27,
-    },
-    "source": "<textarea></div></textarea>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END > <div v-foo:[sef fsef] /> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": true,
-      "loc": {
-        "end": {
-          "column": 25,
-          "line": 1,
-          "offset": 24,
-        },
-        "source": "<div v-foo:[sef fsef] />",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 0,
-            "content": "sef",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 16,
-                "line": 1,
-                "offset": 15,
-              },
-              "source": "[sef",
-              "start": {
-                "column": 12,
-                "line": 1,
-                "offset": 11,
-              },
-            },
-            "type": 4,
-          },
-          "exp": undefined,
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "v-foo:[sef",
-            "start": {
-              "column": 6,
-              "line": 1,
-              "offset": 5,
-            },
-          },
-          "modifiers": [],
-          "name": "foo",
-          "type": 7,
-        },
-        {
-          "loc": {
-            "end": {
-              "column": 22,
-              "line": 1,
-              "offset": 21,
-            },
-            "source": "fsef]",
-            "start": {
-              "column": 17,
-              "line": 1,
-              "offset": 16,
-            },
-          },
-          "name": "fsef]",
-          "type": 6,
-          "value": undefined,
-        },
-      ],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 25,
-      "line": 1,
-      "offset": 24,
-    },
-    "source": "<div v-foo:[sef fsef] />",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "<div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 16,
-          "line": 1,
-          "offset": 15,
-        },
-        "source": "<template><div>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 16,
-      "line": 1,
-      "offset": 15,
-    },
-    "source": "<template><div>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_MISSING_END_TAG > <template><div></template> 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 16,
-              "line": 1,
-              "offset": 15,
-            },
-            "source": "<div>",
-            "start": {
-              "column": 11,
-              "line": 1,
-              "offset": 10,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "div",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 27,
-          "line": 1,
-          "offset": 26,
-        },
-        "source": "<template><div></template>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "template",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 27,
-      "line": 1,
-      "offset": 26,
-    },
-    "source": "<template><div></template>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "content": "{{",
-      "loc": {
-        "end": {
-          "column": 3,
-          "line": 1,
-          "offset": 2,
-        },
-        "source": "{{",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "type": 2,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 3,
-      "line": 1,
-      "offset": 2,
-    },
-    "source": "{{",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{ foo 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "content": "{{ foo",
-      "loc": {
-        "end": {
-          "column": 7,
-          "line": 1,
-          "offset": 6,
-        },
-        "source": "{{ foo",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "type": 2,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 7,
-      "line": 1,
-      "offset": 6,
-    },
-    "source": "{{ foo",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > Errors > X_MISSING_INTERPOLATION_END > {{}} 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "content": {
-        "constType": 0,
-        "content": "",
-        "isStatic": false,
-        "loc": {
-          "end": {
-            "column": 3,
-            "line": 1,
-            "offset": 2,
-          },
-          "source": "",
-          "start": {
-            "column": 3,
-            "line": 1,
-            "offset": 2,
-          },
-        },
-        "type": 4,
-      },
-      "loc": {
-        "end": {
-          "column": 5,
-          "line": 1,
-          "offset": 4,
-        },
-        "source": "{{}}",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "type": 5,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 5,
-      "line": 1,
-      "offset": 4,
-    },
-    "source": "{{}}",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > invalid html 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": false,
-          "loc": {
-            "end": {
-              "column": 1,
-              "line": 3,
-              "offset": 13,
-            },
-            "source": "<span>
-",
-            "start": {
-              "column": 1,
-              "line": 2,
-              "offset": 6,
-            },
-          },
-          "ns": 0,
-          "props": [],
-          "tag": "span",
-          "tagType": 0,
-          "type": 1,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 7,
-          "line": 3,
-          "offset": 19,
-        },
-        "source": "<div>
-<span>
-</div>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 8,
-      "line": 4,
-      "offset": 27,
-    },
-    "source": "<div>
-<span>
-</div>
-</span>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > self closing multiple tag 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": true,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 1,
-          "offset": 36,
-        },
-        "source": "<div :class=\\"{ some: condition }\\" />",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 3,
-            "content": "class",
-            "isStatic": true,
-            "loc": {
-              "end": {
-                "column": 12,
-                "line": 1,
-                "offset": 11,
-              },
-              "source": "class",
-              "start": {
-                "column": 7,
-                "line": 1,
-                "offset": 6,
-              },
-            },
-            "type": 4,
-          },
-          "exp": {
-            "constType": 0,
-            "content": "{ some: condition }",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 33,
-                "line": 1,
-                "offset": 32,
-              },
-              "source": "{ some: condition }",
-              "start": {
-                "column": 14,
-                "line": 1,
-                "offset": 13,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 34,
-              "line": 1,
-              "offset": 33,
-            },
-            "source": ":class=\\"{ some: condition }\\"",
-            "start": {
-              "column": 6,
-              "line": 1,
-              "offset": 5,
-            },
-          },
-          "modifiers": [],
-          "name": "bind",
-          "type": 7,
-        },
-      ],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-    {
-      "children": [],
-      "codegenNode": undefined,
-      "isSelfClosing": true,
-      "loc": {
-        "end": {
-          "column": 37,
-          "line": 2,
-          "offset": 73,
-        },
-        "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
-        "start": {
-          "column": 1,
-          "line": 2,
-          "offset": 37,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 3,
-            "content": "style",
-            "isStatic": true,
-            "loc": {
-              "end": {
-                "column": 16,
-                "line": 2,
-                "offset": 52,
-              },
-              "source": "style",
-              "start": {
-                "column": 11,
-                "line": 2,
-                "offset": 47,
-              },
-            },
-            "type": 4,
-          },
-          "exp": {
-            "constType": 0,
-            "content": "{ color: 'red' }",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 34,
-                "line": 2,
-                "offset": 70,
-              },
-              "source": "{ color: 'red' }",
-              "start": {
-                "column": 18,
-                "line": 2,
-                "offset": 54,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 35,
-              "line": 2,
-              "offset": 71,
-            },
-            "source": "v-bind:style=\\"{ color: 'red' }\\"",
-            "start": {
-              "column": 4,
-              "line": 2,
-              "offset": 40,
-            },
-          },
-          "modifiers": [],
-          "name": "bind",
-          "type": 7,
-        },
-      ],
-      "tag": "p",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 37,
-      "line": 2,
-      "offset": 73,
-    },
-    "source": "<div :class=\\"{ some: condition }\\" />
-<p v-bind:style=\\"{ color: 'red' }\\"/>",
-    "start": {
-      "column": 1,
-      "line": 1,
-      "offset": 0,
-    },
-  },
-  "temps": 0,
-  "type": 0,
-}
-`;
-
-exports[`compiler: parse > valid html 1`] = `
-{
-  "cached": 0,
-  "children": [
-    {
-      "children": [
-        {
-          "children": [],
-          "codegenNode": undefined,
-          "isSelfClosing": true,
-          "loc": {
-            "end": {
-              "column": 39,
-              "line": 2,
-              "offset": 73,
-            },
-            "source": "<p v-bind:style=\\"{ color: 'red' }\\"/>",
-            "start": {
-              "column": 3,
-              "line": 2,
-              "offset": 37,
-            },
-          },
-          "ns": 0,
-          "props": [
-            {
-              "arg": {
-                "constType": 3,
-                "content": "style",
-                "isStatic": true,
-                "loc": {
-                  "end": {
-                    "column": 18,
-                    "line": 2,
-                    "offset": 52,
-                  },
-                  "source": "style",
-                  "start": {
-                    "column": 13,
-                    "line": 2,
-                    "offset": 47,
-                  },
-                },
-                "type": 4,
-              },
-              "exp": {
-                "constType": 0,
-                "content": "{ color: 'red' }",
-                "isStatic": false,
-                "loc": {
-                  "end": {
-                    "column": 36,
-                    "line": 2,
-                    "offset": 70,
-                  },
-                  "source": "{ color: 'red' }",
-                  "start": {
-                    "column": 20,
-                    "line": 2,
-                    "offset": 54,
-                  },
-                },
-                "type": 4,
-              },
-              "loc": {
-                "end": {
-                  "column": 37,
-                  "line": 2,
-                  "offset": 71,
-                },
-                "source": "v-bind:style=\\"{ color: 'red' }\\"",
-                "start": {
-                  "column": 6,
-                  "line": 2,
-                  "offset": 40,
-                },
-              },
-              "modifiers": [],
-              "name": "bind",
-              "type": 7,
-            },
-          ],
-          "tag": "p",
-          "tagType": 0,
-          "type": 1,
-        },
-        {
-          "content": " a comment with <html> inside it ",
-          "loc": {
-            "end": {
-              "column": 43,
-              "line": 3,
-              "offset": 116,
-            },
-            "source": "<!-- a comment with <html> inside it -->",
-            "start": {
-              "column": 3,
-              "line": 3,
-              "offset": 76,
-            },
-          },
-          "type": 3,
-        },
-      ],
-      "codegenNode": undefined,
-      "isSelfClosing": false,
-      "loc": {
-        "end": {
-          "column": 7,
-          "line": 4,
-          "offset": 123,
-        },
-        "source": "<div :class=\\"{ some: condition }\\">
-  <p v-bind:style=\\"{ color: 'red' }\\"/>
-  <!-- a comment with <html> inside it -->
-</div>",
-        "start": {
-          "column": 1,
-          "line": 1,
-          "offset": 0,
-        },
-      },
-      "ns": 0,
-      "props": [
-        {
-          "arg": {
-            "constType": 3,
-            "content": "class",
-            "isStatic": true,
-            "loc": {
-              "end": {
-                "column": 12,
-                "line": 1,
-                "offset": 11,
-              },
-              "source": "class",
-              "start": {
-                "column": 7,
-                "line": 1,
-                "offset": 6,
-              },
-            },
-            "type": 4,
-          },
-          "exp": {
-            "constType": 0,
-            "content": "{ some: condition }",
-            "isStatic": false,
-            "loc": {
-              "end": {
-                "column": 33,
-                "line": 1,
-                "offset": 32,
-              },
-              "source": "{ some: condition }",
-              "start": {
-                "column": 14,
-                "line": 1,
-                "offset": 13,
-              },
-            },
-            "type": 4,
-          },
-          "loc": {
-            "end": {
-              "column": 34,
-              "line": 1,
-              "offset": 33,
-            },
-            "source": ":class=\\"{ some: condition }\\"",
-            "start": {
-              "column": 6,
-              "line": 1,
-              "offset": 5,
-            },
-          },
-          "modifiers": [],
-          "name": "bind",
-          "type": 7,
-        },
-      ],
-      "tag": "div",
-      "tagType": 0,
-      "type": 1,
-    },
-  ],
-  "codegenNode": undefined,
-  "components": [],
-  "directives": [],
-  "helpers": Set {},
-  "hoists": [],
-  "imports": [],
-  "loc": {
-    "end": {
-      "column": 7,
-      "line": 4,
-      "offset": 123,
-    },
-    "source": "<div :class=\\"{ some: condition }\\">
-  <p v-bind:style=\\"{ color: 'red' }\\"/>
-  <!-- a comment with <html> inside it -->
-</div>",
+    "source": "{{}}",
     "start": {
       "column": 1,
       "line": 1,
       "offset": 0,
     },
   },
+  "source": "{{}}",
   "temps": 0,
   "type": 0,
 }
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..9c923075634 100644
--- a/packages/compiler-core/__tests__/codegen.spec.ts
+++ b/packages/compiler-core/__tests__/codegen.spec.ts
@@ -1,38 +1,38 @@
 import {
-  locStub,
-  generate,
+  ConstantTypes,
+  type DirectiveArguments,
+  type ForCodegenNode,
+  type IfConditionalExpression,
   NodeTypes,
-  RootNode,
-  createSimpleExpression,
-  createObjectExpression,
-  createObjectProperty,
+  type RootNode,
+  type VNodeCall,
   createArrayExpression,
-  createCompoundExpression,
-  createInterpolation,
+  createAssignmentExpression,
+  createBlockStatement,
+  createCacheExpression,
   createCallExpression,
+  createCompoundExpression,
   createConditionalExpression,
-  ForCodegenNode,
-  createCacheExpression,
-  createTemplateLiteral,
-  createBlockStatement,
   createIfStatement,
-  createAssignmentExpression,
-  IfConditionalExpression,
+  createInterpolation,
+  createObjectExpression,
+  createObjectProperty,
+  createSimpleExpression,
+  createTemplateLiteral,
   createVNodeCall,
-  VNodeCall,
-  DirectiveArguments,
-  ConstantTypes
+  generate,
+  locStub,
 } from '../src'
 import {
-  CREATE_VNODE,
-  TO_DISPLAY_STRING,
-  RESOLVE_DIRECTIVE,
-  helperNameMap,
-  RESOLVE_COMPONENT,
   CREATE_COMMENT,
+  CREATE_ELEMENT_VNODE,
+  CREATE_VNODE,
   FRAGMENT,
   RENDER_LIST,
-  CREATE_ELEMENT_VNODE
+  RESOLVE_COMPONENT,
+  RESOLVE_DIRECTIVE,
+  TO_DISPLAY_STRING,
+  helperNameMap,
 } from '../src/runtimeHelpers'
 import { createElementWithCodegen, genFlagText } from './testUtils'
 import { PatchFlags } from '@vue/shared'
@@ -40,6 +40,7 @@ import { PatchFlags } from '@vue/shared'
 function createRoot(options: Partial<RootNode> = {}): RootNode {
   return {
     type: NodeTypes.ROOT,
+    source: '',
     children: [],
     helpers: new Set(),
     components: [],
@@ -50,59 +51,59 @@ function createRoot(options: Partial<RootNode> = {}): RootNode {
     temps: 0,
     codegenNode: createSimpleExpression(`null`, false),
     loc: locStub,
-    ...options
+    ...options,
   }
 }
 
 describe('compiler: codegen', () => {
   test('module mode preamble', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, { mode: 'module' })
     expect(code).toMatch(
-      `import { ${helperNameMap[CREATE_VNODE]} as _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} as _${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`
+      `import { ${helperNameMap[CREATE_VNODE]} as _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} as _${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`,
     )
     expect(code).toMatchSnapshot()
   })
 
   test('module mode preamble w/ optimizeImports: true', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, { mode: 'module', optimizeImports: true })
     expect(code).toMatch(
-      `import { ${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`
+      `import { ${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]} } from "vue"`,
     )
     expect(code).toMatch(
-      `const _${helperNameMap[CREATE_VNODE]} = ${helperNameMap[CREATE_VNODE]}, _${helperNameMap[RESOLVE_DIRECTIVE]} = ${helperNameMap[RESOLVE_DIRECTIVE]}`
+      `const _${helperNameMap[CREATE_VNODE]} = ${helperNameMap[CREATE_VNODE]}, _${helperNameMap[RESOLVE_DIRECTIVE]} = ${helperNameMap[RESOLVE_DIRECTIVE]}`,
     )
     expect(code).toMatchSnapshot()
   })
 
   test('function mode preamble', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, { mode: 'function' })
     expect(code).toMatch(`const _Vue = Vue`)
     expect(code).toMatch(
-      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = _Vue`
+      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = _Vue`,
     )
     expect(code).toMatchSnapshot()
   })
 
   test('function mode preamble w/ prefixIdentifiers: true', () => {
     const root = createRoot({
-      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE])
+      helpers: new Set([CREATE_VNODE, RESOLVE_DIRECTIVE]),
     })
     const { code } = generate(root, {
       mode: 'function',
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(code).not.toMatch(`const _Vue = Vue`)
     expect(code).toMatch(
-      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = Vue`
+      `const { ${helperNameMap[CREATE_VNODE]}: _${helperNameMap[CREATE_VNODE]}, ${helperNameMap[RESOLVE_DIRECTIVE]}: _${helperNameMap[RESOLVE_DIRECTIVE]} } = Vue`,
     )
     expect(code).toMatchSnapshot()
   })
@@ -111,27 +112,27 @@ describe('compiler: codegen', () => {
     const root = createRoot({
       components: [`Foo`, `bar-baz`, `barbaz`, `Qux__self`],
       directives: [`my_dir_0`, `my_dir_1`],
-      temps: 3
+      temps: 3,
     })
     const { code } = generate(root, { mode: 'function' })
     expect(code).toMatch(
-      `const _component_Foo = _${helperNameMap[RESOLVE_COMPONENT]}("Foo")\n`
+      `const _component_Foo = _${helperNameMap[RESOLVE_COMPONENT]}("Foo")\n`,
     )
     expect(code).toMatch(
-      `const _component_bar_baz = _${helperNameMap[RESOLVE_COMPONENT]}("bar-baz")\n`
+      `const _component_bar_baz = _${helperNameMap[RESOLVE_COMPONENT]}("bar-baz")\n`,
     )
     expect(code).toMatch(
-      `const _component_barbaz = _${helperNameMap[RESOLVE_COMPONENT]}("barbaz")\n`
+      `const _component_barbaz = _${helperNameMap[RESOLVE_COMPONENT]}("barbaz")\n`,
     )
     // implicit self reference from SFC filename
     expect(code).toMatch(
-      `const _component_Qux = _${helperNameMap[RESOLVE_COMPONENT]}("Qux", true)\n`
+      `const _component_Qux = _${helperNameMap[RESOLVE_COMPONENT]}("Qux", true)\n`,
     )
     expect(code).toMatch(
-      `const _directive_my_dir_0 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_0")\n`
+      `const _directive_my_dir_0 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_0")\n`,
     )
     expect(code).toMatch(
-      `const _directive_my_dir_1 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_1")\n`
+      `const _directive_my_dir_1 = _${helperNameMap[RESOLVE_DIRECTIVE]}("my_dir_1")\n`,
     )
     expect(code).toMatch(`let _temp0, _temp1, _temp2`)
     expect(code).toMatchSnapshot()
@@ -145,12 +146,12 @@ describe('compiler: codegen', () => {
           [
             createObjectProperty(
               createSimpleExpression(`id`, true, locStub),
-              createSimpleExpression(`foo`, true, locStub)
-            )
+              createSimpleExpression(`foo`, true, locStub),
+            ),
           ],
-          locStub
-        )
-      ]
+          locStub,
+        ),
+      ],
     })
     const { code } = generate(root)
     expect(code).toMatch(`const _hoisted_1 = hello`)
@@ -160,7 +161,7 @@ describe('compiler: codegen', () => {
 
   test('temps', () => {
     const root = createRoot({
-      temps: 3
+      temps: 3,
     })
     const { code } = generate(root)
     expect(code).toMatch(`let _temp0, _temp1, _temp2`)
@@ -173,9 +174,9 @@ describe('compiler: codegen', () => {
         codegenNode: {
           type: NodeTypes.TEXT,
           content: 'hello',
-          loc: locStub
-        }
-      })
+          loc: locStub,
+        },
+      }),
     )
     expect(code).toMatch(`return "hello"`)
     expect(code).toMatchSnapshot()
@@ -184,8 +185,8 @@ describe('compiler: codegen', () => {
   test('interpolation', () => {
     const { code } = generate(
       createRoot({
-        codegenNode: createInterpolation(`hello`, locStub)
-      })
+        codegenNode: createInterpolation(`hello`, locStub),
+      }),
     )
     expect(code).toMatch(`return _${helperNameMap[TO_DISPLAY_STRING]}(hello)`)
     expect(code).toMatchSnapshot()
@@ -197,9 +198,9 @@ describe('compiler: codegen', () => {
         codegenNode: {
           type: NodeTypes.COMMENT,
           content: 'foo',
-          loc: locStub
-        }
-      })
+          loc: locStub,
+        },
+      }),
     )
     expect(code).toMatch(`return _${helperNameMap[CREATE_COMMENT]}("foo")`)
     expect(code).toMatchSnapshot()
@@ -215,15 +216,15 @@ describe('compiler: codegen', () => {
           {
             type: NodeTypes.INTERPOLATION,
             loc: locStub,
-            content: createSimpleExpression(`bar`, false, locStub)
+            content: createSimpleExpression(`bar`, false, locStub),
           },
           // nested compound
-          createCompoundExpression([` + `, `nested`])
-        ])
-      })
+          createCompoundExpression([` + `, `nested`]),
+        ]),
+      }),
     )
     expect(code).toMatch(
-      `return _ctx.foo + _${helperNameMap[TO_DISPLAY_STRING]}(bar) + nested`
+      `return _ctx.foo + _${helperNameMap[TO_DISPLAY_STRING]}(bar) + nested`,
     )
     expect(code).toMatchSnapshot()
   })
@@ -238,10 +239,10 @@ describe('compiler: codegen', () => {
           codegenNode: createConditionalExpression(
             createSimpleExpression('foo', false),
             createSimpleExpression('bar', false),
-            createSimpleExpression('baz', false)
-          ) as IfConditionalExpression
-        }
-      })
+            createSimpleExpression('baz', false),
+          ) as IfConditionalExpression,
+        },
+      }),
     )
     expect(code).toMatch(/return foo\s+\? bar\s+: baz/)
     expect(code).toMatchSnapshot()
@@ -269,10 +270,10 @@ describe('compiler: codegen', () => {
             patchFlag: '1',
             dynamicProps: undefined,
             directives: undefined,
-            loc: locStub
-          } as ForCodegenNode
-        }
-      })
+            loc: locStub,
+          } as ForCodegenNode,
+        },
+      }),
     )
     expect(code).toMatch(`openBlock(true)`)
     expect(code).toMatchSnapshot()
@@ -288,7 +289,7 @@ describe('compiler: codegen', () => {
             '1 + 2',
             false,
             locStub,
-            ConstantTypes.CAN_STRINGIFY
+            ConstantTypes.CAN_STRINGIFY,
           ),
           valueAlias: undefined,
           keyAlias: undefined,
@@ -305,10 +306,10 @@ describe('compiler: codegen', () => {
             patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
             dynamicProps: undefined,
             directives: undefined,
-            loc: locStub
-          } as ForCodegenNode
-        }
-      })
+            loc: locStub,
+          } as ForCodegenNode,
+        },
+      }),
     )
     expect(code).toMatch(`openBlock()`)
     expect(code).toMatchSnapshot()
@@ -325,11 +326,11 @@ describe('compiler: codegen', () => {
             [
               createObjectProperty(
                 createSimpleExpression(`id`, true, locStub),
-                createSimpleExpression(`foo`, true, locStub)
+                createSimpleExpression(`foo`, true, locStub),
               ),
               createObjectProperty(
                 createSimpleExpression(`prop`, false, locStub),
-                createSimpleExpression(`bar`, false, locStub)
+                createSimpleExpression(`bar`, false, locStub),
               ),
               // compound expression as computed key
               createObjectProperty(
@@ -338,13 +339,13 @@ describe('compiler: codegen', () => {
                   loc: locStub,
                   children: [
                     `foo + `,
-                    createSimpleExpression(`bar`, false, locStub)
-                  ]
+                    createSimpleExpression(`bar`, false, locStub),
+                  ],
                 },
-                createSimpleExpression(`bar`, false, locStub)
-              )
+                createSimpleExpression(`bar`, false, locStub),
+              ),
             ],
-            locStub
+            locStub,
           ),
           // ChildNode[]
           [
@@ -355,17 +356,17 @@ describe('compiler: codegen', () => {
                   createObjectProperty(
                     // should quote the key!
                     createSimpleExpression(`some-key`, true, locStub),
-                    createSimpleExpression(`foo`, true, locStub)
-                  )
+                    createSimpleExpression(`foo`, true, locStub),
+                  ),
                 ],
-                locStub
-              )
-            )
+                locStub,
+              ),
+            ),
           ],
           // flag
-          PatchFlags.FULL_PROPS + ''
-        )
-      })
+          PatchFlags.FULL_PROPS + '',
+        ),
+      }),
     )
     expect(code).toMatch(`
     return _${helperNameMap[CREATE_ELEMENT_VNODE]}("div", {
@@ -383,9 +384,9 @@ describe('compiler: codegen', () => {
       createRoot({
         codegenNode: createArrayExpression([
           createSimpleExpression(`foo`, false),
-          createCallExpression(`bar`, [`baz`])
-        ])
-      })
+          createCallExpression(`bar`, [`baz`]),
+        ]),
+      }),
     )
     expect(code).toMatch(`return [
       foo,
@@ -403,17 +404,17 @@ describe('compiler: codegen', () => {
           createConditionalExpression(
             createSimpleExpression(`orNot`, false),
             createCallExpression(`bar`),
-            createCallExpression(`baz`)
-          )
-        )
-      })
+            createCallExpression(`baz`),
+          ),
+        ),
+      }),
     )
     expect(code).toMatch(
       `return ok
       ? foo()
       : orNot
         ? bar()
-        : baz()`
+        : baz()`,
     )
     expect(code).toMatchSnapshot()
   })
@@ -424,13 +425,13 @@ describe('compiler: codegen', () => {
         cached: 1,
         codegenNode: createCacheExpression(
           1,
-          createSimpleExpression(`foo`, false)
-        )
+          createSimpleExpression(`foo`, false),
+        ),
       }),
       {
         mode: 'module',
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(code).toMatch(`_cache[1] || (_cache[1] = foo)`)
     expect(code).toMatchSnapshot()
@@ -443,13 +444,13 @@ describe('compiler: codegen', () => {
         codegenNode: createCacheExpression(
           1,
           createSimpleExpression(`foo`, false),
-          true
-        )
+          true,
+        ),
       }),
       {
         mode: 'module',
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(code).toMatch(
       `
@@ -459,7 +460,7 @@ describe('compiler: codegen', () => {
     _setBlockTracking(1),
     _cache[1]
   )
-    `.trim()
+    `.trim(),
     )
     expect(code).toMatchSnapshot()
   })
@@ -471,11 +472,11 @@ describe('compiler: codegen', () => {
           createTemplateLiteral([
             `foo`,
             createCallExpression(`_renderAttr`, ['id', 'foo']),
-            `bar`
-          ])
-        ])
+            `bar`,
+          ]),
+        ]),
       }),
-      { ssr: true, mode: 'module' }
+      { ssr: true, mode: 'module' },
     )
     expect(code).toMatchInlineSnapshot(`
       "
@@ -492,11 +493,11 @@ describe('compiler: codegen', () => {
           codegenNode: createBlockStatement([
             createIfStatement(
               createSimpleExpression('foo', false),
-              createBlockStatement([createCallExpression(`ok`)])
-            )
-          ])
+              createBlockStatement([createCallExpression(`ok`)]),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -515,11 +516,11 @@ describe('compiler: codegen', () => {
             createIfStatement(
               createSimpleExpression('foo', false),
               createBlockStatement([createCallExpression(`foo`)]),
-              createBlockStatement([createCallExpression('bar')])
-            )
-          ])
+              createBlockStatement([createCallExpression('bar')]),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -542,12 +543,12 @@ describe('compiler: codegen', () => {
               createBlockStatement([createCallExpression(`foo`)]),
               createIfStatement(
                 createSimpleExpression('bar', false),
-                createBlockStatement([createCallExpression(`bar`)])
-              )
-            )
-          ])
+                createBlockStatement([createCallExpression(`bar`)]),
+              ),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -571,12 +572,12 @@ describe('compiler: codegen', () => {
               createIfStatement(
                 createSimpleExpression('bar', false),
                 createBlockStatement([createCallExpression(`bar`)]),
-                createBlockStatement([createCallExpression('baz')])
-              )
-            )
-          ])
+                createBlockStatement([createCallExpression('baz')]),
+              ),
+            ),
+          ]),
         }),
-        { ssr: true, mode: 'module' }
+        { ssr: true, mode: 'module' },
       )
       expect(code).toMatchInlineSnapshot(`
         "
@@ -598,9 +599,9 @@ describe('compiler: codegen', () => {
       createRoot({
         codegenNode: createAssignmentExpression(
           createSimpleExpression(`foo`, false),
-          createSimpleExpression(`bar`, false)
-        )
-      })
+          createSimpleExpression(`bar`, false),
+        ),
+      }),
     )
     expect(code).toMatchInlineSnapshot(`
       "
@@ -616,22 +617,22 @@ describe('compiler: codegen', () => {
     function genCode(node: VNodeCall) {
       return generate(
         createRoot({
-          codegenNode: node
-        })
+          codegenNode: node,
+        }),
       ).code.match(/with \(_ctx\) \{\s+([^]+)\s+\}\s+\}$/)![1]
     }
 
     const mockProps = createObjectExpression([
-      createObjectProperty(`foo`, createSimpleExpression(`bar`, true))
+      createObjectProperty(`foo`, createSimpleExpression(`bar`, true)),
     ])
     const mockChildren = createCompoundExpression(['children'])
     const mockDirs = createArrayExpression([
-      createArrayExpression([`foo`, createSimpleExpression(`bar`, false)])
+      createArrayExpression([`foo`, createSimpleExpression(`bar`, false)]),
     ]) as DirectiveArguments
 
     test('tag only', () => {
       expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
-        "return _createElementVNode(\\"div\\")
+        "return _createElementVNode("div")
          "
       `)
       expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
@@ -643,7 +644,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 +652,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 +660,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 +668,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)
            "
         `)
     })
@@ -683,11 +684,11 @@ describe('compiler: codegen', () => {
             undefined,
             undefined,
             undefined,
-            true
-          )
-        )
+            true,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(), _createElementBlock("div", { foo: "bar" }, children))
          "
       `)
     })
@@ -704,11 +705,11 @@ describe('compiler: codegen', () => {
             undefined,
             undefined,
             true,
-            true
-          )
-        )
+            true,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
+        "return (_openBlock(true), _createElementBlock("div", { foo: "bar" }, children))
          "
       `)
     })
@@ -723,11 +724,11 @@ describe('compiler: codegen', () => {
             mockChildren,
             undefined,
             undefined,
-            mockDirs
-          )
-        )
+            mockDirs,
+          ),
+        ),
       ).toMatchInlineSnapshot(`
-        "return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
+        "return _withDirectives(_createElementVNode("div", { foo: "bar" }, children), [
               [foo, bar]
             ])
          "
@@ -745,11 +746,11 @@ describe('compiler: codegen', () => {
             undefined,
             undefined,
             mockDirs,
-            true
-          )
-        )
+            true,
+          ),
+        ),
       ).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__/compile.spec.ts b/packages/compiler-core/__tests__/compile.spec.ts
index dc4f57ad3d2..995741091df 100644
--- a/packages/compiler-core/__tests__/compile.spec.ts
+++ b/packages/compiler-core/__tests__/compile.spec.ts
@@ -1,5 +1,5 @@
 import { baseCompile as compile } from '../src'
-import { SourceMapConsumer, RawSourceMap } from 'source-map-js'
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js'
 
 describe('compiler: integration tests', () => {
   const source = `
@@ -20,7 +20,7 @@ describe('compiler: integration tests', () => {
   function getPositionInCode(
     code: string,
     token: string,
-    expectName: string | boolean = false
+    expectName: string | boolean = false,
   ): Pos {
     const generatedOffset = code.indexOf(token)
     let line = 1
@@ -36,7 +36,7 @@ describe('compiler: integration tests', () => {
       column:
         lastNewLinePos === -1
           ? generatedOffset
-          : generatedOffset - lastNewLinePos - 1
+          : generatedOffset - lastNewLinePos - 1,
     }
     if (expectName) {
       res.name = typeof expectName === 'string' ? expectName : token
@@ -47,7 +47,7 @@ describe('compiler: integration tests', () => {
   test('function mode', () => {
     const { code, map } = compile(source, {
       sourceMap: true,
-      filename: `foo.vue`
+      filename: `foo.vue`,
     })
 
     expect(code).toMatchSnapshot()
@@ -57,55 +57,55 @@ describe('compiler: integration tests', () => {
     const consumer = new SourceMapConsumer(map as RawSourceMap)
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `id`))
+      consumer.originalPositionFor(getPositionInCode(code, `id`)),
     ).toMatchObject(getPositionInCode(source, `id`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `"foo"`))
+      consumer.originalPositionFor(getPositionInCode(code, `"foo"`)),
     ).toMatchObject(getPositionInCode(source, `"foo"`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `class:`))
+      consumer.originalPositionFor(getPositionInCode(code, `class:`)),
     ).toMatchObject(getPositionInCode(source, `class=`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
 
     // without prefixIdentifiers: true, identifiers inside compound expressions
     // are mapped to closest parent expression.
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+      consumer.originalPositionFor(getPositionInCode(code, `baz`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `world`))
+      consumer.originalPositionFor(getPositionInCode(code, `world`)),
     ).toMatchObject(getPositionInCode(source, `world`))
 
     // without prefixIdentifiers: true, identifiers inside compound expressions
     // are mapped to closest parent expression.
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`)),
     ).toMatchObject(getPositionInCode(source, `world`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `list`))
+      consumer.originalPositionFor(getPositionInCode(code, `list`)),
     ).toMatchObject(getPositionInCode(source, `list`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value`))
+      consumer.originalPositionFor(getPositionInCode(code, `value`)),
     ).toMatchObject(getPositionInCode(source, `value`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `index`))
+      consumer.originalPositionFor(getPositionInCode(code, `index`)),
     ).toMatchObject(getPositionInCode(source, `index`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
+      consumer.originalPositionFor(getPositionInCode(code, `value + index`)),
     ).toMatchObject(getPositionInCode(source, `value + index`))
   })
 
@@ -113,7 +113,7 @@ describe('compiler: integration tests', () => {
     const { code, map } = compile(source, {
       sourceMap: true,
       filename: `foo.vue`,
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
 
     expect(code).toMatchSnapshot()
@@ -123,64 +123,66 @@ describe('compiler: integration tests', () => {
     const consumer = new SourceMapConsumer(map as RawSourceMap)
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `id`))
+      consumer.originalPositionFor(getPositionInCode(code, `id`)),
     ).toMatchObject(getPositionInCode(source, `id`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `"foo"`))
+      consumer.originalPositionFor(getPositionInCode(code, `"foo"`)),
     ).toMatchObject(getPositionInCode(source, `"foo"`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `class:`))
+      consumer.originalPositionFor(getPositionInCode(code, `class:`)),
     ).toMatchObject(getPositionInCode(source, `class=`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`, true))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+      consumer.originalPositionFor(getPositionInCode(code, `baz`)),
     ).toMatchObject(getPositionInCode(source, `baz`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `world`, true))
+      consumer.originalPositionFor(getPositionInCode(code, `world`, true)),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
     expect(
       consumer.originalPositionFor(
-        getPositionInCode(code, `_ctx.world`, `world`)
-      )
+        getPositionInCode(code, `_ctx.world`, `world`),
+      ),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`)),
     ).toMatchObject(getPositionInCode(source, `burn()`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `list`))
+      consumer.originalPositionFor(getPositionInCode(code, `list`)),
     ).toMatchObject(getPositionInCode(source, `list`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.list`, `list`))
+      consumer.originalPositionFor(
+        getPositionInCode(code, `_ctx.list`, `list`),
+      ),
     ).toMatchObject(getPositionInCode(source, `list`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value`))
+      consumer.originalPositionFor(getPositionInCode(code, `value`)),
     ).toMatchObject(getPositionInCode(source, `value`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `index`))
+      consumer.originalPositionFor(getPositionInCode(code, `index`)),
     ).toMatchObject(getPositionInCode(source, `index`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
+      consumer.originalPositionFor(getPositionInCode(code, `value + index`)),
     ).toMatchObject(getPositionInCode(source, `value + index`))
   })
 
@@ -188,7 +190,7 @@ describe('compiler: integration tests', () => {
     const { code, map } = compile(source, {
       mode: 'module',
       sourceMap: true,
-      filename: `foo.vue`
+      filename: `foo.vue`,
     })
 
     expect(code).toMatchSnapshot()
@@ -198,64 +200,66 @@ describe('compiler: integration tests', () => {
     const consumer = new SourceMapConsumer(map as RawSourceMap)
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `id`))
+      consumer.originalPositionFor(getPositionInCode(code, `id`)),
     ).toMatchObject(getPositionInCode(source, `id`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `"foo"`))
+      consumer.originalPositionFor(getPositionInCode(code, `"foo"`)),
     ).toMatchObject(getPositionInCode(source, `"foo"`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `class:`))
+      consumer.originalPositionFor(getPositionInCode(code, `class:`)),
     ).toMatchObject(getPositionInCode(source, `class=`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.bar`, `bar`)),
     ).toMatchObject(getPositionInCode(source, `bar`, true))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `baz`))
+      consumer.originalPositionFor(getPositionInCode(code, `baz`)),
     ).toMatchObject(getPositionInCode(source, `baz`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `world`, true))
+      consumer.originalPositionFor(getPositionInCode(code, `world`, true)),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
     expect(
       consumer.originalPositionFor(
-        getPositionInCode(code, `_ctx.world`, `world`)
-      )
+        getPositionInCode(code, `_ctx.world`, `world`),
+      ),
     ).toMatchObject(getPositionInCode(source, `world`, `world`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `burn()`))
+      consumer.originalPositionFor(getPositionInCode(code, `burn()`)),
     ).toMatchObject(getPositionInCode(source, `burn()`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`))
+      consumer.originalPositionFor(getPositionInCode(code, `_ctx.ok`, `ok`)),
     ).toMatchObject(getPositionInCode(source, `ok`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `list`))
+      consumer.originalPositionFor(getPositionInCode(code, `list`)),
     ).toMatchObject(getPositionInCode(source, `list`))
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `_ctx.list`, `list`))
+      consumer.originalPositionFor(
+        getPositionInCode(code, `_ctx.list`, `list`),
+      ),
     ).toMatchObject(getPositionInCode(source, `list`, true))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value`))
+      consumer.originalPositionFor(getPositionInCode(code, `value`)),
     ).toMatchObject(getPositionInCode(source, `value`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `index`))
+      consumer.originalPositionFor(getPositionInCode(code, `index`)),
     ).toMatchObject(getPositionInCode(source, `index`))
 
     expect(
-      consumer.originalPositionFor(getPositionInCode(code, `value + index`))
+      consumer.originalPositionFor(getPositionInCode(code, `value + index`)),
     ).toMatchObject(getPositionInCode(source, `value + index`))
   })
 })
diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts
index 8db4eeb8acb..d5bdb4bc5fd 100644
--- a/packages/compiler-core/__tests__/parse.spec.ts
+++ b/packages/compiler-core/__tests__/parse.spec.ts
@@ -1,19 +1,23 @@
-import { ParserOptions } from '../src/options'
-import { baseParse, TextModes } from '../src/parse'
+import type { ParserOptions } from '../src/options'
 import { ErrorCodes } from '../src/errors'
 import {
-  CommentNode,
-  ElementNode,
+  type CommentNode,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
+  type InterpolationNode,
   Namespaces,
   NodeTypes,
-  Position,
-  TextNode,
-  InterpolationNode,
-  ConstantTypes,
-  DirectiveNode
+  type Position,
+  type TextNode,
 } from '../src/ast'
 
+import { baseParse } from '../src/parser'
+import type { Program } from '@babel/types'
+
+/* eslint jest/no-disabled-tests: "off" */
+
 describe('compiler: parse', () => {
   describe('Text', () => {
     test('simple text', () => {
@@ -26,27 +30,36 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: 'some text'
-        }
+          source: 'some text',
+        },
       })
     })
 
     test('simple text with invalid end tag', () => {
       const onError = vi.fn()
-      const ast = baseParse('some text</div>', {
-        onError
-      })
+      const ast = baseParse('some text</div>', { onError })
       const text = ast.children[0] as TextNode
 
-      expect(onError).toBeCalled()
+      expect(onError.mock.calls).toMatchObject([
+        [
+          {
+            code: ErrorCodes.X_INVALID_END_TAG,
+            loc: {
+              start: { column: 10, line: 1, offset: 9 },
+              end: { column: 10, line: 1, offset: 9 },
+            },
+          },
+        ],
+      ])
+
       expect(text).toStrictEqual({
         type: NodeTypes.TEXT,
         content: 'some text',
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: 'some text'
-        }
+          source: 'some text',
+        },
       })
     })
 
@@ -61,8 +74,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'some '
-        }
+          source: 'some ',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -70,8 +83,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 20, line: 1, column: 21 },
           end: { offset: 25, line: 1, column: 26 },
-          source: ' text'
-        }
+          source: ' text',
+        },
       })
     })
 
@@ -86,8 +99,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'some '
-        }
+          source: 'some ',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -95,8 +108,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 21, line: 1, column: 22 },
           end: { offset: 26, line: 1, column: 27 },
-          source: ' text'
-        }
+          source: ' text',
+        },
       })
     })
 
@@ -111,8 +124,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'some '
-        }
+          source: 'some ',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -120,8 +133,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 32, line: 1, column: 33 },
           end: { offset: 37, line: 1, column: 38 },
-          source: ' text'
-        }
+          source: ' text',
+        },
       })
     })
 
@@ -131,7 +144,7 @@ describe('compiler: parse', () => {
           if (err.code !== ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME) {
             throw err
           }
-        }
+        },
       })
       const text = ast.children[0] as TextNode
 
@@ -141,8 +154,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: 'a < b'
-        }
+          source: 'a < b',
+        },
       })
     })
 
@@ -152,7 +165,7 @@ describe('compiler: parse', () => {
           if (error.code !== ErrorCodes.X_MISSING_INTERPOLATION_END) {
             throw error
           }
-        }
+        },
       })
       const text = ast.children[0] as TextNode
 
@@ -162,8 +175,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 6, line: 1, column: 7 },
-          source: 'a {{ b'
-        }
+          source: 'a {{ b',
+        },
       })
     })
   })
@@ -183,14 +196,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 2, line: 1, column: 3 },
             end: { offset: 9, line: 1, column: 10 },
-            source: `message`
-          }
+            source: 'message',
+          },
         },
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 11, line: 1, column: 12 },
-          source: '{{message}}'
-        }
+          source: '{{message}}',
+        },
       })
     })
 
@@ -208,14 +221,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 3, line: 1, column: 4 },
             end: { offset: 6, line: 1, column: 7 },
-            source: 'a<b'
-          }
+            source: 'a<b',
+          },
         },
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '{{ a<b }}'
-        }
+          source: '{{ a<b }}',
+        },
       })
     })
 
@@ -234,14 +247,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 3, line: 1, column: 4 },
             end: { offset: 6, line: 1, column: 7 },
-            source: 'a<b'
-          }
+            source: 'a<b',
+          },
         },
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '{{ a<b }}'
-        }
+          source: '{{ a<b }}',
+        },
       })
 
       expect(interpolation2).toStrictEqual({
@@ -254,14 +267,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 12, line: 1, column: 13 },
             end: { offset: 15, line: 1, column: 16 },
-            source: 'c>d'
-          }
+            source: 'c>d',
+          },
         },
         loc: {
           start: { offset: 9, line: 1, column: 10 },
           end: { offset: 18, line: 1, column: 19 },
-          source: '{{ c>d }}'
-        }
+          source: '{{ c>d }}',
+        },
       })
     })
 
@@ -281,20 +294,20 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 16, line: 1, column: 17 },
-            source: '"</div>"'
-          }
+            source: '"</div>"',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 19, line: 1, column: 20 },
-          source: '{{ "</div>" }}'
-        }
+          source: '{{ "</div>" }}',
+        },
       })
     })
 
     test('custom delimiters', () => {
       const ast = baseParse('<p>{msg}</p>', {
-        delimiters: ['{', '}']
+        delimiters: ['{', '}'],
       })
       const element = ast.children[0] as ElementNode
       const interpolation = element.children[0] as InterpolationNode
@@ -309,14 +322,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 4, line: 1, column: 5 },
             end: { offset: 7, line: 1, column: 8 },
-            source: 'msg'
-          }
+            source: 'msg',
+          },
         },
         loc: {
           start: { offset: 3, line: 1, column: 4 },
           end: { offset: 8, line: 1, column: 9 },
-          source: '{msg}'
-        }
+          source: '{msg}',
+        },
       })
     })
   })
@@ -332,8 +345,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 7, line: 1, column: 8 },
-          source: '<!---->'
-        }
+          source: '<!---->',
+        },
       })
     })
 
@@ -347,8 +360,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 10, line: 1, column: 11 },
-          source: '<!--abc-->'
-        }
+          source: '<!--abc-->',
+        },
       })
     })
 
@@ -363,8 +376,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 10, line: 1, column: 11 },
-          source: '<!--abc-->'
-        }
+          source: '<!--abc-->',
+        },
       })
       expect(comment2).toStrictEqual({
         type: NodeTypes.COMMENT,
@@ -372,8 +385,8 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 20, line: 1, column: 21 },
-          source: '<!--def-->'
-        }
+          source: '<!--def-->',
+        },
       })
     })
 
@@ -390,38 +403,38 @@ describe('compiler: parse', () => {
       const rawText = `<p/><!-- foo --><p/>`
 
       const astWithComments = baseParse(`<pre>${rawText}</pre>`, {
-        comments: true
+        comments: true,
       })
       expect(
-        (astWithComments.children[0] as ElementNode).children
+        (astWithComments.children[0] as ElementNode).children,
       ).toMatchObject([
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
+          tag: 'p',
         },
         {
-          type: NodeTypes.COMMENT
+          type: NodeTypes.COMMENT,
         },
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
-        }
+          tag: 'p',
+        },
       ])
 
       const astWithoutComments = baseParse(`<pre>${rawText}</pre>`, {
-        comments: false
+        comments: false,
       })
       expect(
-        (astWithoutComments.children[0] as ElementNode).children
+        (astWithoutComments.children[0] as ElementNode).children,
       ).toMatchObject([
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
+          tag: 'p',
         },
         {
           type: NodeTypes.ELEMENT,
-          tag: 'p'
-        }
+          tag: 'p',
+        },
       ])
     })
   })
@@ -438,7 +451,6 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-        isSelfClosing: false,
         children: [
           {
             type: NodeTypes.TEXT,
@@ -446,15 +458,15 @@ describe('compiler: parse', () => {
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: 'hello'
-            }
-          }
+              source: 'hello',
+            },
+          },
         ],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 16, line: 1, column: 17 },
-          source: '<div>hello</div>'
-        }
+          source: '<div>hello</div>',
+        },
       })
     })
 
@@ -469,13 +481,12 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 11, line: 1, column: 12 },
-          source: '<div></div>'
-        }
+          source: '<div></div>',
+        },
       })
     })
 
@@ -490,20 +501,19 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-
-        isSelfClosing: true,
         children: [],
+        isSelfClosing: true,
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 6, line: 1, column: 7 },
-          source: '<div/>'
-        }
+          source: '<div/>',
+        },
       })
     })
 
     test('void element', () => {
       const ast = baseParse('<img>after', {
-        isVoidTag: tag => tag === 'img'
+        isVoidTag: tag => tag === 'img',
       })
       const element = ast.children[0] as ElementNode
 
@@ -514,14 +524,35 @@ describe('compiler: parse', () => {
         tagType: ElementTypes.ELEMENT,
         codegenNode: undefined,
         props: [],
-
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: '<img>'
-        }
+          source: '<img>',
+        },
+      })
+    })
+
+    test('self-closing void element', () => {
+      const ast = baseParse('<img/>after', {
+        isVoidTag: tag => tag === 'img',
+      })
+      const element = ast.children[0] as ElementNode
+
+      expect(element).toStrictEqual({
+        type: NodeTypes.ELEMENT,
+        ns: Namespaces.HTML,
+        tag: 'img',
+        tagType: ElementTypes.ELEMENT,
+        codegenNode: undefined,
+        props: [],
+        children: [],
+        isSelfClosing: true,
+        loc: {
+          start: { offset: 0, line: 1, column: 1 },
+          end: { offset: 6, line: 1, column: 7 },
+          source: '<img/>',
+        },
       })
     })
 
@@ -530,7 +561,7 @@ describe('compiler: parse', () => {
       const element = ast.children[0]
       expect(element).toMatchObject({
         type: NodeTypes.ELEMENT,
-        tagType: ElementTypes.TEMPLATE
+        tagType: ElementTypes.TEMPLATE,
       })
     })
 
@@ -539,31 +570,31 @@ describe('compiler: parse', () => {
       const element = ast.children[0]
       expect(element).toMatchObject({
         type: NodeTypes.ELEMENT,
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
     })
 
     test('native element with `isNativeTag`', () => {
       const ast = baseParse('<div></div><comp></comp><Comp></Comp>', {
-        isNativeTag: tag => tag === 'div'
+        isNativeTag: tag => tag === 'div',
       })
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
@@ -573,105 +604,105 @@ describe('compiler: parse', () => {
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
-    test('v-is with `isNativeTag`', () => {
+    test('is casting with `isNativeTag`', () => {
       const ast = baseParse(
-        `<div></div><div v-is="'foo'"></div><Comp></Comp>`,
+        `<div></div><div is="vue:foo"></div><Comp></Comp>`,
         {
-          isNativeTag: tag => tag === 'div'
-        }
+          isNativeTag: tag => tag === 'div',
+        },
       )
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
-    test('v-is without `isNativeTag`', () => {
-      const ast = baseParse(`<div></div><div v-is="'foo'"></div><Comp></Comp>`)
+    test('is casting without `isNativeTag`', () => {
+      const ast = baseParse(`<div></div><div is="vue:foo"></div><Comp></Comp>`)
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
     test('custom element', () => {
       const ast = baseParse('<div></div><comp></comp>', {
         isNativeTag: tag => tag === 'div',
-        isCustomElement: tag => tag === 'comp'
+        isCustomElement: tag => tag === 'comp',
       })
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
     })
 
     test('built-in component', () => {
       const ast = baseParse('<div></div><comp></comp>', {
-        isBuiltInComponent: tag => (tag === 'comp' ? Symbol() : void 0)
+        isBuiltInComponent: tag => (tag === 'comp' ? Symbol() : void 0),
       })
 
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
@@ -681,13 +712,13 @@ describe('compiler: parse', () => {
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'slot',
-        tagType: ElementTypes.SLOT
+        tagType: ElementTypes.SLOT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
@@ -705,22 +736,26 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: undefined,
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 7, line: 1, column: 8 },
-              source: 'id'
-            }
-          }
+              source: 'id',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 14, line: 1, column: 15 },
-          source: '<div id></div>'
-        }
+          source: '<div id></div>',
+        },
       })
     })
 
@@ -738,30 +773,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 10, line: 1, column: 11 },
-                source: '""'
-              }
+                source: '""',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: 'id=""'
-            }
-          }
+              source: 'id=""',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 17, line: 1, column: 18 },
-          source: '<div id=""></div>'
-        }
+          source: '<div id=""></div>',
+        },
       })
     })
 
@@ -779,30 +818,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 10, line: 1, column: 11 },
-                source: "''"
-              }
+                source: "''",
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: "id=''"
-            }
-          }
+              source: "id=''",
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 17, line: 1, column: 18 },
-          source: "<div id=''></div>"
-        }
+          source: "<div id=''></div>",
+        },
       })
     })
 
@@ -820,30 +863,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: ">'",
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 12, line: 1, column: 13 },
-                source: '">\'"'
-              }
+                source: '">\'"',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 12, line: 1, column: 13 },
-              source: 'id=">\'"'
-            }
-          }
+              source: 'id=">\'"',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 19, line: 1, column: 20 },
-          source: '<div id=">\'"></div>'
-        }
+          source: '<div id=">\'"></div>',
+        },
       })
     })
 
@@ -861,30 +908,34 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '>"',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 12, line: 1, column: 13 },
-                source: "'>\"'"
-              }
+                source: "'>\"'",
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 12, line: 1, column: 13 },
-              source: "id='>\"'"
-            }
-          }
+              source: "id='>\"'",
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 19, line: 1, column: 20 },
-          source: "<div id='>\"'></div>"
-        }
+          source: "<div id='>\"'></div>",
+        },
       })
     })
 
@@ -902,30 +953,117 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: 'a/',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 10, line: 1, column: 11 },
-                source: 'a/'
-              }
+                source: 'a/',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 10, line: 1, column: 11 },
-              source: 'id=a/'
-            }
-          }
+              source: 'id=a/',
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 17, line: 1, column: 18 },
-          source: '<div id=a/></div>'
-        }
+          source: '<div id=a/></div>',
+        },
+      })
+    })
+
+    test('attribute value with >', () => {
+      const ast = baseParse(
+        '<script setup lang="ts" generic="T extends Record<string,string>"></script>',
+        { parseMode: 'sfc' },
+      )
+      const element = ast.children[0] as ElementNode
+      expect(element).toMatchObject({
+        type: NodeTypes.ELEMENT,
+        ns: Namespaces.HTML,
+        tag: 'script',
+        tagType: ElementTypes.ELEMENT,
+        codegenNode: undefined,
+        children: [],
+        innerLoc: {
+          start: { column: 67, line: 1, offset: 66 },
+          end: { column: 67, line: 1, offset: 66 },
+        },
+        props: [
+          {
+            loc: {
+              source: 'setup',
+              end: { column: 14, line: 1, offset: 13 },
+              start: { column: 9, line: 1, offset: 8 },
+            },
+            name: 'setup',
+            nameLoc: {
+              source: 'setup',
+              end: { column: 14, line: 1, offset: 13 },
+              start: { column: 9, line: 1, offset: 8 },
+            },
+            type: NodeTypes.ATTRIBUTE,
+            value: undefined,
+          },
+          {
+            loc: {
+              source: 'lang="ts"',
+              end: { column: 24, line: 1, offset: 23 },
+              start: { column: 15, line: 1, offset: 14 },
+            },
+            name: 'lang',
+            nameLoc: {
+              source: 'lang',
+              end: { column: 19, line: 1, offset: 18 },
+              start: { column: 15, line: 1, offset: 14 },
+            },
+            type: NodeTypes.ATTRIBUTE,
+            value: {
+              content: 'ts',
+              loc: {
+                source: '"ts"',
+                end: { column: 24, line: 1, offset: 23 },
+                start: { column: 20, line: 1, offset: 19 },
+              },
+              type: NodeTypes.TEXT,
+            },
+          },
+          {
+            loc: {
+              source: 'generic="T extends Record<string,string>"',
+              end: { column: 66, line: 1, offset: 65 },
+              start: { column: 25, line: 1, offset: 24 },
+            },
+            name: 'generic',
+            nameLoc: {
+              source: 'generic',
+              end: { column: 32, line: 1, offset: 31 },
+              start: { column: 25, line: 1, offset: 24 },
+            },
+            type: NodeTypes.ATTRIBUTE,
+            value: {
+              content: 'T extends Record<string,string>',
+              loc: {
+                source: '"T extends Record<string,string>"',
+                end: { column: 66, line: 1, offset: 65 },
+                start: { column: 33, line: 1, offset: 32 },
+              },
+              type: NodeTypes.TEXT,
+            },
+          },
+        ],
       })
     })
 
@@ -943,76 +1081,95 @@ describe('compiler: parse', () => {
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'id',
+            nameLoc: {
+              start: { offset: 5, line: 1, column: 6 },
+              end: { offset: 7, line: 1, column: 8 },
+              source: 'id',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: 'a',
               loc: {
                 start: { offset: 8, line: 1, column: 9 },
                 end: { offset: 9, line: 1, column: 10 },
-                source: 'a'
-              }
+                source: 'a',
+              },
             },
             loc: {
               start: { offset: 5, line: 1, column: 6 },
               end: { offset: 9, line: 1, column: 10 },
-              source: 'id=a'
-            }
+              source: 'id=a',
+            },
           },
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'class',
+            nameLoc: {
+              start: { offset: 10, line: 1, column: 11 },
+              end: { offset: 15, line: 1, column: 16 },
+              source: 'class',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: 'c',
               loc: {
                 start: { offset: 16, line: 1, column: 17 },
                 end: { offset: 19, line: 1, column: 20 },
-                source: '"c"'
-              }
+                source: '"c"',
+              },
             },
             loc: {
               start: { offset: 10, line: 1, column: 11 },
               end: { offset: 19, line: 1, column: 20 },
-              source: 'class="c"'
-            }
+              source: 'class="c"',
+            },
           },
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'inert',
+            nameLoc: {
+              start: { offset: 20, line: 1, column: 21 },
+              end: { offset: 25, line: 1, column: 26 },
+              source: 'inert',
+            },
             value: undefined,
             loc: {
               start: { offset: 20, line: 1, column: 21 },
               end: { offset: 25, line: 1, column: 26 },
-              source: 'inert'
-            }
+              source: 'inert',
+            },
           },
           {
             type: NodeTypes.ATTRIBUTE,
             name: 'style',
+            nameLoc: {
+              start: { offset: 26, line: 1, column: 27 },
+              end: { offset: 31, line: 1, column: 32 },
+              source: 'style',
+            },
             value: {
               type: NodeTypes.TEXT,
               content: '',
               loc: {
                 start: { offset: 32, line: 1, column: 33 },
                 end: { offset: 34, line: 1, column: 35 },
-                source: "''"
-              }
+                source: "''",
+              },
             },
             loc: {
               start: { offset: 26, line: 1, column: 27 },
               end: { offset: 34, line: 1, column: 35 },
-              source: "style=''"
-            }
-          }
+              source: "style=''",
+            },
+          },
         ],
 
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 41, line: 1, column: 42 },
-          source: '<div id=a class="c" inert style=\'\'></div>'
-        }
+          source: '<div id=a class="c" inert style=\'\'></div>',
+        },
       })
     })
 
@@ -1024,60 +1181,40 @@ describe('compiler: parse', () => {
       expect(element).toStrictEqual({
         children: [],
         codegenNode: undefined,
-        isSelfClosing: false,
         loc: {
-          end: {
-            column: 10,
-            line: 3,
-            offset: 29
-          },
+          start: { column: 1, line: 1, offset: 0 },
+          end: { column: 10, line: 3, offset: 29 },
           source: '<div class=" \n\t c \t\n "></div>',
-          start: {
-            column: 1,
-            line: 1,
-            offset: 0
-          }
         },
         ns: Namespaces.HTML,
         props: [
           {
-            loc: {
-              end: {
-                column: 3,
-                line: 3,
-                offset: 22
-              },
-              source: 'class=" \n\t c \t\n "',
-              start: {
-                column: 6,
-                line: 1,
-                offset: 5
-              }
-            },
             name: 'class',
+            nameLoc: {
+              start: { column: 6, line: 1, offset: 5 },
+              end: { column: 11, line: 1, offset: 10 },
+              source: 'class',
+            },
             type: NodeTypes.ATTRIBUTE,
             value: {
               content: 'c',
               loc: {
-                end: {
-                  column: 3,
-                  line: 3,
-                  offset: 22
-                },
+                start: { column: 12, line: 1, offset: 11 },
+                end: { column: 3, line: 3, offset: 22 },
                 source: '" \n\t c \t\n "',
-                start: {
-                  column: 12,
-                  line: 1,
-                  offset: 11
-                }
               },
-              type: NodeTypes.TEXT
-            }
-          }
-        ],
-        tag: 'div',
+              type: NodeTypes.TEXT,
+            },
+            loc: {
+              start: { column: 6, line: 1, offset: 5 },
+              end: { column: 3, line: 3, offset: 22 },
+              source: 'class=" \n\t c \t\n "',
+            },
+          },
+        ],
+        tag: 'div',
         tagType: ElementTypes.ELEMENT,
-        type: NodeTypes.ELEMENT
+        type: NodeTypes.ELEMENT,
       })
     })
 
@@ -1088,14 +1225,15 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'if',
+        rawName: 'v-if',
         arg: undefined,
         modifiers: [],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: 'v-if'
-        }
+          source: 'v-if',
+        },
       })
     })
 
@@ -1106,6 +1244,7 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'if',
+        rawName: 'v-if',
         arg: undefined,
         modifiers: [],
         exp: {
@@ -1116,14 +1255,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 11, line: 1, column: 12 },
             end: { offset: 12, line: 1, column: 13 },
-            source: 'a'
-          }
+            source: 'a',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 13, line: 1, column: 14 },
-          source: 'v-if="a"'
-        }
+          source: 'v-if="a"',
+        },
       })
     })
 
@@ -1134,33 +1273,25 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:click',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'click',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 16, line: 1, offset: 15 },
             source: 'click',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 16,
-              line: 1,
-              offset: 15
-            }
-          }
+          },
         },
         modifiers: [],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 15, line: 1, column: 16 },
-          source: 'v-on:click'
-        }
+          source: 'v-on:click',
+        },
       })
     })
 
@@ -1173,8 +1304,7 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 12, line: 1, column: 13 },
           end: { offset: 16, line: 1, column: 17 },
-          source: 'slot'
-        }
+        },
       })
     })
 
@@ -1184,11 +1314,11 @@ describe('compiler: parse', () => {
       const directive = (ast.children[0] as ElementNode)
         .props[0] as DirectiveNode
       expect(directive.arg).toMatchObject({
+        content: 'item.item',
         loc: {
           start: { offset: 6, line: 1, column: 7 },
           end: { offset: 15, line: 1, column: 16 },
-          source: 'item.item'
-        }
+        },
       })
     })
 
@@ -1199,33 +1329,25 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:[event]',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'event',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 18, line: 1, offset: 17 },
             source: '[event]',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 18,
-              line: 1,
-              offset: 17
-            }
-          }
+          },
         },
         modifiers: [],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 17, line: 1, column: 18 },
-          source: 'v-on:[event]'
-        }
+          source: 'v-on:[event]',
+        },
       })
     })
 
@@ -1236,14 +1358,15 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on.enter',
         arg: undefined,
         modifiers: ['enter'],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 15, line: 1, column: 16 },
-          source: 'v-on.enter'
-        }
+          source: 'v-on.enter',
+        },
       })
     })
 
@@ -1254,14 +1377,15 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on.enter.exact',
         arg: undefined,
         modifiers: ['enter', 'exact'],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 21, line: 1, column: 22 },
-          source: 'v-on.enter.exact'
-        }
+          source: 'v-on.enter.exact',
+        },
       })
     })
 
@@ -1272,33 +1396,25 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:click.enter.exact',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'click',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 16, line: 1, offset: 15 },
             source: 'click',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 16,
-              line: 1,
-              offset: 15
-            }
-          }
+          },
         },
         modifiers: ['enter', 'exact'],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 27, line: 1, column: 28 },
-          source: 'v-on:click.enter.exact'
-        }
+          source: 'v-on:click.enter.exact',
+        },
       })
     })
 
@@ -1309,41 +1425,34 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: 'v-on:[a.b].camel',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a.b',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
+            start: { column: 11, line: 1, offset: 10 },
+            end: { column: 16, line: 1, offset: 15 },
             source: '[a.b]',
-            start: {
-              column: 11,
-              line: 1,
-              offset: 10
-            },
-            end: {
-              column: 16,
-              line: 1,
-              offset: 15
-            }
-          }
+          },
         },
         modifiers: ['camel'],
         exp: undefined,
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 21, line: 1, column: 22 },
-          source: 'v-on:[a.b].camel'
-        }
+          source: 'v-on:[a.b].camel',
+        },
       })
     })
+
     test('directive with no name', () => {
       let errorCode = -1
       const ast = baseParse('<div v-/>', {
         onError: err => {
           errorCode = err.code as number
-        }
+        },
       })
       const directive = (ast.children[0] as ElementNode).props[0]
 
@@ -1355,8 +1464,13 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 7, line: 1, column: 8 },
-          source: 'v-'
-        }
+          source: 'v-',
+        },
+        nameLoc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { offset: 7, line: 1, column: 8 },
+          source: 'v-',
+        },
       })
     })
 
@@ -1367,25 +1481,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'bind',
+        rawName: ':a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: [],
         exp: {
@@ -1393,18 +1499,17 @@ describe('compiler: parse', () => {
           content: 'b',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 9, line: 1, column: 10 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: ':a=b'
-        }
+          source: ':a=b',
+        },
       })
     })
 
@@ -1415,25 +1520,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'bind',
+        rawName: '.a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: ['prop'],
         exp: {
@@ -1441,18 +1538,17 @@ describe('compiler: parse', () => {
           content: 'b',
           isStatic: false,
           constType: ConstantTypes.NOT_CONSTANT,
-
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 9, line: 1, column: 10 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '.a=b'
-        }
+          source: '.a=b',
+        },
       })
     })
 
@@ -1463,25 +1559,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'bind',
+        rawName: ':a.sync',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: ['sync'],
         exp: {
@@ -1493,14 +1581,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 13, line: 1, column: 14 },
             end: { offset: 14, line: 1, column: 15 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 14, line: 1, column: 15 },
-          source: ':a.sync=b'
-        }
+          source: ':a.sync=b',
+        },
       })
     })
 
@@ -1511,25 +1599,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: '@a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: [],
         exp: {
@@ -1541,14 +1621,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 9, line: 1, column: 10 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 9, line: 1, column: 10 },
-          source: '@a=b'
-        }
+          source: '@a=b',
+        },
       })
     })
 
@@ -1559,25 +1639,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'on',
+        rawName: '@a.enter',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
-
           loc: {
+            start: { column: 7, line: 1, offset: 6 },
+            end: { column: 8, line: 1, offset: 7 },
             source: 'a',
-            start: {
-              column: 7,
-              line: 1,
-              offset: 6
-            },
-            end: {
-              column: 8,
-              line: 1,
-              offset: 7
-            }
-          }
+          },
         },
         modifiers: ['enter'],
         exp: {
@@ -1589,14 +1661,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 14, line: 1, column: 15 },
             end: { offset: 15, line: 1, column: 16 },
-            source: 'b'
-          }
+            source: 'b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 15, line: 1, column: 16 },
-          source: '@a.enter=b'
-        }
+          source: '@a.enter=b',
+        },
       })
     })
 
@@ -1607,24 +1679,17 @@ describe('compiler: parse', () => {
       expect(directive).toStrictEqual({
         type: NodeTypes.DIRECTIVE,
         name: 'slot',
+        rawName: '#a',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'a',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
           loc: {
+            start: { column: 8, line: 1, offset: 7 },
+            end: { column: 9, line: 1, offset: 8 },
             source: 'a',
-            start: {
-              column: 8,
-              line: 1,
-              offset: 7
-            },
-            end: {
-              column: 9,
-              line: 1,
-              offset: 8
-            }
-          }
+          },
         },
         modifiers: [],
         exp: {
@@ -1636,14 +1701,14 @@ describe('compiler: parse', () => {
           loc: {
             start: { offset: 10, line: 1, column: 11 },
             end: { offset: 15, line: 1, column: 16 },
-            source: '{ b }'
-          }
+            source: '{ b }',
+          },
         },
         loc: {
           start: { offset: 6, line: 1, column: 7 },
           end: { offset: 16, line: 1, column: 17 },
-          source: '#a="{ b }"'
-        }
+          source: '#a="{ b }"',
+        },
       })
     })
 
@@ -1655,32 +1720,32 @@ describe('compiler: parse', () => {
       expect(directive).toMatchObject({
         type: NodeTypes.DIRECTIVE,
         name: 'slot',
+        rawName: 'v-slot:foo.bar',
         arg: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: 'foo.bar',
           isStatic: true,
           constType: ConstantTypes.CAN_STRINGIFY,
           loc: {
-            source: 'foo.bar',
             start: {
               column: 14,
               line: 1,
-              offset: 13
+              offset: 13,
             },
             end: {
               column: 21,
               line: 1,
-              offset: 20
-            }
-          }
-        }
+              offset: 20,
+            },
+          },
+        },
       })
     })
 
     test('v-pre', () => {
       const ast = baseParse(
         `<div v-pre :id="foo"><Comp/>{{ bar }}</div>\n` +
-          `<div :id="foo"><Comp/>{{ bar }}</div>`
+          `<div :id="foo"><Comp/>{{ bar }}</div>`,
       )
 
       const divWithPre = ast.children[0] as ElementNode
@@ -1690,29 +1755,22 @@ describe('compiler: parse', () => {
           name: `:id`,
           value: {
             type: NodeTypes.TEXT,
-            content: `foo`
+            content: `foo`,
           },
           loc: {
-            source: `:id="foo"`,
-            start: {
-              line: 1,
-              column: 12
-            },
-            end: {
-              line: 1,
-              column: 21
-            }
-          }
-        }
+            start: { line: 1, column: 12 },
+            end: { line: 1, column: 21 },
+          },
+        },
       ])
       expect(divWithPre.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tagType: ElementTypes.ELEMENT,
-        tag: `Comp`
+        tag: `Comp`,
       })
       expect(divWithPre.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: `{{ bar }}`
+        content: `{{ bar }}`,
       })
 
       // should not affect siblings after it
@@ -1724,44 +1782,72 @@ describe('compiler: parse', () => {
           arg: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: true,
-            content: `id`
+            content: `id`,
           },
           exp: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: false,
-            content: `foo`
+            content: `foo`,
           },
           loc: {
-            source: `:id="foo"`,
             start: {
               line: 2,
-              column: 6
+              column: 6,
             },
             end: {
               line: 2,
-              column: 15
-            }
-          }
-        }
+              column: 15,
+            },
+          },
+        },
       ])
       expect(divWithoutPre.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tagType: ElementTypes.COMPONENT,
-        tag: `Comp`
+        tag: `Comp`,
       })
       expect(divWithoutPre.children[1]).toMatchObject({
         type: NodeTypes.INTERPOLATION,
         content: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: `bar`,
-          isStatic: false
-        }
+          isStatic: false,
+        },
       })
     })
 
+    // 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>`
+        `<div v-pre/>\n<div :id="foo"><Comp/>{{ bar }}</div>`,
       )
       // should not affect siblings after it
       const divWithoutPre = ast.children[1] as ElementNode
@@ -1772,38 +1858,37 @@ describe('compiler: parse', () => {
           arg: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: true,
-            content: `id`
+            content: `id`,
           },
           exp: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: false,
-            content: `foo`
+            content: `foo`,
           },
           loc: {
-            source: `:id="foo"`,
             start: {
               line: 2,
-              column: 6
+              column: 6,
             },
             end: {
               line: 2,
-              column: 15
-            }
-          }
-        }
+              column: 15,
+            },
+          },
+        },
       ])
       expect(divWithoutPre.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tagType: ElementTypes.COMPONENT,
-        tag: `Comp`
+        tag: `Comp`,
       })
       expect(divWithoutPre.children[1]).toMatchObject({
         type: NodeTypes.INTERPOLATION,
         content: {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: `bar`,
-          isStatic: false
-        }
+          isStatic: false,
+        },
       })
     })
 
@@ -1818,133 +1903,177 @@ describe('compiler: parse', () => {
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 10, line: 1, column: 11 },
-          source: 'hello'
-        }
+          source: 'hello',
+        },
       })
     })
   })
 
-  test('self closing single tag', () => {
-    const ast = baseParse('<div :class="{ some: condition }" />')
+  describe('Edge Cases', () => {
+    test('self closing single tag', () => {
+      const ast = baseParse('<div :class="{ some: condition }" />')
 
-    expect(ast.children).toHaveLength(1)
-    expect(ast.children[0]).toMatchObject({ tag: 'div' })
-  })
+      expect(ast.children).toHaveLength(1)
+      expect(ast.children[0]).toMatchObject({ tag: 'div' })
+    })
 
-  test('self closing multiple tag', () => {
-    const ast = baseParse(
-      `<div :class="{ some: condition }" />\n` +
-        `<p v-bind:style="{ color: 'red' }"/>`
-    )
+    test('self closing multiple tag', () => {
+      const ast = baseParse(
+        `<div :class="{ some: condition }" />\n` +
+          `<p v-bind:style="{ color: 'red' }"/>`,
+      )
 
-    expect(ast).toMatchSnapshot()
+      expect(ast).toMatchSnapshot()
 
-    expect(ast.children).toHaveLength(2)
-    expect(ast.children[0]).toMatchObject({ tag: 'div' })
-    expect(ast.children[1]).toMatchObject({ tag: 'p' })
-  })
+      expect(ast.children).toHaveLength(2)
+      expect(ast.children[0]).toMatchObject({ tag: 'div' })
+      expect(ast.children[1]).toMatchObject({ tag: 'p' })
+    })
 
-  test('valid html', () => {
-    const ast = baseParse(
-      `<div :class="{ some: condition }">\n` +
-        `  <p v-bind:style="{ color: 'red' }"/>\n` +
-        `  <!-- a comment with <html> inside it -->\n` +
-        `</div>`
-    )
+    test('valid html', () => {
+      const ast = baseParse(
+        `<div :class="{ some: condition }">\n` +
+          `  <p v-bind:style="{ color: 'red' }"/>\n` +
+          `  <!-- a comment with <html> inside it -->\n` +
+          `</div>`,
+      )
 
-    expect(ast).toMatchSnapshot()
+      expect(ast).toMatchSnapshot()
 
-    expect(ast.children).toHaveLength(1)
-    const el = ast.children[0] as any
-    expect(el).toMatchObject({
-      tag: 'div'
-    })
-    expect(el.children).toHaveLength(2)
-    expect(el.children[0]).toMatchObject({
-      tag: 'p'
-    })
-    expect(el.children[1]).toMatchObject({
-      type: NodeTypes.COMMENT
+      expect(ast.children).toHaveLength(1)
+      const el = ast.children[0] as any
+      expect(el).toMatchObject({
+        tag: 'div',
+      })
+      expect(el.children).toHaveLength(2)
+      expect(el.children[0]).toMatchObject({
+        tag: 'p',
+      })
+      expect(el.children[1]).toMatchObject({
+        type: NodeTypes.COMMENT,
+      })
     })
-  })
 
-  test('invalid html', () => {
-    expect(() => {
-      baseParse(`<div>\n<span>\n</div>\n</span>`)
-    }).toThrow('Element is missing end tag.')
+    test('invalid html', () => {
+      expect(() => {
+        baseParse(`<div>\n<span>\n</div>\n</span>`)
+      }).toThrow('Element is missing end tag.')
 
-    const spy = vi.fn()
-    const ast = baseParse(`<div>\n<span>\n</div>\n</span>`, {
-      onError: spy
-    })
+      const spy = vi.fn()
+      const ast = baseParse(`<div>\n<span>\n</div>\n</span>`, {
+        onError: spy,
+      })
 
-    expect(spy.mock.calls).toMatchObject([
-      [
-        {
-          code: ErrorCodes.X_MISSING_END_TAG,
-          loc: {
-            start: {
-              offset: 6,
-              line: 2,
-              column: 1
-            }
-          }
-        }
-      ],
-      [
+      expect(spy.mock.calls).toMatchObject([
+        [
+          {
+            code: ErrorCodes.X_MISSING_END_TAG,
+            loc: {
+              start: {
+                offset: 6,
+                line: 2,
+                column: 1,
+              },
+            },
+          },
+        ],
+        [
+          {
+            code: ErrorCodes.X_INVALID_END_TAG,
+            loc: {
+              start: {
+                offset: 20,
+                line: 4,
+                column: 1,
+              },
+            },
+          },
+        ],
+      ])
+
+      expect(ast).toMatchSnapshot()
+    })
+
+    test('parse with correct location info', () => {
+      const fooSrc = `foo\n is `
+      const barSrc = `{{ bar }}`
+      const butSrc = ` but `
+      const bazSrc = `{{ baz }}`
+      const [foo, bar, but, baz] = baseParse(
+        fooSrc + barSrc + butSrc + bazSrc,
+      ).children
+
+      let offset = 0
+      expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
+      offset += fooSrc.length
+      expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
+
+      expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
+      const barInner = (bar as InterpolationNode).content
+      offset += 3
+      expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
+      offset += 3
+      expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
+      offset += 3
+      expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
+
+      expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
+      offset += butSrc.length
+      expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
+
+      expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
+      const bazInner = (baz as InterpolationNode).content
+      offset += 3
+      expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
+      offset += 3
+      expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
+      offset += 3
+      expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
+    })
+
+    // With standard HTML parsing, the following input would ignore the slash
+    // and treat "<" and "template" as attributes on the open tag of "Hello",
+    // causing `<template>` to fail to close, and `<script>` being parsed as its
+    // child. This is would never be intended in actual templates, but is a common
+    // intermediate state from user input when parsing for IDE support. We want
+    // the `<script>` to be at root-level to keep the SFC structure stable for
+    // Volar to do incremental computations.
+    test('tag termination handling for IDE', () => {
+      const spy = vi.fn()
+      const ast = baseParse(
+        `<template><Hello\n</template><script>console.log(1)</script>`,
         {
-          code: ErrorCodes.X_INVALID_END_TAG,
-          loc: {
-            start: {
-              offset: 20,
-              line: 4,
-              column: 1
-            }
-          }
-        }
-      ]
-    ])
+          onError: spy,
+        },
+      )
+      //
+      expect(ast.children.length).toBe(2)
+      expect(ast.children[1]).toMatchObject({
+        type: NodeTypes.ELEMENT,
+        tag: 'script',
+      })
+    })
 
-    expect(ast).toMatchSnapshot()
-  })
+    test('arg should be undefined on shorthand dirs with no arg', () => {
+      const ast = baseParse(`<template #></template>`)
+      const el = ast.children[0] as ElementNode
+      expect(el.props[0]).toMatchObject({
+        type: NodeTypes.DIRECTIVE,
+        name: 'slot',
+        exp: undefined,
+        arg: undefined,
+      })
+    })
 
-  test('parse with correct location info', () => {
-    const [foo, bar, but, baz] = baseParse(
-      `
-foo
- is {{ bar }} but {{ baz }}`.trim()
-    ).children
-
-    let offset = 0
-    expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
-    offset += foo.loc.source.length
-    expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
-
-    expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
-    const barInner = (bar as InterpolationNode).content
-    offset += 3
-    expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
-    offset += barInner.loc.source.length
-    expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
-    offset += 3
-    expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
-
-    expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
-    offset += but.loc.source.length
-    expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
-
-    expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
-    const bazInner = (baz as InterpolationNode).content
-    offset += 3
-    expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
-    offset += bazInner.loc.source.length
-    expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
-    offset += 3
-    expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
+    // edge case found in vue-macros where the input is TS or JSX
+    test('should reset inRCDATA state', () => {
+      baseParse(`<Foo>`, { parseMode: 'sfc', onError() {} })
+      expect(() => baseParse(`{ foo }`)).not.toThrow()
+    })
   })
 
   describe('decodeEntities option', () => {
-    test('use default map', () => {
+    test('use decode by default', () => {
       const ast: any = baseParse('&gt;&lt;&amp;&apos;&quot;&foo;')
 
       expect(ast.children.length).toBe(1)
@@ -1952,15 +2081,14 @@ foo
       expect(ast.children[0].content).toBe('><&\'"&foo;')
     })
 
-    test('use the given map', () => {
-      const ast: any = baseParse('&amp;&cups;', {
+    test('should warn in non-browser build', () => {
+      baseParse('&amp;&cups;', {
         decodeEntities: text => text.replace('&cups;', '\u222A\uFE00'),
-        onError: () => {} // Ignore errors
+        onError: () => {}, // Ignore errors
       })
-
-      expect(ast.children.length).toBe(1)
-      expect(ast.children[0].type).toBe(NodeTypes.TEXT)
-      expect(ast.children[0].content).toBe('&amp;\u222A\uFE00')
+      expect(
+        `decodeEntities option is passed but will be ignored`,
+      ).toHaveBeenWarned()
     })
   })
 
@@ -1968,21 +2096,21 @@ foo
     const parse = (content: string, options?: ParserOptions) =>
       baseParse(content, {
         whitespace: 'condense',
-        ...options
+        ...options,
       })
 
-    it('should remove whitespaces at start/end inside an element', () => {
+    test('should remove whitespaces at start/end inside an element', () => {
       const ast = parse(`<div>   <span/>    </div>`)
       expect((ast.children[0] as ElementNode).children.length).toBe(1)
     })
 
-    it('should remove whitespaces w/ newline between elements', () => {
+    test('should remove whitespaces w/ newline between elements', () => {
       const ast = parse(`<div/> \n <div/> \n <div/>`)
       expect(ast.children.length).toBe(3)
       expect(ast.children.every(c => c.type === NodeTypes.ELEMENT)).toBe(true)
     })
 
-    it('should remove whitespaces adjacent to comments', () => {
+    test('should remove whitespaces adjacent to comments', () => {
       const ast = parse(`<div/> \n <!--foo--> <div/>`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
@@ -1990,7 +2118,7 @@ foo
       expect(ast.children[2].type).toBe(NodeTypes.ELEMENT)
     })
 
-    it('should remove whitespaces w/ newline between comments and elements', () => {
+    test('should remove whitespaces w/ newline between comments and elements', () => {
       const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
@@ -1998,29 +2126,29 @@ foo
       expect(ast.children[2].type).toBe(NodeTypes.ELEMENT)
     })
 
-    it('should NOT remove whitespaces w/ newline between interpolations', () => {
+    test('should NOT remove whitespaces w/ newline between interpolations', () => {
       const ast = parse(`{{ foo }} \n {{ bar }}`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: ' '
+        content: ' ',
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
 
-    it('should NOT remove whitespaces w/ newline between interpolation and comment', () => {
+    test('should NOT remove whitespaces w/ newline between interpolation and comment', () => {
       const ast = parse(`<!-- foo --> \n {{msg}}`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.COMMENT)
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: ' '
+        content: ' ',
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
 
-    it('should NOT remove whitespaces w/o newline between elements', () => {
+    test('should NOT remove whitespaces w/o newline between elements', () => {
       const ast = parse(`<div/> <div/> <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2028,18 +2156,18 @@ foo
         NodeTypes.TEXT,
         NodeTypes.ELEMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should condense consecutive whitespaces in text', () => {
+    test('should condense consecutive whitespaces in text', () => {
       const ast = parse(`   foo  \n    bar     baz     `)
       expect((ast.children[0] as TextNode).content).toBe(` foo bar baz `)
     })
 
-    it('should remove leading newline character immediately following the pre element start tag', () => {
+    test('should remove leading newline character immediately following the pre element start tag', () => {
       const ast = baseParse(`<pre>\n  foo  bar  </pre>`, {
-        isPreTag: tag => tag === 'pre'
+        isPreTag: tag => tag === 'pre',
       })
       expect(ast.children).toHaveLength(1)
       const preElement = ast.children[0] as ElementNode
@@ -2047,30 +2175,29 @@ foo
       expect((preElement.children[0] as TextNode).content).toBe(`  foo  bar  `)
     })
 
-    it('should NOT remove leading newline character immediately following child-tag of pre element', () => {
+    test('should NOT remove leading newline character immediately following child-tag of pre element', () => {
       const ast = baseParse(`<pre><span></span>\n  foo  bar  </pre>`, {
-        isPreTag: tag => tag === 'pre'
+        isPreTag: tag => tag === 'pre',
       })
       const preElement = ast.children[0] as ElementNode
       expect(preElement.children).toHaveLength(2)
       expect((preElement.children[1] as TextNode).content).toBe(
-        `\n  foo  bar  `
+        `\n  foo  bar  `,
       )
     })
 
-    it('self-closing pre tag', () => {
+    test('self-closing pre tag', () => {
       const ast = baseParse(`<pre/><span>\n  foo   bar</span>`, {
-        isPreTag: tag => tag === 'pre'
+        isPreTag: tag => tag === 'pre',
       })
       const elementAfterPre = ast.children[1] as ElementNode
       // should not affect the <span> and condense its whitespace inside
       expect((elementAfterPre.children[0] as TextNode).content).toBe(` foo bar`)
     })
 
-    it('should NOT condense whitespaces in RCDATA text mode', () => {
+    test('should NOT condense whitespaces in RCDATA text mode', () => {
       const ast = baseParse(`<textarea>Text:\n   foo</textarea>`, {
-        getTextMode: ({ tag }) =>
-          tag === 'textarea' ? TextModes.RCDATA : TextModes.DATA
+        parseMode: 'html',
       })
       const preElement = ast.children[0] as ElementNode
       expect(preElement.children).toHaveLength(1)
@@ -2082,15 +2209,15 @@ foo
     const parse = (content: string, options?: ParserOptions) =>
       baseParse(content, {
         whitespace: 'preserve',
-        ...options
+        ...options,
       })
 
-    it('should still remove whitespaces at start/end inside an element', () => {
+    test('should still remove whitespaces at start/end inside an element', () => {
       const ast = parse(`<div>   <span/>    </div>`)
       expect((ast.children[0] as ElementNode).children.length).toBe(1)
     })
 
-    it('should preserve whitespaces w/ newline between elements', () => {
+    test('should preserve whitespaces w/ newline between elements', () => {
       const ast = parse(`<div/> \n <div/> \n <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2098,11 +2225,11 @@ foo
         NodeTypes.TEXT,
         NodeTypes.ELEMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve whitespaces adjacent to comments', () => {
+    test('should preserve whitespaces adjacent to comments', () => {
       const ast = parse(`<div/> \n <!--foo--> <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2110,11 +2237,11 @@ foo
         NodeTypes.TEXT,
         NodeTypes.COMMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve whitespaces w/ newline between comments and elements', () => {
+    test('should preserve whitespaces w/ newline between comments and elements', () => {
       const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2122,22 +2249,22 @@ foo
         NodeTypes.TEXT,
         NodeTypes.COMMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve whitespaces w/ newline between interpolations', () => {
+    test('should preserve whitespaces w/ newline between interpolations', () => {
       const ast = parse(`{{ foo }} \n {{ bar }}`)
       expect(ast.children.length).toBe(3)
       expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: ' '
+        content: ' ',
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
 
-    it('should preserve whitespaces w/o newline between elements', () => {
+    test('should preserve whitespaces w/o newline between elements', () => {
       const ast = parse(`<div/> <div/> <div/>`)
       expect(ast.children.length).toBe(5)
       expect(ast.children.map(c => c.type)).toMatchObject([
@@ -2145,18 +2272,79 @@ foo
         NodeTypes.TEXT,
         NodeTypes.ELEMENT,
         NodeTypes.TEXT,
-        NodeTypes.ELEMENT
+        NodeTypes.ELEMENT,
       ])
     })
 
-    it('should preserve consecutive whitespaces in text', () => {
+    test('should preserve consecutive whitespaces in text', () => {
       const content = `   foo  \n    bar     baz     `
       const ast = parse(content)
       expect((ast.children[0] as TextNode).content).toBe(content)
     })
   })
 
+  describe('expression parsing', () => {
+    test('interpolation', () => {
+      const ast = baseParse(`{{ a + b }}`, { prefixIdentifiers: true })
+      // @ts-expect-error
+      expect((ast.children[0] as InterpolationNode).content.ast?.type).toBe(
+        'BinaryExpression',
+      )
+    })
+
+    test('v-bind', () => {
+      const ast = baseParse(`<div :[key+1]="foo()" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      // @ts-expect-error
+      expect(dir.arg?.ast?.type).toBe('BinaryExpression')
+      // @ts-expect-error
+      expect(dir.exp?.ast?.type).toBe('CallExpression')
+    })
+
+    test('v-on multi statements', () => {
+      const ast = baseParse(`<div @click="a++;b++" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      // @ts-expect-error
+      expect(dir.exp?.ast?.type).toBe('Program')
+      expect((dir.exp?.ast as Program).body).toMatchObject([
+        { type: 'ExpressionStatement' },
+        { type: 'ExpressionStatement' },
+      ])
+    })
+
+    test('v-slot', () => {
+      const ast = baseParse(`<Comp #foo="{ a, b }" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      // @ts-expect-error
+      expect(dir.exp?.ast?.type).toBe('ArrowFunctionExpression')
+    })
+
+    test('v-for', () => {
+      const ast = baseParse(`<div v-for="({ a, b }, key, index) of a.b" />`, {
+        prefixIdentifiers: true,
+      })
+      const dir = (ast.children[0] as ElementNode).props[0] as DirectiveNode
+      const { source, value, key, index } = dir.forParseResult!
+      // @ts-expect-error
+      expect(source.ast?.type).toBe('MemberExpression')
+      // @ts-expect-error
+      expect(value?.ast?.type).toBe('ArrowFunctionExpression')
+      expect(key?.ast).toBeNull() // simple ident
+      expect(index?.ast).toBeNull() // simple ident
+    })
+  })
+
   describe('Errors', () => {
+    // HTML parsing errors as specified at
+    // https://html.spec.whatwg.org/multipage/parsing.html#parse-errors
+    // We ignore some errors that do NOT affect parse result in meaningful ways
+    // but have non-trivial implementation cost.
     const patterns: {
       [key: string]: Array<{
         code: string
@@ -2164,44 +2352,44 @@ foo
         options?: Partial<ParserOptions>
       }>
     } = {
-      ABRUPT_CLOSING_OF_EMPTY_COMMENT: [
-        {
-          code: '<template><!--></template>',
-          errors: [
-            {
-              type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!---></template>',
-          errors: [
-            {
-              type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!----></template>',
-          errors: []
-        }
-      ],
+      // ABRUPT_CLOSING_OF_EMPTY_COMMENT: [
+      //   {
+      //     code: '<template><!--></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!---></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!----></template>',
+      //     errors: []
+      //   }
+      // ],
       CDATA_IN_HTML_CONTENT: [
         {
           code: '<template><![CDATA[cdata]]></template>',
           errors: [
             {
               type: ErrorCodes.CDATA_IN_HTML_CONTENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+          ],
         },
         {
           code: '<template><svg><![CDATA[cdata]]></svg></template>',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       DUPLICATE_ATTRIBUTE: [
         {
@@ -2209,60 +2397,60 @@ foo
           errors: [
             {
               type: ErrorCodes.DUPLICATE_ATTRIBUTE,
-              loc: { offset: 21, line: 1, column: 22 }
-            }
-          ]
-        }
-      ],
-      END_TAG_WITH_ATTRIBUTES: [
-        {
-          code: '<template><div></div id=""></template>',
-          errors: [
-            {
-              type: ErrorCodes.END_TAG_WITH_ATTRIBUTES,
-              loc: { offset: 21, line: 1, column: 22 }
-            }
-          ]
-        }
-      ],
-      END_TAG_WITH_TRAILING_SOLIDUS: [
-        {
-          code: '<template><div></div/></template>',
-          errors: [
-            {
-              type: ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS,
-              loc: { offset: 20, line: 1, column: 21 }
-            }
-          ]
-        }
+              loc: { offset: 21, line: 1, column: 22 },
+            },
+          ],
+        },
       ],
+      // END_TAG_WITH_ATTRIBUTES: [
+      //   {
+      //     code: '<template><div></div id=""></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.END_TAG_WITH_ATTRIBUTES,
+      //         loc: { offset: 21, line: 1, column: 22 }
+      //       }
+      //     ]
+      //   }
+      // ],
+      // END_TAG_WITH_TRAILING_SOLIDUS: [
+      //   {
+      //     code: '<template><div></div/></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS,
+      //         loc: { offset: 20, line: 1, column: 21 }
+      //       }
+      //     ]
+      //   }
+      // ],
       EOF_BEFORE_TAG_NAME: [
         {
           code: '<template><',
           errors: [
             {
               type: ErrorCodes.EOF_BEFORE_TAG_NAME,
-              loc: { offset: 11, line: 1, column: 12 }
+              loc: { offset: 11, line: 1, column: 12 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '<template></',
           errors: [
             {
               type: ErrorCodes.EOF_BEFORE_TAG_NAME,
-              loc: { offset: 12, line: 1, column: 13 }
+              loc: { offset: 12, line: 1, column: 13 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
       ],
       EOF_IN_CDATA: [
         {
@@ -2270,35 +2458,35 @@ foo
           errors: [
             {
               type: ErrorCodes.EOF_IN_CDATA,
-              loc: { offset: 29, line: 1, column: 30 }
+              loc: { offset: 29, line: 1, column: 30 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '<template><svg><![CDATA[',
           errors: [
             {
               type: ErrorCodes.EOF_IN_CDATA,
-              loc: { offset: 24, line: 1, column: 25 }
+              loc: { offset: 24, line: 1, column: 25 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
       ],
       EOF_IN_COMMENT: [
         {
@@ -2306,456 +2494,408 @@ foo
           errors: [
             {
               type: ErrorCodes.EOF_IN_COMMENT,
-              loc: { offset: 21, line: 1, column: 22 }
+              loc: { offset: 21, line: 1, column: 22 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '<template><!--',
           errors: [
             {
               type: ErrorCodes.EOF_IN_COMMENT,
-              loc: { offset: 14, line: 1, column: 15 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        },
-        // Bogus comments don't throw eof-in-comment error.
-        // https://html.spec.whatwg.org/multipage/parsing.html#bogus-comment-state
-        {
-          code: '<template><!',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        },
-        {
-          code: '<template><!-',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        },
-        {
-          code: '<template><!abc',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
-      ],
-      EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT: [
-        {
-          code: "<script><!--console.log('hello')",
-          errors: [
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
+              loc: { offset: 14, line: 1, column: 15 },
             },
-            {
-              type: ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT,
-              loc: { offset: 32, line: 1, column: 33 }
-            }
-          ]
-        },
-        {
-          code: "<script>console.log('hello')",
-          errors: [
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
+        // // Bogus comments don't throw eof-in-comment error.
+        // // https://html.spec.whatwg.org/multipage/parsing.html#bogus-comment-state
+        // {
+        //   code: '<template><!',
+        //   errors: [
+        //     {
+        //       type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+        //       loc: { offset: 10, line: 1, column: 11 }
+        //     },
+        //     {
+        //       type: ErrorCodes.X_MISSING_END_TAG,
+        //       loc: { offset: 0, line: 1, column: 1 }
+        //     }
+        //   ]
+        // },
+        // {
+        //   code: '<template><!-',
+        //   errors: [
+        //     {
+        //       type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+        //       loc: { offset: 10, line: 1, column: 11 }
+        //     },
+        //     {
+        //       type: ErrorCodes.X_MISSING_END_TAG,
+        //       loc: { offset: 0, line: 1, column: 1 }
+        //     }
+        //   ]
+        // },
+        // {
+        //   code: '<template><!abc',
+        //   errors: [
+        //     {
+        //       type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+        //       loc: { offset: 10, line: 1, column: 11 }
+        //     },
+        //     {
+        //       type: ErrorCodes.X_MISSING_END_TAG,
+        //       loc: { offset: 0, line: 1, column: 1 }
+        //     }
+        //   ]
+        // }
       ],
+      // EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT: [
+      //   {
+      //     code: "<script><!--console.log('hello')",
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       },
+      //       {
+      //         type: ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT,
+      //         loc: { offset: 32, line: 1, column: 33 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: "<script>console.log('hello')",
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       }
+      //     ]
+      //   }
+      // ],
       EOF_IN_TAG: [
         {
           code: '<template><div',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 14, line: 1, column: 15 }
+              loc: { offset: 14, line: 1, column: 15 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div ',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 15, line: 1, column: 16 }
+              loc: { offset: 15, line: 1, column: 16 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 17, line: 1, column: 18 }
+              loc: { offset: 17, line: 1, column: 18 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id ',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 18, line: 1, column: 19 }
+              loc: { offset: 18, line: 1, column: 19 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id =',
           errors: [
-            {
-              type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
-              loc: { offset: 19, line: 1, column: 20 }
-            },
+            // {
+            //   type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
+            //   loc: { offset: 19, line: 1, column: 20 }
+            // },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 19, line: 1, column: 20 }
+              loc: { offset: 19, line: 1, column: 20 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: "<template><div id='abc",
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 22, line: 1, column: 23 }
+              loc: { offset: 22, line: 1, column: 23 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id="abc',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 22, line: 1, column: 23 }
+              loc: { offset: 22, line: 1, column: 23 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: "<template><div id='abc'",
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id="abc"',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id=abc',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 21, line: 1, column: 22 }
+              loc: { offset: 21, line: 1, column: 22 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: "<template><div id='abc'/",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 24, line: 1, column: 25 }
+              loc: { offset: 24, line: 1, column: 25 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id="abc"/',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 24, line: 1, column: 25 }
+              loc: { offset: 24, line: 1, column: 25 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<template><div id=abc /',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 22, line: 1, column: 23 }
+              loc: { offset: 22, line: 1, column: 23 },
             },
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 23, line: 1, column: 24 }
+              loc: { offset: 23, line: 1, column: 24 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 0, line: 1, column: 1 },
             },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+          ],
         },
         {
           code: '<div></div',
           errors: [
             {
               type: ErrorCodes.EOF_IN_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        }
-      ],
-      INCORRECTLY_CLOSED_COMMENT: [
-        {
-          code: '<template><!--comment--!></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_CLOSED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        }
-      ],
-      INCORRECTLY_OPENED_COMMENT: [
-        {
-          code: '<template><!></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!-></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        {
-          code: '<template><!ELEMENT br EMPTY></template>',
-          errors: [
-            {
-              type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
-        },
-        // Just ignore doctype.
-        {
-          code: '<!DOCTYPE html>',
-          errors: []
-        }
-      ],
-      INVALID_FIRST_CHARACTER_OF_TAG_NAME: [
-        {
-          code: '<template>a < b</template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 13, line: 1, column: 14 }
-            }
-          ]
-        },
-        {
-          code: '<template><�></template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 11, line: 1, column: 12 }
-            }
-          ]
-        },
-        {
-          code: '<template>a </ b</template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 14, line: 1, column: 15 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        },
-        {
-          code: '<template></�></template>',
-          errors: [
-            {
-              type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              loc: { offset: 12, line: 1, column: 13 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
-        // Don't throw invalid-first-character-of-tag-name in interpolation
-        {
-          code: '<template>{{a < b}}</template>',
-          errors: []
-        }
       ],
+      // INCORRECTLY_CLOSED_COMMENT: [
+      //   {
+      //     code: '<template><!--comment--!></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_CLOSED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   }
+      // ],
+      // INCORRECTLY_OPENED_COMMENT: [
+      //   {
+      //     code: '<template><!></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!-></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!ELEMENT br EMPTY></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
+      //         loc: { offset: 10, line: 1, column: 11 }
+      //       }
+      //     ]
+      //   },
+      //   // Just ignore doctype.
+      //   {
+      //     code: '<!DOCTYPE html>',
+      //     errors: []
+      //   }
+      // ],
+      // INVALID_FIRST_CHARACTER_OF_TAG_NAME: [
+      //   {
+      //     code: '<template>a < b</template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 13, line: 1, column: 14 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><�></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 11, line: 1, column: 12 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template>a </ b</template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 14, line: 1, column: 15 }
+      //       },
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template></�></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
+      //         loc: { offset: 12, line: 1, column: 13 }
+      //       }
+      //     ]
+      //   },
+      //   // Don't throw invalid-first-character-of-tag-name in interpolation
+      //   {
+      //     code: '<template>{{a < b}}</template>',
+      //     errors: []
+      //   }
+      // ],
       MISSING_ATTRIBUTE_VALUE: [
         {
           code: '<template><div id=></div></template>',
           errors: [
             {
               type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
-              loc: { offset: 18, line: 1, column: 19 }
-            }
-          ]
+              loc: { offset: 18, line: 1, column: 19 },
+            },
+          ],
         },
         {
           code: '<template><div id= ></div></template>',
           errors: [
             {
               type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
-              loc: { offset: 19, line: 1, column: 20 }
-            }
-          ]
+              loc: { offset: 19, line: 1, column: 20 },
+            },
+          ],
         },
         {
           code: '<template><div id= /></div></template>',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       MISSING_END_TAG_NAME: [
         {
@@ -2763,106 +2903,106 @@ foo
           errors: [
             {
               type: ErrorCodes.MISSING_END_TAG_NAME,
-              loc: { offset: 12, line: 1, column: 13 }
-            }
-          ]
-        }
-      ],
-      MISSING_WHITESPACE_BETWEEN_ATTRIBUTES: [
-        {
-          code: '<template><div id="foo"class="bar"></div></template>',
-          errors: [
-            {
-              type: ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES,
-              loc: { offset: 23, line: 1, column: 24 }
-            }
-          ]
-        },
-        // CR doesn't appear in tokenization phase, but all CR are removed in preprocessing.
-        // https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
-        {
-          code: '<template><div id="foo"\r\nclass="bar"></div></template>',
-          errors: []
-        }
-      ],
-      NESTED_COMMENT: [
-        {
-          code: '<template><!--a<!--b--></template>',
-          errors: [
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        },
-        {
-          code: '<template><!--a<!--b<!--c--></template>',
-          errors: [
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 15, line: 1, column: 16 }
+              loc: { offset: 12, line: 1, column: 13 },
             },
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 20, line: 1, column: 21 }
-            }
-          ]
+          ],
         },
-        {
-          code: '<template><!--a<!--b<!----></template>',
-          errors: [
-            {
-              type: ErrorCodes.NESTED_COMMENT,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        },
-        {
-          code: '<template><!--a<!--></template>',
-          errors: []
-        },
-        {
-          code: '<template><!--a<!--',
-          errors: [
-            {
-              type: ErrorCodes.EOF_IN_COMMENT,
-              loc: { offset: 19, line: 1, column: 20 }
-            },
-            {
-              type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
       ],
+      // MISSING_WHITESPACE_BETWEEN_ATTRIBUTES: [
+      //   {
+      //     code: '<template><div id="foo"class="bar"></div></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES,
+      //         loc: { offset: 23, line: 1, column: 24 }
+      //       }
+      //     ]
+      //   },
+      //   // CR doesn't appear in tokenization phase, but all CR are removed in preprocessing.
+      //   // https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
+      //   {
+      //     code: '<template><div id="foo"\r\nclass="bar"></div></template>',
+      //     errors: []
+      //   }
+      // ],
+      // NESTED_COMMENT: [
+      //   {
+      //     code: '<template><!--a<!--b--></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 15, line: 1, column: 16 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!--a<!--b<!--c--></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 15, line: 1, column: 16 }
+      //       },
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 20, line: 1, column: 21 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!--a<!--b<!----></template>',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.NESTED_COMMENT,
+      //         loc: { offset: 15, line: 1, column: 16 }
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     code: '<template><!--a<!--></template>',
+      //     errors: []
+      //   },
+      //   {
+      //     code: '<template><!--a<!--',
+      //     errors: [
+      //       {
+      //         type: ErrorCodes.EOF_IN_COMMENT,
+      //         loc: { offset: 19, line: 1, column: 20 }
+      //       },
+      //       {
+      //         type: ErrorCodes.X_MISSING_END_TAG,
+      //         loc: { offset: 0, line: 1, column: 1 }
+      //       }
+      //     ]
+      //   }
+      // ],
       UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME: [
         {
           code: "<template><div a\"bc=''></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
         },
         {
           code: "<template><div a'bc=''></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
         },
         {
           code: "<template><div a<bc=''></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
-        }
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE: [
         {
@@ -2870,46 +3010,46 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: "<template><div foo=bar'></div></template>",
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: '<template><div foo=bar<div></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: '<template><div foo=bar=baz></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
         },
         {
           code: '<template><div foo=bar`></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-              loc: { offset: 22, line: 1, column: 23 }
-            }
-          ]
-        }
+              loc: { offset: 22, line: 1, column: 23 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME: [
         {
@@ -2917,19 +3057,19 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
+              loc: { offset: 15, line: 1, column: 16 },
+            },
+          ],
         },
         {
           code: '<template><div =></div></template>',
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        }
+              loc: { offset: 15, line: 1, column: 16 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME: [
         {
@@ -2937,10 +3077,10 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
-              loc: { offset: 11, line: 1, column: 12 }
-            }
-          ]
-        }
+              loc: { offset: 11, line: 1, column: 12 },
+            },
+          ],
+        },
       ],
       UNEXPECTED_SOLIDUS_IN_TAG: [
         {
@@ -2948,10 +3088,10 @@ foo
           errors: [
             {
               type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
-        }
+              loc: { offset: 16, line: 1, column: 17 },
+            },
+          ],
+        },
       ],
       X_INVALID_END_TAG: [
         {
@@ -2959,39 +3099,52 @@ foo
           errors: [
             {
               type: ErrorCodes.X_INVALID_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+          ],
         },
         {
           code: '<template></div></div></template>',
           errors: [
             {
               type: ErrorCodes.X_INVALID_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+            {
+              type: ErrorCodes.X_INVALID_END_TAG,
+              loc: { offset: 16, line: 1, column: 17 },
             },
+          ],
+        },
+        {
+          code: '<template>a </ b</template>',
+          errors: [
             {
               type: ErrorCodes.X_INVALID_END_TAG,
-              loc: { offset: 16, line: 1, column: 17 }
-            }
-          ]
+              loc: { offset: 12, line: 1, column: 13 },
+            },
+            {
+              type: ErrorCodes.X_MISSING_END_TAG,
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: "<template>{{'</div>'}}</template>",
-          errors: []
+          errors: [],
         },
         {
           code: '<textarea></div></textarea>',
-          errors: []
+          errors: [],
         },
         {
           code: '<svg><![CDATA[</div>]]></svg>',
-          errors: []
+          errors: [],
         },
         {
           code: '<svg><!--</div>--></svg>',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       X_MISSING_END_TAG: [
         {
@@ -2999,23 +3152,23 @@ foo
           errors: [
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
-            }
-          ]
+              loc: { offset: 10, line: 1, column: 11 },
+            },
+          ],
         },
         {
           code: '<template><div>',
           errors: [
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 10, line: 1, column: 11 }
+              loc: { offset: 10, line: 1, column: 11 },
             },
             {
               type: ErrorCodes.X_MISSING_END_TAG,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
-        }
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
       ],
       X_MISSING_INTERPOLATION_END: [
         {
@@ -3023,23 +3176,36 @@ foo
           errors: [
             {
               type: ErrorCodes.X_MISSING_INTERPOLATION_END,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '{{',
           errors: [
             {
               type: ErrorCodes.X_MISSING_INTERPOLATION_END,
-              loc: { offset: 0, line: 1, column: 1 }
-            }
-          ]
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
+        },
+        {
+          code: '<div>{{ foo</div>',
+          errors: [
+            {
+              type: ErrorCodes.X_MISSING_INTERPOLATION_END,
+              loc: { offset: 5, line: 1, column: 6 },
+            },
+            {
+              type: ErrorCodes.X_MISSING_END_TAG,
+              loc: { offset: 0, line: 1, column: 1 },
+            },
+          ],
         },
         {
           code: '{{}}',
-          errors: []
-        }
+          errors: [],
+        },
       ],
       X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END: [
         {
@@ -3047,11 +3213,11 @@ foo
           errors: [
             {
               type: ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
-              loc: { offset: 15, line: 1, column: 16 }
-            }
-          ]
-        }
-      ]
+              loc: { offset: 15, line: 1, column: 16 },
+            },
+          ],
+        },
+      ],
     }
 
     for (const key of Object.keys(patterns)) {
@@ -3060,41 +3226,26 @@ foo
           test(
             code.replace(
               /[\r\n]/g,
-              c => `\\x0${c.codePointAt(0)!.toString(16)};`
+              c => `\\x0${c.codePointAt(0)!.toString(16)};`,
             ),
             () => {
               const spy = vi.fn()
               const ast = baseParse(code, {
-                getNamespace: (tag, parent) => {
-                  const ns = parent ? parent.ns : Namespaces.HTML
-                  if (ns === Namespaces.HTML) {
-                    if (tag === 'svg') {
-                      return (Namespaces.HTML + 1) as any
-                    }
-                  }
-                  return ns
-                },
-                getTextMode: ({ tag }) => {
-                  if (tag === 'textarea') {
-                    return TextModes.RCDATA
-                  }
-                  if (tag === 'script') {
-                    return TextModes.RAWTEXT
-                  }
-                  return TextModes.DATA
-                },
+                parseMode: 'html',
+                getNamespace: tag =>
+                  tag === 'svg' ? Namespaces.SVG : Namespaces.HTML,
                 ...options,
-                onError: spy
+                onError: spy,
               })
 
               expect(
                 spy.mock.calls.map(([err]) => ({
                   type: err.code,
-                  loc: err.loc.start
-                }))
+                  loc: err.loc.start,
+                })),
               ).toMatchObject(errors)
               expect(ast).toMatchSnapshot()
-            }
+            },
           )
         }
       })
diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index 5f7ea0d2e6a..c7a21df7a78 100644
--- a/packages/compiler-core/__tests__/scopeId.spec.ts
+++ b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -1,5 +1,5 @@
 import { baseCompile } from '../src/compile'
-import { PUSH_SCOPE_ID, POP_SCOPE_ID } from '../src/runtimeHelpers'
+import { POP_SCOPE_ID, PUSH_SCOPE_ID } from '../src/runtimeHelpers'
 import { PatchFlags } from '@vue/shared'
 import { genFlagText } from './testUtils'
 
@@ -18,7 +18,7 @@ describe('scopeId compiler support', () => {
   test('should wrap default slot', () => {
     const { code } = baseCompile(`<Child><div/></Child>`, {
       mode: 'module',
-      scopeId: 'test'
+      scopeId: 'test',
     })
     expect(code).toMatch(`default: _withCtx(() => [`)
     expect(code).toMatchSnapshot()
@@ -33,8 +33,8 @@ describe('scopeId compiler support', () => {
       `,
       {
         mode: 'module',
-        scopeId: 'test'
-      }
+        scopeId: 'test',
+      },
     )
     expect(code).toMatch(`foo: _withCtx(({ msg }) => [`)
     expect(code).toMatch(`bar: _withCtx(() => [`)
@@ -50,8 +50,8 @@ describe('scopeId compiler support', () => {
       `,
       {
         mode: 'module',
-        scopeId: 'test'
-      }
+        scopeId: 'test',
+      },
     )
     expect(code).toMatch(/name: "foo",\s+fn: _withCtx\(/)
     expect(code).toMatch(/name: i,\s+fn: _withCtx\(/)
@@ -64,8 +64,8 @@ describe('scopeId compiler support', () => {
       {
         mode: 'module',
         scopeId: 'test',
-        hoistStatic: true
-      }
+        hoistStatic: true,
+      },
     )
     expect(ast.helpers).toContain(PUSH_SCOPE_ID)
     expect(ast.helpers).toContain(POP_SCOPE_ID)
@@ -73,11 +73,11 @@ describe('scopeId compiler support', () => {
     ;[
       `const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)`,
       `const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
-        PatchFlags.HOISTED
+        PatchFlags.HOISTED,
       )}))`,
       `const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
-        PatchFlags.HOISTED
-      )}))`
+        PatchFlags.HOISTED,
+      )}))`,
     ].forEach(c => expect(code).toMatch(c))
     expect(code).toMatchSnapshot()
   })
diff --git a/packages/compiler-core/__tests__/testUtils.ts b/packages/compiler-core/__tests__/testUtils.ts
index 23a29a777e3..9618a482add 100644
--- a/packages/compiler-core/__tests__/testUtils.ts
+++ b/packages/compiler-core/__tests__/testUtils.ts
@@ -1,17 +1,17 @@
 import {
+  type ElementNode,
+  ElementTypes,
+  Namespaces,
   NodeTypes,
-  ElementNode,
+  type VNodeCall,
   locStub,
-  Namespaces,
-  ElementTypes,
-  VNodeCall
 } from '../src'
 import {
-  isString,
-  PatchFlags,
   PatchFlagNames,
+  type PatchFlags,
+  type ShapeFlags,
   isArray,
-  ShapeFlags
+  isString,
 } from '@vue/shared'
 
 const leadingBracketRE = /^\[/
@@ -30,16 +30,16 @@ export function createObjectMatcher(obj: Record<string, any>) {
       key: {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: key.replace(bracketsRE, ''),
-        isStatic: !leadingBracketRE.test(key)
+        isStatic: !leadingBracketRE.test(key),
       },
       value: isString(obj[key])
         ? {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: obj[key].replace(bracketsRE, ''),
-            isStatic: !leadingBracketRE.test(obj[key])
+            isStatic: !leadingBracketRE.test(obj[key]),
           }
-        : obj[key]
-    }))
+        : obj[key],
+    })),
   }
 }
 
@@ -48,7 +48,7 @@ export function createElementWithCodegen(
   props?: VNodeCall['props'],
   children?: VNodeCall['children'],
   patchFlag?: VNodeCall['patchFlag'],
-  dynamicProps?: VNodeCall['dynamicProps']
+  dynamicProps?: VNodeCall['dynamicProps'],
 ): ElementNode {
   return {
     type: NodeTypes.ELEMENT,
@@ -56,7 +56,6 @@ export function createElementWithCodegen(
     ns: Namespaces.HTML,
     tag: 'div',
     tagType: ElementTypes.ELEMENT,
-    isSelfClosing: false,
     props: [],
     children: [],
     codegenNode: {
@@ -70,15 +69,15 @@ export function createElementWithCodegen(
       isBlock: false,
       disableTracking: false,
       isComponent: false,
-      loc: locStub
-    }
+      loc: locStub,
+    },
   }
 }
 
 type Flags = PatchFlags | ShapeFlags
 export function genFlagText(
   flag: Flags | Flags[],
-  names: { [k: number]: string } = PatchFlagNames
+  names: { [k: number]: string } = PatchFlagNames,
 ) {
   if (isArray(flag)) {
     let f = 0
diff --git a/packages/compiler-core/__tests__/transform.spec.ts b/packages/compiler-core/__tests__/transform.spec.ts
index 042865efb4e..a56be51bc5c 100644
--- a/packages/compiler-core/__tests__/transform.spec.ts
+++ b/packages/compiler-core/__tests__/transform.spec.ts
@@ -1,18 +1,18 @@
-import { baseParse } from '../src/parse'
-import { transform, NodeTransform } from '../src/transform'
+import { baseParse } from '../src/parser'
+import { type NodeTransform, transform } from '../src/transform'
 import {
-  ElementNode,
+  type DirectiveNode,
+  type ElementNode,
+  type ExpressionNode,
   NodeTypes,
-  DirectiveNode,
-  ExpressionNode,
-  VNodeCall
+  type VNodeCall,
 } from '../src/ast'
 import { ErrorCodes, createCompilerError } from '../src/errors'
 import {
-  TO_DISPLAY_STRING,
+  CREATE_COMMENT,
   FRAGMENT,
   RENDER_SLOT,
-  CREATE_COMMENT
+  TO_DISPLAY_STRING,
 } from '../src/runtimeHelpers'
 import { transformIf } from '../src/transforms/vIf'
 import { transformFor } from '../src/transforms/vFor'
@@ -34,7 +34,7 @@ describe('compiler: transform', () => {
     }
 
     transform(ast, {
-      nodeTransforms: [plugin]
+      nodeTransforms: [plugin],
     })
 
     const div = ast.children[0] as ElementNode
@@ -43,29 +43,29 @@ describe('compiler: transform', () => {
       ast,
       {
         parent: null,
-        currentNode: ast
-      }
+        currentNode: ast,
+      },
     ])
     expect(calls[1]).toMatchObject([
       div,
       {
         parent: ast,
-        currentNode: div
-      }
+        currentNode: div,
+      },
     ])
     expect(calls[2]).toMatchObject([
       div.children[0],
       {
         parent: div,
-        currentNode: div.children[0]
-      }
+        currentNode: div.children[0],
+      },
     ])
     expect(calls[3]).toMatchObject([
       div.children[1],
       {
         parent: div,
-        currentNode: div.children[1]
-      }
+        currentNode: div.children[1],
+      },
     ])
   })
 
@@ -81,16 +81,16 @@ describe('compiler: transform', () => {
               {
                 type: NodeTypes.TEXT,
                 content: 'hello',
-                isEmpty: false
-              }
-            ]
-          })
+                isEmpty: false,
+              },
+            ],
+          }),
         )
       }
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(2)
@@ -115,7 +115,7 @@ describe('compiler: transform', () => {
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(2)
@@ -143,7 +143,7 @@ describe('compiler: transform', () => {
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(1)
@@ -170,7 +170,7 @@ describe('compiler: transform', () => {
     }
     const spy = vi.fn(plugin)
     transform(ast, {
-      nodeTransforms: [spy]
+      nodeTransforms: [spy],
     })
 
     expect(ast.children.length).toBe(1)
@@ -194,31 +194,51 @@ describe('compiler: transform', () => {
       }
     }
     transform(ast, {
-      nodeTransforms: [mock]
+      nodeTransforms: [mock],
     })
     expect(ast.hoists).toMatchObject(hoisted)
     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/>`)
     const loc = ast.children[0].loc
     const plugin: NodeTransform = (node, context) => {
       context.onError(
-        createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc)
+        createCompilerError(ErrorCodes.X_INVALID_END_TAG, node.loc),
       )
     }
     const spy = vi.fn()
     transform(ast, {
       nodeTransforms: [plugin],
-      onError: spy
+      onError: spy,
     })
     expect(spy.mock.calls[0]).toMatchObject([
       {
         code: ErrorCodes.X_INVALID_END_TAG,
-        loc
-      }
+        loc,
+      },
     ])
   })
 
@@ -243,8 +263,8 @@ describe('compiler: transform', () => {
           transformFor,
           transformText,
           transformSlotOutlet,
-          transformElement
-        ]
+          transformElement,
+        ],
       })
       return ast
     }
@@ -253,7 +273,7 @@ describe('compiler: transform', () => {
       tag: VNodeCall['tag'],
       props?: VNodeCall['props'],
       children?: VNodeCall['children'],
-      patchFlag?: VNodeCall['patchFlag']
+      patchFlag?: VNodeCall['patchFlag'],
     ) {
       return {
         type: NodeTypes.VNODE_CALL,
@@ -261,7 +281,7 @@ describe('compiler: transform', () => {
         tag,
         props,
         children,
-        patchFlag
+        patchFlag,
       }
     }
 
@@ -275,8 +295,8 @@ describe('compiler: transform', () => {
       expect(ast.codegenNode).toMatchObject({
         codegenNode: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: RENDER_SLOT
-        }
+          callee: RENDER_SLOT,
+        },
       })
     })
 
@@ -288,14 +308,14 @@ describe('compiler: transform', () => {
     test('root v-if', () => {
       const ast = transformWithCodegen(`<div v-if="ok" />`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.IF
+        type: NodeTypes.IF,
       })
     })
 
     test('root v-for', () => {
       const ast = transformWithCodegen(`<div v-for="i in list" />`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.FOR
+        type: NodeTypes.FOR,
       })
     })
 
@@ -303,28 +323,28 @@ describe('compiler: transform', () => {
       const ast = transformWithCodegen(`<div v-foo/>`)
       expect(ast.codegenNode).toMatchObject({
         type: NodeTypes.VNODE_CALL,
-        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
+        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION },
       })
     })
 
     test('single text', () => {
       const ast = transformWithCodegen(`hello`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.TEXT
+        type: NodeTypes.TEXT,
       })
     })
 
     test('single interpolation', () => {
       const ast = transformWithCodegen(`{{ foo }}`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.INTERPOLATION
+        type: NodeTypes.INTERPOLATION,
       })
     })
 
     test('single CompoundExpression', () => {
       const ast = transformWithCodegen(`{{ foo }} bar baz`)
       expect(ast.codegenNode).toMatchObject({
-        type: NodeTypes.COMPOUND_EXPRESSION
+        type: NodeTypes.COMPOUND_EXPRESSION,
       })
     })
 
@@ -336,10 +356,10 @@ describe('compiler: transform', () => {
           undefined,
           [
             { type: NodeTypes.ELEMENT, tag: `div` },
-            { type: NodeTypes.ELEMENT, tag: `div` }
+            { type: NodeTypes.ELEMENT, tag: `div` },
           ] as any,
-          genFlagText(PatchFlags.STABLE_FRAGMENT)
-        )
+          genFlagText(PatchFlags.STABLE_FRAGMENT),
+        ),
       )
     })
 
@@ -352,13 +372,13 @@ describe('compiler: transform', () => {
           [
             { type: NodeTypes.COMMENT },
             { type: NodeTypes.ELEMENT, tag: `div` },
-            { type: NodeTypes.COMMENT }
+            { type: NodeTypes.COMMENT },
           ] as any,
           genFlagText([
             PatchFlags.STABLE_FRAGMENT,
-            PatchFlags.DEV_ROOT_FRAGMENT
-          ])
-        )
+            PatchFlags.DEV_ROOT_FRAGMENT,
+          ]),
+        ),
       )
     })
   })
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 c72e0229832..9f4406864db 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), 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,6 +10,48 @@ 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), 1 /* TEXT */))
+  return (_openBlock(), _createElementBlock("div", null, _toDisplayString($props.props) + " " + _toDisplayString($setup.setup) + " " + _toDisplayString($data.data) + " " + _toDisplayString($options.options) + " " + _toDisplayString($setup.isNaN), 1 /* TEXT */))
+}"
+`;
+
+exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for loop 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+          for (let i = 0; i < _ctx.list.length; i++) {
+            _ctx.log(i)
+          }
+        }
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for...in 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+          for (const x in _ctx.list) {
+            _ctx.log(x)
+          }
+        }
+  }, null, 8 /* PROPS */, ["onClick"]))
+}"
+`;
+
+exports[`compiler: expression transform > bindingMetadata > should not prefix temp variable of for...of 1`] = `
+"const { openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+
+return function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (_openBlock(), _createElementBlock("div", {
+    onClick: () => {
+          for (const x of _ctx.list) {
+            _ctx.log(x)
+          }
+        }
+  }, 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 e59df2d5458..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, HYDRATE_EVENTS */, [\\"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-core/__tests__/transforms/hoistStatic.spec.ts b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
index eec5a76d363..d6c46b52eb3 100644
--- a/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
@@ -1,19 +1,19 @@
 import {
-  baseParse as parse,
-  transform,
+  type CompilerOptions,
+  ConstantTypes,
+  type ElementNode,
+  type ForNode,
+  type IfNode,
   NodeTypes,
+  type VNodeCall,
   generate,
-  CompilerOptions,
-  VNodeCall,
-  IfNode,
-  ElementNode,
-  ForNode,
-  ConstantTypes
+  baseParse as parse,
+  transform,
 } from '../../src'
 import {
   FRAGMENT,
+  NORMALIZE_CLASS,
   RENDER_LIST,
-  NORMALIZE_CLASS
 } from '../../src/runtimeHelpers'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformExpression } from '../../src/transforms/transformExpression'
@@ -31,9 +31,9 @@ const hoistedChildrenArrayMatcher = (startIndex = 1, length = 1) => ({
     type: NodeTypes.ELEMENT,
     codegenNode: {
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_hoisted_${startIndex + i}`
-    }
-  }))
+      content: `_hoisted_${startIndex + i}`,
+    },
+  })),
 })
 
 function transformWithHoist(template: string, options: CompilerOptions = {}) {
@@ -45,17 +45,17 @@ function transformWithHoist(template: string, options: CompilerOptions = {}) {
       transformFor,
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformElement,
-      transformText
+      transformText,
     ],
     directiveTransforms: {
       on: transformOn,
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   expect(ast.codegenNode).toMatchObject({
     type: NodeTypes.VNODE_CALL,
-    isBlock: true
+    isBlock: true,
   })
   return ast
 }
@@ -67,14 +67,14 @@ describe('compiler: hoistStatic transform', () => {
     const root = transformWithHoist(`<div/>`)
     expect(root.hoists.length).toBe(0)
     expect(root.codegenNode).toMatchObject({
-      tag: `"div"`
+      tag: `"div"`,
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('hoist simple element', () => {
     const root = transformWithHoist(
-      `<div><span class="inline">hello</span></div>`
+      `<div><span class="inline">hello</span></div>`,
     )
     expect(root.hoists).toMatchObject([
       {
@@ -83,15 +83,15 @@ describe('compiler: hoistStatic transform', () => {
         props: createObjectMatcher({ class: 'inline' }),
         children: {
           type: NodeTypes.TEXT,
-          content: `hello`
-        }
+          content: `hello`,
+        },
       },
-      hoistedChildrenArrayMatcher()
+      hoistedChildrenArrayMatcher(),
     ])
     expect(root.codegenNode).toMatchObject({
       tag: `"div"`,
       props: undefined,
-      children: { content: `_hoisted_2` }
+      children: { content: `_hoisted_2` },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -105,13 +105,13 @@ describe('compiler: hoistStatic transform', () => {
         props: undefined,
         children: [
           { type: NodeTypes.ELEMENT, tag: `span` },
-          { type: NodeTypes.ELEMENT, tag: `span` }
-        ]
+          { type: NodeTypes.ELEMENT, tag: `span` },
+        ],
       },
-      hoistedChildrenArrayMatcher()
+      hoistedChildrenArrayMatcher(),
     ])
     expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: '_hoisted_2'
+      content: '_hoisted_2',
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -123,12 +123,12 @@ describe('compiler: hoistStatic transform', () => {
         type: NodeTypes.VNODE_CALL,
         tag: `"div"`,
         props: undefined,
-        children: [{ type: NodeTypes.COMMENT, content: `comment` }]
+        children: [{ type: NodeTypes.COMMENT, content: `comment` }],
       },
-      hoistedChildrenArrayMatcher()
+      hoistedChildrenArrayMatcher(),
     ])
     expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: `_hoisted_2`
+      content: `_hoisted_2`,
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -138,16 +138,16 @@ describe('compiler: hoistStatic transform', () => {
     expect(root.hoists).toMatchObject([
       {
         type: NodeTypes.VNODE_CALL,
-        tag: `"span"`
+        tag: `"span"`,
       },
       {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
+        tag: `"div"`,
       },
-      hoistedChildrenArrayMatcher(1, 2)
+      hoistedChildrenArrayMatcher(1, 2),
     ])
     expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: '_hoisted_3'
+      content: '_hoisted_3',
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -160,9 +160,9 @@ describe('compiler: hoistStatic transform', () => {
         type: NodeTypes.ELEMENT,
         codegenNode: {
           type: NodeTypes.VNODE_CALL,
-          tag: `_component_Comp`
-        }
-      }
+          tag: `_component_Comp`,
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -177,17 +177,17 @@ describe('compiler: hoistStatic transform', () => {
           type: NodeTypes.VNODE_CALL,
           tag: `"div"`,
           props: createObjectMatcher({
-            id: `[foo]`
+            id: `[foo]`,
           }),
           children: undefined,
           patchFlag: genFlagText(PatchFlags.PROPS),
           dynamicProps: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `_hoisted_1`,
-            isStatic: false
-          }
-        }
-      }
+            isStatic: false,
+          },
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -199,14 +199,14 @@ describe('compiler: hoistStatic transform', () => {
       {
         type: NodeTypes.VNODE_CALL,
         tag: `"div"`,
-        props: createObjectMatcher({ key: 'foo' })
+        props: createObjectMatcher({ key: 'foo' }),
       },
-      hoistedChildrenArrayMatcher()
+      hoistedChildrenArrayMatcher(),
     ])
     expect(root.codegenNode).toMatchObject({
       tag: `"div"`,
       props: undefined,
-      children: { content: `_hoisted_2` }
+      children: { content: `_hoisted_2` },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -221,10 +221,10 @@ describe('compiler: hoistStatic transform', () => {
           type: NodeTypes.VNODE_CALL,
           tag: `"div"`,
           props: createObjectMatcher({
-            key: `[foo]`
-          })
-        }
-      }
+            key: `[foo]`,
+          }),
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -239,12 +239,12 @@ describe('compiler: hoistStatic transform', () => {
           type: NodeTypes.VNODE_CALL,
           tag: `"div"`,
           props: createObjectMatcher({
-            ref: `[foo]`
+            ref: `[foo]`,
           }),
           children: undefined,
-          patchFlag: genFlagText(PatchFlags.NEED_PATCH)
-        }
-      }
+          patchFlag: genFlagText(PatchFlags.NEED_PATCH),
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -260,22 +260,22 @@ describe('compiler: hoistStatic transform', () => {
           tag: `"div"`,
           props: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`
+            content: `_hoisted_1`,
           },
           children: undefined,
           patchFlag: genFlagText(PatchFlags.NEED_PATCH),
           directives: {
-            type: NodeTypes.JS_ARRAY_EXPRESSION
-          }
-        }
-      }
+            type: NodeTypes.JS_ARRAY_EXPRESSION,
+          },
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('hoist static props for elements with dynamic text children', () => {
     const root = transformWithHoist(
-      `<div><div id="foo">{{ hello }}</div></div>`
+      `<div><div id="foo">{{ hello }}</div></div>`,
     )
     expect(root.hoists).toMatchObject([createObjectMatcher({ id: 'foo' })])
     expect((root.codegenNode as VNodeCall).children).toMatchObject([
@@ -286,9 +286,9 @@ describe('compiler: hoistStatic transform', () => {
           tag: `"div"`,
           props: { content: `_hoisted_1` },
           children: { type: NodeTypes.INTERPOLATION },
-          patchFlag: genFlagText(PatchFlags.TEXT)
-        }
-      }
+          patchFlag: genFlagText(PatchFlags.TEXT),
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -303,30 +303,30 @@ describe('compiler: hoistStatic transform', () => {
           type: NodeTypes.VNODE_CALL,
           tag: `"div"`,
           props: { content: `_hoisted_1` },
-          children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }]
-        }
-      }
+          children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }],
+        },
+      },
     ])
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('should hoist v-if props/children if static', () => {
     const root = transformWithHoist(
-      `<div><div v-if="ok" id="foo"><span/></div></div>`
+      `<div><div v-if="ok" id="foo"><span/></div></div>`,
     )
     expect(root.hoists).toMatchObject([
       createObjectMatcher({
         key: `[0]`, // key injected by v-if branch
-        id: 'foo'
+        id: 'foo',
       }),
       {
         type: NodeTypes.VNODE_CALL,
-        tag: `"span"`
+        tag: `"span"`,
       },
-      hoistedChildrenArrayMatcher(2)
+      hoistedChildrenArrayMatcher(2),
     ])
     expect(
-      ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode
+      ((root.children[0] as ElementNode).children[0] as IfNode).codegenNode,
     ).toMatchObject({
       type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
       consequent: {
@@ -334,25 +334,25 @@ describe('compiler: hoistStatic transform', () => {
         type: NodeTypes.VNODE_CALL,
         tag: `"div"`,
         props: { content: `_hoisted_1` },
-        children: { content: `_hoisted_3` }
-      }
+        children: { content: `_hoisted_3` },
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('should hoist v-for children if static', () => {
     const root = transformWithHoist(
-      `<div><div v-for="i in list" id="foo"><span/></div></div>`
+      `<div><div v-for="i in list" id="foo"><span/></div></div>`,
     )
     expect(root.hoists).toMatchObject([
       createObjectMatcher({
-        id: 'foo'
+        id: 'foo',
       }),
       {
         type: NodeTypes.VNODE_CALL,
-        tag: `"span"`
+        tag: `"span"`,
       },
-      hoistedChildrenArrayMatcher(2)
+      hoistedChildrenArrayMatcher(2),
     ])
     const forBlockCodegen = (
       (root.children[0] as ElementNode).children[0] as ForNode
@@ -363,16 +363,16 @@ describe('compiler: hoistStatic transform', () => {
       props: undefined,
       children: {
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: RENDER_LIST
+        callee: RENDER_LIST,
       },
-      patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT)
+      patchFlag: genFlagText(PatchFlags.UNKEYED_FRAGMENT),
     })
     const innerBlockCodegen = forBlockCodegen!.children.arguments[1]
     expect(innerBlockCodegen.returns).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: `"div"`,
       props: { content: `_hoisted_1` },
-      children: { content: `_hoisted_3` }
+      children: { content: `_hoisted_3` },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -382,8 +382,8 @@ describe('compiler: hoistStatic transform', () => {
       const root = transformWithHoist(
         `<div><span>foo {{ 1 }} {{ true }}</span></div>`,
         {
-          prefixIdentifiers: true
-        }
+          prefixIdentifiers: true,
+        },
       )
       expect(root.hoists).toMatchObject([
         {
@@ -391,18 +391,18 @@ describe('compiler: hoistStatic transform', () => {
           tag: `"span"`,
           props: undefined,
           children: {
-            type: NodeTypes.COMPOUND_EXPRESSION
-          }
+            type: NodeTypes.COMPOUND_EXPRESSION,
+          },
         },
-        hoistedChildrenArrayMatcher()
+        hoistedChildrenArrayMatcher(),
       ])
       expect(root.codegenNode).toMatchObject({
         tag: `"div"`,
         props: undefined,
         children: {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `_hoisted_2`
-        }
+          content: `_hoisted_2`,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -411,8 +411,8 @@ describe('compiler: hoistStatic transform', () => {
       const root = transformWithHoist(
         `<div><span :foo="0">{{ 1 }}</span></div>`,
         {
-          prefixIdentifiers: true
-        }
+          prefixIdentifiers: true,
+        },
       )
 
       expect(root.hoists).toMatchObject([
@@ -425,19 +425,19 @@ describe('compiler: hoistStatic transform', () => {
             content: {
               content: `1`,
               isStatic: false,
-              constType: ConstantTypes.CAN_STRINGIFY
-            }
-          }
+              constType: ConstantTypes.CAN_STRINGIFY,
+            },
+          },
         },
-        hoistedChildrenArrayMatcher()
+        hoistedChildrenArrayMatcher(),
       ])
       expect(root.codegenNode).toMatchObject({
         tag: `"div"`,
         props: undefined,
         children: {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `_hoisted_2`
-        }
+          content: `_hoisted_2`,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -446,8 +446,8 @@ describe('compiler: hoistStatic transform', () => {
       const root = transformWithHoist(
         `<div><span :class="{ foo: true }">{{ bar }}</span></div>`,
         {
-          prefixIdentifiers: true
-        }
+          prefixIdentifiers: true,
+        },
       )
 
       expect(root.hoists).toMatchObject([
@@ -458,7 +458,7 @@ describe('compiler: hoistStatic transform', () => {
               key: {
                 content: `class`,
                 isStatic: true,
-                constType: ConstantTypes.CAN_STRINGIFY
+                constType: ConstantTypes.CAN_STRINGIFY,
               },
               value: {
                 type: NodeTypes.JS_CALL_EXPRESSION,
@@ -467,13 +467,13 @@ describe('compiler: hoistStatic transform', () => {
                   {
                     content: `{ foo: true }`,
                     isStatic: false,
-                    constType: ConstantTypes.CAN_STRINGIFY
-                  }
-                ]
-              }
-            }
-          ]
-        }
+                    constType: ConstantTypes.CAN_STRINGIFY,
+                  },
+                ],
+              },
+            },
+          ],
+        },
       ])
       expect(root.codegenNode).toMatchObject({
         tag: `"div"`,
@@ -486,20 +486,20 @@ describe('compiler: hoistStatic transform', () => {
               tag: `"span"`,
               props: {
                 type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `_hoisted_1`
+                content: `_hoisted_1`,
               },
               children: {
                 type: NodeTypes.INTERPOLATION,
                 content: {
                   content: `_ctx.bar`,
                   isStatic: false,
-                  constType: ConstantTypes.NOT_CONSTANT
-                }
+                  constType: ConstantTypes.NOT_CONSTANT,
+                },
               },
-              patchFlag: `1 /* TEXT */`
-            }
-          }
-        ]
+              patchFlag: `1 /* TEXT */`,
+            },
+          },
+        ],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -508,8 +508,8 @@ describe('compiler: hoistStatic transform', () => {
       const root = transformWithHoist(
         `<div><p v-for="o in list"><span>{{ o }}</span></p></div>`,
         {
-          prefixIdentifiers: true
-        }
+          prefixIdentifiers: true,
+        },
       )
 
       expect(root.hoists.length).toBe(0)
@@ -520,8 +520,8 @@ describe('compiler: hoistStatic transform', () => {
       const root = transformWithHoist(
         `<div><p v-for="o in list"><span>{{ o + 'foo' }}</span></p></div>`,
         {
-          prefixIdentifiers: true
-        }
+          prefixIdentifiers: true,
+        },
       )
 
       expect(root.hoists.length).toBe(0)
@@ -532,8 +532,8 @@ describe('compiler: hoistStatic transform', () => {
       const root = transformWithHoist(
         `<Comp v-slot="{ foo }">{{ foo }}</Comp>`,
         {
-          prefixIdentifiers: true
-        }
+          prefixIdentifiers: true,
+        },
       )
 
       expect(root.hoists.length).toBe(0)
@@ -545,8 +545,8 @@ describe('compiler: hoistStatic transform', () => {
         `<div><div><div @click="foo"/></div></div>`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
 
       expect(root.cached).toBe(1)
@@ -554,8 +554,8 @@ describe('compiler: hoistStatic transform', () => {
       expect(
         generate(root, {
           mode: 'module',
-          prefixIdentifiers: true
-        }).code
+          prefixIdentifiers: true,
+        }).code,
       ).toMatchSnapshot()
     })
 
@@ -564,8 +564,8 @@ describe('compiler: hoistStatic transform', () => {
         `<div><div><div :class="{}" @click="foo"/></div></div>`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
 
       expect(root.cached).toBe(1)
@@ -573,14 +573,14 @@ describe('compiler: hoistStatic transform', () => {
       expect(
         generate(root, {
           mode: 'module',
-          prefixIdentifiers: true
-        }).code
+          prefixIdentifiers: true,
+        }).code,
       ).toMatchSnapshot()
     })
 
     test('should NOT hoist keyed template v-for with plain element child', () => {
       const root = transformWithHoist(
-        `<div><template v-for="item in items" :key="item"><span/></template></div>`
+        `<div><template v-for="item in items" :key="item"><span/></template></div>`,
       )
       expect(root.hoists.length).toBe(0)
       expect(generate(root).code).toMatchSnapshot()
@@ -588,10 +588,22 @@ describe('compiler: hoistStatic transform', () => {
 
     test('should NOT hoist SVG with directives', () => {
       const root = transformWithHoist(
-        `<div><svg v-foo><path d="M2,3H5.5L12"/></svg></div>`
+        `<div><svg v-foo><path d="M2,3H5.5L12"/></svg></div>`,
       )
       expect(root.hoists.length).toBe(2)
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test('clone hoisted array children in HMR mode', () => {
+      const root = transformWithHoist(`<div><span class="hi"></span></div>`, {
+        hmr: true,
+      })
+      expect(root.hoists.length).toBe(2)
+      expect(root.codegenNode).toMatchObject({
+        children: {
+          content: '[..._hoisted_2]',
+        },
+      })
+    })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts b/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
index 96a60bd1d42..fa711051c18 100644
--- a/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/noopDirectiveTransform.spec.ts
@@ -1,9 +1,9 @@
 import {
+  type ElementNode,
+  type VNodeCall,
+  noopDirectiveTransform,
   baseParse as parse,
   transform,
-  ElementNode,
-  noopDirectiveTransform,
-  VNodeCall
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 
@@ -13,8 +13,8 @@ describe('compiler: noop directive transform', () => {
     transform(ast, {
       nodeTransforms: [transformElement],
       directiveTransforms: {
-        noop: noopDirectiveTransform
-      }
+        noop: noopDirectiveTransform,
+      },
     })
     const node = ast.children[0] as ElementNode
     // As v-noop adds no properties the codegen should be identical to
diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index a1ae013a830..5d3f92ced18 100644
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -1,36 +1,36 @@
 import {
-  CompilerOptions,
+  BindingTypes,
+  type CompilerOptions,
+  ErrorCodes,
+  type NodeTransform,
+  baseCompile,
   baseParse as parse,
   transform,
-  ErrorCodes,
-  BindingTypes,
-  NodeTransform,
   transformExpression,
-  baseCompile
 } from '../../src'
 import {
-  RESOLVE_COMPONENT,
+  BASE_TRANSITION,
   CREATE_VNODE,
+  GUARD_REACTIVE_PROPS,
+  KEEP_ALIVE,
   MERGE_PROPS,
+  NORMALIZE_CLASS,
+  NORMALIZE_PROPS,
+  NORMALIZE_STYLE,
+  RESOLVE_COMPONENT,
   RESOLVE_DIRECTIVE,
-  TO_HANDLERS,
-  helperNameMap,
-  TELEPORT,
   RESOLVE_DYNAMIC_COMPONENT,
   SUSPENSE,
-  KEEP_ALIVE,
-  BASE_TRANSITION,
-  NORMALIZE_CLASS,
-  NORMALIZE_STYLE,
-  NORMALIZE_PROPS,
-  GUARD_REACTIVE_PROPS
+  TELEPORT,
+  TO_HANDLERS,
+  helperNameMap,
 } from '../../src/runtimeHelpers'
 import {
+  type DirectiveNode,
   NodeTypes,
+  type RootNode,
+  type VNodeCall,
   createObjectProperty,
-  DirectiveNode,
-  RootNode,
-  VNodeCall
 } from '../../src/ast'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformStyle } from '../../../compiler-dom/src/transforms/transformStyle'
@@ -42,7 +42,7 @@ import { transformText } from '../../src/transforms/transformText'
 
 function parseWithElementTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ): {
   root: RootNode
   node: VNodeCall
@@ -52,14 +52,14 @@ function parseWithElementTransform(
   const ast = parse(`<div>${template}</div>`, options)
   transform(ast, {
     nodeTransforms: [transformElement, transformText],
-    ...options
+    ...options,
   })
   const codegenNode = (ast as any).children[0].children[0]
     .codegenNode as VNodeCall
   expect(codegenNode.type).toBe(NodeTypes.VNODE_CALL)
   return {
     root: ast,
-    node: codegenNode
+    node: codegenNode,
   }
 }
 
@@ -68,8 +68,8 @@ function parseWithBind(template: string, options?: CompilerOptions) {
     ...options,
     directiveTransforms: {
       ...options?.directiveTransforms,
-      bind: transformBind
-    }
+      bind: transformBind,
+    },
   })
 }
 
@@ -82,7 +82,7 @@ describe('compiler: element transform', () => {
 
   test('resolve implicitly self-referencing component', () => {
     const { root } = parseWithElementTransform(`<Example/>`, {
-      filename: `/foo/bar/Example.vue?vue&type=template`
+      filename: `/foo/bar/Example.vue?vue&type=template`,
     })
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
     expect(root.components).toContain(`Example__self`)
@@ -91,8 +91,8 @@ describe('compiler: element transform', () => {
   test('resolve component from setup bindings', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       bindingMetadata: {
-        Example: BindingTypes.SETUP_MAYBE_REF
-      }
+        Example: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`$setup["Example"]`)
@@ -102,8 +102,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       inline: true,
       bindingMetadata: {
-        Example: BindingTypes.SETUP_MAYBE_REF
-      }
+        Example: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`_unref(Example)`)
@@ -113,8 +113,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Example/>`, {
       inline: true,
       bindingMetadata: {
-        Example: BindingTypes.SETUP_CONST
-      }
+        Example: BindingTypes.SETUP_CONST,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`Example`)
@@ -123,8 +123,8 @@ describe('compiler: element transform', () => {
   test('resolve namespaced component from setup bindings', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       bindingMetadata: {
-        Foo: BindingTypes.SETUP_MAYBE_REF
-      }
+        Foo: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`$setup["Foo"].Example`)
@@ -134,8 +134,8 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       inline: true,
       bindingMetadata: {
-        Foo: BindingTypes.SETUP_MAYBE_REF
-      }
+        Foo: BindingTypes.SETUP_MAYBE_REF,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     expect(node.tag).toBe(`_unref(Foo).Example`)
@@ -145,20 +145,42 @@ describe('compiler: element transform', () => {
     const { root, node } = parseWithElementTransform(`<Foo.Example/>`, {
       inline: true,
       bindingMetadata: {
-        Foo: BindingTypes.SETUP_CONST
-      }
+        Foo: BindingTypes.SETUP_CONST,
+      },
     })
     expect(root.helpers).not.toContain(RESOLVE_COMPONENT)
     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
+      Example: BindingTypes.SETUP_MAYBE_REF,
     }
     Object.defineProperty(bindingMetadata, '__isScriptSetup', { value: false })
     const { root } = parseWithElementTransform(`<Example/>`, {
-      bindingMetadata
+      bindingMetadata,
     })
     expect(root.helpers).toContain(RESOLVE_COMPONENT)
     expect(root.components).toContain(`Example`)
@@ -170,9 +192,9 @@ describe('compiler: element transform', () => {
       tag: `"div"`,
       props: createObjectMatcher({
         id: 'foo',
-        class: 'bar'
+        class: 'bar',
       }),
-      children: undefined
+      children: undefined,
     })
   })
 
@@ -182,7 +204,7 @@ describe('compiler: element transform', () => {
     expect(node).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        id: 'foo'
+        id: 'foo',
       }),
       children: [
         {
@@ -190,10 +212,10 @@ describe('compiler: element transform', () => {
           tag: 'span',
           codegenNode: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"span"`
-          }
-        }
-      ]
+            tag: `"span"`,
+          },
+        },
+      ],
     })
   })
 
@@ -209,10 +231,10 @@ describe('compiler: element transform', () => {
           tag: 'span',
           codegenNode: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"span"`
-          }
-        }
-      ]
+            tag: `"span"`,
+          },
+        },
+      ],
     })
   })
 
@@ -234,17 +256,17 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            }
-          ]
-        }
-      ]
+              content: `obj`,
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('v-bind="obj" after static prop', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-bind="obj" />`
+      `<div id="foo" v-bind="obj" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -253,19 +275,19 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
-        }
-      ]
+          content: `obj`,
+        },
+      ],
     })
   })
 
   test('v-bind="obj" before static prop', () => {
     const { root, node } = parseWithElementTransform(
-      `<div v-bind="obj" id="foo" />`
+      `<div v-bind="obj" id="foo" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -275,18 +297,18 @@ describe('compiler: element transform', () => {
       arguments: [
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
+          content: `obj`,
         },
         createObjectMatcher({
-          id: 'foo'
-        })
-      ]
+          id: 'foo',
+        }),
+      ],
     })
   })
 
   test('v-bind="obj" between static props', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-bind="obj" class="bar" />`
+      `<div id="foo" v-bind="obj" class="bar" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -295,22 +317,22 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
+          content: `obj`,
         },
         createObjectMatcher({
-          class: 'bar'
-        })
-      ]
+          class: 'bar',
+        }),
+      ],
     })
   })
 
   test('v-on="obj"', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-on="obj" class="bar" />`
+      `<div id="foo" v-on="obj" class="bar" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -319,7 +341,7 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
@@ -327,21 +349,21 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
+              content: `obj`,
             },
-            `true`
-          ]
+            `true`,
+          ],
         },
         createObjectMatcher({
-          class: 'bar'
-        })
-      ]
+          class: 'bar',
+        }),
+      ],
     })
   })
 
   test('v-on="obj" on component', () => {
     const { root, node } = parseWithElementTransform(
-      `<Foo id="foo" v-on="obj" class="bar" />`
+      `<Foo id="foo" v-on="obj" class="bar" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -350,7 +372,7 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
@@ -358,20 +380,20 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `obj`
-            }
-          ]
+              content: `obj`,
+            },
+          ],
         },
         createObjectMatcher({
-          class: 'bar'
-        })
-      ]
+          class: 'bar',
+        }),
+      ],
     })
   })
 
   test('v-on="obj" + v-bind="obj"', () => {
     const { root, node } = parseWithElementTransform(
-      `<div id="foo" v-on="handlers" v-bind="obj" />`
+      `<div id="foo" v-on="handlers" v-bind="obj" />`,
     )
     expect(root.helpers).toContain(MERGE_PROPS)
 
@@ -380,7 +402,7 @@ describe('compiler: element transform', () => {
       callee: MERGE_PROPS,
       arguments: [
         createObjectMatcher({
-          id: 'foo'
+          id: 'foo',
         }),
         {
           type: NodeTypes.JS_CALL_EXPRESSION,
@@ -388,16 +410,16 @@ describe('compiler: element transform', () => {
           arguments: [
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `handlers`
+              content: `handlers`,
             },
-            `true`
-          ]
+            `true`,
+          ],
         },
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `obj`
-        }
-      ]
+          content: `obj`,
+        },
+      ],
     })
   })
 
@@ -407,15 +429,15 @@ describe('compiler: element transform', () => {
     expect(node).toMatchObject({
       tag: `"template"`,
       props: createObjectMatcher({
-        id: 'foo'
-      })
+        id: 'foo',
+      }),
     })
   })
 
   test('should handle <Teleport> with normal children', () => {
     function assert(tag: string) {
       const { root, node } = parseWithElementTransform(
-        `<${tag} target="#foo"><span /></${tag}>`
+        `<${tag} target="#foo"><span /></${tag}>`,
       )
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(TELEPORT)
@@ -423,7 +445,7 @@ describe('compiler: element transform', () => {
       expect(node).toMatchObject({
         tag: TELEPORT,
         props: createObjectMatcher({
-          target: '#foo'
+          target: '#foo',
         }),
         children: [
           {
@@ -431,10 +453,10 @@ describe('compiler: element transform', () => {
             tag: 'span',
             codegenNode: {
               type: NodeTypes.VNODE_CALL,
-              tag: `"span"`
-            }
-          }
-        ]
+              tag: `"span"`,
+            },
+          },
+        ],
       })
     }
 
@@ -445,7 +467,7 @@ describe('compiler: element transform', () => {
   test('should handle <Suspense>', () => {
     function assert(tag: string, content: string, hasFallback?: boolean) {
       const { root, node } = parseWithElementTransform(
-        `<${tag}>${content}</${tag}>`
+        `<${tag}>${content}</${tag}>`,
       )
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(SUSPENSE)
@@ -456,19 +478,19 @@ describe('compiler: element transform', () => {
         children: hasFallback
           ? createObjectMatcher({
               default: {
-                type: NodeTypes.JS_FUNCTION_EXPRESSION
+                type: NodeTypes.JS_FUNCTION_EXPRESSION,
               },
               fallback: {
-                type: NodeTypes.JS_FUNCTION_EXPRESSION
+                type: NodeTypes.JS_FUNCTION_EXPRESSION,
               },
-              _: `[1 /* STABLE */]`
+              _: `[1 /* STABLE */]`,
             })
           : createObjectMatcher({
               default: {
-                type: NodeTypes.JS_FUNCTION_EXPRESSION
+                type: NodeTypes.JS_FUNCTION_EXPRESSION,
               },
-              _: `[1 /* STABLE */]`
-            })
+              _: `[1 /* STABLE */]`,
+            }),
       })
     }
 
@@ -477,7 +499,7 @@ describe('compiler: element transform', () => {
     assert(
       `suspense`,
       `<template #default>foo</template><template #fallback>fallback</template>`,
-      true
+      true,
     )
   })
 
@@ -485,7 +507,7 @@ describe('compiler: element transform', () => {
     function assert(tag: string) {
       const root = parse(`<div><${tag}><span /></${tag}></div>`)
       transform(root, {
-        nodeTransforms: [transformElement, transformText]
+        nodeTransforms: [transformElement, transformText],
       })
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(KEEP_ALIVE)
@@ -498,7 +520,7 @@ describe('compiler: element transform', () => {
         // keep-alive should not compile content to slots
         children: [{ type: NodeTypes.ELEMENT, tag: 'span' }],
         // should get a dynamic slots flag to force updates
-        patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
+        patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS),
       })
     }
 
@@ -509,7 +531,7 @@ describe('compiler: element transform', () => {
   test('should handle <BaseTransition>', () => {
     function assert(tag: string) {
       const { root, node } = parseWithElementTransform(
-        `<${tag}><span /></${tag}>`
+        `<${tag}><span /></${tag}>`,
       )
       expect(root.components.length).toBe(0)
       expect(root.helpers).toContain(BASE_TRANSITION)
@@ -519,10 +541,10 @@ describe('compiler: element transform', () => {
         props: undefined,
         children: createObjectMatcher({
           default: {
-            type: NodeTypes.JS_FUNCTION_EXPRESSION
+            type: NodeTypes.JS_FUNCTION_EXPRESSION,
           },
-          _: `[1 /* STABLE */]`
-        })
+          _: `[1 /* STABLE */]`,
+        }),
       })
     }
 
@@ -535,8 +557,8 @@ describe('compiler: element transform', () => {
     parseWithElementTransform(`<div v-bind/>`, { onError })
     expect(onError.mock.calls[0]).toMatchObject([
       {
-        code: ErrorCodes.X_V_BIND_NO_EXPRESSION
-      }
+        code: ErrorCodes.X_V_BIND_NO_EXPRESSION,
+      },
     ])
   })
 
@@ -547,10 +569,10 @@ describe('compiler: element transform', () => {
         foo(dir) {
           _dir = dir
           return {
-            props: [createObjectProperty(dir.arg!, dir.exp!)]
+            props: [createObjectProperty(dir.arg!, dir.exp!)],
           }
-        }
-      }
+        },
+      },
     })
 
     expect(node.props).toMatchObject({
@@ -559,9 +581,9 @@ describe('compiler: element transform', () => {
         {
           type: NodeTypes.JS_PROPERTY,
           key: _dir!.arg,
-          value: _dir!.exp
-        }
-      ]
+          value: _dir!.exp,
+        },
+      ],
     })
     // should factor in props returned by custom directive transforms
     // in patchFlag analysis
@@ -577,11 +599,11 @@ describe('compiler: element transform', () => {
           foo() {
             return {
               props: [],
-              needRuntime: true
+              needRuntime: true,
             }
-          }
-        }
-      }
+          },
+        },
+      },
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
     expect(root.directives).toContain(`foo`)
@@ -601,18 +623,18 @@ describe('compiler: element transform', () => {
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `hello`,
-                isStatic: false
+                isStatic: false,
               },
               // arg
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `bar`,
-                isStatic: true
-              }
-            ]
-          }
-        ]
-      }
+                isStatic: true,
+              },
+            ],
+          },
+        ],
+      },
     })
   })
 
@@ -624,24 +646,24 @@ describe('compiler: element transform', () => {
           foo() {
             return {
               props: [],
-              needRuntime: CREATE_VNODE
+              needRuntime: CREATE_VNODE,
             }
-          }
-        }
-      }
+          },
+        },
+      },
     )
 
     expect(root.helpers).toContain(CREATE_VNODE)
     expect(root.helpers).not.toContain(RESOLVE_DIRECTIVE)
     expect(root.directives.length).toBe(0)
     expect(node.directives!.elements[0].elements[0]).toBe(
-      `_${helperNameMap[CREATE_VNODE]}`
+      `_${helperNameMap[CREATE_VNODE]}`,
     )
   })
 
   test('runtime directives', () => {
     const { root, node } = parseWithElementTransform(
-      `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" />`
+      `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" />`,
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
     expect(root.directives).toContain(`foo`)
@@ -654,7 +676,7 @@ describe('compiler: element transform', () => {
         elements: [
           {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
-            elements: [`_directive_foo`]
+            elements: [`_directive_foo`],
           },
           {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -663,9 +685,9 @@ describe('compiler: element transform', () => {
               // exp
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `x`
-              }
-            ]
+                content: `x`,
+              },
+            ],
           },
           {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -675,13 +697,13 @@ describe('compiler: element transform', () => {
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `y`,
-                isStatic: false
+                isStatic: false,
               },
               // arg
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `arg`,
-                isStatic: false
+                isStatic: false,
               },
               // modifiers
               {
@@ -692,33 +714,33 @@ describe('compiler: element transform', () => {
                     key: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `mod`,
-                      isStatic: true
+                      isStatic: true,
                     },
                     value: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `true`,
-                      isStatic: false
-                    }
+                      isStatic: false,
+                    },
                   },
                   {
                     type: NodeTypes.JS_PROPERTY,
                     key: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `mad`,
-                      isStatic: true
+                      isStatic: true,
                     },
                     value: {
                       type: NodeTypes.SIMPLE_EXPRESSION,
                       content: `true`,
-                      isStatic: false
-                    }
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
+                      isStatic: false,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
     })
   })
 
@@ -727,9 +749,9 @@ describe('compiler: element transform', () => {
       `<div @click.foo="a" @click.bar="b" />`,
       {
         directiveTransforms: {
-          on: transformOn
-        }
-      }
+          on: transformOn,
+        },
+      },
     )
     expect(node.props).toMatchObject({
       type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -739,7 +761,7 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `onClick`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -747,17 +769,17 @@ describe('compiler: element transform', () => {
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `a`,
-                isStatic: false
+                isStatic: false,
               },
               {
                 type: NodeTypes.SIMPLE_EXPRESSION,
                 content: `b`,
-                isStatic: false
-              }
-            ]
-          }
-        }
-      ]
+                isStatic: false,
+              },
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -767,9 +789,9 @@ describe('compiler: element transform', () => {
       {
         nodeTransforms: [transformStyle, transformElement],
         directiveTransforms: {
-          bind: transformBind
-        }
-      }
+          bind: transformBind,
+        },
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
@@ -780,7 +802,7 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
@@ -792,19 +814,19 @@ describe('compiler: element transform', () => {
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `{"color":"green"}`,
-                    isStatic: false
+                    isStatic: false,
                   },
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `{ color: 'red' }`,
-                    isStatic: false
-                  }
-                ]
-              }
-            ]
-          }
-        }
-      ]
+                    isStatic: false,
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -814,10 +836,10 @@ describe('compiler: element transform', () => {
       {
         nodeTransforms: [transformExpression, transformStyle, transformElement],
         directiveTransforms: {
-          bind: transformBind
+          bind: transformBind,
         },
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
@@ -828,14 +850,14 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: NORMALIZE_STYLE
-          }
-        }
-      ]
+            callee: NORMALIZE_STYLE,
+          },
+        },
+      ],
     })
   })
 
@@ -845,10 +867,10 @@ describe('compiler: element transform', () => {
       {
         nodeTransforms: [transformExpression, transformStyle, transformElement],
         directiveTransforms: {
-          bind: transformBind
+          bind: transformBind,
         },
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_STYLE)
     expect(node.props).toMatchObject({
@@ -859,14 +881,14 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
-            callee: NORMALIZE_STYLE
-          }
-        }
-      ]
+            callee: NORMALIZE_STYLE,
+          },
+        },
+      ],
     })
   })
 
@@ -875,9 +897,9 @@ describe('compiler: element transform', () => {
       `<div class="foo" :class="{ bar: isBar }" />`,
       {
         directiveTransforms: {
-          bind: transformBind
-        }
-      }
+          bind: transformBind,
+        },
+      },
     )
     expect(root.helpers).toContain(NORMALIZE_CLASS)
     expect(node.props).toMatchObject({
@@ -888,7 +910,7 @@ describe('compiler: element transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `class`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.JS_CALL_EXPRESSION,
@@ -900,19 +922,19 @@ describe('compiler: element transform', () => {
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `foo`,
-                    isStatic: true
+                    isStatic: true,
                   },
                   {
                     type: NodeTypes.SIMPLE_EXPRESSION,
                     content: `{ bar: isBar }`,
-                    isStatic: false
-                  }
-                ]
-              }
-            ]
-          }
-        }
-      ]
+                    isStatic: false,
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -947,10 +969,10 @@ describe('compiler: element transform', () => {
 
     test('CLASS + STYLE + PROPS', () => {
       const { node } = parseWithBind(
-        `<div id="foo" :class="cls" :style="styl" :foo="bar" :baz="qux"/>`
+        `<div id="foo" :class="cls" :style="styl" :foo="bar" :baz="qux"/>`,
       )
       expect(node.patchFlag).toBe(
-        genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS])
+        genFlagText([PatchFlags.CLASS, PatchFlags.STYLE, PatchFlags.PROPS]),
       )
       expect(node.dynamicProps).toBe(`["foo", "baz"]`)
     })
@@ -958,7 +980,7 @@ describe('compiler: element transform', () => {
     // should treat `class` and `style` as PROPS
     test('PROPS on component', () => {
       const { node } = parseWithBind(
-        `<Foo :id="foo" :class="cls" :style="styl" />`
+        `<Foo :id="foo" :class="cls" :style="styl" />`,
       )
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
       expect(node.dynamicProps).toBe(`["id", "class", "style"]`)
@@ -976,7 +998,7 @@ describe('compiler: element transform', () => {
 
     test('FULL_PROPS (w/ others)', () => {
       const { node } = parseWithBind(
-        `<div id="foo" v-bind="bar" :class="cls" />`
+        `<div id="foo" v-bind="bar" :class="cls" />`,
       )
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))
     })
@@ -999,7 +1021,7 @@ describe('compiler: element transform', () => {
     test('NEED_PATCH (vnode hooks)', () => {
       const root = baseCompile(`<div @vue:updated="foo" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       }).ast
       const node = (root as any).children[0].codegenNode
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
@@ -1009,8 +1031,8 @@ describe('compiler: element transform', () => {
       const { node } = parseWithElementTransform(`<input ref="input"/>`, {
         inline: true,
         bindingMetadata: {
-          input: BindingTypes.SETUP_REF
-        }
+          input: BindingTypes.SETUP_REF,
+        },
       })
       expect(node.props).toMatchObject({
         type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -1019,31 +1041,31 @@ describe('compiler: element transform', () => {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref_key',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'input',
-              isStatic: true
-            }
+              isStatic: true,
+            },
           },
           {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'input',
-              isStatic: false
-            }
-          }
-        ]
+              isStatic: false,
+            },
+          },
+        ],
       })
     })
 
     test('script setup inline mode template ref (binding does not exist)', () => {
       const { node } = parseWithElementTransform(`<input ref="input"/>`, {
-        inline: true
+        inline: true,
       })
       expect(node.props).toMatchObject({
         type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -1052,14 +1074,14 @@ describe('compiler: element transform', () => {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'input',
-              isStatic: true
-            }
-          }
-        ]
+              isStatic: true,
+            },
+          },
+        ],
       })
     })
 
@@ -1068,8 +1090,8 @@ describe('compiler: element transform', () => {
         inline: true,
         bindingMetadata: {
           msg: BindingTypes.PROPS,
-          ref: BindingTypes.SETUP_CONST
-        }
+          ref: BindingTypes.SETUP_CONST,
+        },
       })
       expect(node.props).toMatchObject({
         type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -1078,23 +1100,23 @@ describe('compiler: element transform', () => {
             type: NodeTypes.JS_PROPERTY,
             key: {
               content: 'ref',
-              isStatic: true
+              isStatic: true,
             },
             value: {
               content: 'msg',
-              isStatic: true
-            }
-          }
-        ]
+              isStatic: true,
+            },
+          },
+        ],
       })
     })
 
-    test('HYDRATE_EVENTS', () => {
+    test('NEED_HYDRATION for v-on', () => {
       // ignore click events (has dedicated fast path)
       const { node } = parseWithElementTransform(`<div @click="foo" />`, {
         directiveTransforms: {
-          on: transformOn
-        }
+          on: transformOn,
+        },
       })
       // should only have props flag
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
@@ -1103,29 +1125,55 @@ describe('compiler: element transform', () => {
         `<div @keyup="foo" />`,
         {
           directiveTransforms: {
-            on: transformOn
-          }
-        }
+            on: transformOn,
+          },
+        },
+      )
+      expect(node2.patchFlag).toBe(
+        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
+      )
+    })
+
+    test('NEED_HYDRATION for v-bind.prop', () => {
+      const { node } = parseWithBind(`<div v-bind:id.prop="id" />`)
+      expect(node.patchFlag).toBe(
+        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
       )
+
+      const { node: node2 } = parseWithBind(`<div .id="id" />`)
       expect(node2.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
+        genFlagText([PatchFlags.PROPS, PatchFlags.NEED_HYDRATION]),
       )
     })
 
     // #5870
-    test('HYDRATE_EVENTS on dynamic component', () => {
+    test('NEED_HYDRATION on dynamic component', () => {
       const { node } = parseWithElementTransform(
         `<component :is="foo" @input="foo" />`,
         {
           directiveTransforms: {
-            on: transformOn
-          }
-        }
+            on: transformOn,
+          },
+        },
       )
       expect(node.patchFlag).toBe(
-        genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
+        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', () => {
@@ -1140,10 +1188,10 @@ describe('compiler: element transform', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'foo',
-              isStatic: true
-            }
-          ]
-        }
+              isStatic: true,
+            },
+          ],
+        },
       })
     })
 
@@ -1158,10 +1206,10 @@ describe('compiler: element transform', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'foo',
-              isStatic: true
-            }
-          ]
-        }
+              isStatic: true,
+            },
+          ],
+        },
       })
     })
 
@@ -1176,43 +1224,31 @@ describe('compiler: element transform', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'foo',
-              isStatic: false
-            }
-          ]
-        }
+              isStatic: false,
+            },
+          ],
+        },
       })
     })
 
-    // TODO remove in 3.4
-    test('v-is', () => {
-      const { node, root } = parseWithBind(`<div v-is="'foo'" />`)
-      expect(root.helpers).toContain(RESOLVE_DYNAMIC_COMPONENT)
+    test('is casting', () => {
+      const { node, root } = parseWithBind(`<div is="vue:foo" />`)
+      expect(root.helpers).toContain(RESOLVE_COMPONENT)
       expect(node).toMatchObject({
-        tag: {
-          callee: RESOLVE_DYNAMIC_COMPONENT,
-          arguments: [
-            {
-              type: NodeTypes.SIMPLE_EXPRESSION,
-              content: `'foo'`,
-              isStatic: false
-            }
-          ]
-        },
-        // should skip v-is runtime check
-        directives: undefined
+        type: NodeTypes.VNODE_CALL,
+        tag: '_component_foo',
       })
-      expect('v-is="component-name" has been deprecated').toHaveBeenWarned()
     })
 
     // #3934
     test('normal component with is prop', () => {
       const { node, root } = parseWithBind(`<custom-input is="foo" />`, {
-        isNativeTag: () => false
+        isNativeTag: () => false,
       })
       expect(root.helpers).toContain(RESOLVE_COMPONENT)
       expect(root.helpers).not.toContain(RESOLVE_DYNAMIC_COMPONENT)
       expect(node).toMatchObject({
-        tag: '_component_custom_input'
+        tag: '_component_custom_input',
       })
     })
   })
@@ -1220,12 +1256,12 @@ describe('compiler: element transform', () => {
   test('<svg> should be forced into blocks', () => {
     const ast = parse(`<div><svg/></div>`)
     transform(ast, {
-      nodeTransforms: [transformElement]
+      nodeTransforms: [transformElement],
     })
     expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: `"svg"`,
-      isBlock: true
+      isBlock: true,
     })
   })
 
@@ -1237,7 +1273,7 @@ describe('compiler: element transform', () => {
   test('force block for inline before-update handlers w/ children', () => {
     expect(
       parseWithElementTransform(`<div @vue:before-update>hello</div>`).node
-        .isBlock
+        .isBlock,
     ).toBe(true)
   })
 
@@ -1245,12 +1281,12 @@ describe('compiler: element transform', () => {
   test('element with dynamic keys should be forced into blocks', () => {
     const ast = parse(`<div><div :key="foo" /></div>`)
     transform(ast, {
-      nodeTransforms: [transformElement]
+      nodeTransforms: [transformElement],
     })
     expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: `"div"`,
-      isBlock: true
+      isBlock: true,
     })
   })
 
@@ -1265,23 +1301,23 @@ describe('compiler: element transform', () => {
             prop.type === NodeTypes.ATTRIBUTE &&
             prop.name === 'id' &&
             prop.value &&
-            prop.value.content === 'foo'
+            prop.value.content === 'foo',
         )
       ) {
         context.replaceNode({
           ...node,
-          tag: 'span'
+          tag: 'span',
         })
       }
     }
     const ast = parse(`<div><div id="foo" /></div>`)
     transform(ast, {
-      nodeTransforms: [transformElement, transformText, customNodeTransform]
+      nodeTransforms: [transformElement, transformText, customNodeTransform],
     })
     expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: '"span"',
-      isBlock: false
+      isBlock: false,
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
index 686794c23ab..b8207e7d42f 100644
--- a/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformExpressions.spec.ts
@@ -1,14 +1,14 @@
 import {
+  BindingTypes,
+  type CompilerOptions,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
+  type InterpolationNode,
+  NodeTypes,
+  baseCompile,
   baseParse as parse,
   transform,
-  ElementNode,
-  DirectiveNode,
-  NodeTypes,
-  CompilerOptions,
-  InterpolationNode,
-  ConstantTypes,
-  BindingTypes,
-  baseCompile
 } from '../../src'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformExpression } from '../../src/transforms/transformExpression'
@@ -16,13 +16,13 @@ import { PatchFlagNames, PatchFlags } from '../../../shared/src'
 
 function parseWithExpressionTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ) {
-  const ast = parse(template)
+  const ast = parse(template, options)
   transform(ast, {
     prefixIdentifiers: true,
     nodeTransforms: [transformIf, transformExpression],
-    ...options
+    ...options,
   })
   return ast.children[0]
 }
@@ -32,7 +32,7 @@ describe('compiler: expression transform', () => {
     const node = parseWithExpressionTransform(`{{ foo }}`) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.foo`
+      content: `_ctx.foo`,
     })
   })
 
@@ -40,34 +40,34 @@ describe('compiler: expression transform', () => {
     const node = parseWithExpressionTransform(`{{}}`) as InterpolationNode
     const node2 = parseWithExpressionTransform(`{{ }}`) as InterpolationNode
     const node3 = parseWithExpressionTransform(
-      `<div>{{ }}</div>`
+      `<div>{{ }}</div>`,
     ) as ElementNode
 
     const objectToBeMatched = {
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: ``
+      content: ``,
     }
     expect(node.content).toMatchObject(objectToBeMatched)
     expect(node2.content).toMatchObject(objectToBeMatched)
     expect((node3.children[0] as InterpolationNode).content).toMatchObject(
-      objectToBeMatched
+      objectToBeMatched,
     )
   })
 
   test('interpolation (children)', () => {
     const el = parseWithExpressionTransform(
-      `<div>{{ foo }}</div>`
+      `<div>{{ foo }}</div>`,
     ) as ElementNode
     const node = el.children[0] as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.foo`
+      content: `_ctx.foo`,
     })
   })
 
   test('interpolation (complex)', () => {
     const el = parseWithExpressionTransform(
-      `<div>{{ foo + bar(baz.qux) }}</div>`
+      `<div>{{ foo + bar(baz.qux) }}</div>`,
     ) as ElementNode
     const node = el.children[0] as InterpolationNode
     expect(node.content).toMatchObject({
@@ -80,46 +80,46 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.baz` },
         `.`,
         { content: `qux` },
-        `)`
-      ]
+        `)`,
+      ],
     })
   })
 
   test('directive value', () => {
     const node = parseWithExpressionTransform(
-      `<div v-foo:arg="baz"/>`
+      `<div v-foo:arg="baz"/>`,
     ) as ElementNode
     const arg = (node.props[0] as DirectiveNode).arg!
     expect(arg).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `arg`
+      content: `arg`,
     })
     const exp = (node.props[0] as DirectiveNode).exp!
     expect(exp).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.baz`
+      content: `_ctx.baz`,
     })
   })
 
   test('dynamic directive arg', () => {
     const node = parseWithExpressionTransform(
-      `<div v-foo:[arg]="baz"/>`
+      `<div v-foo:[arg]="baz"/>`,
     ) as ElementNode
     const arg = (node.props[0] as DirectiveNode).arg!
     expect(arg).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.arg`
+      content: `_ctx.arg`,
     })
     const exp = (node.props[0] as DirectiveNode).exp!
     expect(exp).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_ctx.baz`
+      content: `_ctx.baz`,
     })
   })
 
   test('should prefix complex expressions', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo(baz + 1, { key: kuz }) }}`
+      `{{ foo(baz + 1, { key: kuz }) }}`,
     ) as InterpolationNode
     // should parse into compound expression
     expect(node.content).toMatchObject({
@@ -128,76 +128,57 @@ describe('compiler: expression transform', () => {
         {
           content: `_ctx.foo`,
           loc: {
-            source: `foo`,
-            start: {
-              offset: 3,
-              line: 1,
-              column: 4
-            },
-            end: {
-              offset: 6,
-              line: 1,
-              column: 7
-            }
-          }
+            start: { offset: 3, line: 1, column: 4 },
+            end: { offset: 6, line: 1, column: 7 },
+          },
         },
         `(`,
         {
           content: `_ctx.baz`,
           loc: {
-            source: `baz`,
-            start: {
-              offset: 7,
-              line: 1,
-              column: 8
-            },
-            end: {
-              offset: 10,
-              line: 1,
-              column: 11
-            }
-          }
+            start: { offset: 7, line: 1, column: 8 },
+            end: { offset: 10, line: 1, column: 11 },
+          },
         },
         ` + 1, { key: `,
         {
           content: `_ctx.kuz`,
           loc: {
-            source: `kuz`,
-            start: {
-              offset: 23,
-              line: 1,
-              column: 24
-            },
-            end: {
-              offset: 26,
-              line: 1,
-              column: 27
-            }
-          }
+            start: { offset: 23, line: 1, column: 24 },
+            end: { offset: 26, line: 1, column: 27 },
+          },
         },
-        ` })`
-      ]
+        ` })`,
+      ],
     })
   })
 
   test('should not prefix whitelisted globals', () => {
     const node = parseWithExpressionTransform(
-      `{{ Math.max(1, 2) }}`
+      `{{ Math.max(1, 2) }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [{ content: `Math` }, `.`, { content: `max` }, `(1, 2)`]
+      children: [{ content: `Math` }, `.`, { content: `max` }, `(1, 2)`],
+    })
+
+    expect(
+      (parseWithExpressionTransform(`{{ new Error() }}`) as InterpolationNode)
+        .content,
+    ).toMatchObject({
+      type: NodeTypes.COMPOUND_EXPRESSION,
+      children: ['new ', { content: 'Error' }, '()'],
     })
   })
 
   test('should not prefix reserved literals', () => {
     function assert(exp: string) {
       const node = parseWithExpressionTransform(
-        `{{ ${exp} }}`
+        `{{ ${exp} }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: exp
+        content: exp,
       })
     }
     assert(`true`)
@@ -208,7 +189,7 @@ describe('compiler: expression transform', () => {
 
   test('should not prefix id of a function declaration', () => {
     const node = parseWithExpressionTransform(
-      `{{ function foo() { return bar } }}`
+      `{{ function foo() { return bar } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -217,14 +198,14 @@ describe('compiler: expression transform', () => {
         { content: `foo` },
         `() { return `,
         { content: `_ctx.bar` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should not prefix params of a function expression', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo => foo + bar }}`
+      `{{ foo => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -233,14 +214,14 @@ describe('compiler: expression transform', () => {
         ` => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
 
   test('should prefix default value of a function expression param', () => {
     const node = parseWithExpressionTransform(
-      `{{ (foo = baz) => foo + bar }}`
+      `{{ (foo = baz) => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -252,14 +233,14 @@ describe('compiler: expression transform', () => {
         `) => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
 
   test('should not prefix function param destructuring', () => {
     const node = parseWithExpressionTransform(
-      `{{ ({ foo }) => foo + bar }}`
+      `{{ ({ foo }) => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -269,14 +250,14 @@ describe('compiler: expression transform', () => {
         ` }) => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
 
   test('function params should not affect out of scope identifiers', () => {
     const node = parseWithExpressionTransform(
-      `{{ { a: foo => foo, b: foo } }}`
+      `{{ { a: foo => foo, b: foo } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -287,14 +268,14 @@ describe('compiler: expression transform', () => {
         { content: `foo` },
         `, b: `,
         { content: `_ctx.foo` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should prefix default value of function param destructuring', () => {
     const node = parseWithExpressionTransform(
-      `{{ ({ foo = bar }) => foo + bar }}`
+      `{{ ({ foo = bar }) => foo + bar }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -306,13 +287,13 @@ describe('compiler: expression transform', () => {
         ` }) => `,
         { content: `foo` },
         ` + `,
-        { content: `_ctx.bar` }
-      ]
+        { content: `_ctx.bar` },
+      ],
     })
   })
   test('should not prefix an object property key', () => {
     const node = parseWithExpressionTransform(
-      `{{ { foo() { baz() }, value: bar } }}`
+      `{{ { foo() { baz() }, value: bar } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -321,24 +302,24 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.baz` },
         `() }, value: `,
         { content: `_ctx.bar` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should not duplicate object key with same name as value', () => {
     const node = parseWithExpressionTransform(
-      `{{ { foo: foo } }}`
+      `{{ { foo: foo } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`]
+      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`],
     })
   })
 
   test('should prefix a computed object property key', () => {
     const node = parseWithExpressionTransform(
-      `{{ { [foo]: bar } }}`
+      `{{ { [foo]: bar } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -347,24 +328,24 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.foo` },
         `]: `,
         { content: `_ctx.bar` },
-        ` }`
-      ]
+        ` }`,
+      ],
     })
   })
 
   test('should prefix object property shorthand value', () => {
     const node = parseWithExpressionTransform(
-      `{{ { foo } }}`
+      `{{ { foo } }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`]
+      children: [`{ foo: `, { content: `_ctx.foo` }, ` }`],
     })
   })
 
   test('should not prefix id in a member expression', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo.bar.baz }}`
+      `{{ foo.bar.baz }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -373,14 +354,14 @@ describe('compiler: expression transform', () => {
         `.`,
         { content: `bar` },
         `.`,
-        { content: `baz` }
-      ]
+        { content: `baz` },
+      ],
     })
   })
 
   test('should prefix computed id in a member expression', () => {
     const node = parseWithExpressionTransform(
-      `{{ foo[bar][baz] }}`
+      `{{ foo[bar][baz] }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -390,8 +371,8 @@ describe('compiler: expression transform', () => {
         { content: `_ctx.bar` },
         `][`,
         { content: '_ctx.baz' },
-        `]`
-      ]
+        `]`,
+      ],
     })
   })
 
@@ -399,23 +380,23 @@ describe('compiler: expression transform', () => {
     const onError = vi.fn()
     parseWithExpressionTransform(`{{ a( }}`, { onError })
     expect(onError.mock.calls[0][0].message).toMatch(
-      `Error parsing JavaScript expression: Unexpected token`
+      `Error parsing JavaScript expression: Unexpected token`,
     )
   })
 
   test('should prefix in assignment', () => {
     const node = parseWithExpressionTransform(
-      `{{ x = 1 }}`
+      `{{ x = 1 }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
-      children: [{ content: `_ctx.x` }, ` = 1`]
+      children: [{ content: `_ctx.x` }, ` = 1`],
     })
   })
 
   test('should prefix in assignment pattern', () => {
     const node = parseWithExpressionTransform(
-      `{{ { x, y: [z] } = obj }}`
+      `{{ { x, y: [z] } = obj }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
       type: NodeTypes.COMPOUND_EXPRESSION,
@@ -425,47 +406,47 @@ describe('compiler: expression transform', () => {
         `, y: [`,
         { content: `_ctx.z` },
         `] } = `,
-        { content: `_ctx.obj` }
-      ]
+        { content: `_ctx.obj` },
+      ],
     })
   })
 
   // #8295
   test('should treat floating point number literals as constant', () => {
     const node = parseWithExpressionTransform(
-      `{{ [1, 2.1] }}`
+      `{{ [1, 2.1] }}`,
     ) as InterpolationNode
     expect(node.content).toMatchObject({
-      constType: ConstantTypes.CAN_STRINGIFY
+      constType: ConstantTypes.CAN_STRINGIFY,
     })
   })
 
   describe('ES Proposals support', () => {
     test('bigInt', () => {
       const node = parseWithExpressionTransform(
-        `{{ 13000n }}`
+        `{{ 13000n }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: `13000n`,
         isStatic: false,
-        constType: ConstantTypes.CAN_STRINGIFY
+        constType: ConstantTypes.CAN_STRINGIFY,
       })
     })
 
     test('nullish coalescing', () => {
       const node = parseWithExpressionTransform(
-        `{{ a ?? b }}`
+        `{{ a ?? b }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
-        children: [{ content: `_ctx.a` }, ` ?? `, { content: `_ctx.b` }]
+        children: [{ content: `_ctx.a` }, ` ?? `, { content: `_ctx.b` }],
       })
     })
 
     test('optional chaining', () => {
       const node = parseWithExpressionTransform(
-        `{{ a?.b?.c }}`
+        `{{ a?.b?.c }}`,
       ) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
@@ -474,8 +455,8 @@ describe('compiler: expression transform', () => {
           `?.`,
           { content: `b` },
           `?.`,
-          { content: `c` }
-        ]
+          { content: `c` },
+        ],
       })
     })
 
@@ -486,14 +467,18 @@ describe('compiler: expression transform', () => {
           [
             'pipelineOperator',
             {
-              proposal: 'minimal'
-            }
-          ]
-        ]
+              proposal: 'minimal',
+            },
+          ],
+        ],
       }) as InterpolationNode
       expect(node.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
-        children: [{ content: `_ctx.a` }, ` |> `, { content: `_ctx.uppercase` }]
+        children: [
+          { content: `_ctx.a` },
+          ` |> `,
+          { content: `_ctx.uppercase` },
+        ],
       })
     })
   })
@@ -506,53 +491,92 @@ describe('compiler: expression transform', () => {
       data: BindingTypes.DATA,
       options: BindingTypes.OPTIONS,
       reactive: BindingTypes.SETUP_REACTIVE_CONST,
-      literal: BindingTypes.LITERAL_CONST
+      literal: BindingTypes.LITERAL_CONST,
+      isNaN: BindingTypes.SETUP_REF,
     }
 
     function compileWithBindingMetadata(
       template: string,
-      options?: CompilerOptions
+      options?: CompilerOptions,
     ) {
       return baseCompile(template, {
         prefixIdentifiers: true,
         bindingMetadata,
-        ...options
+        ...options,
       })
     }
 
     test('non-inline mode', () => {
       const { code } = compileWithBindingMetadata(
-        `<div>{{ props }} {{ setup }} {{ data }} {{ options }}</div>`
+        `<div>{{ props }} {{ setup }} {{ data }} {{ options }} {{ isNaN }}</div>`,
       )
       expect(code).toMatch(`$props.props`)
       expect(code).toMatch(`$setup.setup`)
+      expect(code).toMatch(`$setup.isNaN`)
       expect(code).toMatch(`$data.data`)
       expect(code).toMatch(`$options.options`)
       expect(code).toMatch(`_ctx, _cache, $props, $setup, $data, $options`)
       expect(code).toMatchSnapshot()
     })
 
+    test('should not prefix temp variable of for...in', () => {
+      const { code } = compileWithBindingMetadata(
+        `<div @click="() => {
+          for (const x in list) {
+            log(x)
+          }
+        }"/>`,
+      )
+      expect(code).not.toMatch(`_ctx.x`)
+      expect(code).toMatchSnapshot()
+    })
+
+    test('should not prefix temp variable of for...of', () => {
+      const { code } = compileWithBindingMetadata(
+        `<div @click="() => {
+          for (const x of list) {
+            log(x)
+          }
+        }"/>`,
+      )
+      expect(code).not.toMatch(`_ctx.x`)
+      expect(code).toMatchSnapshot()
+    })
+
+    test('should not prefix temp variable of for loop', () => {
+      const { code } = compileWithBindingMetadata(
+        `<div @click="() => {
+          for (let i = 0; i < list.length; i++) {
+            log(i)
+          }
+        }"/>`,
+      )
+      expect(code).not.toMatch(`_ctx.i`)
+      expect(code).toMatchSnapshot()
+    })
+
     test('inline mode', () => {
       const { code } = compileWithBindingMetadata(
-        `<div>{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }}</div>`,
-        { inline: true }
+        `<div>{{ props }} {{ setup }} {{ setupConst }} {{ data }} {{ options }} {{ isNaN }}</div>`,
+        { inline: true },
       )
       expect(code).toMatch(`__props.props`)
       expect(code).toMatch(`_unref(setup)`)
       expect(code).toMatch(`_toDisplayString(setupConst)`)
       expect(code).toMatch(`_ctx.data`)
       expect(code).toMatch(`_ctx.options`)
+      expect(code).toMatch(`isNaN.value`)
       expect(code).toMatchSnapshot()
     })
 
     test('literal const handling', () => {
       const { code } = compileWithBindingMetadata(`<div>{{ literal }}</div>`, {
-        inline: true
+        inline: true,
       })
       expect(code).toMatch(`toDisplayString(literal)`)
       // #7973 should skip patch for literal const
       expect(code).not.toMatch(
-        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`,
       )
     })
 
@@ -561,17 +585,17 @@ describe('compiler: expression transform', () => {
       expect(code).toMatch(`toDisplayString($setup.literal)`)
       // #7973 should skip patch for literal const
       expect(code).not.toMatch(
-        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`,
       )
     })
 
     test('reactive const handling', () => {
       const { code } = compileWithBindingMetadata(`<div>{{ reactive }}</div>`, {
-        inline: true
+        inline: true,
       })
       // #7973 should not skip patch for reactive const
       expect(code).toMatch(
-        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`
+        `${PatchFlags.TEXT} /* ${PatchFlagNames[PatchFlags.TEXT]} */`,
       )
     })
   })
diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
index 72753d5237f..6420bdbbdac 100644
--- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -1,10 +1,10 @@
 import {
-  CompilerOptions,
+  type CompilerOptions,
+  type ElementNode,
+  ErrorCodes,
+  NodeTypes,
   baseParse as parse,
   transform,
-  ElementNode,
-  NodeTypes,
-  ErrorCodes
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformOn } from '../../src/transforms/vOn'
@@ -19,13 +19,13 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
     nodeTransforms: [
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformSlotOutlet,
-      transformElement
+      transformElement,
     ],
     directiveTransforms: {
       on: transformOn,
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -36,7 +36,7 @@ describe('compiler: transform <slot> outlets', () => {
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"default"`]
+      arguments: [`$slots`, `"default"`],
     })
   })
 
@@ -45,7 +45,7 @@ describe('compiler: transform <slot> outlets', () => {
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"foo"`]
+      arguments: [`$slots`, `"foo"`],
     })
   })
 
@@ -59,15 +59,15 @@ describe('compiler: transform <slot> outlets', () => {
         {
           type: NodeTypes.SIMPLE_EXPRESSION,
           content: `foo`,
-          isStatic: false
-        }
-      ]
+          isStatic: false,
+        },
+      ],
     })
   })
 
   test('dynamically named slot outlet w/ prefixIdentifiers: true', () => {
     const ast = parseWithSlots(`<slot :name="foo + bar" />`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -80,23 +80,23 @@ describe('compiler: transform <slot> outlets', () => {
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `_ctx.foo`,
-              isStatic: false
+              isStatic: false,
             },
             ` + `,
             {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `_ctx.bar`,
-              isStatic: false
-            }
-          ]
-        }
-      ]
+              isStatic: false,
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('default slot outlet with props', () => {
     const ast = parseWithSlots(
-      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`
+      `<slot foo="bar" :baz="qux" :foo-bar="foo-bar" />`,
     )
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -110,36 +110,36 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: true
-              }
+                isStatic: true,
+              },
             },
             {
               key: {
                 content: `baz`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `qux`,
-                isStatic: false
-              }
+                isStatic: false,
+              },
             },
             {
               key: {
                 content: `fooBar`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `foo-bar`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -158,26 +158,26 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: true
-              }
+                isStatic: true,
+              },
             },
             {
               key: {
                 content: `baz`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `qux`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -196,26 +196,26 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: true
-              }
+                isStatic: true,
+              },
             },
             {
               key: {
                 content: `baz`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `qux`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -234,11 +234,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -257,11 +257,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -279,14 +279,14 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: false
-              }
-            }
-          ]
+                isStatic: false,
+              },
+            },
+          ],
         },
         {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -294,11 +294,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -316,14 +316,14 @@ describe('compiler: transform <slot> outlets', () => {
             {
               key: {
                 content: `foo`,
-                isStatic: true
+                isStatic: true,
               },
               value: {
                 content: `bar`,
-                isStatic: false
-              }
-            }
-          ]
+                isStatic: false,
+              },
+            },
+          ],
         },
         {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -331,11 +331,11 @@ describe('compiler: transform <slot> outlets', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      ]
+              tag: `div`,
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -344,11 +344,11 @@ describe('compiler: transform <slot> outlets', () => {
     expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"default"`, `{}`, `undefined`, `true`]
+      arguments: [`$slots`, `"default"`, `{}`, `undefined`, `true`],
     })
     const fallback = parseWithSlots(`<slot>fallback</slot>`, {
       slotted: false,
-      scopeId: 'foo'
+      scopeId: 'foo',
     })
 
     const child = {
@@ -357,14 +357,14 @@ describe('compiler: transform <slot> outlets', () => {
       returns: [
         {
           type: NodeTypes.TEXT,
-          content: `fallback`
-        }
-      ]
+          content: `fallback`,
+        },
+      ],
     }
     expect((fallback.children[0] as ElementNode).codegenNode).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: RENDER_SLOT,
-      arguments: [`$slots`, `"default"`, `{}`, child, `true`]
+      arguments: [`$slots`, `"default"`, `{}`, child, `true`],
     })
   })
 
@@ -376,18 +376,33 @@ describe('compiler: transform <slot> outlets', () => {
     expect(onError.mock.calls[0][0]).toMatchObject({
       code: ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
       loc: {
-        source: `v-foo`,
         start: {
           offset: index,
           line: 1,
-          column: index + 1
+          column: index + 1,
         },
         end: {
           offset: index + 5,
           line: 1,
-          column: index + 6
-        }
-      }
+          column: index + 6,
+        },
+      },
+    })
+  })
+
+  test('dynamically named slot outlet with v-bind shorthand', () => {
+    const ast = parseWithSlots(`<slot :name />`)
+    expect((ast.children[0] as ElementNode).codegenNode).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: RENDER_SLOT,
+      arguments: [
+        `$slots`,
+        {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: `name`,
+          isStatic: false,
+        },
+      ],
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/transformText.spec.ts b/packages/compiler-core/__tests__/transforms/transformText.spec.ts
index 6e321d145e5..1a6d6916a73 100644
--- a/packages/compiler-core/__tests__/transforms/transformText.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformText.spec.ts
@@ -1,11 +1,11 @@
 import {
-  CompilerOptions,
-  baseParse as parse,
-  transform,
+  type CompilerOptions,
+  type ElementNode,
+  type ForNode,
   NodeTypes,
   generate,
-  ForNode,
-  ElementNode
+  baseParse as parse,
+  transform,
 } from '../../src'
 import { transformFor } from '../../src/transforms/vFor'
 import { transformText } from '../../src/transforms/transformText'
@@ -22,9 +22,9 @@ function transformWithTextOpt(template: string, options: CompilerOptions = {}) {
       transformFor,
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformElement,
-      transformText
+      transformText,
     ],
-    ...options
+    ...options,
   })
   return ast
 }
@@ -35,8 +35,8 @@ describe('compiler: transform text', () => {
     expect(root.children[0]).toMatchObject({
       type: NodeTypes.INTERPOLATION,
       content: {
-        content: `foo`
-      }
+        content: `foo`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -51,8 +51,8 @@ describe('compiler: transform text', () => {
         ` + `,
         { type: NodeTypes.TEXT, content: ` bar ` },
         ` + `,
-        { type: NodeTypes.INTERPOLATION, content: { content: `baz` } }
-      ]
+        { type: NodeTypes.INTERPOLATION, content: { content: `baz` } },
+      ],
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -75,12 +75,12 @@ describe('compiler: transform text', () => {
               ` + `,
               { type: NodeTypes.TEXT, content: ` bar ` },
               ` + `,
-              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } }
-            ]
+              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } },
+            ],
           },
-          genFlagText(PatchFlags.TEXT)
-        ]
-      }
+          genFlagText(PatchFlags.TEXT),
+        ],
+      },
     })
     expect(root.children[2].type).toBe(NodeTypes.ELEMENT)
     expect(generate(root).code).toMatchSnapshot()
@@ -99,11 +99,11 @@ describe('compiler: transform text', () => {
         arguments: [
           {
             type: NodeTypes.TEXT,
-            content: `hello`
-          }
+            content: `hello`,
+          },
           // should have no flag
-        ]
-      }
+        ],
+      },
     })
     expect(root.children[2].type).toBe(NodeTypes.ELEMENT)
     expect(generate(root).code).toMatchSnapshot()
@@ -111,7 +111,7 @@ describe('compiler: transform text', () => {
 
   test('consecutive text mixed with elements', () => {
     const root = transformWithTextOpt(
-      `<div/>{{ foo }} bar {{ baz }}<div/>hello<div/>`
+      `<div/>{{ foo }} bar {{ baz }}<div/>hello<div/>`,
     )
     expect(root.children.length).toBe(5)
     expect(root.children[0].type).toBe(NodeTypes.ELEMENT)
@@ -128,12 +128,12 @@ describe('compiler: transform text', () => {
               ` + `,
               { type: NodeTypes.TEXT, content: ` bar ` },
               ` + `,
-              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } }
-            ]
+              { type: NodeTypes.INTERPOLATION, content: { content: `baz` } },
+            ],
           },
-          genFlagText(PatchFlags.TEXT)
-        ]
-      }
+          genFlagText(PatchFlags.TEXT),
+        ],
+      },
     })
     expect(root.children[2].type).toBe(NodeTypes.ELEMENT)
     expect(root.children[3]).toMatchObject({
@@ -144,10 +144,10 @@ describe('compiler: transform text', () => {
         arguments: [
           {
             type: NodeTypes.TEXT,
-            content: `hello`
-          }
-        ]
-      }
+            content: `hello`,
+          },
+        ],
+      },
     })
     expect(root.children[4].type).toBe(NodeTypes.ELEMENT)
     expect(generate(root).code).toMatchSnapshot()
@@ -155,21 +155,21 @@ describe('compiler: transform text', () => {
 
   test('<template v-for>', () => {
     const root = transformWithTextOpt(
-      `<template v-for="i in list">foo</template>`
+      `<template v-for="i in list">foo</template>`,
     )
     expect(root.children[0].type).toBe(NodeTypes.FOR)
     const forNode = root.children[0] as ForNode
     // should convert template v-for text children because they are inside
     // fragments
     expect(forNode.children[0]).toMatchObject({
-      type: NodeTypes.TEXT_CALL
+      type: NodeTypes.TEXT_CALL,
     })
     expect(generate(root).code).toMatchSnapshot()
   })
 
   test('with prefixIdentifiers: true', () => {
     const root = transformWithTextOpt(`{{ foo }} bar {{ baz + qux }}`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(root.children.length).toBe(1)
     expect(root.children[0]).toMatchObject({
@@ -183,15 +183,15 @@ describe('compiler: transform text', () => {
           type: NodeTypes.INTERPOLATION,
           content: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [{ content: `_ctx.baz` }, ` + `, { content: `_ctx.qux` }]
-          }
-        }
-      ]
+            children: [{ content: `_ctx.baz` }, ` + `, { content: `_ctx.qux` }],
+          },
+        },
+      ],
     })
     expect(
       generate(root, {
-        prefixIdentifiers: true
-      }).code
+        prefixIdentifiers: true,
+      }).code,
     ).toMatchSnapshot()
   })
 
@@ -210,12 +210,12 @@ describe('compiler: transform text', () => {
             type: NodeTypes.INTERPOLATION,
             content: {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: 'foo'
-            }
+              content: 'foo',
+            },
           },
-          genFlagText(PatchFlags.TEXT)
-        ]
-      }
+          genFlagText(PatchFlags.TEXT),
+        ],
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
diff --git a/packages/compiler-core/__tests__/transforms/vBind.spec.ts b/packages/compiler-core/__tests__/transforms/vBind.spec.ts
index 322cf9d1bde..be063b8a9d5 100644
--- a/packages/compiler-core/__tests__/transforms/vBind.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vBind.spec.ts
@@ -1,37 +1,37 @@
 import {
-  baseParse as parse,
-  transform,
-  ElementNode,
-  ObjectExpression,
-  CompilerOptions,
+  type CallExpression,
+  type CompilerOptions,
+  type ElementNode,
   ErrorCodes,
-  VNodeCall,
   NodeTypes,
-  CallExpression
+  type ObjectExpression,
+  type VNodeCall,
+  baseParse as parse,
+  transform,
 } from '../../src'
 import { transformBind } from '../../src/transforms/vBind'
 import { transformElement } from '../../src/transforms/transformElement'
 import {
   CAMELIZE,
+  NORMALIZE_PROPS,
   helperNameMap,
-  NORMALIZE_PROPS
 } from '../../src/runtimeHelpers'
 import { transformExpression } from '../../src/transforms/transformExpression'
 
 function parseWithVBind(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ): ElementNode {
   const ast = parse(template)
   transform(ast, {
     nodeTransforms: [
       ...(options.prefixIdentifiers ? [transformExpression] : []),
-      transformElement
+      transformElement,
     ],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return ast.children[0] as ElementNode
 }
@@ -47,13 +47,13 @@ describe('compiler: transform v-bind', () => {
         loc: {
           start: {
             line: 1,
-            column: 13
+            column: 13,
           },
           end: {
             line: 1,
-            column: 15
-          }
-        }
+            column: 15,
+          },
+        },
       },
       value: {
         content: `id`,
@@ -61,14 +61,52 @@ describe('compiler: transform v-bind', () => {
         loc: {
           start: {
             line: 1,
-            column: 17
+            column: 17,
           },
           end: {
             line: 1,
-            column: 19
-          }
-        }
-      }
+            column: 19,
+          },
+        },
+      },
+    })
+  })
+
+  test('no expression', () => {
+    const node = parseWithVBind(`<div v-bind:id />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `id`,
+        isStatic: true,
+        loc: {
+          start: { line: 1, column: 13, offset: 12 },
+          end: { line: 1, column: 15, offset: 14 },
+        },
+      },
+      value: {
+        content: `id`,
+        isStatic: false,
+        loc: {
+          start: { line: 1, column: 13, offset: 12 },
+          end: { line: 1, column: 15, offset: 14 },
+        },
+      },
+    })
+  })
+
+  test('no expression (shorthand)', () => {
+    const node = parseWithVBind(`<div :id />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `id`,
+        isStatic: true,
+      },
+      value: {
+        content: `id`,
+        isStatic: false,
+      },
     })
   })
 
@@ -85,45 +123,45 @@ describe('compiler: transform v-bind', () => {
             {
               key: {
                 content: `id || ""`,
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: `id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
-  test('should error if no expression', () => {
+  test('should error if empty expression', () => {
     const onError = vi.fn()
-    const node = parseWithVBind(`<div v-bind:arg />`, { onError })
+    const node = parseWithVBind(`<div v-bind:arg="" />`, { onError })
     const props = (node.codegenNode as VNodeCall).props as ObjectExpression
     expect(onError.mock.calls[0][0]).toMatchObject({
       code: ErrorCodes.X_V_BIND_NO_EXPRESSION,
       loc: {
         start: {
           line: 1,
-          column: 6
+          column: 6,
         },
         end: {
           line: 1,
-          column: 16
-        }
-      }
+          column: 19,
+        },
+      },
     })
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `arg`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: ``,
-        isStatic: true
-      }
+        isStatic: true,
+      },
     })
   })
 
@@ -133,12 +171,27 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `fooBar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.camel modifier w/ no expression', () => {
+    const node = parseWithVBind(`<div v-bind:foo-bar.camel />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `fooBar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
     })
   })
 
@@ -155,22 +208,22 @@ describe('compiler: transform v-bind', () => {
             {
               key: {
                 content: `_${helperNameMap[CAMELIZE]}(foo || "")`,
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: `id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('.camel modifier w/ dynamic arg + prefixIdentifiers', () => {
     const node = parseWithVBind(`<div v-bind:[foo(bar)].camel="id"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const props = (node.codegenNode as VNodeCall).props as CallExpression
     expect(props).toMatchObject({
@@ -190,17 +243,17 @@ describe('compiler: transform v-bind', () => {
                   { content: `_ctx.bar` },
                   `)`,
                   `) || ""`,
-                  `)`
-                ]
+                  `)`,
+                ],
               },
               value: {
                 content: `_ctx.id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -210,12 +263,27 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `.fooBar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.prop modifier w/ no expression', () => {
+    const node = parseWithVBind(`<div v-bind:fooBar.prop />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `.fooBar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
     })
   })
 
@@ -232,22 +300,22 @@ describe('compiler: transform v-bind', () => {
             {
               key: {
                 content: '`.${fooBar || ""}`',
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: `id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
   test('.prop modifier w/ dynamic arg + prefixIdentifiers', () => {
     const node = parseWithVBind(`<div v-bind:[foo(bar)].prop="id"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const props = (node.codegenNode as VNodeCall).props as CallExpression
     expect(props).toMatchObject({
@@ -267,17 +335,17 @@ describe('compiler: transform v-bind', () => {
                   { content: `_ctx.bar` },
                   `)`,
                   `) || ""`,
-                  `)`
-                ]
+                  `)`,
+                ],
               },
               value: {
                 content: `_ctx.id`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
   })
 
@@ -287,12 +355,27 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `.fooBar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.prop modifier (shortband) w/ no expression', () => {
+    const node = parseWithVBind(`<div .fooBar />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `.fooBar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
     })
   })
 
@@ -302,12 +385,45 @@ describe('compiler: transform v-bind', () => {
     expect(props.properties[0]).toMatchObject({
       key: {
         content: `^foo-bar`,
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: `id`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
+    })
+  })
+
+  test('.attr modifier w/ no expression', () => {
+    const node = parseWithVBind(`<div v-bind:foo-bar.attr />`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `^foo-bar`,
+        isStatic: true,
+      },
+      value: {
+        content: `fooBar`,
+        isStatic: false,
+      },
+    })
+  })
+
+  test('error on invalid argument for same-name shorthand', () => {
+    const onError = vi.fn()
+    parseWithVBind(`<div v-bind:[arg] />`, { onError })
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
+      loc: {
+        start: {
+          line: 1,
+          column: 13,
+        },
+        end: {
+          line: 1,
+          column: 18,
+        },
+      },
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vFor.spec.ts b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
index 1c7646e5e28..fb3d7dc7fb8 100644
--- a/packages/compiler-core/__tests__/transforms/vFor.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vFor.spec.ts
@@ -1,4 +1,4 @@
-import { baseParse as parse } from '../../src/parse'
+import { baseParse as parse } from '../../src/parser'
 import { transform } from '../../src/transform'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformFor } from '../../src/transforms/vFor'
@@ -7,23 +7,23 @@ import { transformElement } from '../../src/transforms/transformElement'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import { transformExpression } from '../../src/transforms/transformExpression'
 import {
-  ForNode,
+  ConstantTypes,
+  type ElementNode,
+  type ForCodegenNode,
+  type ForNode,
+  type InterpolationNode,
   NodeTypes,
-  SimpleExpressionNode,
-  ElementNode,
-  InterpolationNode,
-  ForCodegenNode,
-  ConstantTypes
+  type SimpleExpressionNode,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
-import { CompilerOptions, generate } from '../../src'
+import { type CompilerOptions, generate } from '../../src'
 import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
 import { PatchFlags } from '@vue/shared'
 import { createObjectMatcher, genFlagText } from '../testUtils'
 
 function parseWithForTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ) {
   const ast = parse(template, options)
   transform(ast, {
@@ -32,16 +32,16 @@ function parseWithForTransform(
       transformFor,
       ...(options.prefixIdentifiers ? [transformExpression] : []),
       transformSlotOutlet,
-      transformElement
+      transformElement,
     ],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return {
     root: ast,
-    node: ast.children[0] as ForNode & { codegenNode: ForCodegenNode }
+    node: ast.children[0] as ForNode & { codegenNode: ForCodegenNode },
   }
 }
 
@@ -49,7 +49,7 @@ describe('compiler: v-for', () => {
   describe('transform', () => {
     test('number expression', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="index in 5" />'
+        '<span v-for="index in 5" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
@@ -59,7 +59,7 @@ describe('compiler: v-for', () => {
 
     test('value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(item) in items" />'
+        '<span v-for="(item) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
@@ -69,31 +69,31 @@ describe('compiler: v-for', () => {
 
     test('object de-structured value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="({ id, value }) in items" />'
+        '<span v-for="({ id, value }) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
-        '{ id, value }'
+        '{ id, value }',
       )
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
 
     test('array de-structured value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="([ id, value ]) in items" />'
+        '<span v-for="([ id, value ]) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe(
-        '[ id, value ]'
+        '[ id, value ]',
       )
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
 
     test('value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(item, key) in items" />'
+        '<span v-for="(item, key) in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
@@ -104,13 +104,13 @@ describe('compiler: v-for', () => {
 
     test('value, key and index', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(value, key, index) in items" />'
+        '<span v-for="(value, key, index) in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -118,12 +118,12 @@ describe('compiler: v-for', () => {
 
     test('skipped key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(value,,index) in items" />'
+        '<span v-for="(value,,index) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -131,12 +131,12 @@ describe('compiler: v-for', () => {
 
     test('skipped value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="(,,index) in items" />'
+        '<span v-for="(,,index) in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect(forNode.valueAlias).toBeUndefined()
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -144,7 +144,7 @@ describe('compiler: v-for', () => {
 
     test('unbracketed value', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="item in items" />'
+        '<span v-for="item in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).toBeUndefined()
@@ -154,7 +154,7 @@ describe('compiler: v-for', () => {
 
     test('unbracketed value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="item, key in items" />'
+        '<span v-for="item, key in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
@@ -165,13 +165,13 @@ describe('compiler: v-for', () => {
 
     test('unbracketed value, key and index', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="value, key, index in items" />'
+        '<span v-for="value, key, index in items" />',
       )
       expect(forNode.keyAlias).not.toBeUndefined()
       expect((forNode.keyAlias as SimpleExpressionNode).content).toBe('key')
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -179,12 +179,12 @@ describe('compiler: v-for', () => {
 
     test('unbracketed skipped key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for="value, , index in items" />'
+        '<span v-for="value, , index in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('value')
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -192,12 +192,12 @@ describe('compiler: v-for', () => {
 
     test('unbracketed skipped value and key', () => {
       const { node: forNode } = parseWithForTransform(
-        '<span v-for=", , index in items" />'
+        '<span v-for=", , index in items" />',
       )
       expect(forNode.keyAlias).toBeUndefined()
       expect(forNode.objectIndexAlias).not.toBeUndefined()
       expect((forNode.objectIndexAlias as SimpleExpressionNode).content).toBe(
-        'index'
+        'index',
       )
       expect(forNode.valueAlias).toBeUndefined()
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
@@ -212,8 +212,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_NO_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_NO_EXPRESSION,
+        }),
       )
     })
 
@@ -224,8 +224,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -236,8 +236,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -248,8 +248,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -260,8 +260,8 @@ describe('compiler: v-for', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -272,14 +272,14 @@ describe('compiler: v-for', () => {
       <template v-for="item in items">
         <div :key="item.id"/>
       </template>`,
-        { onError }
+        { onError },
       )
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT
-        })
+          code: ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT,
+        }),
       )
 
       // should not warn on nested v-for keys
@@ -288,7 +288,7 @@ describe('compiler: v-for', () => {
       <template v-for="item in items">
         <div v-for="c in item.children" :key="c.id"/>
       </template>`,
-        { onError }
+        { onError },
       )
       expect(onError).toHaveBeenCalledTimes(1)
     })
@@ -315,7 +315,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -339,7 +339,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -363,7 +363,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -405,7 +405,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
 
@@ -438,7 +438,7 @@ describe('compiler: v-for', () => {
       expect(forNode.source.loc.start.column).toBe(itemsOffset + 1)
       expect(forNode.source.loc.end.line).toBe(1)
       expect(forNode.source.loc.end.column).toBe(
-        itemsOffset + 1 + `items`.length
+        itemsOffset + 1 + `items`.length,
       )
     })
   })
@@ -446,18 +446,18 @@ describe('compiler: v-for', () => {
   describe('prefixIdentifiers: true', () => {
     test('should prefix v-for source', () => {
       const { node } = parseWithForTransform(`<div v-for="i in list"/>`, {
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
       expect(node.source).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.list`
+        content: `_ctx.list`,
       })
     })
 
     test('should prefix v-for source w/ complex expression', () => {
       const { node } = parseWithForTransform(
         `<div v-for="i in list.concat([foo])"/>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       expect(node.source).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
@@ -467,31 +467,31 @@ describe('compiler: v-for', () => {
           { content: `concat` },
           `([`,
           { content: `_ctx.foo` },
-          `])`
-        ]
+          `])`,
+        ],
       })
     })
 
     test('should not prefix v-for alias', () => {
       const { node } = parseWithForTransform(
         `<div v-for="i in list">{{ i }}{{ j }}</div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const div = node.children[0] as ElementNode
       expect((div.children[0] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `i`
+        content: `i`,
       })
       expect((div.children[1] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.j`
+        content: `_ctx.j`,
       })
     })
 
     test('should not prefix v-for aliases (multiple)', () => {
       const { node } = parseWithForTransform(
         `<div v-for="(i, j, k) in list">{{ i + j + k }}{{ l }}</div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const div = node.children[0] as ElementNode
       expect((div.children[0] as InterpolationNode).content).toMatchObject({
@@ -501,23 +501,23 @@ describe('compiler: v-for', () => {
           ` + `,
           { content: `j` },
           ` + `,
-          { content: `k` }
-        ]
+          { content: `k` },
+        ],
       })
       expect((div.children[1] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.l`
+        content: `_ctx.l`,
       })
     })
 
     test('should prefix id outside of v-for', () => {
       const { node } = parseWithForTransform(
         `<div><div v-for="i in list" />{{ i }}</div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       expect((node.children[1] as InterpolationNode).content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.i`
+        content: `_ctx.i`,
       })
     })
 
@@ -526,7 +526,7 @@ describe('compiler: v-for', () => {
         `<div v-for="i in list">
           <div v-for="i in list">{{ i + j }}</div>{{ i }}
         </div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const outerDiv = node.children[0] as ElementNode
       const innerFor = outerDiv.children[0] as ForNode
@@ -534,7 +534,7 @@ describe('compiler: v-for', () => {
         .children[0] as InterpolationNode
       expect(innerExp.content).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
-        children: [{ content: 'i' }, ` + `, { content: `_ctx.j` }]
+        children: [{ content: 'i' }, ` + `, { content: `_ctx.j` }],
       })
 
       // when an inner v-for shadows a variable of an outer v-for and exit,
@@ -542,7 +542,7 @@ describe('compiler: v-for', () => {
       const outerExp = outerDiv.children[1] as InterpolationNode
       expect(outerExp.content).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `i`
+        content: `i`,
       })
     })
 
@@ -551,7 +551,7 @@ describe('compiler: v-for', () => {
         `<div v-for="({ foo = bar, baz: [qux = quux] }) in list">
           {{ foo + bar + baz + qux + quux }}
         </div>`,
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       expect(node.valueAlias!).toMatchObject({
         type: NodeTypes.COMPOUND_EXPRESSION,
@@ -564,8 +564,8 @@ describe('compiler: v-for', () => {
           { content: `qux` },
           ` = `,
           { content: `_ctx.quux` },
-          `] }`
-        ]
+          `] }`,
+        ],
       })
       const div = node.children[0] as ElementNode
       expect((div.children[0] as InterpolationNode).content).toMatchObject({
@@ -579,17 +579,17 @@ describe('compiler: v-for', () => {
           ` + `,
           { content: `qux` },
           ` + `,
-          { content: `_ctx.quux` }
-        ]
+          { content: `_ctx.quux` },
+        ],
       })
     })
 
     test('element v-for key expression prefixing', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
         '<div v-for="item in items" :key="itemKey(item)">test</div>',
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const innerBlock = codegenNode.children.arguments[1].returns
       expect(innerBlock).toMatchObject({
@@ -604,20 +604,20 @@ describe('compiler: v-for', () => {
               `(`,
               // should NOT prefix in scope variables
               { content: `item` },
-              `)`
-            ]
-          }
-        })
+              `)`,
+            ],
+          },
+        }),
       })
     })
 
     // #2085
     test('template v-for key expression prefixing', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
         '<template v-for="item in items" :key="itemKey(item)">test</template>',
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const innerBlock = codegenNode.children.arguments[1].returns
       expect(innerBlock).toMatchObject({
@@ -632,19 +632,19 @@ describe('compiler: v-for', () => {
               `(`,
               // should NOT prefix in scope variables
               { content: `item` },
-              `)`
-            ]
-          }
-        })
+              `)`,
+            ],
+          },
+        }),
       })
     })
 
     test('template v-for key no prefixing on attribute key', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
         '<template v-for="item in items" key="key">test</template>',
-        { prefixIdentifiers: true }
+        { prefixIdentifiers: true },
       )
       const innerBlock = codegenNode.children.arguments[1].returns
       expect(innerBlock).toMatchObject({
@@ -653,9 +653,9 @@ describe('compiler: v-for', () => {
         props: createObjectMatcher({
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: 'key'
-          }
-        })
+            content: 'key',
+          },
+        }),
       })
     })
   })
@@ -665,7 +665,7 @@ describe('compiler: v-for', () => {
       node: ForCodegenNode,
       keyed: boolean = false,
       customReturn: boolean = false,
-      disableTracking: boolean = true
+      disableTracking: boolean = true,
     ) {
       expect(node).toMatchObject({
         type: NodeTypes.VNODE_CALL,
@@ -674,8 +674,8 @@ describe('compiler: v-for', () => {
         patchFlag: !disableTracking
           ? genFlagText(PatchFlags.STABLE_FRAGMENT)
           : keyed
-          ? genFlagText(PatchFlags.KEYED_FRAGMENT)
-          : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
+            ? genFlagText(PatchFlags.KEYED_FRAGMENT)
+            : genFlagText(PatchFlags.UNKEYED_FRAGMENT),
         children: {
           type: NodeTypes.JS_CALL_EXPRESSION,
           callee: RENDER_LIST,
@@ -687,32 +687,34 @@ describe('compiler: v-for', () => {
                 ? {}
                 : {
                     type: NodeTypes.VNODE_CALL,
-                    isBlock: disableTracking
-                  }
-            }
-          ]
-        }
+                    isBlock: disableTracking,
+                  },
+            },
+          ],
+        },
       })
       const renderListArgs = node.children.arguments
       return {
         source: renderListArgs[0] as SimpleExpressionNode,
         params: (renderListArgs[1] as any).params,
         returns: (renderListArgs[1] as any).returns,
-        innerVNodeCall: customReturn ? null : (renderListArgs[1] as any).returns
+        innerVNodeCall: customReturn
+          ? null
+          : (renderListArgs[1] as any).returns,
       }
     }
 
     test('basic v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
         params: [{ content: `item` }],
         innerVNodeCall: {
-          tag: `"span"`
-        }
+          tag: `"span"`,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -720,11 +722,11 @@ describe('compiler: v-for', () => {
     test('value + key + index', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item, key, index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `item` }, { content: `key` }, { content: `index` }]
+        params: [{ content: `item` }, { content: `key` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -732,11 +734,11 @@ describe('compiler: v-for', () => {
     test('skipped value', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(, key, index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `_` }, { content: `key` }, { content: `index` }]
+        params: [{ content: `_` }, { content: `key` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -744,11 +746,11 @@ describe('compiler: v-for', () => {
     test('skipped key', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item,,index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `item` }, { content: `__` }, { content: `index` }]
+        params: [{ content: `item` }, { content: `__` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -756,11 +758,11 @@ describe('compiler: v-for', () => {
     test('skipped value & key', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(,,index) in items" />')
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
-        params: [{ content: `_` }, { content: `__` }, { content: `index` }]
+        params: [{ content: `_` }, { content: `__` }, { content: `index` }],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -768,9 +770,9 @@ describe('compiler: v-for', () => {
     test('v-for with constant expression', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<p v-for="item in 10">{{item}}</p>', {
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
 
       expect(
@@ -778,8 +780,8 @@ describe('compiler: v-for', () => {
           codegenNode,
           false /* keyed */,
           false /* customReturn */,
-          false /* disableTracking */
-        )
+          false /* disableTracking */,
+        ),
       ).toMatchObject({
         source: { content: `10`, constType: ConstantTypes.CAN_STRINGIFY },
         params: [{ content: `item` }],
@@ -793,11 +795,11 @@ describe('compiler: v-for', () => {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: 'item',
               isStatic: false,
-              constType: ConstantTypes.NOT_CONSTANT
-            }
+              constType: ConstantTypes.NOT_CONSTANT,
+            },
           },
-          patchFlag: genFlagText(PatchFlags.TEXT)
-        }
+          patchFlag: genFlagText(PatchFlags.TEXT),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -805,9 +807,9 @@ describe('compiler: v-for', () => {
     test('template v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items">hello<span/></template>'
+        '<template v-for="item in items">hello<span/></template>',
       )
       expect(assertSharedCodegen(codegenNode)).toMatchObject({
         source: { content: `items` },
@@ -818,10 +820,10 @@ describe('compiler: v-for', () => {
           isBlock: true,
           children: [
             { type: NodeTypes.TEXT, content: `hello` },
-            { type: NodeTypes.ELEMENT, tag: `span` }
+            { type: NodeTypes.ELEMENT, tag: `span` },
           ],
-          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT)
-        }
+          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -829,19 +831,19 @@ describe('compiler: v-for', () => {
     test('template v-for w/ <slot/>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items"><slot/></template>'
+        '<template v-for="item in items"><slot/></template>',
       )
       expect(
-        assertSharedCodegen(codegenNode, false, true /* custom return */)
+        assertSharedCodegen(codegenNode, false, true /* custom return */),
       ).toMatchObject({
         source: { content: `items` },
         params: [{ content: `item` }],
         returns: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: RENDER_SLOT
-        }
+          callee: RENDER_SLOT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -850,9 +852,9 @@ describe('compiler: v-for', () => {
     test('template v-for key injection with single child', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items" :key="item.id"><span :id="item.id" /></template>'
+        '<template v-for="item in items" :key="item.id"><span :id="item.id" /></template>',
       )
       expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
         source: { content: `items` },
@@ -862,9 +864,9 @@ describe('compiler: v-for', () => {
           tag: `"span"`,
           props: createObjectMatcher({
             key: '[item.id]',
-            id: '[item.id]'
-          })
-        }
+            id: '[item.id]',
+          }),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -872,17 +874,17 @@ describe('compiler: v-for', () => {
     test('v-for on <slot/>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<slot v-for="item in items"></slot>')
       expect(
-        assertSharedCodegen(codegenNode, false, true /* custom return */)
+        assertSharedCodegen(codegenNode, false, true /* custom return */),
       ).toMatchObject({
         source: { content: `items` },
         params: [{ content: `item` }],
         returns: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: RENDER_SLOT
-        }
+          callee: RENDER_SLOT,
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -890,7 +892,7 @@ describe('compiler: v-for', () => {
     test('keyed v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<span v-for="(item) in items" :key="item" />')
       expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
         source: { content: `items` },
@@ -898,9 +900,9 @@ describe('compiler: v-for', () => {
         innerVNodeCall: {
           tag: `"span"`,
           props: createObjectMatcher({
-            key: `[item]`
-          })
-        }
+            key: `[item]`,
+          }),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -908,9 +910,9 @@ describe('compiler: v-for', () => {
     test('keyed template v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(
-        '<template v-for="item in items" :key="item">hello<span/></template>'
+        '<template v-for="item in items" :key="item">hello<span/></template>',
       )
       expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
         source: { content: `items` },
@@ -918,14 +920,14 @@ describe('compiler: v-for', () => {
         innerVNodeCall: {
           tag: FRAGMENT,
           props: createObjectMatcher({
-            key: `[item]`
+            key: `[item]`,
           }),
           children: [
             { type: NodeTypes.TEXT, content: `hello` },
-            { type: NodeTypes.ELEMENT, tag: `span` }
+            { type: NodeTypes.ELEMENT, tag: `span` },
           ],
-          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT)
-        }
+          patchFlag: genFlagText(PatchFlags.STABLE_FRAGMENT),
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -933,7 +935,7 @@ describe('compiler: v-for', () => {
     test('v-if + v-for', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(`<div v-if="ok" v-for="i in list"/>`)
       expect(codegenNode).toMatchObject({
         type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -941,7 +943,7 @@ describe('compiler: v-for', () => {
         consequent: {
           type: NodeTypes.VNODE_CALL,
           props: createObjectMatcher({
-            key: `[0]`
+            key: `[0]`,
           }),
           isBlock: true,
           disableTracking: true,
@@ -957,12 +959,12 @@ describe('compiler: v-for', () => {
                 returns: {
                   type: NodeTypes.VNODE_CALL,
                   tag: `"div"`,
-                  isBlock: true
-                }
-              }
-            ]
-          }
-        }
+                  isBlock: true,
+                },
+              },
+            ],
+          },
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -971,7 +973,7 @@ describe('compiler: v-for', () => {
     test('v-if + v-for on <template>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform(`<template v-if="ok" v-for="i in list"/>`)
       expect(codegenNode).toMatchObject({
         type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -979,7 +981,7 @@ describe('compiler: v-for', () => {
         consequent: {
           type: NodeTypes.VNODE_CALL,
           props: createObjectMatcher({
-            key: `[0]`
+            key: `[0]`,
           }),
           isBlock: true,
           disableTracking: true,
@@ -995,12 +997,12 @@ describe('compiler: v-for', () => {
                 returns: {
                   type: NodeTypes.VNODE_CALL,
                   tag: FRAGMENT,
-                  isBlock: true
-                }
-              }
-            ]
-          }
-        }
+                  isBlock: true,
+                },
+              },
+            ],
+          },
+        },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -1008,12 +1010,12 @@ describe('compiler: v-for', () => {
     test('v-for on element with custom directive', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithForTransform('<div v-for="i in list" v-foo/>')
       const { returns } = assertSharedCodegen(codegenNode, false, true)
       expect(returns).toMatchObject({
         type: NodeTypes.VNODE_CALL,
-        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION }
+        directives: { type: NodeTypes.JS_ARRAY_EXPRESSION },
       })
       expect(generate(root).code).toMatchSnapshot()
     })
diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
index 5bc9bedd53b..2c2fedab0d5 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -1,29 +1,29 @@
-import { baseParse as parse } from '../../src/parse'
+import { baseParse as parse } from '../../src/parser'
 import { transform } from '../../src/transform'
 import { transformIf } from '../../src/transforms/vIf'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import {
-  CommentNode,
-  ConditionalExpression,
-  ElementNode,
+  type CommentNode,
+  type ConditionalExpression,
+  type ElementNode,
   ElementTypes,
-  IfBranchNode,
-  IfConditionalExpression,
-  IfNode,
+  type IfBranchNode,
+  type IfConditionalExpression,
+  type IfNode,
   NodeTypes,
-  SimpleExpressionNode,
-  TextNode,
-  VNodeCall
+  type SimpleExpressionNode,
+  type TextNode,
+  type VNodeCall,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
-import { CompilerOptions, generate, TO_HANDLERS } from '../../src'
+import { type CompilerOptions, TO_HANDLERS, generate } from '../../src'
 import {
   CREATE_COMMENT,
   FRAGMENT,
   MERGE_PROPS,
   NORMALIZE_PROPS,
-  RENDER_SLOT
+  RENDER_SLOT,
 } from '../../src/runtimeHelpers'
 import { createObjectMatcher } from '../testUtils'
 
@@ -31,12 +31,12 @@ function parseWithIfTransform(
   template: string,
   options: CompilerOptions = {},
   returnIndex: number = 0,
-  childrenLen: number = 1
+  childrenLen: number = 1,
 ) {
   const ast = parse(template, options)
   transform(ast, {
     nodeTransforms: [transformIf, transformSlotOutlet, transformElement],
-    ...options
+    ...options,
   })
   if (!options.onError) {
     expect(ast.children.length).toBe(childrenLen)
@@ -48,7 +48,7 @@ function parseWithIfTransform(
     root: ast,
     node: ast.children[returnIndex] as IfNode & {
       codegenNode: IfConditionalExpression
-    }
+    },
   }
 }
 
@@ -59,7 +59,7 @@ describe('compiler: v-if', () => {
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(1)
       expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
-        `ok`
+        `ok`,
       )
       expect(node.branches[0].children.length).toBe(1)
       expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
@@ -68,12 +68,12 @@ describe('compiler: v-if', () => {
 
     test('template v-if', () => {
       const { node } = parseWithIfTransform(
-        `<template v-if="ok"><div/>hello<p/></template>`
+        `<template v-if="ok"><div/>hello<p/></template>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(1)
       expect((node.branches[0].condition as SimpleExpressionNode).content).toBe(
-        `ok`
+        `ok`,
       )
       expect(node.branches[0].children.length).toBe(3)
       expect(node.branches[0].children[0].type).toBe(NodeTypes.ELEMENT)
@@ -89,16 +89,16 @@ describe('compiler: v-if', () => {
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(1)
       expect((node.branches[0].children[0] as ElementNode).tag).toBe(
-        `Component`
+        `Component`,
       )
       expect((node.branches[0].children[0] as ElementNode).tagType).toBe(
-        ElementTypes.COMPONENT
+        ElementTypes.COMPONENT,
       )
       // #2058 since a component may fail to resolve and fallback to a plain
       // element, it still needs to be made a block
       expect(
         ((node.branches[0].children[0] as ElementNode)!
-          .codegenNode as VNodeCall)!.isBlock
+          .codegenNode as VNodeCall)!.isBlock,
       ).toBe(true)
     })
 
@@ -122,7 +122,7 @@ describe('compiler: v-if', () => {
 
     test('v-if + v-else-if', () => {
       const { node } = parseWithIfTransform(
-        `<div v-if="ok"/><p v-else-if="orNot"/>`
+        `<div v-if="ok"/><p v-else-if="orNot"/>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(2)
@@ -142,7 +142,7 @@ describe('compiler: v-if', () => {
 
     test('v-if + v-else-if + v-else', () => {
       const { node } = parseWithIfTransform(
-        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
+        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`,
       )
       expect(node.type).toBe(NodeTypes.IF)
       expect(node.branches.length).toBe(3)
@@ -202,11 +202,11 @@ describe('compiler: v-if', () => {
 
     test('should prefix v-if condition', () => {
       const { node } = parseWithIfTransform(`<div v-if="ok"/>`, {
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
       expect(node.branches[0].condition).toMatchObject({
         type: NodeTypes.SIMPLE_EXPRESSION,
-        content: `_ctx.ok`
+        content: `_ctx.ok`,
       })
     })
   })
@@ -219,32 +219,32 @@ describe('compiler: v-if', () => {
       expect(onError.mock.calls[0]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node1.loc
-        }
+          loc: node1.loc,
+        },
       ])
 
       const { node: node2 } = parseWithIfTransform(
         `<div/><div v-else/>`,
         { onError },
-        1
+        1,
       )
       expect(onError.mock.calls[1]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node2.loc
-        }
+          loc: node2.loc,
+        },
       ])
 
       const { node: node3 } = parseWithIfTransform(
         `<div/>foo<div v-else/>`,
         { onError },
-        2
+        2,
       )
       expect(onError.mock.calls[2]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node3.loc
-        }
+          loc: node3.loc,
+        },
       ])
     })
 
@@ -252,52 +252,52 @@ describe('compiler: v-if', () => {
       const onError = vi.fn()
 
       const { node: node1 } = parseWithIfTransform(`<div v-else-if="foo"/>`, {
-        onError
+        onError,
       })
       expect(onError.mock.calls[0]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node1.loc
-        }
+          loc: node1.loc,
+        },
       ])
 
       const { node: node2 } = parseWithIfTransform(
         `<div/><div v-else-if="foo"/>`,
         { onError },
-        1
+        1,
       )
       expect(onError.mock.calls[1]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node2.loc
-        }
+          loc: node2.loc,
+        },
       ])
 
       const { node: node3 } = parseWithIfTransform(
         `<div/>foo<div v-else-if="foo"/>`,
         { onError },
-        2
+        2,
       )
       expect(onError.mock.calls[2]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: node3.loc
-        }
+          loc: node3.loc,
+        },
       ])
 
       const {
-        node: { branches }
+        node: { branches },
       } = parseWithIfTransform(
         `<div v-if="notOk"/><div v-else/><div v-else-if="ok"/>`,
         { onError },
-        0
+        0,
       )
 
       expect(onError.mock.calls[3]).toMatchObject([
         {
           code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
-          loc: branches[branches.length - 1].loc
-        }
+          loc: branches[branches.length - 1].loc,
+        },
       ])
     })
 
@@ -306,21 +306,21 @@ describe('compiler: v-if', () => {
       // dynamic
       parseWithIfTransform(
         `<div v-if="ok" :key="a + 1" /><div v-else :key="a + 1" />`,
-        { onError }
+        { onError },
       )
       expect(onError.mock.calls[0]).toMatchObject([
         {
-          code: ErrorCodes.X_V_IF_SAME_KEY
-        }
+          code: ErrorCodes.X_V_IF_SAME_KEY,
+        },
       ])
       // static
       parseWithIfTransform(`<div v-if="ok" key="1" /><div v-else key="1" />`, {
-        onError
+        onError,
       })
       expect(onError.mock.calls[1]).toMatchObject([
         {
-          code: ErrorCodes.X_V_IF_SAME_KEY
-        }
+          code: ErrorCodes.X_V_IF_SAME_KEY,
+        },
       ])
     })
   })
@@ -329,63 +329,63 @@ describe('compiler: v-if', () => {
     function assertSharedCodegen(
       node: IfConditionalExpression,
       depth: number = 0,
-      hasElse: boolean = false
+      hasElse: boolean = false,
     ) {
       expect(node).toMatchObject({
         type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
         test: {
-          content: `ok`
+          content: `ok`,
         },
         consequent: {
           type: NodeTypes.VNODE_CALL,
-          isBlock: true
+          isBlock: true,
         },
         alternate:
           depth < 1
             ? hasElse
               ? {
                   type: NodeTypes.VNODE_CALL,
-                  isBlock: true
+                  isBlock: true,
                 }
               : {
                   type: NodeTypes.JS_CALL_EXPRESSION,
-                  callee: CREATE_COMMENT
+                  callee: CREATE_COMMENT,
                 }
             : {
                 type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
                 test: {
-                  content: `orNot`
+                  content: `orNot`,
                 },
                 consequent: {
                   type: NodeTypes.VNODE_CALL,
-                  isBlock: true
+                  isBlock: true,
                 },
                 alternate: hasElse
                   ? {
                       type: NodeTypes.VNODE_CALL,
-                      isBlock: true
+                      isBlock: true,
                     }
                   : {
                       type: NodeTypes.JS_CALL_EXPRESSION,
-                      callee: CREATE_COMMENT
-                    }
-              }
+                      callee: CREATE_COMMENT,
+                    },
+              },
       })
     }
 
     test('basic v-if', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok"/>`)
       assertSharedCodegen(codegenNode)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       expect(codegenNode.alternate).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_COMMENT
+        callee: CREATE_COMMENT,
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -393,7 +393,7 @@ describe('compiler: v-if', () => {
     test('template v-if', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<template v-if="ok"><div/>hello<p/></template>`)
       assertSharedCodegen(codegenNode)
       expect(codegenNode.consequent).toMatchObject({
@@ -402,12 +402,12 @@ describe('compiler: v-if', () => {
         children: [
           { type: NodeTypes.ELEMENT, tag: 'div' },
           { type: NodeTypes.TEXT, content: `hello` },
-          { type: NodeTypes.ELEMENT, tag: 'p' }
-        ]
+          { type: NodeTypes.ELEMENT, tag: 'p' },
+        ],
       })
       expect(codegenNode.alternate).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: CREATE_COMMENT
+        callee: CREATE_COMMENT,
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -415,12 +415,12 @@ describe('compiler: v-if', () => {
     test('template v-if w/ single <slot/> child', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<template v-if="ok"><slot/></template>`)
       expect(codegenNode.consequent).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
         callee: RENDER_SLOT,
-        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })]
+        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -428,12 +428,12 @@ describe('compiler: v-if', () => {
     test('v-if on <slot/>', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<slot v-if="ok"></slot>`)
       expect(codegenNode.consequent).toMatchObject({
         type: NodeTypes.JS_CALL_EXPRESSION,
         callee: RENDER_SLOT,
-        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })]
+        arguments: ['$slots', '"default"', createObjectMatcher({ key: `[0]` })],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -441,16 +441,16 @@ describe('compiler: v-if', () => {
     test('v-if + v-else', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok"/><p v-else/>`)
       assertSharedCodegen(codegenNode, 0, true)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       expect(codegenNode.alternate).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -458,17 +458,17 @@ describe('compiler: v-if', () => {
     test('v-if + v-else-if', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok"/><p v-else-if="orNot" />`)
       assertSharedCodegen(codegenNode, 1)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const branch2 = codegenNode.alternate as ConditionalExpression
       expect(branch2.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -476,19 +476,19 @@ describe('compiler: v-if', () => {
     test('v-if + v-else-if + v-else', () => {
       const {
         root,
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(
-        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`
+        `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`,
       )
       assertSharedCodegen(codegenNode, 1, true)
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const branch2 = codegenNode.alternate as ConditionalExpression
       expect(branch2.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(branch2.alternate).toMatchObject({
         tag: FRAGMENT,
@@ -496,9 +496,9 @@ describe('compiler: v-if', () => {
         children: [
           {
             type: NodeTypes.TEXT,
-            content: `fine`
-          }
-        ]
+            content: `fine`,
+          },
+        ],
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -508,7 +508,7 @@ describe('compiler: v-if', () => {
         `<div v-if="ok"/><p v-if="orNot"/>`,
         {},
         0 /* returnIndex, just give the default value */,
-        2 /* childrenLen */
+        2 /* childrenLen */,
       )
 
       const ifNode = root.children[0] as IfNode & {
@@ -516,14 +516,14 @@ describe('compiler: v-if', () => {
       }
       expect(ifNode.codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const ifNode2 = root.children[1] as IfNode & {
         codegenNode: IfConditionalExpression
       }
       expect(ifNode2.codegenNode.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
@@ -533,41 +533,41 @@ describe('compiler: v-if', () => {
         `<div v-if="ok"/><p v-else/><div v-if="another"/><p v-else-if="orNot"/><p v-else/>`,
         {},
         0 /* returnIndex, just give the default value */,
-        2 /* childrenLen */
+        2 /* childrenLen */,
       )
       const ifNode = root.children[0] as IfNode & {
         codegenNode: IfConditionalExpression
       }
       expect(ifNode.codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       expect(ifNode.codegenNode.alternate).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       const ifNode2 = root.children[1] as IfNode & {
         codegenNode: IfConditionalExpression
       }
       expect(ifNode2.codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[2]` })
+        props: createObjectMatcher({ key: `[2]` }),
       })
       const branch = ifNode2.codegenNode.alternate as IfConditionalExpression
       expect(branch.consequent).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[3]` })
+        props: createObjectMatcher({ key: `[3]` }),
       })
       expect(branch.alternate).toMatchObject({
         tag: `"p"`,
-        props: createObjectMatcher({ key: `[4]` })
+        props: createObjectMatcher({ key: `[4]` }),
       })
       expect(generate(root).code).toMatchSnapshot()
     })
 
     test('key injection (only v-bind)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" v-bind="obj"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -577,15 +577,18 @@ describe('compiler: v-if', () => {
           {
             type: NodeTypes.JS_CALL_EXPRESSION,
             callee: MERGE_PROPS,
-            arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
-          }
-        ]
+            arguments: [
+              createObjectMatcher({ key: `[0]` }),
+              { content: `obj` },
+            ],
+          },
+        ],
       })
     })
 
     test('key injection (before v-bind)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" id="foo" v-bind="obj"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -594,16 +597,16 @@ describe('compiler: v-if', () => {
         arguments: [
           createObjectMatcher({
             key: '[0]',
-            id: 'foo'
+            id: 'foo',
           }),
-          { content: `obj` }
-        ]
+          { content: `obj` },
+        ],
       })
     })
 
     test('key injection (after v-bind)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" v-bind="obj" id="foo"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -613,15 +616,15 @@ describe('compiler: v-if', () => {
           createObjectMatcher({ key: `[0]` }),
           { content: `obj` },
           createObjectMatcher({
-            id: 'foo'
-          })
-        ]
+            id: 'foo',
+          }),
+        ],
       })
     })
 
     test('key injection (w/ custom directive)', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" v-foo />`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.directives).not.toBeUndefined()
@@ -631,7 +634,7 @@ describe('compiler: v-if', () => {
     // #6631
     test('avoid duplicate keys', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(`<div v-if="ok" key="custom_key" v-bind="obj"/>`)
       const branch1 = codegenNode.consequent as VNodeCall
       expect(branch1.props).toMatchObject({
@@ -639,31 +642,31 @@ describe('compiler: v-if', () => {
         callee: MERGE_PROPS,
         arguments: [
           createObjectMatcher({
-            key: 'custom_key'
+            key: 'custom_key',
           }),
-          { content: `obj` }
-        ]
+          { content: `obj` },
+        ],
       })
     })
 
     test('with spaces between branches', () => {
       const {
-        node: { codegenNode }
+        node: { codegenNode },
       } = parseWithIfTransform(
-        `<div v-if="ok"/> <div v-else-if="no"/> <div v-else/>`
+        `<div v-if="ok"/> <div v-else-if="no"/> <div v-else/>`,
       )
       expect(codegenNode.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[0]` })
+        props: createObjectMatcher({ key: `[0]` }),
       })
       const branch = codegenNode.alternate as ConditionalExpression
       expect(branch.consequent).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[1]` })
+        props: createObjectMatcher({ key: `[1]` }),
       })
       expect(branch.alternate).toMatchObject({
         tag: `"div"`,
-        props: createObjectMatcher({ key: `[2]` })
+        props: createObjectMatcher({ key: `[2]` }),
       })
     })
 
@@ -729,7 +732,7 @@ describe('compiler: v-if', () => {
             <p/>
           </template>
         `,
-        { comments: true }
+        { comments: true },
       )
       __DEV__ = true
     })
@@ -737,21 +740,21 @@ describe('compiler: v-if', () => {
 
   test('v-on with v-if', () => {
     const {
-      node: { codegenNode }
+      node: { codegenNode },
     } = parseWithIfTransform(
-      `<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`
+      `<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`,
     )
 
     expect((codegenNode.consequent as any).props.type).toBe(
-      NodeTypes.JS_CALL_EXPRESSION
+      NodeTypes.JS_CALL_EXPRESSION,
     )
     expect((codegenNode.consequent as any).props.callee).toBe(MERGE_PROPS)
     expect(
       (codegenNode.consequent as any).props.arguments[0].properties[0].value
-        .content
+        .content,
     ).toBe('0')
     expect((codegenNode.consequent as any).props.arguments[1].callee).toBe(
-      TO_HANDLERS
+      TO_HANDLERS,
     )
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
index 1b259f7ca68..85769e6e977 100644
--- a/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vMemo.spec.ts
@@ -4,7 +4,7 @@ describe('compiler: v-memo transform', () => {
   function compile(content: string) {
     return baseCompile(`<div>${content}</div>`, {
       mode: 'module',
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     }).code
   }
 
@@ -12,8 +12,8 @@ describe('compiler: v-memo transform', () => {
     expect(
       baseCompile(`<div v-memo="[x]"></div>`, {
         mode: 'module',
-        prefixIdentifiers: true
-      }).code
+        prefixIdentifiers: true,
+      }).code,
     ).toMatchSnapshot()
   })
 
@@ -29,8 +29,8 @@ describe('compiler: v-memo transform', () => {
     expect(
       compile(
         `<div v-if="ok" v-memo="[x]"><span>foo</span>bar</div>
-        <Comp v-else v-memo="[x]"></Comp>`
-      )
+        <Comp v-else v-memo="[x]"></Comp>`,
+      ),
     ).toMatchSnapshot()
   })
 
@@ -39,8 +39,8 @@ describe('compiler: v-memo transform', () => {
       compile(
         `<div v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
           <span>foobar</span>
-        </div>`
-      )
+        </div>`,
+      ),
     ).toMatchSnapshot()
   })
 
@@ -49,8 +49,8 @@ describe('compiler: v-memo transform', () => {
       compile(
         `<template v-for="{ x, y } in list" :key="x" v-memo="[x, y === z]">
           <span>foobar</span>
-        </template>`
-      )
+        </template>`,
+      ),
     ).toMatchSnapshot()
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vModel.spec.ts b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
index ef3485fba05..5d94aca2777 100644
--- a/packages/compiler-core/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vModel.spec.ts
@@ -1,17 +1,17 @@
 import {
+  BindingTypes,
+  type CompilerOptions,
+  type ComponentNode,
+  type ElementNode,
+  type ForNode,
+  NORMALIZE_PROPS,
+  NodeTypes,
+  type ObjectExpression,
+  type PlainElementNode,
+  type VNodeCall,
+  generate,
   baseParse as parse,
   transform,
-  generate,
-  ElementNode,
-  ObjectExpression,
-  CompilerOptions,
-  ForNode,
-  PlainElementNode,
-  ComponentNode,
-  NodeTypes,
-  VNodeCall,
-  NORMALIZE_PROPS,
-  BindingTypes
 } from '../../src'
 import { ErrorCodes } from '../../src/errors'
 import { transformModel } from '../../src/transforms/vModel'
@@ -19,7 +19,7 @@ import { transformElement } from '../../src/transforms/transformElement'
 import { transformExpression } from '../../src/transforms/transformExpression'
 import { transformFor } from '../../src/transforms/vFor'
 import { trackSlotScopes } from '../../src/transforms/vSlot'
-import { CallExpression } from '@babel/types'
+import type { CallExpression } from '@babel/types'
 
 function parseWithVModel(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
@@ -29,13 +29,13 @@ function parseWithVModel(template: string, options: CompilerOptions = {}) {
       transformFor,
       transformExpression,
       transformElement,
-      trackSlotScopes
+      trackSlotScopes,
     ],
     directiveTransforms: {
       ...options.directiveTransforms,
-      model: transformModel
+      model: transformModel,
     },
-    ...options
+    ...options,
   })
 
   return ast
@@ -51,29 +51,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: 'model',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: 'model',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -81,7 +81,7 @@ describe('compiler: transform v-model', () => {
 
   test('simple expression (with prefixIdentifiers)', () => {
     const root = parseWithVModel('<input v-model="model" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const node = root.children[0] as ElementNode
     const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
@@ -90,29 +90,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: '_ctx.model',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: '_ctx.model',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -128,29 +128,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: '\n model\n.\nfoo \n',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: '\n model\n.\nfoo \n',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -165,29 +165,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: 'model[index]',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: 'model[index]',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -195,7 +195,7 @@ describe('compiler: transform v-model', () => {
 
   test('compound expression (with prefixIdentifiers)', () => {
     const root = parseWithVModel('<input v-model="model[index]" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const node = root.children[0] as ElementNode
     const props = ((node.codegenNode as VNodeCall).props as ObjectExpression)
@@ -204,28 +204,28 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           {
             content: '_ctx.model',
-            isStatic: false
+            isStatic: false,
           },
           '[',
           {
             content: '_ctx.index',
-            isStatic: false
+            isStatic: false,
           },
-          ']'
-        ]
-      }
+          ']',
+        ],
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:modelValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
@@ -234,19 +234,19 @@ describe('compiler: transform v-model', () => {
             children: [
               {
                 content: '_ctx.model',
-                isStatic: false
+                isStatic: false,
               },
               '[',
               {
                 content: '_ctx.index',
-                isStatic: false
+                isStatic: false,
               },
-              ']'
-            ]
+              ']',
+            ],
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -260,29 +260,29 @@ describe('compiler: transform v-model', () => {
     expect(props[0]).toMatchObject({
       key: {
         content: 'foo-value',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         content: 'model',
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
 
     expect(props[1]).toMatchObject({
       key: {
         content: 'onUpdate:fooValue',
-        isStatic: true
+        isStatic: true,
       },
       value: {
         children: [
           '$event => ((',
           {
             content: 'model',
-            isStatic: false
+            isStatic: false,
           },
-          ') = $event)'
-        ]
-      }
+          ') = $event)',
+        ],
+      },
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -304,12 +304,12 @@ describe('compiler: transform v-model', () => {
             {
               key: {
                 content: 'value',
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: 'model',
-                isStatic: false
-              }
+                isStatic: false,
+              },
             },
             {
               key: {
@@ -317,24 +317,24 @@ describe('compiler: transform v-model', () => {
                   '"onUpdate:" + ',
                   {
                     content: 'value',
-                    isStatic: false
-                  }
-                ]
+                    isStatic: false,
+                  },
+                ],
               },
               value: {
                 children: [
                   '$event => ((',
                   {
                     content: 'model',
-                    isStatic: false
+                    isStatic: false,
                   },
-                  ') = $event)'
-                ]
-              }
-            }
-          ]
-        }
-      ]
+                  ') = $event)',
+                ],
+              },
+            },
+          ],
+        },
+      ],
     })
 
     expect(generate(root).code).toMatchSnapshot()
@@ -342,7 +342,7 @@ describe('compiler: transform v-model', () => {
 
   test('with dynamic argument (with prefixIdentifiers)', () => {
     const root = parseWithVModel('<input v-model:[value]="model" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const node = root.children[0] as ElementNode
     const props = (node.codegenNode as VNodeCall)
@@ -358,12 +358,12 @@ describe('compiler: transform v-model', () => {
             {
               key: {
                 content: '_ctx.value',
-                isStatic: false
+                isStatic: false,
               },
               value: {
                 content: '_ctx.model',
-                isStatic: false
-              }
+                isStatic: false,
+              },
             },
             {
               key: {
@@ -371,24 +371,24 @@ describe('compiler: transform v-model', () => {
                   '"onUpdate:" + ',
                   {
                     content: '_ctx.value',
-                    isStatic: false
-                  }
-                ]
+                    isStatic: false,
+                  },
+                ],
               },
               value: {
                 children: [
                   '$event => ((',
                   {
                     content: '_ctx.model',
-                    isStatic: false
+                    isStatic: false,
                   },
-                  ') = $event)'
-                ]
-              }
-            }
-          ]
-        }
-      ]
+                  ') = $event)',
+                ],
+              },
+            },
+          ],
+        },
+      ],
     })
 
     expect(generate(root, { mode: 'module' }).code).toMatchSnapshot()
@@ -397,7 +397,7 @@ describe('compiler: transform v-model', () => {
   test('should cache update handler w/ cacheHandlers: true', () => {
     const root = parseWithVModel('<input v-model="foo" />', {
       prefixIdentifiers: true,
-      cacheHandlers: true
+      cacheHandlers: true,
     })
     expect(root.cached).toBe(1)
     const codegen = (root.children[0] as PlainElementNode)
@@ -405,7 +405,7 @@ describe('compiler: transform v-model', () => {
     // should not list cached prop in dynamicProps
     expect(codegen.dynamicProps).toBe(`["modelValue"]`)
     expect((codegen.props as ObjectExpression).properties[1].value.type).toBe(
-      NodeTypes.JS_CACHE_EXPRESSION
+      NodeTypes.JS_CACHE_EXPRESSION,
     )
   })
 
@@ -414,8 +414,8 @@ describe('compiler: transform v-model', () => {
       '<input v-for="i in list" v-model="foo[i]" />',
       {
         prefixIdentifiers: true,
-        cacheHandlers: true
-      }
+        cacheHandlers: true,
+      },
     )
     expect(root.cached).toBe(0)
     const codegen = (
@@ -423,14 +423,14 @@ describe('compiler: transform v-model', () => {
     ).codegenNode as VNodeCall
     expect(codegen.dynamicProps).toBe(`["modelValue", "onUpdate:modelValue"]`)
     expect(
-      (codegen.props as ObjectExpression).properties[1].value.type
+      (codegen.props as ObjectExpression).properties[1].value.type,
     ).not.toBe(NodeTypes.JS_CACHE_EXPRESSION)
   })
 
   test('should not cache update handler if it inside v-once', () => {
     const root = parseWithVModel('<div v-once><input v-model="foo" /></div>', {
       prefixIdentifiers: true,
-      cacheHandlers: true
+      cacheHandlers: true,
     })
     expect(root.cached).not.toBe(2)
     expect(root.cached).toBe(1)
@@ -440,8 +440,8 @@ describe('compiler: transform v-model', () => {
     const root = parseWithVModel(
       '<Comp v-slot="{ foo }"><input v-model="foo.bar"/></Comp>',
       {
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     const codegen = (
       (root.children[0] as ComponentNode).children[0] as PlainElementNode
@@ -451,7 +451,7 @@ describe('compiler: transform v-model', () => {
 
   test('should generate modelModifiers for component v-model', () => {
     const root = parseWithVModel('<Comp v-model.trim.bar-baz="foo" />', {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     const vnodeCall = (root.children[0] as ComponentNode)
       .codegenNode as VNodeCall
@@ -462,9 +462,12 @@ describe('compiler: transform v-model', () => {
         { key: { content: `onUpdate:modelValue` } },
         {
           key: { content: 'modelModifiers' },
-          value: { content: `{ trim: true, "bar-baz": true }`, isStatic: false }
-        }
-      ]
+          value: {
+            content: `{ trim: true, "bar-baz": true }`,
+            isStatic: false,
+          },
+        },
+      ],
     })
     // should NOT include modelModifiers in dynamicPropNames because it's never
     // gonna change
@@ -475,8 +478,8 @@ describe('compiler: transform v-model', () => {
     const root = parseWithVModel(
       '<Comp v-model:foo.trim="foo" v-model:bar.number="bar" />',
       {
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     const vnodeCall = (root.children[0] as ComponentNode)
       .codegenNode as VNodeCall
@@ -487,20 +490,20 @@ describe('compiler: transform v-model', () => {
         { key: { content: `onUpdate:foo` } },
         {
           key: { content: 'fooModifiers' },
-          value: { content: `{ trim: true }`, isStatic: false }
+          value: { content: `{ trim: true }`, isStatic: false },
         },
         { key: { content: `bar` } },
         { key: { content: `onUpdate:bar` } },
         {
           key: { content: 'barModifiers' },
-          value: { content: `{ number: true }`, isStatic: false }
-        }
-      ]
+          value: { content: `{ number: true }`, isStatic: false },
+        },
+      ],
     })
     // should NOT include modelModifiers in dynamicPropNames because it's never
     // gonna change
     expect(vnodeCall.dynamicProps).toBe(
-      `["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`
+      `["foo", "onUpdate:foo", "bar", "onUpdate:bar"]`,
     )
   })
 
@@ -512,8 +515,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_NO_EXPRESSION
-        })
+          code: ErrorCodes.X_V_MODEL_NO_EXPRESSION,
+        }),
       )
     })
 
@@ -524,8 +527,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -536,8 +539,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION
-        })
+          code: ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION,
+        }),
       )
     })
 
@@ -552,14 +555,14 @@ describe('compiler: transform v-model', () => {
       const onError = vi.fn()
       parseWithVModel('<span v-for="i in list" v-model="i" />', {
         onError,
-        prefixIdentifiers: true
+        prefixIdentifiers: true,
       })
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE
-        })
+          code: ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE,
+        }),
       )
     })
 
@@ -568,15 +571,15 @@ describe('compiler: transform v-model', () => {
       parseWithVModel('<div v-model="p" />', {
         onError,
         bindingMetadata: {
-          p: BindingTypes.PROPS
-        }
+          p: BindingTypes.PROPS,
+        },
       })
 
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: ErrorCodes.X_V_MODEL_ON_PROPS
-        })
+          code: ErrorCodes.X_V_MODEL_ON_PROPS,
+        }),
       )
     })
   })
diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
index 218281ba762..9f5e0094878 100644
--- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts
@@ -1,14 +1,14 @@
 import {
-  baseParse as parse,
-  CompilerOptions,
-  ElementNode,
+  type CompilerOptions,
+  type ElementNode,
   ErrorCodes,
+  NodeTypes,
+  type ObjectExpression,
   TO_HANDLER_KEY,
+  type VNodeCall,
   helperNameMap,
-  NodeTypes,
-  ObjectExpression,
+  baseParse as parse,
   transform,
-  VNodeCall
 } from '../../src'
 import { transformOn } from '../../src/transforms/vOn'
 import { transformElement } from '../../src/transforms/transformElement'
@@ -19,13 +19,13 @@ function parseWithVOn(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformExpression, transformElement],
     directiveTransforms: {
-      on: transformOn
+      on: transformOn,
     },
-    ...options
+    ...options,
   })
   return {
     root: ast,
-    node: ast.children[0] as ElementNode
+    node: ast.children[0] as ElementNode,
   }
 }
 
@@ -41,13 +41,13 @@ describe('compiler: transform v-on', () => {
             loc: {
               start: {
                 line: 1,
-                column: 11
+                column: 11,
               },
               end: {
                 line: 1,
-                column: 16
-              }
-            }
+                column: 16,
+              },
+            },
           },
           value: {
             content: `onClick`,
@@ -55,16 +55,16 @@ describe('compiler: transform v-on', () => {
             loc: {
               start: {
                 line: 1,
-                column: 18
+                column: 18,
               },
               end: {
                 line: 1,
-                column: 25
-              }
-            }
-          }
-        }
-      ]
+                column: 25,
+              },
+            },
+          },
+        },
+      ],
     })
   })
 
@@ -78,22 +78,22 @@ describe('compiler: transform v-on', () => {
             children: [
               `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `event` },
-              `)`
-            ]
+              `)`,
+            ],
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `handler`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
   })
 
   test('dynamic arg with prefixing', () => {
     const { node } = parseWithVOn(`<div v-on:[event]="handler"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -103,22 +103,22 @@ describe('compiler: transform v-on', () => {
             children: [
               `_${helperNameMap[TO_HANDLER_KEY]}(`,
               { content: `_ctx.event` },
-              `)`
-            ]
+              `)`,
+            ],
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `_ctx.handler`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
   })
 
   test('dynamic arg with complex exp prefixing', () => {
     const { node } = parseWithVOn(`<div v-on:[event(foo)]="handler"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -131,16 +131,16 @@ describe('compiler: transform v-on', () => {
               `(`,
               { content: `_ctx.foo` },
               `)`,
-              `)`
-            ]
+              `)`,
+            ],
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `_ctx.handler`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
   })
 
@@ -152,10 +152,10 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`$event => (`, { content: `i++` }, `)`]
-          }
-        }
-      ]
+            children: [`$event => (`, { content: `i++` }, `)`],
+          },
+        },
+      ],
     })
   })
 
@@ -170,10 +170,10 @@ describe('compiler: transform v-on', () => {
             // should wrap with `{` for multiple statements
             // in this case the return value is discarded and the behavior is
             // consistent with 2.x
-            children: [`$event => {`, { content: `foo();bar()` }, `}`]
-          }
-        }
-      ]
+            children: [`$event => {`, { content: `foo();bar()` }, `}`],
+          },
+        },
+      ],
     })
   })
 
@@ -188,16 +188,16 @@ describe('compiler: transform v-on', () => {
             // should wrap with `{` for multiple statements
             // in this case the return value is discarded and the behavior is
             // consistent with 2.x
-            children: [`$event => {`, { content: `\nfoo();\nbar()\n` }, `}`]
-          }
-        }
-      ]
+            children: [`$event => {`, { content: `\nfoo();\nbar()\n` }, `}`],
+          },
+        },
+      ],
     })
   })
 
   test('inline statement w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="foo($event)"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -214,20 +214,20 @@ describe('compiler: transform v-on', () => {
                   `(`,
                   // should NOT prefix $event
                   { content: `$event` },
-                  `)`
-                ]
+                  `)`,
+                ],
               },
-              `)`
-            ]
-          }
-        }
-      ]
+              `)`,
+            ],
+          },
+        },
+      ],
     })
   })
 
   test('multiple inline statements w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="foo($event);bar()"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -245,14 +245,14 @@ describe('compiler: transform v-on', () => {
                   { content: `$event` },
                   `);`,
                   { content: `_ctx.bar` },
-                  `()`
-                ]
+                  `()`,
+                ],
               },
-              `}`
-            ]
-          }
-        }
-      ]
+              `}`,
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -264,10 +264,10 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `$event => foo($event)`
-          }
-        }
-      ]
+            content: `$event => foo($event)`,
+          },
+        },
+      ],
     })
   })
 
@@ -279,10 +279,10 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `(e: any): any => foo(e)`
-          }
-        }
-      ]
+            content: `(e: any): any => foo(e)`,
+          },
+        },
+      ],
     })
   })
 
@@ -292,7 +292,7 @@ describe('compiler: transform v-on', () => {
       $event => {
         foo($event)
       }
-    "/>`
+    "/>`,
     )
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -304,10 +304,10 @@ describe('compiler: transform v-on', () => {
       $event => {
         foo($event)
       }
-    `
-          }
-        }
-      ]
+    `,
+          },
+        },
+      ],
     })
   })
 
@@ -317,7 +317,7 @@ describe('compiler: transform v-on', () => {
       function($event) {
         foo($event)
       }
-    "/>`
+    "/>`,
     )
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -329,10 +329,10 @@ describe('compiler: transform v-on', () => {
       function($event) {
         foo($event)
       }
-    `
-          }
-        }
-      ]
+    `,
+          },
+        },
+      ],
     })
   })
 
@@ -344,16 +344,16 @@ describe('compiler: transform v-on', () => {
           key: { content: `onClick` },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `a['b' + c]`
-          }
-        }
-      ]
+            content: `a['b' + c]`,
+          },
+        },
+      ],
     })
   })
 
   test('complex member expression w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="a['b' + c]"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -365,17 +365,17 @@ describe('compiler: transform v-on', () => {
               { content: `_ctx.a` },
               `['b' + `,
               { content: `_ctx.c` },
-              `]`
-            ]
-          }
-        }
-      ]
+              `]`,
+            ],
+          },
+        },
+      ],
     })
   })
 
   test('function expression w/ prefixIdentifiers: true', () => {
     const { node } = parseWithVOn(`<div @click="e => foo(e)"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
@@ -389,11 +389,11 @@ describe('compiler: transform v-on', () => {
               { content: `_ctx.foo` },
               `(`,
               { content: `e` },
-              `)`
-            ]
-          }
-        }
-      ]
+              `)`,
+            ],
+          },
+        },
+      ],
     })
   })
 
@@ -405,13 +405,13 @@ describe('compiler: transform v-on', () => {
       loc: {
         start: {
           line: 1,
-          column: 6
+          column: 6,
         },
         end: {
           line: 1,
-          column: 16
-        }
-      }
+          column: 16,
+        },
+      },
     })
   })
 
@@ -427,57 +427,57 @@ describe('compiler: transform v-on', () => {
       properties: [
         {
           key: {
-            content: `onFooBar`
+            content: `onFooBar`,
           },
           value: {
-            content: `onMount`
-          }
-        }
-      ]
+            content: `onMount`,
+          },
+        },
+      ],
     })
   })
 
-  // TODO remove in 3.4
-  test('case conversion for vnode hooks', () => {
-    const { node } = parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`)
-    expect((node.codegenNode as VNodeCall).props).toMatchObject({
-      properties: [
-        {
-          key: {
-            content: `onVnodeMounted`
-          },
-          value: {
-            content: `onMount`
-          }
-        }
-      ]
+  test('error for vnode hooks', () => {
+    const onError = vi.fn()
+    parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`, { onError })
+    expect(onError.mock.calls[0][0]).toMatchObject({
+      code: ErrorCodes.X_VNODE_HOOKS,
+      loc: {
+        start: {
+          line: 1,
+          column: 11,
+        },
+        end: {
+          line: 1,
+          column: 24,
+        },
+      },
     })
-    expect('@vnode-* hooks in templates are deprecated').toHaveBeenWarned()
   })
 
   test('vue: prefixed events', () => {
     const { node } = parseWithVOn(
-      `<div v-on:vue:mounted="onMount" @vue:before-update="onBeforeUpdate" />`
+      `<div v-on:vue:mounted="onMount" @vue:before-update="onBeforeUpdate" />`,
     )
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       properties: [
         {
           key: {
-            content: `onVnodeMounted`
+            content: `onVnodeMounted`,
           },
           value: {
-            content: `onMount`
-          }
+            content: `onMount`,
+          },
         },
         {
           key: {
-            content: `onVnodeBeforeUpdate`
+            content: `onVnodeBeforeUpdate`,
           },
           value: {
-            content: `onBeforeUpdate`
-          }
-        }
-      ]
+            content: `onBeforeUpdate`,
+          },
+        },
+      ],
     })
   })
 
@@ -485,35 +485,35 @@ describe('compiler: transform v-on', () => {
     test('empty handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click.prevent />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
       expect(root.cached).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `() => {}`
-        }
+          content: `() => {}`,
+        },
       })
     })
 
     test('member expression handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
       expect(root.cached).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -522,23 +522,23 @@ describe('compiler: transform v-on', () => {
           children: [
             `(...args) => (`,
             { content: `_ctx.foo && _ctx.foo(...args)` },
-            `)`
-          ]
-        }
+            `)`,
+          ],
+        },
       })
     })
 
     test('compound member expression handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo.bar" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
       expect(root.cached).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -555,12 +555,12 @@ describe('compiler: transform v-on', () => {
                 { content: `_ctx.foo` },
                 `.`,
                 { content: `bar` },
-                `(...args)`
-              ]
+                `(...args)`,
+              ],
             },
-            `)`
-          ]
-        }
+            `)`,
+          ],
+        },
       })
     })
 
@@ -568,7 +568,7 @@ describe('compiler: transform v-on', () => {
       const { root } = parseWithVOn(`<comp v-on:click="foo" />`, {
         prefixIdentifiers: true,
         cacheHandlers: true,
-        isNativeTag: tag => tag === 'div'
+        isNativeTag: tag => tag === 'div',
       })
       expect(root.cached).toBe(0)
     })
@@ -578,8 +578,8 @@ describe('compiler: transform v-on', () => {
         `<div v-once><div v-on:click="foo"/></div>`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
       expect(root.cached).not.toBe(2)
       expect(root.cached).toBe(1)
@@ -588,21 +588,21 @@ describe('compiler: transform v-on', () => {
     test('inline function expression handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="() => foo()" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
       expect(root.cached).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.COMPOUND_EXPRESSION,
-          children: [`() => `, { content: `_ctx.foo` }, `()`]
-        }
+          children: [`() => `, { content: `_ctx.foo` }, `()`],
+        },
       })
     })
 
@@ -611,22 +611,22 @@ describe('compiler: transform v-on', () => {
         `<div v-on:click="async () => await foo()" />`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
       expect(root.cached).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.COMPOUND_EXPRESSION,
-          children: [`async () => await `, { content: `_ctx.foo` }, `()`]
-        }
+          children: [`async () => await `, { content: `_ctx.foo` }, `()`],
+        },
       })
     })
 
@@ -635,15 +635,15 @@ describe('compiler: transform v-on', () => {
         `<div v-on:click="async function () { await foo() } " />`,
         {
           prefixIdentifiers: true,
-          cacheHandlers: true
-        }
+          cacheHandlers: true,
+        },
       )
       expect(root.cached).toBe(1)
       const vnodeCall = node.codegenNode as VNodeCall
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -652,16 +652,16 @@ describe('compiler: transform v-on', () => {
           children: [
             `async function () { await `,
             { content: `_ctx.foo` },
-            `() } `
-          ]
-        }
+            `() } `,
+          ],
+        },
       })
     })
 
     test('inline statement handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click="foo++" />`, {
         prefixIdentifiers: true,
-        cacheHandlers: true
+        cacheHandlers: true,
       })
       expect(root.cached).toBe(1)
       expect(root.cached).toBe(1)
@@ -669,7 +669,7 @@ describe('compiler: transform v-on', () => {
       // should not treat cached handler as dynamicProp, so no flags
       expect(vnodeCall.patchFlag).toBeUndefined()
       expect(
-        (vnodeCall.props as ObjectExpression).properties[0].value
+        (vnodeCall.props as ObjectExpression).properties[0].value,
       ).toMatchObject({
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
@@ -678,9 +678,9 @@ describe('compiler: transform v-on', () => {
           children: [
             `$event => (`,
             { children: [{ content: `_ctx.foo` }, `++`] },
-            `)`
-          ]
-        }
+            `)`,
+          ],
+        },
       })
     })
   })
diff --git a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
index 553ac1dfac4..30149c62df6 100644
--- a/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vOnce.spec.ts
@@ -1,10 +1,10 @@
 import {
-  baseParse as parse,
-  transform,
+  type CompilerOptions,
   NodeTypes,
   generate,
-  CompilerOptions,
-  getBaseTransformPreset
+  getBaseTransformPreset,
+  baseParse as parse,
+  transform,
 } from '../../src'
 import { RENDER_SLOT, SET_BLOCK_TRACKING } from '../../src/runtimeHelpers'
 
@@ -14,7 +14,7 @@ function transformWithOnce(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms,
     directiveTransforms,
-    ...options
+    ...options,
   })
   return ast
 }
@@ -29,8 +29,8 @@ describe('compiler: v-once transform', () => {
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+        tag: `"div"`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -44,8 +44,8 @@ describe('compiler: v-once transform', () => {
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+        tag: `"div"`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -59,8 +59,8 @@ describe('compiler: v-once transform', () => {
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `_component_Comp`
-      }
+        tag: `_component_Comp`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -74,8 +74,8 @@ describe('compiler: v-once transform', () => {
       index: 0,
       value: {
         type: NodeTypes.JS_CALL_EXPRESSION,
-        callee: RENDER_SLOT
-      }
+        callee: RENDER_SLOT,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -90,7 +90,7 @@ describe('compiler: v-once transform', () => {
   // cached nodes should be ignored by hoistStatic transform
   test('with hoistStatic: true', () => {
     const root = transformWithOnce(`<div><div v-once /></div>`, {
-      hoistStatic: true
+      hoistStatic: true,
     })
     expect(root.cached).toBe(1)
     expect(root.helpers).toContain(SET_BLOCK_TRACKING)
@@ -100,8 +100,8 @@ describe('compiler: v-once transform', () => {
       index: 0,
       value: {
         type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      }
+        tag: `"div"`,
+      },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -119,14 +119,14 @@ describe('compiler: v-once transform', () => {
           type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
           consequent: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"div"`
+            tag: `"div"`,
           },
           alternate: {
             type: NodeTypes.VNODE_CALL,
-            tag: `"p"`
-          }
-        }
-      }
+            tag: `"p"`,
+          },
+        },
+      },
     })
   })
 
@@ -138,8 +138,8 @@ describe('compiler: v-once transform', () => {
       type: NodeTypes.FOR,
       // should cache the entire v-for expression, not just a single branch
       codegenNode: {
-        type: NodeTypes.JS_CACHE_EXPRESSION
-      }
+        type: NodeTypes.JS_CACHE_EXPRESSION,
+      },
     })
   })
 })
diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
index bb3d9d2cfa3..aa7b600ccbe 100644
--- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts
@@ -1,18 +1,18 @@
 import {
-  CompilerOptions,
+  type CompilerOptions,
+  type ComponentNode,
+  type ElementNode,
+  ErrorCodes,
+  type ForNode,
+  NodeTypes,
+  type ObjectExpression,
+  type RenderSlotCall,
+  type SimpleExpressionNode,
+  type SlotsExpression,
+  type VNodeCall,
+  generate,
   baseParse as parse,
   transform,
-  generate,
-  ElementNode,
-  NodeTypes,
-  ErrorCodes,
-  ForNode,
-  ComponentNode,
-  VNodeCall,
-  SlotsExpression,
-  ObjectExpression,
-  SimpleExpressionNode,
-  RenderSlotCall
 } from '../../src'
 import { transformElement } from '../../src/transforms/transformElement'
 import { transformOn } from '../../src/transforms/vOn'
@@ -21,7 +21,7 @@ import { transformExpression } from '../../src/transforms/transformExpression'
 import { transformSlotOutlet } from '../../src/transforms/transformSlotOutlet'
 import {
   trackSlotScopes,
-  trackVForSlotScopes
+  trackVForSlotScopes,
 } from '../../src/transforms/vSlot'
 import { CREATE_SLOTS, RENDER_LIST } from '../../src/runtimeHelpers'
 import { createObjectMatcher, genFlagText } from '../testUtils'
@@ -31,7 +31,7 @@ import { transformIf } from '../../src/transforms/vIf'
 
 function parseWithSlots(template: string, options: CompilerOptions = {}) {
   const ast = parse(template, {
-    whitespace: options.whitespace
+    whitespace: options.whitespace,
   })
   transform(ast, {
     nodeTransforms: [
@@ -42,13 +42,13 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
         : []),
       transformSlotOutlet,
       transformElement,
-      trackSlotScopes
+      trackSlotScopes,
     ],
     directiveTransforms: {
       on: transformOn,
-      bind: transformBind
+      bind: transformBind,
     },
-    ...options
+    ...options,
   })
   return {
     root: ast,
@@ -56,7 +56,7 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
       ast.children[0].type === NodeTypes.ELEMENT
         ? ((ast.children[0].codegenNode as VNodeCall)
             .children as SlotsExpression)
-        : null
+        : null,
   }
 }
 
@@ -70,25 +70,25 @@ function createSlotMatcher(obj: Record<string, any>, isDynamic = false) {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             isStatic: !/^\[/.test(key),
-            content: key.replace(/^\[|\]$/g, '')
+            content: key.replace(/^\[|\]$/g, ''),
           },
-          value: obj[key]
+          value: obj[key],
         } as any
       })
       .concat({
         key: { content: `_` },
         value: {
           content: isDynamic ? `2 /* DYNAMIC */` : `1 /* STABLE */`,
-          isStatic: false
-        }
-      })
+          isStatic: false,
+        },
+      }),
   }
 }
 
 describe('compiler: transform component slots', () => {
   test('implicit default slot', () => {
     const { root, slots } = parseWithSlots(`<Comp><div/></Comp>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -98,11 +98,11 @@ describe('compiler: transform component slots', () => {
           returns: [
             {
               type: NodeTypes.ELEMENT,
-              tag: `div`
-            }
-          ]
-        }
-      })
+              tag: `div`,
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -110,7 +110,7 @@ describe('compiler: transform component slots', () => {
   test('on-component default slot', () => {
     const { root, slots } = parseWithSlots(
       `<Comp v-slot="{ foo }">{{ foo }}{{ bar }}</Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -118,24 +118,24 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
-            }
-          ]
-        }
-      })
+                content: `_ctx.bar`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -143,7 +143,7 @@ describe('compiler: transform component slots', () => {
   test('on component named slot', () => {
     const { root, slots } = parseWithSlots(
       `<Comp v-slot:named="{ foo }">{{ foo }}{{ bar }}</Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -151,24 +151,24 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
-            }
-          ]
-        }
-      })
+                content: `_ctx.bar`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -183,7 +183,7 @@ describe('compiler: transform component slots', () => {
           {{ foo }}{{ bar }}
         </template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -191,45 +191,45 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
-            }
-          ]
+                content: `_ctx.bar`,
+              },
+            },
+          ],
         },
         two: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `bar` }, ` }`]
+            children: [`{ `, { content: `bar` }, ` }`],
           },
           returns: [
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.foo`
-              }
+                content: `_ctx.foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `bar`
-              }
-            }
-          ]
-        }
-      })
+                content: `bar`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -237,7 +237,7 @@ describe('compiler: transform component slots', () => {
   test('on component dynamically named slot', () => {
     const { root, slots } = parseWithSlots(
       `<Comp v-slot:[named]="{ foo }">{{ foo }}{{ bar }}</Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher(
@@ -246,26 +246,26 @@ describe('compiler: transform component slots', () => {
             type: NodeTypes.JS_FUNCTION_EXPRESSION,
             params: {
               type: NodeTypes.COMPOUND_EXPRESSION,
-              children: [`{ `, { content: `foo` }, ` }`]
+              children: [`{ `, { content: `foo` }, ` }`],
             },
             returns: [
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `foo`
-                }
+                  content: `foo`,
+                },
               },
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `_ctx.bar`
-                }
-              }
-            ]
-          }
+                  content: `_ctx.bar`,
+                },
+              },
+            ],
+          },
         },
-        true
-      )
+        true,
+      ),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -274,7 +274,7 @@ describe('compiler: transform component slots', () => {
     const { root, slots } = parseWithSlots(
       `<Comp>
         <template #one>foo</template>bar<span/>
-      </Comp>`
+      </Comp>`,
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -284,9 +284,9 @@ describe('compiler: transform component slots', () => {
           returns: [
             {
               type: NodeTypes.TEXT,
-              content: `foo`
-            }
-          ]
+              content: `foo`,
+            },
+          ],
         },
         default: {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -294,15 +294,15 @@ describe('compiler: transform component slots', () => {
           returns: [
             {
               type: NodeTypes.TEXT,
-              content: `bar`
+              content: `bar`,
             },
             {
               type: NodeTypes.ELEMENT,
-              tag: `span`
-            }
-          ]
-        }
-      })
+              tag: `span`,
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -317,7 +317,7 @@ describe('compiler: transform component slots', () => {
           {{ foo }}{{ bar }}
         </template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher(
@@ -326,47 +326,47 @@ describe('compiler: transform component slots', () => {
             type: NodeTypes.JS_FUNCTION_EXPRESSION,
             params: {
               type: NodeTypes.COMPOUND_EXPRESSION,
-              children: [`{ `, { content: `foo` }, ` }`]
+              children: [`{ `, { content: `foo` }, ` }`],
             },
             returns: [
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `foo`
-                }
+                  content: `foo`,
+                },
               },
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `_ctx.bar`
-                }
-              }
-            ]
+                  content: `_ctx.bar`,
+                },
+              },
+            ],
           },
           '[_ctx.two]': {
             type: NodeTypes.JS_FUNCTION_EXPRESSION,
             params: {
               type: NodeTypes.COMPOUND_EXPRESSION,
-              children: [`{ `, { content: `bar` }, ` }`]
+              children: [`{ `, { content: `bar` }, ` }`],
             },
             returns: [
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `_ctx.foo`
-                }
+                  content: `_ctx.foo`,
+                },
               },
               {
                 type: NodeTypes.INTERPOLATION,
                 content: {
-                  content: `bar`
-                }
-              }
-            ]
-          }
+                  content: `bar`,
+                },
+              },
+            ],
+          },
         },
-        true
-      )
+        true,
+      ),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -381,7 +381,7 @@ describe('compiler: transform component slots', () => {
           {{ foo }}{{ bar }}{{ baz }}
         </template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject(
       createSlotMatcher({
@@ -389,7 +389,7 @@ describe('compiler: transform component slots', () => {
           type: NodeTypes.JS_FUNCTION_EXPRESSION,
           params: {
             type: NodeTypes.COMPOUND_EXPRESSION,
-            children: [`{ `, { content: `foo` }, ` }`]
+            children: [`{ `, { content: `foo` }, ` }`],
           },
           returns: [
             {
@@ -404,63 +404,63 @@ describe('compiler: transform component slots', () => {
                       type: NodeTypes.JS_FUNCTION_EXPRESSION,
                       params: {
                         type: NodeTypes.COMPOUND_EXPRESSION,
-                        children: [`{ `, { content: `bar` }, ` }`]
+                        children: [`{ `, { content: `bar` }, ` }`],
                       },
                       returns: [
                         {
                           type: NodeTypes.INTERPOLATION,
                           content: {
-                            content: `foo`
-                          }
+                            content: `foo`,
+                          },
                         },
                         {
                           type: NodeTypes.INTERPOLATION,
                           content: {
-                            content: `bar`
-                          }
+                            content: `bar`,
+                          },
                         },
                         {
                           type: NodeTypes.INTERPOLATION,
                           content: {
-                            content: `_ctx.baz`
-                          }
-                        }
-                      ]
-                    }
+                            content: `_ctx.baz`,
+                          },
+                        },
+                      ],
+                    },
                   },
-                  true
+                  true,
                 ),
                 // nested slot should be forced dynamic, since scope variables
                 // are not tracked as dependencies of the slot.
-                patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
-              }
+                patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS),
+              },
             },
             // test scope
             {
               type: NodeTypes.TEXT,
-              content: ` `
+              content: ` `,
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `foo`
-              }
+                content: `foo`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.bar`
-              }
+                content: `_ctx.bar`,
+              },
             },
             {
               type: NodeTypes.INTERPOLATION,
               content: {
-                content: `_ctx.baz`
-              }
-            }
-          ]
-        }
-      })
+                content: `_ctx.baz`,
+              },
+            },
+          ],
+        },
+      }),
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -469,13 +469,13 @@ describe('compiler: transform component slots', () => {
     const { root } = parseWithSlots(
       `<div v-for="i in list">
         <Comp v-slot="bar">foo</Comp>
-      </div>`
+      </div>`,
     )
     const div = ((root.children[0] as ForNode).children[0] as ElementNode)
       .codegenNode as any
     const comp = div.children[0]
     expect(comp.codegenNode.patchFlag).toBe(
-      genFlagText(PatchFlags.DYNAMIC_SLOTS)
+      genFlagText(PatchFlags.DYNAMIC_SLOTS),
     )
   })
 
@@ -504,14 +504,14 @@ describe('compiler: transform component slots', () => {
       `<div v-for="i in list">
         <Comp v-slot="bar">foo</Comp>
       </div>`,
-      false
+      false,
     )
 
     assertDynamicSlots(
       `<div v-for="i in list">
         <Comp v-slot="bar">{{ i }}</Comp>
       </div>`,
-      true
+      true,
     )
 
     // reference the component's own slot variable should not force dynamic slots
@@ -519,14 +519,14 @@ describe('compiler: transform component slots', () => {
       `<Comp v-slot="foo">
         <Comp v-slot="bar">{{ bar }}</Comp>
       </Comp>`,
-      false
+      false,
     )
 
     assertDynamicSlots(
       `<Comp v-slot="foo">
         <Comp v-slot="bar">{{ foo }}</Comp>
       </Comp>`,
-      true
+      true,
     )
 
     // #2564
@@ -534,14 +534,14 @@ describe('compiler: transform component slots', () => {
       `<div v-for="i in list">
         <Comp v-slot="bar"><button @click="fn(i)" /></Comp>
       </div>`,
-      true
+      true,
     )
 
     assertDynamicSlots(
       `<div v-for="i in list">
         <Comp v-slot="bar"><button @click="fn()" /></Comp>
       </div>`,
-      false
+      false,
     )
   })
 
@@ -549,14 +549,14 @@ describe('compiler: transform component slots', () => {
     const { root, slots } = parseWithSlots(
       `<Comp>
         <template #one v-if="ok">hello</template>
-      </Comp>`
+      </Comp>`,
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -568,21 +568,21 @@ describe('compiler: transform component slots', () => {
                 name: `one`,
                 fn: {
                   type: NodeTypes.JS_FUNCTION_EXPRESSION,
-                  returns: [{ type: NodeTypes.TEXT, content: `hello` }]
+                  returns: [{ type: NodeTypes.TEXT, content: `hello` }],
                 },
-                key: `0`
+                key: `0`,
               }),
               alternate: {
                 content: `undefined`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
     expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+      PatchFlags.DYNAMIC_SLOTS + '',
     )
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -592,14 +592,14 @@ describe('compiler: transform component slots', () => {
       `<Comp>
         <template #one="props" v-if="ok">{{ props }}</template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -615,23 +615,23 @@ describe('compiler: transform component slots', () => {
                   returns: [
                     {
                       type: NodeTypes.INTERPOLATION,
-                      content: { content: `props` }
-                    }
-                  ]
+                      content: { content: `props` },
+                    },
+                  ],
                 },
-                key: `0`
+                key: `0`,
               }),
               alternate: {
                 content: `undefined`,
-                isStatic: false
-              }
-            }
-          ]
-        }
-      ]
+                isStatic: false,
+              },
+            },
+          ],
+        },
+      ],
     })
     expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+      PatchFlags.DYNAMIC_SLOTS + '',
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -642,14 +642,14 @@ describe('compiler: transform component slots', () => {
         <template #one v-if="ok">foo</template>
         <template #two="props" v-else-if="orNot">bar</template>
         <template #one v-else>baz</template>
-      </Comp>`
+      </Comp>`,
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -662,9 +662,9 @@ describe('compiler: transform component slots', () => {
                 fn: {
                   type: NodeTypes.JS_FUNCTION_EXPRESSION,
                   params: undefined,
-                  returns: [{ type: NodeTypes.TEXT, content: `foo` }]
+                  returns: [{ type: NodeTypes.TEXT, content: `foo` }],
                 },
-                key: `0`
+                key: `0`,
               }),
               alternate: {
                 type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -674,27 +674,27 @@ describe('compiler: transform component slots', () => {
                   fn: {
                     type: NodeTypes.JS_FUNCTION_EXPRESSION,
                     params: { content: `props` },
-                    returns: [{ type: NodeTypes.TEXT, content: `bar` }]
+                    returns: [{ type: NodeTypes.TEXT, content: `bar` }],
                   },
-                  key: `1`
+                  key: `1`,
                 }),
                 alternate: createObjectMatcher({
                   name: `one`,
                   fn: {
                     type: NodeTypes.JS_FUNCTION_EXPRESSION,
                     params: undefined,
-                    returns: [{ type: NodeTypes.TEXT, content: `baz` }]
+                    returns: [{ type: NodeTypes.TEXT, content: `baz` }],
                   },
-                  key: `2`
-                })
-              }
-            }
-          ]
-        }
-      ]
+                  key: `2`,
+                }),
+              },
+            },
+          ],
+        },
+      ],
     })
     expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+      PatchFlags.DYNAMIC_SLOTS + '',
     )
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -704,14 +704,14 @@ describe('compiler: transform component slots', () => {
       `<Comp>
         <template v-for="name in list" #[name]>{{ name }}</template>
       </Comp>`,
-      { prefixIdentifiers: true }
+      { prefixIdentifiers: true },
     )
     expect(slots).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
       callee: CREATE_SLOTS,
       arguments: [
         createObjectMatcher({
-          _: `[2 /* DYNAMIC */]`
+          _: `[2 /* DYNAMIC */]`,
         }),
         {
           type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -731,20 +731,20 @@ describe('compiler: transform component slots', () => {
                       returns: [
                         {
                           type: NodeTypes.INTERPOLATION,
-                          content: { content: `name`, isStatic: false }
-                        }
-                      ]
-                    }
-                  })
-                }
-              ]
-            }
-          ]
-        }
-      ]
+                          content: { content: `name`, isStatic: false },
+                        },
+                      ],
+                    },
+                  }),
+                },
+              ],
+            },
+          ],
+        },
+      ],
     })
     expect((root as any).children[0].codegenNode.patchFlag).toMatch(
-      PatchFlags.DYNAMIC_SLOTS + ''
+      PatchFlags.DYNAMIC_SLOTS + '',
     )
     expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
   })
@@ -755,13 +755,13 @@ describe('compiler: transform component slots', () => {
       properties: [
         {
           key: { content: `default` },
-          value: { type: NodeTypes.JS_FUNCTION_EXPRESSION }
+          value: { type: NodeTypes.JS_FUNCTION_EXPRESSION },
         },
         {
           key: { content: `_` },
-          value: { content: `3 /* FORWARDED */` }
-        }
-      ]
+          value: { content: `3 /* FORWARDED */` },
+        },
+      ],
     }
     test('<slot> tag only', () => {
       const { slots } = parseWithSlots(`<Comp><slot/></Comp>`)
@@ -780,7 +780,7 @@ describe('compiler: transform component slots', () => {
 
     test('<slot> tag w/ template', () => {
       const { slots } = parseWithSlots(
-        `<Comp><template #default><slot/></template></Comp>`
+        `<Comp><template #default><slot/></template></Comp>`,
       )
       expect(slots).toMatchObject(toMatch)
     })
@@ -793,7 +793,7 @@ describe('compiler: transform component slots', () => {
     // # fix: #6900
     test('consistent behavior of @xxx:modelValue and @xxx:model-value', () => {
       const { root: rootUpper } = parseWithSlots(
-        `<div><slot @foo:modelValue="handler" /></div>`
+        `<div><slot @foo:modelValue="handler" /></div>`,
       )
       const slotNodeUpper = (rootUpper.codegenNode! as VNodeCall)
         .children as ElementNode[]
@@ -805,19 +805,19 @@ describe('compiler: transform component slots', () => {
           {
             key: {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: 'onFoo:modelValue'
+              content: 'onFoo:modelValue',
             },
             value: {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `handler`,
-              isStatic: false
-            }
-          }
-        ]
+              isStatic: false,
+            },
+          },
+        ],
       })
 
       const { root } = parseWithSlots(
-        `<div><slot @foo:model-Value="handler" /></div>`
+        `<div><slot @foo:model-Value="handler" /></div>`,
       )
       const slotNode = (root.codegenNode! as VNodeCall)
         .children as ElementNode[]
@@ -828,15 +828,15 @@ describe('compiler: transform component slots', () => {
           {
             key: {
               type: NodeTypes.SIMPLE_EXPRESSION,
-              content: 'onFoo:modelValue'
+              content: 'onFoo:modelValue',
             },
             value: {
               type: NodeTypes.SIMPLE_EXPRESSION,
               content: `handler`,
-              isStatic: false
-            }
-          }
-        ]
+              isStatic: false,
+            },
+          },
+        ],
       })
     })
   })
@@ -850,18 +850,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
         loc: {
-          source: `bar`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 3,
             line: 1,
-            column: index + 4
-          }
-        }
+            column: index + 4,
+          },
+        },
       })
     })
 
@@ -873,18 +872,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_DUPLICATE_SLOT_NAMES,
         loc: {
-          source: `#foo`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 4,
             line: 1,
-            column: index + 5
-          }
-        }
+            column: index + 5,
+          },
+        },
       })
     })
 
@@ -896,18 +894,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE,
         loc: {
-          source: `#foo`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 4,
             line: 1,
-            column: index + 5
-          }
-        }
+            column: index + 5,
+          },
+        },
       })
     })
 
@@ -919,18 +916,17 @@ describe('compiler: transform component slots', () => {
       expect(onError.mock.calls[0][0]).toMatchObject({
         code: ErrorCodes.X_V_SLOT_MISPLACED,
         loc: {
-          source: `v-slot`,
           start: {
             offset: index,
             line: 1,
-            column: index + 1
+            column: index + 1,
           },
           end: {
             offset: index + 6,
             line: 1,
-            column: index + 7
-          }
-        }
+            column: index + 7,
+          },
+        },
       })
     })
   })
@@ -944,11 +940,11 @@ describe('compiler: transform component slots', () => {
       </Comp>
       `
       const { root } = parseWithSlots(source, {
-        whitespace: 'preserve'
+        whitespace: 'preserve',
       })
 
       expect(
-        `Extraneous children found when component already has explicitly named default slot.`
+        `Extraneous children found when component already has explicitly named default slot.`,
       ).not.toHaveBeenWarned()
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
     })
@@ -961,11 +957,11 @@ describe('compiler: transform component slots', () => {
       </Comp>
       `
       const { root } = parseWithSlots(source, {
-        whitespace: 'preserve'
+        whitespace: 'preserve',
       })
 
       expect(
-        `Extraneous children found when component already has explicitly named default slot.`
+        `Extraneous children found when component already has explicitly named default slot.`,
       ).not.toHaveBeenWarned()
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
     })
@@ -978,7 +974,7 @@ describe('compiler: transform component slots', () => {
       </Comp>
       `
       const { root } = parseWithSlots(source, {
-        whitespace: 'preserve'
+        whitespace: 'preserve',
       })
 
       // slots is vnodeCall's children as an ObjectExpression
@@ -988,7 +984,7 @@ describe('compiler: transform component slots', () => {
       // should be: header, footer, _ (no default)
       expect(slots.length).toBe(3)
       expect(
-        slots.some(p => (p.key as SimpleExpressionNode).content === 'default')
+        slots.some(p => (p.key as SimpleExpressionNode).content === 'default'),
       ).toBe(false)
 
       expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
diff --git a/packages/compiler-core/__tests__/utils.spec.ts b/packages/compiler-core/__tests__/utils.spec.ts
index 45fa46fea7a..506aa86982e 100644
--- a/packages/compiler-core/__tests__/utils.spec.ts
+++ b/packages/compiler-core/__tests__/utils.spec.ts
@@ -1,11 +1,10 @@
-import { TransformContext } from '../src'
-import { Position } from '../src/ast'
+import type { TransformContext } from '../src'
+import type { Position } from '../src/ast'
 import {
-  getInnerRange,
   advancePositionWithClone,
-  isMemberExpressionNode,
   isMemberExpressionBrowser,
-  toValidAssetId
+  isMemberExpressionNode,
+  toValidAssetId,
 } from '../src/utils'
 
 function p(line: number, column: number, offset: number): Position {
@@ -41,32 +40,6 @@ describe('advancePositionWithClone', () => {
   })
 })
 
-describe('getInnerRange', () => {
-  const loc1 = {
-    source: 'foo\nbar\nbaz',
-    start: p(1, 1, 0),
-    end: p(3, 3, 11)
-  }
-
-  test('at start', () => {
-    const loc2 = getInnerRange(loc1, 0, 4)
-    expect(loc2.start).toEqual(loc1.start)
-    expect(loc2.end.column).toBe(1)
-    expect(loc2.end.line).toBe(2)
-    expect(loc2.end.offset).toBe(4)
-  })
-
-  test('in between', () => {
-    const loc2 = getInnerRange(loc1, 4, 3)
-    expect(loc2.start.column).toBe(1)
-    expect(loc2.start.line).toBe(2)
-    expect(loc2.start.offset).toBe(4)
-    expect(loc2.end.column).toBe(4)
-    expect(loc2.end.line).toBe(2)
-    expect(loc2.end.offset).toBe(7)
-  })
-})
-
 describe('isMemberExpression', () => {
   function commonAssertions(fn: (str: string) => boolean) {
     // should work
@@ -122,6 +95,10 @@ describe('isMemberExpression', () => {
     expect(fn(`123[a]`)).toBe(true)
     expect(fn(`foo() as string`)).toBe(false)
     expect(fn(`a + b as string`)).toBe(false)
+    // #9865
+    expect(fn('""')).toBe(false)
+    expect(fn('undefined')).toBe(false)
+    expect(fn('null')).toBe(false)
   })
 })
 
@@ -131,6 +108,6 @@ test('toValidAssetId', () => {
   expect(toValidAssetId('div', 'filter')).toBe('_filter_div')
   expect(toValidAssetId('foo-bar', 'component')).toBe('_component_foo_bar')
   expect(toValidAssetId('test-测试-1', 'component')).toBe(
-    '_component_test_2797935797_1'
+    '_component_test_2797935797_1',
   )
 })
diff --git a/packages/compiler-core/package.json b/packages/compiler-core/package.json
index 160b0335079..9f3687f5d24 100644
--- a/packages/compiler-core/package.json
+++ b/packages/compiler-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/compiler-core.d.ts",
+      "node": {
+        "production": "./dist/compiler-core.cjs.prod.js",
+        "development": "./dist/compiler-core.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/compiler-core.esm-bundler.js",
+      "import": "./dist/compiler-core.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueCompilerCore",
     "compat": true,
@@ -32,12 +46,13 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.0",
-    "@vue/shared": "3.3.5",
+    "@babel/parser": "^7.23.9",
+    "@vue/shared": "workspace:*",
+    "entities": "^4.5.0",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.0"
+    "@babel/types": "^7.23.9"
   }
 }
diff --git a/packages/compiler-core/src/ast.ts b/packages/compiler-core/src/ast.ts
index 515083c336a..3f92a99fcbb 100644
--- a/packages/compiler-core/src/ast.ts
+++ b/packages/compiler-core/src/ast.ts
@@ -1,31 +1,32 @@
 import { isString } from '@vue/shared'
-import { ForParseResult } from './transforms/vFor'
 import {
-  RENDER_SLOT,
-  CREATE_SLOTS,
-  RENDER_LIST,
+  CREATE_BLOCK,
+  CREATE_ELEMENT_BLOCK,
+  CREATE_ELEMENT_VNODE,
+  type CREATE_SLOTS,
+  CREATE_VNODE,
+  type FRAGMENT,
   OPEN_BLOCK,
-  FRAGMENT,
+  type RENDER_LIST,
+  type RENDER_SLOT,
   WITH_DIRECTIVES,
-  WITH_MEMO,
-  CREATE_VNODE,
-  CREATE_ELEMENT_VNODE,
-  CREATE_BLOCK,
-  CREATE_ELEMENT_BLOCK
+  type WITH_MEMO,
 } from './runtimeHelpers'
-import { PropsExpression } from './transforms/transformElement'
-import { ImportItem, TransformContext } from './transform'
+import type { PropsExpression } from './transforms/transformElement'
+import type { ImportItem, TransformContext } from './transform'
+import type { Node as BabelNode } from '@babel/types'
 
 // Vue template is a platform-agnostic superset of HTML (syntax only).
-// More namespaces like SVG and MathML are declared by platform specific
-// compilers.
+// More namespaces can be declared by platform specific compilers.
 export type Namespace = number
 
-export const enum Namespaces {
-  HTML
+export enum Namespaces {
+  HTML,
+  SVG,
+  MATH_ML,
 }
 
-export const enum NodeTypes {
+export enum NodeTypes {
   ROOT,
   ELEMENT,
   TEXT,
@@ -56,14 +57,14 @@ export const enum NodeTypes {
   JS_IF_STATEMENT,
   JS_ASSIGNMENT_EXPRESSION,
   JS_SEQUENCE_EXPRESSION,
-  JS_RETURN_STATEMENT
+  JS_RETURN_STATEMENT,
 }
 
-export const enum ElementTypes {
+export enum ElementTypes {
   ELEMENT,
   COMPONENT,
   SLOT,
-  TEMPLATE
+  TEMPLATE,
 }
 
 export interface Node {
@@ -102,6 +103,7 @@ export type TemplateChildNode =
 
 export interface RootNode extends Node {
   type: NodeTypes.ROOT
+  source: string
   children: TemplateChildNode[]
   helpers: Set<symbol>
   components: string[]
@@ -112,6 +114,7 @@ export interface RootNode extends Node {
   temps: number
   ssrHelpers?: symbol[]
   codegenNode?: TemplateChildNode | JSChildNode | BlockStatement
+  transformed?: boolean
 
   // v2 compat only
   filters?: string[]
@@ -128,9 +131,10 @@ export interface BaseElementNode extends Node {
   ns: Namespace
   tag: string
   tagType: ElementTypes
-  isSelfClosing: boolean
   props: Array<AttributeNode | DirectiveNode>
   children: TemplateChildNode[]
+  isSelfClosing?: boolean
+  innerLoc?: SourceLocation // only for SFC root level elements
 }
 
 export interface PlainElementNode extends BaseElementNode {
@@ -182,19 +186,28 @@ export interface CommentNode extends Node {
 export interface AttributeNode extends Node {
   type: NodeTypes.ATTRIBUTE
   name: string
+  nameLoc: SourceLocation
   value: TextNode | undefined
 }
 
 export interface DirectiveNode extends Node {
   type: NodeTypes.DIRECTIVE
+  /**
+   * the normalized name without prefix or shorthands, e.g. "bind", "on"
+   */
   name: string
+  /**
+   * the raw attribute name, preserving shorthand, and including arg & modifiers
+   * this is only used during parse.
+   */
+  rawName?: string
   exp: ExpressionNode | undefined
   arg: ExpressionNode | undefined
   modifiers: string[]
   /**
    * optional property to cache the expression parse result for v-for
    */
-  parseResult?: ForParseResult
+  forParseResult?: ForParseResult
 }
 
 /**
@@ -202,11 +215,11 @@ export interface DirectiveNode extends Node {
  * Higher levels implies lower levels. e.g. a node that can be stringified
  * can always be hoisted and skipped for patch.
  */
-export const enum ConstantTypes {
+export enum ConstantTypes {
   NOT_CONSTANT = 0,
   CAN_SKIP_PATCH,
   CAN_HOIST,
-  CAN_STRINGIFY
+  CAN_STRINGIFY,
 }
 
 export interface SimpleExpressionNode extends Node {
@@ -214,6 +227,12 @@ export interface SimpleExpressionNode extends Node {
   content: string
   isStatic: boolean
   constType: ConstantTypes
+  /**
+   * - `null` means the expression is a simple identifier that doesn't need
+   *    parsing
+   * - `false` means there was a parsing error
+   */
+  ast?: BabelNode | null | false
   /**
    * Indicates this is an identifier for a hoist vnode call and points to the
    * hoisted node.
@@ -234,6 +253,12 @@ export interface InterpolationNode extends Node {
 
 export interface CompoundExpressionNode extends Node {
   type: NodeTypes.COMPOUND_EXPRESSION
+  /**
+   * - `null` means the expression is a simple identifier that doesn't need
+   *    parsing
+   * - `false` means there was a parsing error
+   */
+  ast?: BabelNode | null | false
   children: (
     | SimpleExpressionNode
     | CompoundExpressionNode
@@ -276,6 +301,14 @@ export interface ForNode extends Node {
   codegenNode?: ForCodegenNode
 }
 
+export interface ForParseResult {
+  source: ExpressionNode
+  value: ExpressionNode | undefined
+  key: ExpressionNode | undefined
+  index: ExpressionNode | undefined
+  finalized: boolean
+}
+
 export interface TextCallNode extends Node {
   type: NodeTypes.TEXT_CALL
   content: TextNode | InterpolationNode | CompoundExpressionNode
@@ -462,7 +495,7 @@ export interface RenderSlotCall extends CallExpression {
         string,
         string | ExpressionNode,
         PropsExpression | '{}',
-        TemplateChildNode[]
+        TemplateChildNode[],
       ]
 }
 
@@ -547,17 +580,18 @@ export interface ForIteratorExpression extends FunctionExpression {
 // associated with template nodes, so their source locations are just a stub.
 // Container types like CompoundExpression also don't need a real location.
 export const locStub: SourceLocation = {
-  source: '',
   start: { line: 1, column: 1, offset: 0 },
-  end: { line: 1, column: 1, offset: 0 }
+  end: { line: 1, column: 1, offset: 0 },
+  source: '',
 }
 
 export function createRoot(
   children: TemplateChildNode[],
-  loc = locStub
+  source = '',
 ): RootNode {
   return {
     type: NodeTypes.ROOT,
+    source,
     children,
     helpers: new Set(),
     components: [],
@@ -567,7 +601,7 @@ export function createRoot(
     cached: 0,
     temps: 0,
     codegenNode: undefined,
-    loc
+    loc: locStub,
   }
 }
 
@@ -582,7 +616,7 @@ export function createVNodeCall(
   isBlock: VNodeCall['isBlock'] = false,
   disableTracking: VNodeCall['disableTracking'] = false,
   isComponent: VNodeCall['isComponent'] = false,
-  loc = locStub
+  loc = locStub,
 ): VNodeCall {
   if (context) {
     if (isBlock) {
@@ -607,41 +641,41 @@ export function createVNodeCall(
     isBlock,
     disableTracking,
     isComponent,
-    loc
+    loc,
   }
 }
 
 export function createArrayExpression(
   elements: ArrayExpression['elements'],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): ArrayExpression {
   return {
     type: NodeTypes.JS_ARRAY_EXPRESSION,
     loc,
-    elements
+    elements,
   }
 }
 
 export function createObjectExpression(
   properties: ObjectExpression['properties'],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): ObjectExpression {
   return {
     type: NodeTypes.JS_OBJECT_EXPRESSION,
     loc,
-    properties
+    properties,
   }
 }
 
 export function createObjectProperty(
   key: Property['key'] | string,
-  value: Property['value']
+  value: Property['value'],
 ): Property {
   return {
     type: NodeTypes.JS_PROPERTY,
     loc: locStub,
     key: isString(key) ? createSimpleExpression(key, true) : key,
-    value
+    value,
   }
 }
 
@@ -649,38 +683,38 @@ export function createSimpleExpression(
   content: SimpleExpressionNode['content'],
   isStatic: SimpleExpressionNode['isStatic'] = false,
   loc: SourceLocation = locStub,
-  constType: ConstantTypes = ConstantTypes.NOT_CONSTANT
+  constType: ConstantTypes = ConstantTypes.NOT_CONSTANT,
 ): SimpleExpressionNode {
   return {
     type: NodeTypes.SIMPLE_EXPRESSION,
     loc,
     content,
     isStatic,
-    constType: isStatic ? ConstantTypes.CAN_STRINGIFY : constType
+    constType: isStatic ? ConstantTypes.CAN_STRINGIFY : constType,
   }
 }
 
 export function createInterpolation(
   content: InterpolationNode['content'] | string,
-  loc: SourceLocation
+  loc: SourceLocation,
 ): InterpolationNode {
   return {
     type: NodeTypes.INTERPOLATION,
     loc,
     content: isString(content)
       ? createSimpleExpression(content, false, loc)
-      : content
+      : content,
   }
 }
 
 export function createCompoundExpression(
   children: CompoundExpressionNode['children'],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): CompoundExpressionNode {
   return {
     type: NodeTypes.COMPOUND_EXPRESSION,
     loc,
-    children
+    children,
   }
 }
 
@@ -691,13 +725,13 @@ type InferCodegenNodeType<T> = T extends typeof RENDER_SLOT
 export function createCallExpression<T extends CallExpression['callee']>(
   callee: T,
   args: CallExpression['arguments'] = [],
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): InferCodegenNodeType<T> {
   return {
     type: NodeTypes.JS_CALL_EXPRESSION,
     loc,
     callee,
-    arguments: args
+    arguments: args,
   } as InferCodegenNodeType<T>
 }
 
@@ -706,7 +740,7 @@ export function createFunctionExpression(
   returns: FunctionExpression['returns'] = undefined,
   newline: boolean = false,
   isSlot: boolean = false,
-  loc: SourceLocation = locStub
+  loc: SourceLocation = locStub,
 ): FunctionExpression {
   return {
     type: NodeTypes.JS_FUNCTION_EXPRESSION,
@@ -714,7 +748,7 @@ export function createFunctionExpression(
     returns,
     newline,
     isSlot,
-    loc
+    loc,
   }
 }
 
@@ -722,7 +756,7 @@ export function createConditionalExpression(
   test: ConditionalExpression['test'],
   consequent: ConditionalExpression['consequent'],
   alternate: ConditionalExpression['alternate'],
-  newline = true
+  newline = true,
 ): ConditionalExpression {
   return {
     type: NodeTypes.JS_CONDITIONAL_EXPRESSION,
@@ -730,87 +764,87 @@ export function createConditionalExpression(
     consequent,
     alternate,
     newline,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createCacheExpression(
   index: number,
   value: JSChildNode,
-  isVNode: boolean = false
+  isVNode: boolean = false,
 ): CacheExpression {
   return {
     type: NodeTypes.JS_CACHE_EXPRESSION,
     index,
     value,
     isVNode,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createBlockStatement(
-  body: BlockStatement['body']
+  body: BlockStatement['body'],
 ): BlockStatement {
   return {
     type: NodeTypes.JS_BLOCK_STATEMENT,
     body,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createTemplateLiteral(
-  elements: TemplateLiteral['elements']
+  elements: TemplateLiteral['elements'],
 ): TemplateLiteral {
   return {
     type: NodeTypes.JS_TEMPLATE_LITERAL,
     elements,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createIfStatement(
   test: IfStatement['test'],
   consequent: IfStatement['consequent'],
-  alternate?: IfStatement['alternate']
+  alternate?: IfStatement['alternate'],
 ): IfStatement {
   return {
     type: NodeTypes.JS_IF_STATEMENT,
     test,
     consequent,
     alternate,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createAssignmentExpression(
   left: AssignmentExpression['left'],
-  right: AssignmentExpression['right']
+  right: AssignmentExpression['right'],
 ): AssignmentExpression {
   return {
     type: NodeTypes.JS_ASSIGNMENT_EXPRESSION,
     left,
     right,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createSequenceExpression(
-  expressions: SequenceExpression['expressions']
+  expressions: SequenceExpression['expressions'],
 ): SequenceExpression {
   return {
     type: NodeTypes.JS_SEQUENCE_EXPRESSION,
     expressions,
-    loc: locStub
+    loc: locStub,
   }
 }
 
 export function createReturnStatement(
-  returns: ReturnStatement['returns']
+  returns: ReturnStatement['returns'],
 ): ReturnStatement {
   return {
     type: NodeTypes.JS_RETURN_STATEMENT,
     returns,
-    loc: locStub
+    loc: locStub,
   }
 }
 
@@ -824,7 +858,7 @@ export function getVNodeBlockHelper(ssr: boolean, isComponent: boolean) {
 
 export function convertToBlock(
   node: VNodeCall,
-  { helper, removeHelper, inSSR }: TransformContext
+  { helper, removeHelper, inSSR }: TransformContext,
 ) {
   if (!node.isBlock) {
     node.isBlock = true
diff --git a/packages/compiler-core/src/babelUtils.ts b/packages/compiler-core/src/babelUtils.ts
index b52ce28990a..b12a6d9b47f 100644
--- a/packages/compiler-core/src/babelUtils.ts
+++ b/packages/compiler-core/src/babelUtils.ts
@@ -1,12 +1,12 @@
 // should only use types from @babel/types
 // do not import runtime methods
 import type {
+  BlockStatement,
+  Function,
   Identifier,
   Node,
-  Function,
   ObjectProperty,
-  BlockStatement,
-  Program
+  Program,
 } from '@babel/types'
 import { walk } from 'estree-walker'
 
@@ -17,20 +17,20 @@ export function walkIdentifiers(
     parent: Node,
     parentStack: Node[],
     isReference: boolean,
-    isLocal: boolean
+    isLocal: boolean,
   ) => void,
   includeAll = false,
   parentStack: Node[] = [],
-  knownIds: Record<string, number> = Object.create(null)
+  knownIds: Record<string, number> = Object.create(null),
 ) {
   if (__BROWSER__) {
     return
   }
 
   const rootExp =
-    root.type === 'Program' &&
-    root.body[0].type === 'ExpressionStatement' &&
-    root.body[0].expression
+    root.type === 'Program'
+      ? root.body[0].type === 'ExpressionStatement' && root.body[0].expression
+      : root
 
   walk(root, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
@@ -50,19 +50,29 @@ export function walkIdentifiers(
         }
       } else if (
         node.type === 'ObjectProperty' &&
-        parent!.type === 'ObjectPattern'
+        parent?.type === 'ObjectPattern'
       ) {
         // mark property in destructure pattern
         ;(node as any).inPattern = true
       } else if (isFunctionType(node)) {
-        // walk function expressions and add its arguments to known identifiers
-        // so that we don't prefix them
-        walkFunctionParams(node, id => markScopeIdentifier(node, id, knownIds))
+        if (node.scopeIds) {
+          node.scopeIds.forEach(id => markKnownIds(id, knownIds))
+        } else {
+          // walk function expressions and add its arguments to known identifiers
+          // so that we don't prefix them
+          walkFunctionParams(node, id =>
+            markScopeIdentifier(node, id, knownIds),
+          )
+        }
       } else if (node.type === 'BlockStatement') {
-        // #3445 record block-level local variables
-        walkBlockDeclarations(node, id =>
-          markScopeIdentifier(node, id, knownIds)
-        )
+        if (node.scopeIds) {
+          node.scopeIds.forEach(id => markKnownIds(id, knownIds))
+        } else {
+          // #3445 record block-level local variables
+          walkBlockDeclarations(node, id =>
+            markScopeIdentifier(node, id, knownIds),
+          )
+        }
       }
     },
     leave(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
@@ -75,14 +85,14 @@ export function walkIdentifiers(
           }
         }
       }
-    }
+    },
   })
 }
 
 export function isReferencedIdentifier(
   id: Identifier,
   parent: Node | null,
-  parentStack: Node[]
+  parentStack: Node[],
 ) {
   if (__BROWSER__) {
     return false
@@ -117,7 +127,7 @@ export function isReferencedIdentifier(
 
 export function isInDestructureAssignment(
   parent: Node,
-  parentStack: Node[]
+  parentStack: Node[],
 ): boolean {
   if (
     parent &&
@@ -136,9 +146,22 @@ export function isInDestructureAssignment(
   return false
 }
 
+export function isInNewExpression(parentStack: Node[]): boolean {
+  let i = parentStack.length
+  while (i--) {
+    const p = parentStack[i]
+    if (p.type === 'NewExpression') {
+      return true
+    } else if (p.type !== 'MemberExpression') {
+      break
+    }
+  }
+  return false
+}
+
 export function walkFunctionParams(
   node: Function,
-  onIdent: (id: Identifier) => void
+  onIdent: (id: Identifier) => void,
 ) {
   for (const p of node.params) {
     for (const id of extractIdentifiers(p)) {
@@ -149,7 +172,7 @@ export function walkFunctionParams(
 
 export function walkBlockDeclarations(
   block: BlockStatement | Program,
-  onIdent: (node: Identifier) => void
+  onIdent: (node: Identifier) => void,
 ) {
   for (const stmt of block.body) {
     if (stmt.type === 'VariableDeclaration') {
@@ -165,13 +188,26 @@ export function walkBlockDeclarations(
     ) {
       if (stmt.declare || !stmt.id) continue
       onIdent(stmt.id)
+    } else if (
+      stmt.type === 'ForOfStatement' ||
+      stmt.type === 'ForInStatement' ||
+      stmt.type === 'ForStatement'
+    ) {
+      const variable = stmt.type === 'ForStatement' ? stmt.init : stmt.left
+      if (variable && variable.type === 'VariableDeclaration') {
+        for (const decl of variable.declarations) {
+          for (const id of extractIdentifiers(decl.id)) {
+            onIdent(id)
+          }
+        }
+      }
     }
   }
 }
 
 export function extractIdentifiers(
   param: Node,
-  nodes: Identifier[] = []
+  nodes: Identifier[] = [],
 ): Identifier[] {
   switch (param.type) {
     case 'Identifier':
@@ -214,20 +250,24 @@ export function extractIdentifiers(
   return nodes
 }
 
+function markKnownIds(name: string, knownIds: Record<string, number>) {
+  if (name in knownIds) {
+    knownIds[name]++
+  } else {
+    knownIds[name] = 1
+  }
+}
+
 function markScopeIdentifier(
   node: Node & { scopeIds?: Set<string> },
   child: Identifier,
-  knownIds: Record<string, number>
+  knownIds: Record<string, number>,
 ) {
   const { name } = child
   if (node.scopeIds && node.scopeIds.has(name)) {
     return
   }
-  if (name in knownIds) {
-    knownIds[name]++
-  } else {
-    knownIds[name] = 1
-  }
+  markKnownIds(name, knownIds)
   ;(node.scopeIds || (node.scopeIds = new Set())).add(name)
 }
 
@@ -426,5 +466,13 @@ export const TS_NODE_TYPES = [
   'TSTypeAssertion', // (<number>foo)
   'TSNonNullExpression', // foo!
   'TSInstantiationExpression', // foo<string>
-  'TSSatisfiesExpression' // foo satisfies T
+  '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/codegen.ts b/packages/compiler-core/src/codegen.ts
index 2b88ab0cfbd..4447e67aafa 100644
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -1,60 +1,60 @@
-import { CodegenOptions } from './options'
+import type { CodegenOptions } from './options'
 import {
-  RootNode,
-  TemplateChildNode,
-  TextNode,
-  CommentNode,
-  ExpressionNode,
+  type ArrayExpression,
+  type AssignmentExpression,
+  type CacheExpression,
+  type CallExpression,
+  type CommentNode,
+  type CompoundExpressionNode,
+  type ConditionalExpression,
+  type ExpressionNode,
+  type FunctionExpression,
+  type IfStatement,
+  type InterpolationNode,
+  type JSChildNode,
   NodeTypes,
-  JSChildNode,
-  CallExpression,
-  ArrayExpression,
-  ObjectExpression,
-  Position,
-  InterpolationNode,
-  CompoundExpressionNode,
-  SimpleExpressionNode,
-  FunctionExpression,
-  ConditionalExpression,
-  CacheExpression,
-  locStub,
-  SSRCodegenNode,
-  TemplateLiteral,
-  IfStatement,
-  AssignmentExpression,
-  ReturnStatement,
-  VNodeCall,
-  SequenceExpression,
+  type ObjectExpression,
+  type Position,
+  type ReturnStatement,
+  type RootNode,
+  type SSRCodegenNode,
+  type SequenceExpression,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TemplateLiteral,
+  type TextNode,
+  type VNodeCall,
   getVNodeBlockHelper,
-  getVNodeHelper
+  getVNodeHelper,
+  locStub,
 } from './ast'
-import { SourceMapGenerator, RawSourceMap } from 'source-map-js'
+import { type RawSourceMap, SourceMapGenerator } from 'source-map-js'
 import {
   advancePositionWithMutation,
   assert,
   isSimpleIdentifier,
-  toValidAssetId
+  toValidAssetId,
 } from './utils'
-import { isString, isArray, isSymbol } from '@vue/shared'
+import { isArray, isString, isSymbol } from '@vue/shared'
 import {
-  helperNameMap,
-  TO_DISPLAY_STRING,
+  CREATE_COMMENT,
+  CREATE_ELEMENT_VNODE,
+  CREATE_STATIC,
+  CREATE_TEXT,
   CREATE_VNODE,
+  OPEN_BLOCK,
+  POP_SCOPE_ID,
+  PUSH_SCOPE_ID,
   RESOLVE_COMPONENT,
   RESOLVE_DIRECTIVE,
+  RESOLVE_FILTER,
   SET_BLOCK_TRACKING,
-  CREATE_COMMENT,
-  CREATE_TEXT,
-  PUSH_SCOPE_ID,
-  POP_SCOPE_ID,
-  WITH_DIRECTIVES,
-  CREATE_ELEMENT_VNODE,
-  OPEN_BLOCK,
-  CREATE_STATIC,
+  TO_DISPLAY_STRING,
   WITH_CTX,
-  RESOLVE_FILTER
+  WITH_DIRECTIVES,
+  helperNameMap,
 } from './runtimeHelpers'
-import { ImportItem } from './transform'
+import type { ImportItem } from './transform'
 
 const PURE_ANNOTATION = `/*#__PURE__*/`
 
@@ -69,6 +69,13 @@ export interface CodegenResult {
   map?: RawSourceMap
 }
 
+enum NewlineType {
+  Start = 0,
+  End = -1,
+  None = -2,
+  Unknown = -3,
+}
+
 export interface CodegenContext
   extends Omit<Required<CodegenOptions>, 'bindingMetadata' | 'inline'> {
   source: string
@@ -80,7 +87,7 @@ export interface CodegenContext
   pure: boolean
   map?: SourceMapGenerator
   helper(key: symbol): string
-  push(code: string, node?: CodegenNode): void
+  push(code: string, newlineIndex?: number, node?: CodegenNode): void
   indent(): void
   deindent(withoutNewLine?: boolean): void
   newline(): void
@@ -100,8 +107,8 @@ function createCodegenContext(
     ssrRuntimeModuleName = 'vue/server-renderer',
     ssr = false,
     isTS = false,
-    inSSR = false
-  }: CodegenOptions
+    inSSR = false,
+  }: CodegenOptions,
 ): CodegenContext {
   const context: CodegenContext = {
     mode,
@@ -116,7 +123,7 @@ function createCodegenContext(
     ssr,
     isTS,
     inSSR,
-    source: ast.loc.source,
+    source: ast.source,
     code: ``,
     column: 1,
     line: 1,
@@ -127,7 +134,7 @@ function createCodegenContext(
     helper(key) {
       return `_${helperNameMap[key]}`
     },
-    push(code, node) {
+    push(code, newlineIndex = NewlineType.None, node) {
       context.code += code
       if (!__BROWSER__ && context.map) {
         if (node) {
@@ -140,7 +147,41 @@ function createCodegenContext(
           }
           addMapping(node.loc.start, name)
         }
-        advancePositionWithMutation(context, code)
+        if (newlineIndex === NewlineType.Unknown) {
+          // multiple newlines, full iteration
+          advancePositionWithMutation(context, code)
+        } else {
+          // fast paths
+          context.offset += code.length
+          if (newlineIndex === NewlineType.None) {
+            // no newlines; fast path to avoid newline detection
+            if (__TEST__ && code.includes('\n')) {
+              throw new Error(
+                `CodegenContext.push() called newlineIndex: none, but contains` +
+                  `newlines: ${code.replace(/\n/g, '\\n')}`,
+              )
+            }
+            context.column += code.length
+          } else {
+            // single newline at known index
+            if (newlineIndex === NewlineType.End) {
+              newlineIndex = code.length - 1
+            }
+            if (
+              __TEST__ &&
+              (code.charAt(newlineIndex) !== '\n' ||
+                code.slice(0, newlineIndex).includes('\n') ||
+                code.slice(newlineIndex + 1).includes('\n'))
+            ) {
+              throw new Error(
+                `CodegenContext.push() called with newlineIndex: ${newlineIndex} ` +
+                  `but does not conform: ${code.replace(/\n/g, '\\n')}`,
+              )
+            }
+            context.line++
+            context.column = code.length - newlineIndex
+          }
+        }
         if (node && node.loc !== locStub) {
           addMapping(node.loc.end)
         }
@@ -158,32 +199,35 @@ function createCodegenContext(
     },
     newline() {
       newline(context.indentLevel)
-    }
+    },
   }
 
   function newline(n: number) {
-    context.push('\n' + `  `.repeat(n))
+    context.push('\n' + `  `.repeat(n), NewlineType.Start)
   }
 
-  function addMapping(loc: Position, name?: string) {
-    context.map!.addMapping({
+  function addMapping(loc: Position, name: string | null = null) {
+    // we use the private property to directly add the mapping
+    // because the addMapping() implementation in source-map-js has a bunch of
+    // unnecessary arg and validation checks that are pure overhead in our case.
+    const { _names, _mappings } = context.map!
+    if (name !== null && !_names.has(name)) _names.add(name)
+    _mappings.add({
+      originalLine: loc.line,
+      originalColumn: loc.column - 1, // source-map column is 0 based
+      generatedLine: context.line,
+      generatedColumn: context.column - 1,
+      source: filename,
+      // @ts-expect-error it is possible to be null
       name,
-      source: context.filename,
-      original: {
-        line: loc.line,
-        column: loc.column - 1 // source-map column is 0 based
-      },
-      generated: {
-        line: context.line,
-        column: context.column - 1
-      }
     })
   }
 
   if (!__BROWSER__ && sourceMap) {
     // lazy require source-map implementation, only in non-browser builds
     context.map = new SourceMapGenerator()
-    context.map!.setSourceContent(filename, context.source)
+    context.map.setSourceContent(filename, context.source)
+    context.map._sources.add(filename)
   }
 
   return context
@@ -193,7 +237,7 @@ export function generate(
   ast: RootNode,
   options: CodegenOptions & {
     onContextCreated?: (context: CodegenContext) => void
-  } = {}
+  } = {},
 ): CodegenResult {
   const context = createCodegenContext(ast, options)
   if (options.onContextCreated) options.onContextCreated(context)
@@ -205,7 +249,7 @@ export function generate(
     deindent,
     newline,
     scopeId,
-    ssr
+    ssr,
   } = context
 
   const helpers = Array.from(ast.helpers)
@@ -250,8 +294,10 @@ export function generate(
     // function mode const declarations should be inside with block
     // also they should be renamed to avoid collision with user properties
     if (hasHelpers) {
-      push(`const { ${helpers.map(aliasHelper).join(', ')} } = _Vue`)
-      push(`\n`)
+      push(
+        `const { ${helpers.map(aliasHelper).join(', ')} } = _Vue\n`,
+        NewlineType.End,
+      )
       newline()
     }
   }
@@ -282,7 +328,7 @@ export function generate(
     }
   }
   if (ast.components.length || ast.directives.length || ast.temps) {
-    push(`\n`)
+    push(`\n`, NewlineType.Start)
     newline()
   }
 
@@ -308,8 +354,7 @@ export function generate(
     ast,
     code: context.code,
     preamble: isSetupInlined ? preambleContext.code : ``,
-    // SourceMapGenerator does have toJSON() method but it's not in the types
-    map: context.map ? (context.map as any).toJSON() : undefined
+    map: context.map ? context.map.toJSON() : undefined,
   }
 }
 
@@ -321,7 +366,7 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
     newline,
     runtimeModuleName,
     runtimeGlobalName,
-    ssrRuntimeModuleName
+    ssrRuntimeModuleName,
   } = context
   const VueBinding =
     !__BROWSER__ && ssr
@@ -334,11 +379,14 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
   const helpers = Array.from(ast.helpers)
   if (helpers.length > 0) {
     if (!__BROWSER__ && prefixIdentifiers) {
-      push(`const { ${helpers.map(aliasHelper).join(', ')} } = ${VueBinding}\n`)
+      push(
+        `const { ${helpers.map(aliasHelper).join(', ')} } = ${VueBinding}\n`,
+        NewlineType.End,
+      )
     } else {
       // "with" mode.
       // save Vue in a separate variable to avoid collision
-      push(`const _Vue = ${VueBinding}\n`)
+      push(`const _Vue = ${VueBinding}\n`, NewlineType.End)
       // in "with" mode, helpers are declared inside the with block to avoid
       // has check cost, but hoists are lifted out of the function - we need
       // to provide the helper here.
@@ -348,12 +396,12 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
           CREATE_ELEMENT_VNODE,
           CREATE_COMMENT,
           CREATE_TEXT,
-          CREATE_STATIC
+          CREATE_STATIC,
         ]
           .filter(helper => helpers.includes(helper))
           .map(aliasHelper)
           .join(', ')
-        push(`const { ${staticHelpers} } = _Vue\n`)
+        push(`const { ${staticHelpers} } = _Vue\n`, NewlineType.End)
       }
     }
   }
@@ -363,7 +411,8 @@ function genFunctionPreamble(ast: RootNode, context: CodegenContext) {
     push(
       `const { ${ast.ssrHelpers
         .map(aliasHelper)
-        .join(', ')} } = require("${ssrRuntimeModuleName}")\n`
+        .join(', ')} } = require("${ssrRuntimeModuleName}")\n`,
+      NewlineType.End,
     )
   }
   genHoists(ast.hoists, context)
@@ -375,14 +424,14 @@ function genModulePreamble(
   ast: RootNode,
   context: CodegenContext,
   genScopeId: boolean,
-  inline?: boolean
+  inline?: boolean,
 ) {
   const {
     push,
     newline,
     optimizeImports,
     runtimeModuleName,
-    ssrRuntimeModuleName
+    ssrRuntimeModuleName,
   } = context
 
   if (genScopeId && ast.hoists.length) {
@@ -402,18 +451,21 @@ function genModulePreamble(
       push(
         `import { ${helpers
           .map(s => helperNameMap[s])
-          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`
+          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`,
+        NewlineType.End,
       )
       push(
         `\n// Binding optimization for webpack code-split\nconst ${helpers
           .map(s => `_${helperNameMap[s]} = ${helperNameMap[s]}`)
-          .join(', ')}\n`
+          .join(', ')}\n`,
+        NewlineType.End,
       )
     } else {
       push(
         `import { ${helpers
           .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
-          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`
+          .join(', ')} } from ${JSON.stringify(runtimeModuleName)}\n`,
+        NewlineType.End,
       )
     }
   }
@@ -422,7 +474,8 @@ function genModulePreamble(
     push(
       `import { ${ast.ssrHelpers
         .map(s => `${helperNameMap[s]} as _${helperNameMap[s]}`)
-        .join(', ')} } from "${ssrRuntimeModuleName}"\n`
+        .join(', ')} } from "${ssrRuntimeModuleName}"\n`,
+      NewlineType.End,
     )
   }
 
@@ -442,14 +495,14 @@ function genModulePreamble(
 function genAssets(
   assets: string[],
   type: 'component' | 'directive' | 'filter',
-  { helper, push, newline, isTS }: CodegenContext
+  { helper, push, newline, isTS }: CodegenContext,
 ) {
   const resolver = helper(
     __COMPAT__ && type === 'filter'
       ? RESOLVE_FILTER
       : type === 'component'
-      ? RESOLVE_COMPONENT
-      : RESOLVE_DIRECTIVE
+        ? RESOLVE_COMPONENT
+        : RESOLVE_DIRECTIVE,
   )
   for (let i = 0; i < assets.length; i++) {
     let id = assets[i]
@@ -461,7 +514,7 @@ function genAssets(
     push(
       `const ${toValidAssetId(id, type)} = ${resolver}(${JSON.stringify(id)}${
         maybeSelfReference ? `, true` : ``
-      })${isTS ? `!` : ``}`
+      })${isTS ? `!` : ``}`,
     )
     if (i < assets.length - 1) {
       newline()
@@ -482,8 +535,8 @@ function genHoists(hoists: (JSChildNode | null)[], context: CodegenContext) {
   if (genScopeId) {
     push(
       `const _withScopeId = n => (${helper(
-        PUSH_SCOPE_ID
-      )}("${scopeId}"),n=n(),${helper(POP_SCOPE_ID)}(),n)`
+        PUSH_SCOPE_ID,
+      )}("${scopeId}"),n=n(),${helper(POP_SCOPE_ID)}(),n)`,
     )
     newline()
   }
@@ -495,7 +548,7 @@ function genHoists(hoists: (JSChildNode | null)[], context: CodegenContext) {
       push(
         `const _hoisted_${i + 1} = ${
           needScopeIdWrapper ? `${PURE_ANNOTATION} _withScopeId(() => ` : ``
-        }`
+        }`,
       )
       genNode(exp, context)
       if (needScopeIdWrapper) {
@@ -532,7 +585,7 @@ function isText(n: string | CodegenNode) {
 
 function genNodeListAsArray(
   nodes: (string | CodegenNode | TemplateChildNode[])[],
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const multilines =
     nodes.length > 3 ||
@@ -548,13 +601,13 @@ function genNodeList(
   nodes: (string | symbol | CodegenNode | TemplateChildNode[])[],
   context: CodegenContext,
   multilines: boolean = false,
-  comma: boolean = true
+  comma: boolean = true,
 ) {
   const { push, newline } = context
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i]
     if (isString(node)) {
-      push(node)
+      push(node, NewlineType.Unknown)
     } else if (isArray(node)) {
       genNodeListAsArray(node, context)
     } else {
@@ -573,7 +626,7 @@ function genNodeList(
 
 function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
   if (isString(node)) {
-    context.push(node)
+    context.push(node, NewlineType.Unknown)
     return
   }
   if (isSymbol(node)) {
@@ -588,7 +641,7 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
         assert(
           node.codegenNode != null,
           `Codegen node is missing for element/if/for node. ` +
-            `Apply appropriate transforms first.`
+            `Apply appropriate transforms first.`,
         )
       genNode(node.codegenNode!, context)
       break
@@ -669,14 +722,18 @@ function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
 
 function genText(
   node: TextNode | SimpleExpressionNode,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
-  context.push(JSON.stringify(node.content), node)
+  context.push(JSON.stringify(node.content), NewlineType.Unknown, node)
 }
 
 function genExpression(node: SimpleExpressionNode, context: CodegenContext) {
   const { content, isStatic } = node
-  context.push(isStatic ? JSON.stringify(content) : content, node)
+  context.push(
+    isStatic ? JSON.stringify(content) : content,
+    NewlineType.Unknown,
+    node,
+  )
 }
 
 function genInterpolation(node: InterpolationNode, context: CodegenContext) {
@@ -689,12 +746,12 @@ function genInterpolation(node: InterpolationNode, context: CodegenContext) {
 
 function genCompoundExpression(
   node: CompoundExpressionNode,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   for (let i = 0; i < node.children!.length; i++) {
     const child = node.children![i]
     if (isString(child)) {
-      context.push(child)
+      context.push(child, NewlineType.Unknown)
     } else {
       genNode(child, context)
     }
@@ -703,7 +760,7 @@ function genCompoundExpression(
 
 function genExpressionAsPropertyKey(
   node: ExpressionNode,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const { push } = context
   if (node.type === NodeTypes.COMPOUND_EXPRESSION) {
@@ -715,9 +772,9 @@ function genExpressionAsPropertyKey(
     const text = isSimpleIdentifier(node.content)
       ? node.content
       : JSON.stringify(node.content)
-    push(text, node)
+    push(text, NewlineType.None, node)
   } else {
-    push(`[${node.content}]`, node)
+    push(`[${node.content}]`, NewlineType.Unknown, node)
   }
 }
 
@@ -726,7 +783,11 @@ function genComment(node: CommentNode, context: CodegenContext) {
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node)
+  push(
+    `${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`,
+    NewlineType.Unknown,
+    node,
+  )
 }
 
 function genVNodeCall(node: VNodeCall, context: CodegenContext) {
@@ -740,7 +801,7 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
     directives,
     isBlock,
     disableTracking,
-    isComponent
+    isComponent,
   } = node
   if (directives) {
     push(helper(WITH_DIRECTIVES) + `(`)
@@ -754,10 +815,10 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
   const callHelper: symbol = isBlock
     ? getVNodeBlockHelper(context.inSSR, isComponent)
     : getVNodeHelper(context.inSSR, isComponent)
-  push(helper(callHelper) + `(`, node)
+  push(helper(callHelper) + `(`, NewlineType.None, node)
   genNodeList(
     genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
-    context
+    context,
   )
   push(`)`)
   if (isBlock) {
@@ -785,7 +846,7 @@ function genCallExpression(node: CallExpression, context: CodegenContext) {
   if (pure) {
     push(PURE_ANNOTATION)
   }
-  push(callee + `(`, node)
+  push(callee + `(`, NewlineType.None, node)
   genNodeList(node.arguments, context)
   push(`)`)
 }
@@ -794,7 +855,7 @@ function genObjectExpression(node: ObjectExpression, context: CodegenContext) {
   const { push, indent, deindent, newline } = context
   const { properties } = node
   if (!properties.length) {
-    push(`{}`, node)
+    push(`{}`, NewlineType.None, node)
     return
   }
   const multilines =
@@ -826,7 +887,7 @@ function genArrayExpression(node: ArrayExpression, context: CodegenContext) {
 
 function genFunctionExpression(
   node: FunctionExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const { push, indent, deindent } = context
   const { params, returns, body, newline, isSlot } = node
@@ -834,7 +895,7 @@ function genFunctionExpression(
     // wrap slot functions with owner context
     push(`_${helperNameMap[WITH_CTX]}(`)
   }
-  push(`(`, node)
+  push(`(`, NewlineType.None, node)
   if (isArray(params)) {
     genNodeList(params, context)
   } else if (params) {
@@ -871,7 +932,7 @@ function genFunctionExpression(
 
 function genConditionalExpression(
   node: ConditionalExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   const { test, consequent, alternate, newline: needNewline } = node
   const { push, indent, deindent, newline } = context
@@ -934,7 +995,7 @@ function genTemplateLiteral(node: TemplateLiteral, context: CodegenContext) {
   for (let i = 0; i < l; i++) {
     const e = node.elements[i]
     if (isString(e)) {
-      push(e.replace(/(`|\$|\\)/g, '\\$1'))
+      push(e.replace(/(`|\$|\\)/g, '\\$1'), NewlineType.Unknown)
     } else {
       push('${')
       if (multilines) indent()
@@ -972,7 +1033,7 @@ function genIfStatement(node: IfStatement, context: CodegenContext) {
 
 function genAssignmentExpression(
   node: AssignmentExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   genNode(node.left, context)
   context.push(` = `)
@@ -981,7 +1042,7 @@ function genAssignmentExpression(
 
 function genSequenceExpression(
   node: SequenceExpression,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   context.push(`(`)
   genNodeList(node.expressions, context)
@@ -990,7 +1051,7 @@ function genSequenceExpression(
 
 function genReturnStatement(
   { returns }: ReturnStatement,
-  context: CodegenContext
+  context: CodegenContext,
 ) {
   context.push(`return `)
   if (isArray(returns)) {
diff --git a/packages/compiler-core/src/compat/compatConfig.ts b/packages/compiler-core/src/compat/compatConfig.ts
index dcb304263b4..bf06f4aae0f 100644
--- a/packages/compiler-core/src/compat/compatConfig.ts
+++ b/packages/compiler-core/src/compat/compatConfig.ts
@@ -1,7 +1,7 @@
-import { SourceLocation } from '../ast'
-import { CompilerError } from '../errors'
-import { ParserContext } from '../parse'
-import { TransformContext } from '../transform'
+import type { SourceLocation } from '../ast'
+import type { CompilerError } from '../errors'
+import type { MergedParserOptions } from '../parser'
+import type { TransformContext } from '../transform'
 
 export type CompilerCompatConfig = Partial<
   Record<CompilerDeprecationTypes, boolean | 'suppress-warning'>
@@ -13,16 +13,15 @@ export interface CompilerCompatOptions {
   compatConfig?: CompilerCompatConfig
 }
 
-export const enum CompilerDeprecationTypes {
+export enum CompilerDeprecationTypes {
   COMPILER_IS_ON_ELEMENT = 'COMPILER_IS_ON_ELEMENT',
   COMPILER_V_BIND_SYNC = 'COMPILER_V_BIND_SYNC',
-  COMPILER_V_BIND_PROP = 'COMPILER_V_BIND_PROP',
   COMPILER_V_BIND_OBJECT_ORDER = 'COMPILER_V_BIND_OBJECT_ORDER',
   COMPILER_V_ON_NATIVE = 'COMPILER_V_ON_NATIVE',
   COMPILER_V_IF_V_FOR_PRECEDENCE = 'COMPILER_V_IF_V_FOR_PRECEDENCE',
   COMPILER_NATIVE_TEMPLATE = 'COMPILER_NATIVE_TEMPLATE',
   COMPILER_INLINE_TEMPLATE = 'COMPILER_INLINE_TEMPLATE',
-  COMPILER_FILTERS = 'COMPILER_FILTER'
+  COMPILER_FILTERS = 'COMPILER_FILTERS',
 }
 
 type DeprecationData = {
@@ -36,7 +35,7 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `Platform-native elements with "is" prop will no longer be ` +
       `treated as components in Vue 3 unless the "is" value is explicitly ` +
       `prefixed with "vue:".`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_BIND_SYNC]: {
@@ -44,13 +43,7 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `.sync modifier for v-bind has been removed. Use v-model with ` +
       `argument instead. \`v-bind:${key}.sync\` should be changed to ` +
       `\`v-model:${key}\`.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`
-  },
-
-  [CompilerDeprecationTypes.COMPILER_V_BIND_PROP]: {
-    message:
-      `.prop modifier for v-bind has been removed and no longer necessary. ` +
-      `Vue 3 will automatically set a binding as DOM property when appropriate.`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER]: {
@@ -60,12 +53,12 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `that appears before v-bind in the case of conflict. ` +
       `To retain 2.x behavior, move v-bind to make it the first attribute. ` +
       `You can also suppress this warning if the usage is intended.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_ON_NATIVE]: {
     message: `.native modifier for v-on has been removed as is no longer necessary.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE]: {
@@ -75,18 +68,18 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `access to v-for scope variables. It is best to avoid the ambiguity ` +
       `with <template> tags or use a computed property that filters v-for ` +
       `data source.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE]: {
     message:
       `<template> with no special directives will render as a native template ` +
-      `element instead of its inner content in Vue 3.`
+      `element instead of its inner content in Vue 3.`,
   },
 
   [CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE]: {
     message: `"inline-template" has been removed in Vue 3.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html`,
   },
 
   [CompilerDeprecationTypes.COMPILER_FILTERS]: {
@@ -94,18 +87,15 @@ const deprecationData: Record<CompilerDeprecationTypes, DeprecationData> = {
       `filters have been removed in Vue 3. ` +
       `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
       `Use method calls or computed properties instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`
-  }
+    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`,
+  },
 }
 
 function getCompatValue(
   key: CompilerDeprecationTypes | 'MODE',
-  context: ParserContext | TransformContext
+  { compatConfig }: MergedParserOptions | TransformContext,
 ) {
-  const config = (context as ParserContext).options
-    ? (context as ParserContext).options.compatConfig
-    : (context as TransformContext).compatConfig
-  const value = config && config[key]
+  const value = compatConfig && compatConfig[key]
   if (key === 'MODE') {
     return value || 3 // compiler defaults to v3 behavior
   } else {
@@ -115,7 +105,7 @@ function getCompatValue(
 
 export function isCompatEnabled(
   key: CompilerDeprecationTypes,
-  context: ParserContext | TransformContext
+  context: MergedParserOptions | TransformContext,
 ) {
   const mode = getCompatValue('MODE', context)
   const value = getCompatValue(key, context)
@@ -126,7 +116,7 @@ export function isCompatEnabled(
 
 export function checkCompatEnabled(
   key: CompilerDeprecationTypes,
-  context: ParserContext | TransformContext,
+  context: MergedParserOptions | TransformContext,
   loc: SourceLocation | null,
   ...args: any[]
 ): boolean {
@@ -139,7 +129,7 @@ export function checkCompatEnabled(
 
 export function warnDeprecation(
   key: CompilerDeprecationTypes,
-  context: ParserContext | TransformContext,
+  context: MergedParserOptions | TransformContext,
   loc: SourceLocation | null,
   ...args: any[]
 ) {
diff --git a/packages/compiler-core/src/compat/transformFilter.ts b/packages/compiler-core/src/compat/transformFilter.ts
index 77331db4d80..86d11f52a60 100644
--- a/packages/compiler-core/src/compat/transformFilter.ts
+++ b/packages/compiler-core/src/compat/transformFilter.ts
@@ -1,17 +1,17 @@
 import { RESOLVE_FILTER } from '../runtimeHelpers'
 import {
-  ExpressionNode,
-  AttributeNode,
-  DirectiveNode,
+  type AttributeNode,
+  type DirectiveNode,
+  type ExpressionNode,
   NodeTypes,
-  SimpleExpressionNode
+  type SimpleExpressionNode,
 } from '../ast'
 import {
   CompilerDeprecationTypes,
   isCompatEnabled,
-  warnDeprecation
+  warnDeprecation,
 } from './compatConfig'
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import { toValidAssetId } from '../utils'
 
 const validDivisionCharRE = /[\w).+\-_$\]]/
@@ -162,7 +162,7 @@ function parseFilter(node: SimpleExpressionNode, context: TransformContext) {
       warnDeprecation(
         CompilerDeprecationTypes.COMPILER_FILTERS,
         context,
-        node.loc
+        node.loc,
       )
     for (i = 0; i < filters.length; i++) {
       expression = wrapFilter(expression, filters[i], context)
@@ -174,7 +174,7 @@ function parseFilter(node: SimpleExpressionNode, context: TransformContext) {
 function wrapFilter(
   exp: string,
   filter: string,
-  context: TransformContext
+  context: TransformContext,
 ): string {
   context.helper(RESOLVE_FILTER)
   const i = filter.indexOf('(')
diff --git a/packages/compiler-core/src/compile.ts b/packages/compiler-core/src/compile.ts
index 95e3718964a..854c2bc6d69 100644
--- a/packages/compiler-core/src/compile.ts
+++ b/packages/compiler-core/src/compile.ts
@@ -1,9 +1,13 @@
-import { CompilerOptions } from './options'
-import { baseParse } from './parse'
-import { transform, NodeTransform, DirectiveTransform } from './transform'
-import { generate, CodegenResult } from './codegen'
-import { RootNode } from './ast'
-import { isString, extend } from '@vue/shared'
+import type { CompilerOptions } from './options'
+import { baseParse } from './parser'
+import {
+  type DirectiveTransform,
+  type NodeTransform,
+  transform,
+} from './transform'
+import { type CodegenResult, generate } from './codegen'
+import type { RootNode } from './ast'
+import { extend, isString } from '@vue/shared'
 import { transformIf } from './transforms/vIf'
 import { transformFor } from './transforms/vFor'
 import { transformExpression } from './transforms/transformExpression'
@@ -16,16 +20,16 @@ import { transformText } from './transforms/transformText'
 import { transformOnce } from './transforms/vOnce'
 import { transformModel } from './transforms/vModel'
 import { transformFilter } from './compat/transformFilter'
-import { defaultOnError, createCompilerError, ErrorCodes } from './errors'
+import { ErrorCodes, createCompilerError, defaultOnError } from './errors'
 import { transformMemo } from './transforms/vMemo'
 
 export type TransformPreset = [
   NodeTransform[],
-  Record<string, DirectiveTransform>
+  Record<string, DirectiveTransform>,
 ]
 
 export function getBaseTransformPreset(
-  prefixIdentifiers?: boolean
+  prefixIdentifiers?: boolean,
 ): TransformPreset {
   return [
     [
@@ -38,29 +42,29 @@ export function getBaseTransformPreset(
         ? [
             // order is important
             trackVForSlotScopes,
-            transformExpression
+            transformExpression,
           ]
         : __BROWSER__ && __DEV__
-        ? [transformExpression]
-        : []),
+          ? [transformExpression]
+          : []),
       transformSlotOutlet,
       transformElement,
       trackSlotScopes,
-      transformText
+      transformText,
     ],
     {
       on: transformOn,
       bind: transformBind,
-      model: transformModel
-    }
+      model: transformModel,
+    },
   ]
 }
 
 // we name it `baseCompile` so that higher order compilers like
 // @vue/compiler-dom can export `compile` while re-exporting everything else.
 export function baseCompile(
-  template: string | RootNode,
-  options: CompilerOptions = {}
+  source: string | RootNode,
+  options: CompilerOptions = {},
 ): CodegenResult {
   const onError = options.onError || defaultOnError
   const isModuleMode = options.mode === 'module'
@@ -82,7 +86,10 @@ export function baseCompile(
     onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
   }
 
-  const ast = isString(template) ? baseParse(template, options) : template
+  const resolvedOptions = extend({}, options, {
+    prefixIdentifiers,
+  })
+  const ast = isString(source) ? baseParse(source, resolvedOptions) : source
   const [nodeTransforms, directiveTransforms] =
     getBaseTransformPreset(prefixIdentifiers)
 
@@ -95,24 +102,18 @@ export function baseCompile(
 
   transform(
     ast,
-    extend({}, options, {
-      prefixIdentifiers,
+    extend({}, resolvedOptions, {
       nodeTransforms: [
         ...nodeTransforms,
-        ...(options.nodeTransforms || []) // user transforms
+        ...(options.nodeTransforms || []), // user transforms
       ],
       directiveTransforms: extend(
         {},
         directiveTransforms,
-        options.directiveTransforms || {} // user transforms
-      )
-    })
+        options.directiveTransforms || {}, // user transforms
+      ),
+    }),
   )
 
-  return generate(
-    ast,
-    extend({}, options, {
-      prefixIdentifiers
-    })
-  )
+  return generate(ast, resolvedOptions)
 }
diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
index 36ab783edbe..a536392b9a3 100644
--- a/packages/compiler-core/src/errors.ts
+++ b/packages/compiler-core/src/errors.ts
@@ -1,4 +1,4 @@
-import { SourceLocation } from './ast'
+import type { SourceLocation } from './ast'
 
 export interface CompilerError extends SyntaxError {
   code: number | string
@@ -25,19 +25,19 @@ export function createCompilerError<T extends number>(
   code: T,
   loc?: SourceLocation,
   messages?: { [code: number]: string },
-  additionalMessage?: string
+  additionalMessage?: string,
 ): InferCompilerError<T> {
   const msg =
     __DEV__ || !__BROWSER__
       ? (messages || errorMessages)[code] + (additionalMessage || ``)
-      : code
+      : `https://vuejs.org/error-reference/#compiler-${code}`
   const error = new SyntaxError(String(msg)) as InferCompilerError<T>
   error.code = code
   error.loc = loc
   return error
 }
 
-export const enum ErrorCodes {
+export enum ErrorCodes {
   // parse errors
   ABRUPT_CLOSING_OF_EMPTY_COMMENT,
   CDATA_IN_HTML_CONTENT,
@@ -96,15 +96,16 @@ export const enum ErrorCodes {
   X_MODULE_MODE_NOT_SUPPORTED,
   X_CACHE_HANDLER_NOT_SUPPORTED,
   X_SCOPE_ID_NOT_SUPPORTED,
+  X_VNODE_HOOKS,
 
-  // deprecations
-  DEPRECATION_VNODE_HOOKS,
-  DEPRECATION_V_IS,
+  // placed here to preserve order for the current minor
+  // TODO adjust order in 3.5
+  X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
 
   // Special value for higher-order compilers to pick up the last code
   // to avoid collision of error codes. This should always be kept as the last
   // item.
-  __EXTEND_POINT__
+  __EXTEND_POINT__,
 }
 
 export const errorMessages: Record<ErrorCodes, string> = {
@@ -159,6 +160,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION]: `v-for has invalid expression.`,
   [ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT]: `<template v-for> key should be placed on the <template> tag.`,
   [ErrorCodes.X_V_BIND_NO_EXPRESSION]: `v-bind is missing expression.`,
+  [ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT]: `v-bind with same-name shorthand only allows static argument.`,
   [ErrorCodes.X_V_ON_NO_EXPRESSION]: `v-on is missing expression.`,
   [ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET]: `Unexpected custom directive on <slot> outlet.`,
   [ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE]:
@@ -176,6 +178,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_V_MODEL_ON_PROPS]: `v-model cannot be used on a prop, because local prop bindings are not writable.\nUse a v-bind binding combined with a v-on listener that emits update:x event instead.`,
   [ErrorCodes.X_INVALID_EXPRESSION]: `Error parsing JavaScript expression: `,
   [ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN]: `<KeepAlive> expects exactly one child component.`,
+  [ErrorCodes.X_VNODE_HOOKS]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
@@ -183,10 +186,6 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
   [ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED]: `"scopeId" option is only supported in module mode.`,
 
-  // deprecations
-  [ErrorCodes.DEPRECATION_VNODE_HOOKS]: `@vnode-* hooks in templates are deprecated. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support will be removed in 3.4.`,
-  [ErrorCodes.DEPRECATION_V_IS]: `v-is="component-name" has been deprecated. Use is="vue:component-name" instead. v-is support will be removed in 3.4.`,
-
   // just to fulfill types
-  [ErrorCodes.__EXTEND_POINT__]: ``
+  [ErrorCodes.__EXTEND_POINT__]: ``,
 }
diff --git a/packages/compiler-core/src/index.ts b/packages/compiler-core/src/index.ts
index 4898a181dfc..ef4e54cf2d7 100644
--- a/packages/compiler-core/src/index.ts
+++ b/packages/compiler-core/src/index.ts
@@ -8,9 +8,9 @@ export {
   type CodegenOptions,
   type HoistTransform,
   type BindingMetadata,
-  BindingTypes
+  BindingTypes,
 } from './options'
-export { baseParse, TextModes } from './parse'
+export { baseParse } from './parser'
 export {
   transform,
   type TransformContext,
@@ -19,14 +19,15 @@ export {
   createStructuralDirectiveTransform,
   type NodeTransform,
   type StructuralDirectiveTransform,
-  type DirectiveTransform
+  type DirectiveTransform,
 } from './transform'
 export { generate, type CodegenContext, type CodegenResult } from './codegen'
 export {
   ErrorCodes,
+  errorMessages,
   createCompilerError,
   type CoreCompilerError,
-  type CompilerError
+  type CompilerError,
 } from './errors'
 
 export * from './ast'
@@ -44,20 +45,20 @@ export { processFor, createForLoopParams } from './transforms/vFor'
 export {
   transformExpression,
   processExpression,
-  stringifyExpression
+  stringifyExpression,
 } from './transforms/transformExpression'
 export {
   buildSlots,
   type SlotFnBuilder,
   trackVForSlotScopes,
-  trackSlotScopes
+  trackSlotScopes,
 } from './transforms/vSlot'
 export {
   transformElement,
   resolveComponentType,
   buildProps,
   buildDirectiveArgs,
-  type PropsExpression
+  type PropsExpression,
 } from './transforms/transformElement'
 export { processSlotOutlet } from './transforms/transformSlotOutlet'
 export { getConstantType } from './transforms/hoistStatic'
@@ -67,5 +68,5 @@ export { generateCodeFrame } from '@vue/shared'
 export {
   checkCompatEnabled,
   warnDeprecation,
-  CompilerDeprecationTypes
+  CompilerDeprecationTypes,
 } from './compat/compatConfig'
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
index 65bbcb36dd6..8a989a8c659 100644
--- a/packages/compiler-core/src/options.ts
+++ b/packages/compiler-core/src/options.ts
@@ -1,13 +1,18 @@
-import { ElementNode, Namespace, TemplateChildNode, ParentNode } from './ast'
-import { TextModes } from './parse'
-import { CompilerError } from './errors'
-import {
-  NodeTransform,
+import type {
+  ElementNode,
+  Namespace,
+  Namespaces,
+  ParentNode,
+  TemplateChildNode,
+} from './ast'
+import type { CompilerError } from './errors'
+import type {
   DirectiveTransform,
-  TransformContext
+  NodeTransform,
+  TransformContext,
 } from './transform'
-import { CompilerCompatOptions } from './compat/compatConfig'
-import { ParserPlugin } from '@babel/parser'
+import type { CompilerCompatOptions } from './compat/compatConfig'
+import type { ParserPlugin } from '@babel/parser'
 
 export interface ErrorHandlingOptions {
   onWarn?: (warning: CompilerError) => void
@@ -17,6 +22,24 @@ export interface ErrorHandlingOptions {
 export interface ParserOptions
   extends ErrorHandlingOptions,
     CompilerCompatOptions {
+  /**
+   * Base mode is platform agnostic and only parses HTML-like template syntax,
+   * treating all tags the same way. Specific tag parsing behavior can be
+   * configured by higher-level compilers.
+   *
+   * HTML mode adds additional logic for handling special parsing behavior in
+   * `<script>`, `<style>`,`<title>` and `<textarea>`.
+   * The logic is handled inside compiler-core for efficiency.
+   *
+   * SFC mode treats content of all root-level tags except `<template>` as plain
+   * text.
+   */
+  parseMode?: 'base' | 'html' | 'sfc'
+  /**
+   * Specify the root namespace to use when parsing a template.
+   * Defaults to `Namespaces.HTML` (0).
+   */
+  ns?: Namespaces
   /**
    * e.g. platform native elements, e.g. `<div>` for browsers
    */
@@ -40,14 +63,11 @@ export interface ParserOptions
   /**
    * Get tag namespace
    */
-  getNamespace?: (tag: string, parent: ElementNode | undefined) => Namespace
-  /**
-   * Get text parsing mode for this element
-   */
-  getTextMode?: (
-    node: ElementNode,
-    parent: ElementNode | undefined
-  ) => TextModes
+  getNamespace?: (
+    tag: string,
+    parent: ElementNode | undefined,
+    rootNamespace: Namespace,
+  ) => Namespace
   /**
    * @default ['{{', '}}']
    */
@@ -57,7 +77,8 @@ export interface ParserOptions
    */
   whitespace?: 'preserve' | 'condense'
   /**
-   * Only needed for DOM compilers
+   * Only used for DOM compilers that runs in the browser.
+   * In non-browser builds, this option is ignored.
    */
   decodeEntities?: (rawText: string, asAttr: boolean) => string
   /**
@@ -65,15 +86,26 @@ export interface ParserOptions
    * This defaults to `true` in development and `false` in production builds.
    */
   comments?: boolean
+  /**
+   * Parse JavaScript expressions with Babel.
+   * @default false
+   */
+  prefixIdentifiers?: boolean
+  /**
+   * A list of parser plugins to enable for `@babel/parser`, which is used to
+   * parse expressions in bindings and interpolations.
+   * https://babeljs.io/docs/en/next/babel-parser#plugins
+   */
+  expressionPlugins?: ParserPlugin[]
 }
 
 export type HoistTransform = (
   children: TemplateChildNode[],
   context: TransformContext,
-  parent: ParentNode
+  parent: ParentNode,
 ) => void
 
-export const enum BindingTypes {
+export enum BindingTypes {
   /**
    * returned from data()
    */
@@ -116,7 +148,7 @@ export const enum BindingTypes {
   /**
    * a literal constant, e.g. 'foo', 1, true
    */
-  LITERAL_CONST = 'literal-const'
+  LITERAL_CONST = 'literal-const',
 }
 
 export type BindingMetadata = {
@@ -256,6 +288,12 @@ export interface TransformOptions
    * needed to render inline CSS variables on component root
    */
   ssrCssVars?: string
+  /**
+   * Whether to compile the template assuming it needs to handle HMR.
+   * Some edge cases may need to generate different code for HMR to work
+   * correctly, e.g. #6938, #7138
+   */
+  hmr?: boolean
 }
 
 export interface CodegenOptions extends SharedTransformCodegenOptions {
diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts
deleted file mode 100644
index b72ad028b4b..00000000000
--- a/packages/compiler-core/src/parse.ts
+++ /dev/null
@@ -1,1189 +0,0 @@
-import { ErrorHandlingOptions, ParserOptions } from './options'
-import { NO, isArray, makeMap, extend } from '@vue/shared'
-import {
-  ErrorCodes,
-  createCompilerError,
-  defaultOnError,
-  defaultOnWarn
-} from './errors'
-import {
-  assert,
-  advancePositionWithMutation,
-  advancePositionWithClone,
-  isCoreComponent,
-  isStaticArgOf
-} from './utils'
-import {
-  Namespaces,
-  AttributeNode,
-  CommentNode,
-  DirectiveNode,
-  ElementNode,
-  ElementTypes,
-  ExpressionNode,
-  NodeTypes,
-  Position,
-  RootNode,
-  SourceLocation,
-  TextNode,
-  TemplateChildNode,
-  InterpolationNode,
-  createRoot,
-  ConstantTypes
-} from './ast'
-import {
-  checkCompatEnabled,
-  CompilerCompatOptions,
-  CompilerDeprecationTypes,
-  isCompatEnabled,
-  warnDeprecation
-} from './compat/compatConfig'
-
-type OptionalOptions =
-  | 'whitespace'
-  | 'isNativeTag'
-  | 'isBuiltInComponent'
-  | keyof CompilerCompatOptions
-type MergedParserOptions = Omit<Required<ParserOptions>, OptionalOptions> &
-  Pick<ParserOptions, OptionalOptions>
-type AttributeValue =
-  | {
-      content: string
-      isQuoted: boolean
-      loc: SourceLocation
-    }
-  | undefined
-
-// The default decoder only provides escapes for characters reserved as part of
-// the template syntax, and is only used if the custom renderer did not provide
-// a platform-specific decoder.
-const decodeRE = /&(gt|lt|amp|apos|quot);/g
-const decodeMap: Record<string, string> = {
-  gt: '>',
-  lt: '<',
-  amp: '&',
-  apos: "'",
-  quot: '"'
-}
-
-export const defaultParserOptions: MergedParserOptions = {
-  delimiters: [`{{`, `}}`],
-  getNamespace: () => Namespaces.HTML,
-  getTextMode: () => TextModes.DATA,
-  isVoidTag: NO,
-  isPreTag: NO,
-  isCustomElement: NO,
-  decodeEntities: (rawText: string): string =>
-    rawText.replace(decodeRE, (_, p1) => decodeMap[p1]),
-  onError: defaultOnError,
-  onWarn: defaultOnWarn,
-  comments: __DEV__
-}
-
-export const enum TextModes {
-  //          | Elements | Entities | End sign              | Inside of
-  DATA, //    | ✔        | ✔        | End tags of ancestors |
-  RCDATA, //  | ✘        | ✔        | End tag of the parent | <textarea>
-  RAWTEXT, // | ✘        | ✘        | End tag of the parent | <style>,<script>
-  CDATA,
-  ATTRIBUTE_VALUE
-}
-
-export interface ParserContext {
-  options: MergedParserOptions
-  readonly originalSource: string
-  source: string
-  offset: number
-  line: number
-  column: number
-  inPre: boolean // HTML <pre> tag, preserve whitespaces
-  inVPre: boolean // v-pre, do not process directives and interpolations
-  onWarn: NonNullable<ErrorHandlingOptions['onWarn']>
-}
-
-export function baseParse(
-  content: string,
-  options: ParserOptions = {}
-): RootNode {
-  const context = createParserContext(content, options)
-  const start = getCursor(context)
-  return createRoot(
-    parseChildren(context, TextModes.DATA, []),
-    getSelection(context, start)
-  )
-}
-
-function createParserContext(
-  content: string,
-  rawOptions: ParserOptions
-): ParserContext {
-  const options = extend({}, defaultParserOptions)
-
-  let key: keyof ParserOptions
-  for (key in rawOptions) {
-    // @ts-ignore
-    options[key] =
-      rawOptions[key] === undefined
-        ? defaultParserOptions[key]
-        : rawOptions[key]
-  }
-  return {
-    options,
-    column: 1,
-    line: 1,
-    offset: 0,
-    originalSource: content,
-    source: content,
-    inPre: false,
-    inVPre: false,
-    onWarn: options.onWarn
-  }
-}
-
-function parseChildren(
-  context: ParserContext,
-  mode: TextModes,
-  ancestors: ElementNode[]
-): TemplateChildNode[] {
-  const parent = last(ancestors)
-  const ns = parent ? parent.ns : Namespaces.HTML
-  const nodes: TemplateChildNode[] = []
-
-  while (!isEnd(context, mode, ancestors)) {
-    __TEST__ && assert(context.source.length > 0)
-    const s = context.source
-    let node: TemplateChildNode | TemplateChildNode[] | undefined = undefined
-
-    if (mode === TextModes.DATA || mode === TextModes.RCDATA) {
-      if (!context.inVPre && startsWith(s, context.options.delimiters[0])) {
-        // '{{'
-        node = parseInterpolation(context, mode)
-      } else if (mode === TextModes.DATA && s[0] === '<') {
-        // https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-        if (s.length === 1) {
-          emitError(context, ErrorCodes.EOF_BEFORE_TAG_NAME, 1)
-        } else if (s[1] === '!') {
-          // https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state
-          if (startsWith(s, '<!--')) {
-            node = parseComment(context)
-          } else if (startsWith(s, '<!DOCTYPE')) {
-            // Ignore DOCTYPE by a limitation.
-            node = parseBogusComment(context)
-          } else if (startsWith(s, '<![CDATA[')) {
-            if (ns !== Namespaces.HTML) {
-              node = parseCDATA(context, ancestors)
-            } else {
-              emitError(context, ErrorCodes.CDATA_IN_HTML_CONTENT)
-              node = parseBogusComment(context)
-            }
-          } else {
-            emitError(context, ErrorCodes.INCORRECTLY_OPENED_COMMENT)
-            node = parseBogusComment(context)
-          }
-        } else if (s[1] === '/') {
-          // https://html.spec.whatwg.org/multipage/parsing.html#end-tag-open-state
-          if (s.length === 2) {
-            emitError(context, ErrorCodes.EOF_BEFORE_TAG_NAME, 2)
-          } else if (s[2] === '>') {
-            emitError(context, ErrorCodes.MISSING_END_TAG_NAME, 2)
-            advanceBy(context, 3)
-            continue
-          } else if (/[a-z]/i.test(s[2])) {
-            emitError(context, ErrorCodes.X_INVALID_END_TAG)
-            parseTag(context, TagType.End, parent)
-            continue
-          } else {
-            emitError(
-              context,
-              ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
-              2
-            )
-            node = parseBogusComment(context)
-          }
-        } else if (/[a-z]/i.test(s[1])) {
-          node = parseElement(context, ancestors)
-
-          // 2.x <template> with no directive compat
-          if (
-            __COMPAT__ &&
-            isCompatEnabled(
-              CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
-              context
-            ) &&
-            node &&
-            node.tag === 'template' &&
-            !node.props.some(
-              p =>
-                p.type === NodeTypes.DIRECTIVE &&
-                isSpecialTemplateDirective(p.name)
-            )
-          ) {
-            __DEV__ &&
-              warnDeprecation(
-                CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
-                context,
-                node.loc
-              )
-            node = node.children
-          }
-        } else if (s[1] === '?') {
-          emitError(
-            context,
-            ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
-            1
-          )
-          node = parseBogusComment(context)
-        } else {
-          emitError(context, ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME, 1)
-        }
-      }
-    }
-    if (!node) {
-      node = parseText(context, mode)
-    }
-
-    if (isArray(node)) {
-      for (let i = 0; i < node.length; i++) {
-        pushNode(nodes, node[i])
-      }
-    } else {
-      pushNode(nodes, node)
-    }
-  }
-
-  // Whitespace handling strategy like v2
-  let removedWhitespace = false
-  if (mode !== TextModes.RAWTEXT && mode !== TextModes.RCDATA) {
-    const shouldCondense = context.options.whitespace !== 'preserve'
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i]
-      if (node.type === NodeTypes.TEXT) {
-        if (!context.inPre) {
-          if (!/[^\t\r\n\f ]/.test(node.content)) {
-            const prev = nodes[i - 1]
-            const next = nodes[i + 1]
-            // Remove if:
-            // - the whitespace is the first or last node, or:
-            // - (condense mode) the whitespace is between twos comments, or:
-            // - (condense mode) the whitespace is between comment and element, or:
-            // - (condense mode) the whitespace is between two elements AND contains newline
-            if (
-              !prev ||
-              !next ||
-              (shouldCondense &&
-                ((prev.type === NodeTypes.COMMENT &&
-                  next.type === NodeTypes.COMMENT) ||
-                  (prev.type === NodeTypes.COMMENT &&
-                    next.type === NodeTypes.ELEMENT) ||
-                  (prev.type === NodeTypes.ELEMENT &&
-                    next.type === NodeTypes.COMMENT) ||
-                  (prev.type === NodeTypes.ELEMENT &&
-                    next.type === NodeTypes.ELEMENT &&
-                    /[\r\n]/.test(node.content))))
-            ) {
-              removedWhitespace = true
-              nodes[i] = null as any
-            } else {
-              // Otherwise, the whitespace is condensed into a single space
-              node.content = ' '
-            }
-          } else if (shouldCondense) {
-            // in condense mode, consecutive whitespaces in text are condensed
-            // down to a single space.
-            node.content = node.content.replace(/[\t\r\n\f ]+/g, ' ')
-          }
-        } else {
-          // #6410 normalize windows newlines in <pre>:
-          // in SSR, browsers normalize server-rendered \r\n into a single \n
-          // in the DOM
-          node.content = node.content.replace(/\r\n/g, '\n')
-        }
-      }
-      // Remove comment nodes if desired by configuration.
-      else if (node.type === NodeTypes.COMMENT && !context.options.comments) {
-        removedWhitespace = true
-        nodes[i] = null as any
-      }
-    }
-    if (context.inPre && parent && context.options.isPreTag(parent.tag)) {
-      // remove leading newline per html spec
-      // https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
-      const first = nodes[0]
-      if (first && first.type === NodeTypes.TEXT) {
-        first.content = first.content.replace(/^\r?\n/, '')
-      }
-    }
-  }
-
-  return removedWhitespace ? nodes.filter(Boolean) : nodes
-}
-
-function pushNode(nodes: TemplateChildNode[], node: TemplateChildNode): void {
-  if (node.type === NodeTypes.TEXT) {
-    const prev = last(nodes)
-    // Merge if both this and the previous node are text and those are
-    // consecutive. This happens for cases like "a < b".
-    if (
-      prev &&
-      prev.type === NodeTypes.TEXT &&
-      prev.loc.end.offset === node.loc.start.offset
-    ) {
-      prev.content += node.content
-      prev.loc.end = node.loc.end
-      prev.loc.source += node.loc.source
-      return
-    }
-  }
-
-  nodes.push(node)
-}
-
-function parseCDATA(
-  context: ParserContext,
-  ancestors: ElementNode[]
-): TemplateChildNode[] {
-  __TEST__ &&
-    assert(last(ancestors) == null || last(ancestors)!.ns !== Namespaces.HTML)
-  __TEST__ && assert(startsWith(context.source, '<![CDATA['))
-
-  advanceBy(context, 9)
-  const nodes = parseChildren(context, TextModes.CDATA, ancestors)
-  if (context.source.length === 0) {
-    emitError(context, ErrorCodes.EOF_IN_CDATA)
-  } else {
-    __TEST__ && assert(startsWith(context.source, ']]>'))
-    advanceBy(context, 3)
-  }
-
-  return nodes
-}
-
-function parseComment(context: ParserContext): CommentNode {
-  __TEST__ && assert(startsWith(context.source, '<!--'))
-
-  const start = getCursor(context)
-  let content: string
-
-  // Regular comment.
-  const match = /--(\!)?>/.exec(context.source)
-  if (!match) {
-    content = context.source.slice(4)
-    advanceBy(context, context.source.length)
-    emitError(context, ErrorCodes.EOF_IN_COMMENT)
-  } else {
-    if (match.index <= 3) {
-      emitError(context, ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT)
-    }
-    if (match[1]) {
-      emitError(context, ErrorCodes.INCORRECTLY_CLOSED_COMMENT)
-    }
-    content = context.source.slice(4, match.index)
-
-    // Advancing with reporting nested comments.
-    const s = context.source.slice(0, match.index)
-    let prevIndex = 1,
-      nestedIndex = 0
-    while ((nestedIndex = s.indexOf('<!--', prevIndex)) !== -1) {
-      advanceBy(context, nestedIndex - prevIndex + 1)
-      if (nestedIndex + 4 < s.length) {
-        emitError(context, ErrorCodes.NESTED_COMMENT)
-      }
-      prevIndex = nestedIndex + 1
-    }
-    advanceBy(context, match.index + match[0].length - prevIndex + 1)
-  }
-
-  return {
-    type: NodeTypes.COMMENT,
-    content,
-    loc: getSelection(context, start)
-  }
-}
-
-function parseBogusComment(context: ParserContext): CommentNode | undefined {
-  __TEST__ && assert(/^<(?:[\!\?]|\/[^a-z>])/i.test(context.source))
-
-  const start = getCursor(context)
-  const contentStart = context.source[1] === '?' ? 1 : 2
-  let content: string
-
-  const closeIndex = context.source.indexOf('>')
-  if (closeIndex === -1) {
-    content = context.source.slice(contentStart)
-    advanceBy(context, context.source.length)
-  } else {
-    content = context.source.slice(contentStart, closeIndex)
-    advanceBy(context, closeIndex + 1)
-  }
-
-  return {
-    type: NodeTypes.COMMENT,
-    content,
-    loc: getSelection(context, start)
-  }
-}
-
-function parseElement(
-  context: ParserContext,
-  ancestors: ElementNode[]
-): ElementNode | undefined {
-  __TEST__ && assert(/^<[a-z]/i.test(context.source))
-
-  // Start tag.
-  const wasInPre = context.inPre
-  const wasInVPre = context.inVPre
-  const parent = last(ancestors)
-  const element = parseTag(context, TagType.Start, parent)
-  const isPreBoundary = context.inPre && !wasInPre
-  const isVPreBoundary = context.inVPre && !wasInVPre
-
-  if (element.isSelfClosing || context.options.isVoidTag(element.tag)) {
-    // #4030 self-closing <pre> tag
-    if (isPreBoundary) {
-      context.inPre = false
-    }
-    if (isVPreBoundary) {
-      context.inVPre = false
-    }
-    return element
-  }
-
-  // Children.
-  ancestors.push(element)
-  const mode = context.options.getTextMode(element, parent)
-  const children = parseChildren(context, mode, ancestors)
-  ancestors.pop()
-
-  // 2.x inline-template compat
-  if (__COMPAT__) {
-    const inlineTemplateProp = element.props.find(
-      p => p.type === NodeTypes.ATTRIBUTE && p.name === 'inline-template'
-    ) as AttributeNode
-    if (
-      inlineTemplateProp &&
-      checkCompatEnabled(
-        CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE,
-        context,
-        inlineTemplateProp.loc
-      )
-    ) {
-      const loc = getSelection(context, element.loc.end)
-      inlineTemplateProp.value = {
-        type: NodeTypes.TEXT,
-        content: loc.source,
-        loc
-      }
-    }
-  }
-
-  element.children = children
-
-  // End tag.
-  if (startsWithEndTagOpen(context.source, element.tag)) {
-    parseTag(context, TagType.End, parent)
-  } else {
-    emitError(context, ErrorCodes.X_MISSING_END_TAG, 0, element.loc.start)
-    if (context.source.length === 0 && element.tag.toLowerCase() === 'script') {
-      const first = children[0]
-      if (first && startsWith(first.loc.source, '<!--')) {
-        emitError(context, ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT)
-      }
-    }
-  }
-
-  element.loc = getSelection(context, element.loc.start)
-
-  if (isPreBoundary) {
-    context.inPre = false
-  }
-  if (isVPreBoundary) {
-    context.inVPre = false
-  }
-  return element
-}
-
-const enum TagType {
-  Start,
-  End
-}
-
-const isSpecialTemplateDirective = /*#__PURE__*/ makeMap(
-  `if,else,else-if,for,slot`
-)
-
-/**
- * Parse a tag (E.g. `<div id=a>`) with that type (start tag or end tag).
- */
-function parseTag(
-  context: ParserContext,
-  type: TagType.Start,
-  parent: ElementNode | undefined
-): ElementNode
-function parseTag(
-  context: ParserContext,
-  type: TagType.End,
-  parent: ElementNode | undefined
-): void
-function parseTag(
-  context: ParserContext,
-  type: TagType,
-  parent: ElementNode | undefined
-): ElementNode | undefined {
-  __TEST__ && assert(/^<\/?[a-z]/i.test(context.source))
-  __TEST__ &&
-    assert(
-      type === (startsWith(context.source, '</') ? TagType.End : TagType.Start)
-    )
-
-  // Tag open.
-  const start = getCursor(context)
-  const match = /^<\/?([a-z][^\t\r\n\f />]*)/i.exec(context.source)!
-  const tag = match[1]
-  const ns = context.options.getNamespace(tag, parent)
-
-  advanceBy(context, match[0].length)
-  advanceSpaces(context)
-
-  // save current state in case we need to re-parse attributes with v-pre
-  const cursor = getCursor(context)
-  const currentSource = context.source
-
-  // check <pre> tag
-  if (context.options.isPreTag(tag)) {
-    context.inPre = true
-  }
-
-  // Attributes.
-  let props = parseAttributes(context, type)
-
-  // check v-pre
-  if (
-    type === TagType.Start &&
-    !context.inVPre &&
-    props.some(p => p.type === NodeTypes.DIRECTIVE && p.name === 'pre')
-  ) {
-    context.inVPre = true
-    // reset context
-    extend(context, cursor)
-    context.source = currentSource
-    // re-parse attrs and filter out v-pre itself
-    props = parseAttributes(context, type).filter(p => p.name !== 'v-pre')
-  }
-
-  // Tag close.
-  let isSelfClosing = false
-  if (context.source.length === 0) {
-    emitError(context, ErrorCodes.EOF_IN_TAG)
-  } else {
-    isSelfClosing = startsWith(context.source, '/>')
-    if (type === TagType.End && isSelfClosing) {
-      emitError(context, ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS)
-    }
-    advanceBy(context, isSelfClosing ? 2 : 1)
-  }
-
-  if (type === TagType.End) {
-    return
-  }
-
-  // 2.x deprecation checks
-  if (
-    __COMPAT__ &&
-    __DEV__ &&
-    isCompatEnabled(
-      CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
-      context
-    )
-  ) {
-    let hasIf = false
-    let hasFor = false
-    for (let i = 0; i < props.length; i++) {
-      const p = props[i]
-      if (p.type === NodeTypes.DIRECTIVE) {
-        if (p.name === 'if') {
-          hasIf = true
-        } else if (p.name === 'for') {
-          hasFor = true
-        }
-      }
-      if (hasIf && hasFor) {
-        warnDeprecation(
-          CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
-          context,
-          getSelection(context, start)
-        )
-        break
-      }
-    }
-  }
-
-  let tagType = ElementTypes.ELEMENT
-  if (!context.inVPre) {
-    if (tag === 'slot') {
-      tagType = ElementTypes.SLOT
-    } else if (tag === 'template') {
-      if (
-        props.some(
-          p =>
-            p.type === NodeTypes.DIRECTIVE && isSpecialTemplateDirective(p.name)
-        )
-      ) {
-        tagType = ElementTypes.TEMPLATE
-      }
-    } else if (isComponent(tag, props, context)) {
-      tagType = ElementTypes.COMPONENT
-    }
-  }
-
-  return {
-    type: NodeTypes.ELEMENT,
-    ns,
-    tag,
-    tagType,
-    props,
-    isSelfClosing,
-    children: [],
-    loc: getSelection(context, start),
-    codegenNode: undefined // to be created during transform phase
-  }
-}
-
-function isComponent(
-  tag: string,
-  props: (AttributeNode | DirectiveNode)[],
-  context: ParserContext
-) {
-  const options = context.options
-  if (options.isCustomElement(tag)) {
-    return false
-  }
-  if (
-    tag === 'component' ||
-    /^[A-Z]/.test(tag) ||
-    isCoreComponent(tag) ||
-    (options.isBuiltInComponent && options.isBuiltInComponent(tag)) ||
-    (options.isNativeTag && !options.isNativeTag(tag))
-  ) {
-    return true
-  }
-  // at this point the tag should be a native tag, but check for potential "is"
-  // casting
-  for (let i = 0; i < props.length; i++) {
-    const p = props[i]
-    if (p.type === NodeTypes.ATTRIBUTE) {
-      if (p.name === 'is' && p.value) {
-        if (p.value.content.startsWith('vue:')) {
-          return true
-        } else if (
-          __COMPAT__ &&
-          checkCompatEnabled(
-            CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-            context,
-            p.loc
-          )
-        ) {
-          return true
-        }
-      }
-    } else {
-      // directive
-      // v-is (TODO: remove in 3.4)
-      if (p.name === 'is') {
-        return true
-      } else if (
-        // :is on plain element - only treat as component in compat mode
-        p.name === 'bind' &&
-        isStaticArgOf(p.arg, 'is') &&
-        __COMPAT__ &&
-        checkCompatEnabled(
-          CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-          context,
-          p.loc
-        )
-      ) {
-        return true
-      }
-    }
-  }
-}
-
-function parseAttributes(
-  context: ParserContext,
-  type: TagType
-): (AttributeNode | DirectiveNode)[] {
-  const props = []
-  const attributeNames = new Set<string>()
-  while (
-    context.source.length > 0 &&
-    !startsWith(context.source, '>') &&
-    !startsWith(context.source, '/>')
-  ) {
-    if (startsWith(context.source, '/')) {
-      emitError(context, ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG)
-      advanceBy(context, 1)
-      advanceSpaces(context)
-      continue
-    }
-    if (type === TagType.End) {
-      emitError(context, ErrorCodes.END_TAG_WITH_ATTRIBUTES)
-    }
-
-    const attr = parseAttribute(context, attributeNames)
-
-    // Trim whitespace between class
-    // https://github.com/vuejs/core/issues/4251
-    if (
-      attr.type === NodeTypes.ATTRIBUTE &&
-      attr.value &&
-      attr.name === 'class'
-    ) {
-      attr.value.content = attr.value.content.replace(/\s+/g, ' ').trim()
-    }
-
-    if (type === TagType.Start) {
-      props.push(attr)
-    }
-
-    if (/^[^\t\r\n\f />]/.test(context.source)) {
-      emitError(context, ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES)
-    }
-    advanceSpaces(context)
-  }
-  return props
-}
-
-function parseAttribute(
-  context: ParserContext,
-  nameSet: Set<string>
-): AttributeNode | DirectiveNode {
-  __TEST__ && assert(/^[^\t\r\n\f />]/.test(context.source))
-
-  // Name.
-  const start = getCursor(context)
-  const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source)!
-  const name = match[0]
-
-  if (nameSet.has(name)) {
-    emitError(context, ErrorCodes.DUPLICATE_ATTRIBUTE)
-  }
-  nameSet.add(name)
-
-  if (name[0] === '=') {
-    emitError(context, ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME)
-  }
-  {
-    const pattern = /["'<]/g
-    let m: RegExpExecArray | null
-    while ((m = pattern.exec(name))) {
-      emitError(
-        context,
-        ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
-        m.index
-      )
-    }
-  }
-
-  advanceBy(context, name.length)
-
-  // Value
-  let value: AttributeValue = undefined
-
-  if (/^[\t\r\n\f ]*=/.test(context.source)) {
-    advanceSpaces(context)
-    advanceBy(context, 1)
-    advanceSpaces(context)
-    value = parseAttributeValue(context)
-    if (!value) {
-      emitError(context, ErrorCodes.MISSING_ATTRIBUTE_VALUE)
-    }
-  }
-  const loc = getSelection(context, start)
-
-  if (!context.inVPre && /^(v-[A-Za-z0-9-]|:|\.|@|#)/.test(name)) {
-    const match =
-      /(?:^v-([a-z0-9-]+))?(?:(?::|^\.|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i.exec(
-        name
-      )!
-
-    let isPropShorthand = startsWith(name, '.')
-    let dirName =
-      match[1] ||
-      (isPropShorthand || startsWith(name, ':')
-        ? 'bind'
-        : startsWith(name, '@')
-        ? 'on'
-        : 'slot')
-    let arg: ExpressionNode | undefined
-
-    if (match[2]) {
-      const isSlot = dirName === 'slot'
-      const startOffset = name.lastIndexOf(
-        match[2],
-        name.length - (match[3]?.length || 0)
-      )
-      const loc = getSelection(
-        context,
-        getNewPosition(context, start, startOffset),
-        getNewPosition(
-          context,
-          start,
-          startOffset + match[2].length + ((isSlot && match[3]) || '').length
-        )
-      )
-      let content = match[2]
-      let isStatic = true
-
-      if (content.startsWith('[')) {
-        isStatic = false
-
-        if (!content.endsWith(']')) {
-          emitError(
-            context,
-            ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END
-          )
-          content = content.slice(1)
-        } else {
-          content = content.slice(1, content.length - 1)
-        }
-      } else if (isSlot) {
-        // #1241 special case for v-slot: vuetify relies extensively on slot
-        // names containing dots. v-slot doesn't have any modifiers and Vue 2.x
-        // supports such usage so we are keeping it consistent with 2.x.
-        content += match[3] || ''
-      }
-
-      arg = {
-        type: NodeTypes.SIMPLE_EXPRESSION,
-        content,
-        isStatic,
-        constType: isStatic
-          ? ConstantTypes.CAN_STRINGIFY
-          : ConstantTypes.NOT_CONSTANT,
-        loc
-      }
-    }
-
-    if (value && value.isQuoted) {
-      const valueLoc = value.loc
-      valueLoc.start.offset++
-      valueLoc.start.column++
-      valueLoc.end = advancePositionWithClone(valueLoc.start, value.content)
-      valueLoc.source = valueLoc.source.slice(1, -1)
-    }
-
-    const modifiers = match[3] ? match[3].slice(1).split('.') : []
-    if (isPropShorthand) modifiers.push('prop')
-
-    // 2.x compat v-bind:foo.sync -> v-model:foo
-    if (__COMPAT__ && dirName === 'bind' && arg) {
-      if (
-        modifiers.includes('sync') &&
-        checkCompatEnabled(
-          CompilerDeprecationTypes.COMPILER_V_BIND_SYNC,
-          context,
-          loc,
-          arg.loc.source
-        )
-      ) {
-        dirName = 'model'
-        modifiers.splice(modifiers.indexOf('sync'), 1)
-      }
-
-      if (__DEV__ && modifiers.includes('prop')) {
-        checkCompatEnabled(
-          CompilerDeprecationTypes.COMPILER_V_BIND_PROP,
-          context,
-          loc
-        )
-      }
-    }
-
-    return {
-      type: NodeTypes.DIRECTIVE,
-      name: dirName,
-      exp: value && {
-        type: NodeTypes.SIMPLE_EXPRESSION,
-        content: value.content,
-        isStatic: false,
-        // Treat as non-constant by default. This can be potentially set to
-        // other values by `transformExpression` to make it eligible for hoisting.
-        constType: ConstantTypes.NOT_CONSTANT,
-        loc: value.loc
-      },
-      arg,
-      modifiers,
-      loc
-    }
-  }
-
-  // missing directive name or illegal directive name
-  if (!context.inVPre && startsWith(name, 'v-')) {
-    emitError(context, ErrorCodes.X_MISSING_DIRECTIVE_NAME)
-  }
-
-  return {
-    type: NodeTypes.ATTRIBUTE,
-    name,
-    value: value && {
-      type: NodeTypes.TEXT,
-      content: value.content,
-      loc: value.loc
-    },
-    loc
-  }
-}
-
-function parseAttributeValue(context: ParserContext): AttributeValue {
-  const start = getCursor(context)
-  let content: string
-
-  const quote = context.source[0]
-  const isQuoted = quote === `"` || quote === `'`
-  if (isQuoted) {
-    // Quoted value.
-    advanceBy(context, 1)
-
-    const endIndex = context.source.indexOf(quote)
-    if (endIndex === -1) {
-      content = parseTextData(
-        context,
-        context.source.length,
-        TextModes.ATTRIBUTE_VALUE
-      )
-    } else {
-      content = parseTextData(context, endIndex, TextModes.ATTRIBUTE_VALUE)
-      advanceBy(context, 1)
-    }
-  } else {
-    // Unquoted
-    const match = /^[^\t\r\n\f >]+/.exec(context.source)
-    if (!match) {
-      return undefined
-    }
-    const unexpectedChars = /["'<=`]/g
-    let m: RegExpExecArray | null
-    while ((m = unexpectedChars.exec(match[0]))) {
-      emitError(
-        context,
-        ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
-        m.index
-      )
-    }
-    content = parseTextData(context, match[0].length, TextModes.ATTRIBUTE_VALUE)
-  }
-
-  return { content, isQuoted, loc: getSelection(context, start) }
-}
-
-function parseInterpolation(
-  context: ParserContext,
-  mode: TextModes
-): InterpolationNode | undefined {
-  const [open, close] = context.options.delimiters
-  __TEST__ && assert(startsWith(context.source, open))
-
-  const closeIndex = context.source.indexOf(close, open.length)
-  if (closeIndex === -1) {
-    emitError(context, ErrorCodes.X_MISSING_INTERPOLATION_END)
-    return undefined
-  }
-
-  const start = getCursor(context)
-  advanceBy(context, open.length)
-  const innerStart = getCursor(context)
-  const innerEnd = getCursor(context)
-  const rawContentLength = closeIndex - open.length
-  const rawContent = context.source.slice(0, rawContentLength)
-  const preTrimContent = parseTextData(context, rawContentLength, mode)
-  const content = preTrimContent.trim()
-  const startOffset = preTrimContent.indexOf(content)
-  if (startOffset > 0) {
-    advancePositionWithMutation(innerStart, rawContent, startOffset)
-  }
-  const endOffset =
-    rawContentLength - (preTrimContent.length - content.length - startOffset)
-  advancePositionWithMutation(innerEnd, rawContent, endOffset)
-  advanceBy(context, close.length)
-
-  return {
-    type: NodeTypes.INTERPOLATION,
-    content: {
-      type: NodeTypes.SIMPLE_EXPRESSION,
-      isStatic: false,
-      // Set `isConstant` to false by default and will decide in transformExpression
-      constType: ConstantTypes.NOT_CONSTANT,
-      content,
-      loc: getSelection(context, innerStart, innerEnd)
-    },
-    loc: getSelection(context, start)
-  }
-}
-
-function parseText(context: ParserContext, mode: TextModes): TextNode {
-  __TEST__ && assert(context.source.length > 0)
-
-  const endTokens =
-    mode === TextModes.CDATA ? [']]>'] : ['<', context.options.delimiters[0]]
-
-  let endIndex = context.source.length
-  for (let i = 0; i < endTokens.length; i++) {
-    const index = context.source.indexOf(endTokens[i], 1)
-    if (index !== -1 && endIndex > index) {
-      endIndex = index
-    }
-  }
-
-  __TEST__ && assert(endIndex > 0)
-
-  const start = getCursor(context)
-  const content = parseTextData(context, endIndex, mode)
-
-  return {
-    type: NodeTypes.TEXT,
-    content,
-    loc: getSelection(context, start)
-  }
-}
-
-/**
- * Get text data with a given length from the current location.
- * This translates HTML entities in the text data.
- */
-function parseTextData(
-  context: ParserContext,
-  length: number,
-  mode: TextModes
-): string {
-  const rawText = context.source.slice(0, length)
-  advanceBy(context, length)
-  if (
-    mode === TextModes.RAWTEXT ||
-    mode === TextModes.CDATA ||
-    !rawText.includes('&')
-  ) {
-    return rawText
-  } else {
-    // DATA or RCDATA containing "&"". Entity decoding required.
-    return context.options.decodeEntities(
-      rawText,
-      mode === TextModes.ATTRIBUTE_VALUE
-    )
-  }
-}
-
-function getCursor(context: ParserContext): Position {
-  const { column, line, offset } = context
-  return { column, line, offset }
-}
-
-function getSelection(
-  context: ParserContext,
-  start: Position,
-  end?: Position
-): SourceLocation {
-  end = end || getCursor(context)
-  return {
-    start,
-    end,
-    source: context.originalSource.slice(start.offset, end.offset)
-  }
-}
-
-function last<T>(xs: T[]): T | undefined {
-  return xs[xs.length - 1]
-}
-
-function startsWith(source: string, searchString: string): boolean {
-  return source.startsWith(searchString)
-}
-
-function advanceBy(context: ParserContext, numberOfCharacters: number): void {
-  const { source } = context
-  __TEST__ && assert(numberOfCharacters <= source.length)
-  advancePositionWithMutation(context, source, numberOfCharacters)
-  context.source = source.slice(numberOfCharacters)
-}
-
-function advanceSpaces(context: ParserContext): void {
-  const match = /^[\t\r\n\f ]+/.exec(context.source)
-  if (match) {
-    advanceBy(context, match[0].length)
-  }
-}
-
-function getNewPosition(
-  context: ParserContext,
-  start: Position,
-  numberOfCharacters: number
-): Position {
-  return advancePositionWithClone(
-    start,
-    context.originalSource.slice(start.offset, numberOfCharacters),
-    numberOfCharacters
-  )
-}
-
-function emitError(
-  context: ParserContext,
-  code: ErrorCodes,
-  offset?: number,
-  loc: Position = getCursor(context)
-): void {
-  if (offset) {
-    loc.offset += offset
-    loc.column += offset
-  }
-  context.options.onError(
-    createCompilerError(code, {
-      start: loc,
-      end: loc,
-      source: ''
-    })
-  )
-}
-
-function isEnd(
-  context: ParserContext,
-  mode: TextModes,
-  ancestors: ElementNode[]
-): boolean {
-  const s = context.source
-
-  switch (mode) {
-    case TextModes.DATA:
-      if (startsWith(s, '</')) {
-        // TODO: probably bad performance
-        for (let i = ancestors.length - 1; i >= 0; --i) {
-          if (startsWithEndTagOpen(s, ancestors[i].tag)) {
-            return true
-          }
-        }
-      }
-      break
-
-    case TextModes.RCDATA:
-    case TextModes.RAWTEXT: {
-      const parent = last(ancestors)
-      if (parent && startsWithEndTagOpen(s, parent.tag)) {
-        return true
-      }
-      break
-    }
-
-    case TextModes.CDATA:
-      if (startsWith(s, ']]>')) {
-        return true
-      }
-      break
-  }
-
-  return !s
-}
-
-function startsWithEndTagOpen(source: string, tag: string): boolean {
-  return (
-    startsWith(source, '</') &&
-    source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase() &&
-    /[\t\r\n\f />]/.test(source[2 + tag.length] || '>')
-  )
-}
diff --git a/packages/compiler-core/src/parser.ts b/packages/compiler-core/src/parser.ts
new file mode 100644
index 00000000000..202fba81b18
--- /dev/null
+++ b/packages/compiler-core/src/parser.ts
@@ -0,0 +1,1072 @@
+import {
+  type AttributeNode,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
+  ElementTypes,
+  type ForParseResult,
+  Namespaces,
+  NodeTypes,
+  type RootNode,
+  type SimpleExpressionNode,
+  type SourceLocation,
+  type TemplateChildNode,
+  createRoot,
+  createSimpleExpression,
+} from './ast'
+import type { ParserOptions } from './options'
+import Tokenizer, {
+  CharCodes,
+  ParseMode,
+  QuoteType,
+  Sequences,
+  State,
+  isWhitespace,
+  toCharCodes,
+} from './tokenizer'
+import {
+  type CompilerCompatOptions,
+  CompilerDeprecationTypes,
+  checkCompatEnabled,
+  isCompatEnabled,
+  warnDeprecation,
+} from './compat/compatConfig'
+import { NO, extend } from '@vue/shared'
+import {
+  ErrorCodes,
+  createCompilerError,
+  defaultOnError,
+  defaultOnWarn,
+} from './errors'
+import {
+  forAliasRE,
+  isCoreComponent,
+  isSimpleIdentifier,
+  isStaticArgOf,
+} from './utils'
+import { decodeHTML } from 'entities/lib/decode.js'
+import {
+  type ParserOptions as BabelOptions,
+  parse,
+  parseExpression,
+} from '@babel/parser'
+
+type OptionalOptions =
+  | 'decodeEntities'
+  | 'whitespace'
+  | 'isNativeTag'
+  | 'isBuiltInComponent'
+  | 'expressionPlugins'
+  | keyof CompilerCompatOptions
+
+export type MergedParserOptions = Omit<
+  Required<ParserOptions>,
+  OptionalOptions
+> &
+  Pick<ParserOptions, OptionalOptions>
+
+export const defaultParserOptions: MergedParserOptions = {
+  parseMode: 'base',
+  ns: Namespaces.HTML,
+  delimiters: [`{{`, `}}`],
+  getNamespace: () => Namespaces.HTML,
+  isVoidTag: NO,
+  isPreTag: NO,
+  isCustomElement: NO,
+  onError: defaultOnError,
+  onWarn: defaultOnWarn,
+  comments: __DEV__,
+  prefixIdentifiers: false,
+}
+
+let currentOptions: MergedParserOptions = defaultParserOptions
+let currentRoot: RootNode | null = null
+
+// parser state
+let currentInput = ''
+let currentOpenTag: ElementNode | null = null
+let currentProp: AttributeNode | DirectiveNode | null = null
+let currentAttrValue = ''
+let currentAttrStartIndex = -1
+let currentAttrEndIndex = -1
+let inPre = 0
+let inVPre = false
+let currentVPreBoundary: ElementNode | null = null
+const stack: ElementNode[] = []
+
+const tokenizer = new Tokenizer(stack, {
+  onerr: emitError,
+
+  ontext(start, end) {
+    onText(getSlice(start, end), start, end)
+  },
+
+  ontextentity(char, start, end) {
+    onText(char, start, end)
+  },
+
+  oninterpolation(start, end) {
+    if (inVPre) {
+      return onText(getSlice(start, end), start, end)
+    }
+    let innerStart = start + tokenizer.delimiterOpen.length
+    let innerEnd = end - tokenizer.delimiterClose.length
+    while (isWhitespace(currentInput.charCodeAt(innerStart))) {
+      innerStart++
+    }
+    while (isWhitespace(currentInput.charCodeAt(innerEnd - 1))) {
+      innerEnd--
+    }
+    let exp = getSlice(innerStart, innerEnd)
+    // decode entities for backwards compat
+    if (exp.includes('&')) {
+      if (__BROWSER__) {
+        exp = currentOptions.decodeEntities!(exp, false)
+      } else {
+        exp = decodeHTML(exp)
+      }
+    }
+    addNode({
+      type: NodeTypes.INTERPOLATION,
+      content: createExp(exp, false, getLoc(innerStart, innerEnd)),
+      loc: getLoc(start, end),
+    })
+  },
+
+  onopentagname(start, end) {
+    const name = getSlice(start, end)
+    currentOpenTag = {
+      type: NodeTypes.ELEMENT,
+      tag: name,
+      ns: currentOptions.getNamespace(name, stack[0], currentOptions.ns),
+      tagType: ElementTypes.ELEMENT, // will be refined on tag close
+      props: [],
+      children: [],
+      loc: getLoc(start - 1, end),
+      codegenNode: undefined,
+    }
+  },
+
+  onopentagend(end) {
+    endOpenTag(end)
+  },
+
+  onclosetag(start, end) {
+    const name = getSlice(start, end)
+    if (!currentOptions.isVoidTag(name)) {
+      let found = false
+      for (let i = 0; i < stack.length; i++) {
+        const e = stack[i]
+        if (e.tag.toLowerCase() === name.toLowerCase()) {
+          found = true
+          if (i > 0) {
+            emitError(ErrorCodes.X_MISSING_END_TAG, stack[0].loc.start.offset)
+          }
+          for (let j = 0; j <= i; j++) {
+            const el = stack.shift()!
+            onCloseTag(el, end, j < i)
+          }
+          break
+        }
+      }
+      if (!found) {
+        emitError(ErrorCodes.X_INVALID_END_TAG, backTrack(start, CharCodes.Lt))
+      }
+    }
+  },
+
+  onselfclosingtag(end) {
+    const name = currentOpenTag!.tag
+    currentOpenTag!.isSelfClosing = true
+    endOpenTag(end)
+    if (stack[0]?.tag === name) {
+      onCloseTag(stack.shift()!, end)
+    }
+  },
+
+  onattribname(start, end) {
+    // plain attribute
+    currentProp = {
+      type: NodeTypes.ATTRIBUTE,
+      name: getSlice(start, end),
+      nameLoc: getLoc(start, end),
+      value: undefined,
+      loc: getLoc(start),
+    }
+  },
+
+  ondirname(start, end) {
+    const raw = getSlice(start, end)
+    const name =
+      raw === '.' || raw === ':'
+        ? 'bind'
+        : raw === '@'
+          ? 'on'
+          : raw === '#'
+            ? 'slot'
+            : raw.slice(2)
+
+    if (!inVPre && name === '') {
+      emitError(ErrorCodes.X_MISSING_DIRECTIVE_NAME, start)
+    }
+
+    if (inVPre || name === '') {
+      currentProp = {
+        type: NodeTypes.ATTRIBUTE,
+        name: raw,
+        nameLoc: getLoc(start, end),
+        value: undefined,
+        loc: getLoc(start),
+      }
+    } else {
+      currentProp = {
+        type: NodeTypes.DIRECTIVE,
+        name,
+        rawName: raw,
+        exp: undefined,
+        arg: undefined,
+        modifiers: raw === '.' ? ['prop'] : [],
+        loc: getLoc(start),
+      }
+      if (name === 'pre') {
+        inVPre = tokenizer.inVPre = true
+        currentVPreBoundary = currentOpenTag
+        // convert dirs before this one to attributes
+        const props = currentOpenTag!.props
+        for (let i = 0; i < props.length; i++) {
+          if (props[i].type === NodeTypes.DIRECTIVE) {
+            props[i] = dirToAttr(props[i] as DirectiveNode)
+          }
+        }
+      }
+    }
+  },
+
+  ondirarg(start, end) {
+    if (start === end) return
+    const arg = getSlice(start, end)
+    if (inVPre) {
+      ;(currentProp as AttributeNode).name += arg
+      setLocEnd((currentProp as AttributeNode).nameLoc, end)
+    } else {
+      const isStatic = arg[0] !== `[`
+      ;(currentProp as DirectiveNode).arg = createExp(
+        isStatic ? arg : arg.slice(1, -1),
+        isStatic,
+        getLoc(start, end),
+        isStatic ? ConstantTypes.CAN_STRINGIFY : ConstantTypes.NOT_CONSTANT,
+      )
+    }
+  },
+
+  ondirmodifier(start, end) {
+    const mod = getSlice(start, end)
+    if (inVPre) {
+      ;(currentProp as AttributeNode).name += '.' + mod
+      setLocEnd((currentProp as AttributeNode).nameLoc, end)
+    } else if ((currentProp as DirectiveNode).name === 'slot') {
+      // slot has no modifiers, special case for edge cases like
+      // https://github.com/vuejs/language-tools/issues/2710
+      const arg = (currentProp as DirectiveNode).arg
+      if (arg) {
+        ;(arg as SimpleExpressionNode).content += '.' + mod
+        setLocEnd(arg.loc, end)
+      }
+    } else {
+      ;(currentProp as DirectiveNode).modifiers.push(mod)
+    }
+  },
+
+  onattribdata(start, end) {
+    currentAttrValue += getSlice(start, end)
+    if (currentAttrStartIndex < 0) currentAttrStartIndex = start
+    currentAttrEndIndex = end
+  },
+
+  onattribentity(char, start, end) {
+    currentAttrValue += char
+    if (currentAttrStartIndex < 0) currentAttrStartIndex = start
+    currentAttrEndIndex = end
+  },
+
+  onattribnameend(end) {
+    const start = currentProp!.loc.start.offset
+    const name = getSlice(start, end)
+    if (currentProp!.type === NodeTypes.DIRECTIVE) {
+      currentProp!.rawName = name
+    }
+    // check duplicate attrs
+    if (
+      currentOpenTag!.props.some(
+        p => (p.type === NodeTypes.DIRECTIVE ? p.rawName : p.name) === name,
+      )
+    ) {
+      emitError(ErrorCodes.DUPLICATE_ATTRIBUTE, start)
+    }
+  },
+
+  onattribend(quote, end) {
+    if (currentOpenTag && currentProp) {
+      // finalize end pos
+      setLocEnd(currentProp.loc, end)
+
+      if (quote !== QuoteType.NoValue) {
+        if (__BROWSER__ && currentAttrValue.includes('&')) {
+          currentAttrValue = currentOptions.decodeEntities!(
+            currentAttrValue,
+            true,
+          )
+        }
+
+        if (currentProp.type === NodeTypes.ATTRIBUTE) {
+          // assign value
+
+          // condense whitespaces in class
+          if (currentProp!.name === 'class') {
+            currentAttrValue = condense(currentAttrValue).trim()
+          }
+
+          if (quote === QuoteType.Unquoted && !currentAttrValue) {
+            emitError(ErrorCodes.MISSING_ATTRIBUTE_VALUE, end)
+          }
+
+          currentProp!.value = {
+            type: NodeTypes.TEXT,
+            content: currentAttrValue,
+            loc:
+              quote === QuoteType.Unquoted
+                ? getLoc(currentAttrStartIndex, currentAttrEndIndex)
+                : getLoc(currentAttrStartIndex - 1, currentAttrEndIndex + 1),
+          }
+          if (
+            tokenizer.inSFCRoot &&
+            currentOpenTag.tag === 'template' &&
+            currentProp.name === 'lang' &&
+            currentAttrValue &&
+            currentAttrValue !== 'html'
+          ) {
+            // SFC root template with preprocessor lang, force tokenizer to
+            // RCDATA mode
+            tokenizer.enterRCDATA(toCharCodes(`</template`), 0)
+          }
+        } else {
+          // directive
+          let expParseMode = ExpParseMode.Normal
+          if (!__BROWSER__) {
+            if (currentProp.name === 'for') {
+              expParseMode = ExpParseMode.Skip
+            } else if (currentProp.name === 'slot') {
+              expParseMode = ExpParseMode.Params
+            } else if (
+              currentProp.name === 'on' &&
+              currentAttrValue.includes(';')
+            ) {
+              expParseMode = ExpParseMode.Statements
+            }
+          }
+          currentProp.exp = createExp(
+            currentAttrValue,
+            false,
+            getLoc(currentAttrStartIndex, currentAttrEndIndex),
+            ConstantTypes.NOT_CONSTANT,
+            expParseMode,
+          )
+          if (currentProp.name === 'for') {
+            currentProp.forParseResult = parseForExpression(currentProp.exp)
+          }
+          // 2.x compat v-bind:foo.sync -> v-model:foo
+          let syncIndex = -1
+          if (
+            __COMPAT__ &&
+            currentProp.name === 'bind' &&
+            (syncIndex = currentProp.modifiers.indexOf('sync')) > -1 &&
+            checkCompatEnabled(
+              CompilerDeprecationTypes.COMPILER_V_BIND_SYNC,
+              currentOptions,
+              currentProp.loc,
+              currentProp.rawName,
+            )
+          ) {
+            currentProp.name = 'model'
+            currentProp.modifiers.splice(syncIndex, 1)
+          }
+        }
+      }
+      if (
+        currentProp.type !== NodeTypes.DIRECTIVE ||
+        currentProp.name !== 'pre'
+      ) {
+        currentOpenTag.props.push(currentProp)
+      }
+    }
+    currentAttrValue = ''
+    currentAttrStartIndex = currentAttrEndIndex = -1
+  },
+
+  oncomment(start, end) {
+    if (currentOptions.comments) {
+      addNode({
+        type: NodeTypes.COMMENT,
+        content: getSlice(start, end),
+        loc: getLoc(start - 4, end + 3),
+      })
+    }
+  },
+
+  onend() {
+    const end = currentInput.length
+    // EOF ERRORS
+    if ((__DEV__ || !__BROWSER__) && tokenizer.state !== State.Text) {
+      switch (tokenizer.state) {
+        case State.BeforeTagName:
+        case State.BeforeClosingTagName:
+          emitError(ErrorCodes.EOF_BEFORE_TAG_NAME, end)
+          break
+        case State.Interpolation:
+        case State.InterpolationClose:
+          emitError(
+            ErrorCodes.X_MISSING_INTERPOLATION_END,
+            tokenizer.sectionStart,
+          )
+          break
+        case State.InCommentLike:
+          if (tokenizer.currentSequence === Sequences.CdataEnd) {
+            emitError(ErrorCodes.EOF_IN_CDATA, end)
+          } else {
+            emitError(ErrorCodes.EOF_IN_COMMENT, end)
+          }
+          break
+        case State.InTagName:
+        case State.InSelfClosingTag:
+        case State.InClosingTagName:
+        case State.BeforeAttrName:
+        case State.InAttrName:
+        case State.InDirName:
+        case State.InDirArg:
+        case State.InDirDynamicArg:
+        case State.InDirModifier:
+        case State.AfterAttrName:
+        case State.BeforeAttrValue:
+        case State.InAttrValueDq: // "
+        case State.InAttrValueSq: // '
+        case State.InAttrValueNq:
+          emitError(ErrorCodes.EOF_IN_TAG, end)
+          break
+        default:
+          // console.log(tokenizer.state)
+          break
+      }
+    }
+    for (let index = 0; index < stack.length; index++) {
+      onCloseTag(stack[index], end - 1)
+      emitError(ErrorCodes.X_MISSING_END_TAG, stack[index].loc.start.offset)
+    }
+  },
+
+  oncdata(start, end) {
+    if (stack[0].ns !== Namespaces.HTML) {
+      onText(getSlice(start, end), start, end)
+    } else {
+      emitError(ErrorCodes.CDATA_IN_HTML_CONTENT, start - 9)
+    }
+  },
+
+  onprocessinginstruction(start) {
+    // ignore as we do not have runtime handling for this, only check error
+    if ((stack[0] ? stack[0].ns : currentOptions.ns) === Namespaces.HTML) {
+      emitError(
+        ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
+        start - 1,
+      )
+    }
+  },
+})
+
+// This regex doesn't cover the case if key or index aliases have destructuring,
+// but those do not make sense in the first place, so this works in practice.
+const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
+const stripParensRE = /^\(|\)$/g
+
+function parseForExpression(
+  input: SimpleExpressionNode,
+): ForParseResult | undefined {
+  const loc = input.loc
+  const exp = input.content
+  const inMatch = exp.match(forAliasRE)
+  if (!inMatch) return
+
+  const [, LHS, RHS] = inMatch
+
+  const createAliasExpression = (
+    content: string,
+    offset: number,
+    asParam = false,
+  ) => {
+    const start = loc.start.offset + offset
+    const end = start + content.length
+    return createExp(
+      content,
+      false,
+      getLoc(start, end),
+      ConstantTypes.NOT_CONSTANT,
+      asParam ? ExpParseMode.Params : ExpParseMode.Normal,
+    )
+  }
+
+  const result: ForParseResult = {
+    source: createAliasExpression(RHS.trim(), exp.indexOf(RHS, LHS.length)),
+    value: undefined,
+    key: undefined,
+    index: undefined,
+    finalized: false,
+  }
+
+  let valueContent = LHS.trim().replace(stripParensRE, '').trim()
+  const trimmedOffset = LHS.indexOf(valueContent)
+
+  const iteratorMatch = valueContent.match(forIteratorRE)
+  if (iteratorMatch) {
+    valueContent = valueContent.replace(forIteratorRE, '').trim()
+
+    const keyContent = iteratorMatch[1].trim()
+    let keyOffset: number | undefined
+    if (keyContent) {
+      keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length)
+      result.key = createAliasExpression(keyContent, keyOffset, true)
+    }
+
+    if (iteratorMatch[2]) {
+      const indexContent = iteratorMatch[2].trim()
+
+      if (indexContent) {
+        result.index = createAliasExpression(
+          indexContent,
+          exp.indexOf(
+            indexContent,
+            result.key
+              ? keyOffset! + keyContent.length
+              : trimmedOffset + valueContent.length,
+          ),
+          true,
+        )
+      }
+    }
+  }
+
+  if (valueContent) {
+    result.value = createAliasExpression(valueContent, trimmedOffset, true)
+  }
+
+  return result
+}
+
+function getSlice(start: number, end: number) {
+  return currentInput.slice(start, end)
+}
+
+function endOpenTag(end: number) {
+  if (tokenizer.inSFCRoot) {
+    // in SFC mode, generate locations for root-level tags' inner content.
+    currentOpenTag!.innerLoc = getLoc(end + 1, end + 1)
+  }
+  addNode(currentOpenTag!)
+  const { tag, ns } = currentOpenTag!
+  if (ns === Namespaces.HTML && currentOptions.isPreTag(tag)) {
+    inPre++
+  }
+  if (currentOptions.isVoidTag(tag)) {
+    onCloseTag(currentOpenTag!, end)
+  } else {
+    stack.unshift(currentOpenTag!)
+    if (ns === Namespaces.SVG || ns === Namespaces.MATH_ML) {
+      tokenizer.inXML = true
+    }
+  }
+  currentOpenTag = null
+}
+
+function onText(content: string, start: number, end: number) {
+  if (__BROWSER__) {
+    const tag = stack[0]?.tag
+    if (tag !== 'script' && tag !== 'style' && content.includes('&')) {
+      content = currentOptions.decodeEntities!(content, false)
+    }
+  }
+  const parent = stack[0] || currentRoot
+  const lastNode = parent.children[parent.children.length - 1]
+  if (lastNode?.type === NodeTypes.TEXT) {
+    // merge
+    lastNode.content += content
+    setLocEnd(lastNode.loc, end)
+  } else {
+    parent.children.push({
+      type: NodeTypes.TEXT,
+      content,
+      loc: getLoc(start, end),
+    })
+  }
+}
+
+function onCloseTag(el: ElementNode, end: number, isImplied = false) {
+  // attach end position
+  if (isImplied) {
+    // implied close, end should be backtracked to close
+    setLocEnd(el.loc, backTrack(end, CharCodes.Lt))
+  } else {
+    setLocEnd(el.loc, end + 1)
+  }
+
+  if (tokenizer.inSFCRoot) {
+    // SFC root tag, resolve inner end
+    if (el.children.length) {
+      el.innerLoc!.end = extend({}, el.children[el.children.length - 1].loc.end)
+    } else {
+      el.innerLoc!.end = extend({}, el.innerLoc!.start)
+    }
+    el.innerLoc!.source = getSlice(
+      el.innerLoc!.start.offset,
+      el.innerLoc!.end.offset,
+    )
+  }
+
+  // refine element type
+  const { tag, ns } = el
+  if (!inVPre) {
+    if (tag === 'slot') {
+      el.tagType = ElementTypes.SLOT
+    } else if (isFragmentTemplate(el)) {
+      el.tagType = ElementTypes.TEMPLATE
+    } else if (isComponent(el)) {
+      el.tagType = ElementTypes.COMPONENT
+    }
+  }
+
+  // whitespace management
+  if (!tokenizer.inRCDATA) {
+    el.children = condenseWhitespace(el.children, el.tag)
+  }
+  if (ns === Namespaces.HTML && currentOptions.isPreTag(tag)) {
+    inPre--
+  }
+  if (currentVPreBoundary === el) {
+    inVPre = tokenizer.inVPre = false
+    currentVPreBoundary = null
+  }
+  if (
+    tokenizer.inXML &&
+    (stack[0] ? stack[0].ns : currentOptions.ns) === Namespaces.HTML
+  ) {
+    tokenizer.inXML = false
+  }
+
+  // 2.x compat / deprecation checks
+  if (__COMPAT__) {
+    const props = el.props
+    if (
+      __DEV__ &&
+      isCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+        currentOptions,
+      )
+    ) {
+      let hasIf = false
+      let hasFor = false
+      for (let i = 0; i < props.length; i++) {
+        const p = props[i]
+        if (p.type === NodeTypes.DIRECTIVE) {
+          if (p.name === 'if') {
+            hasIf = true
+          } else if (p.name === 'for') {
+            hasFor = true
+          }
+        }
+        if (hasIf && hasFor) {
+          warnDeprecation(
+            CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
+            currentOptions,
+            el.loc,
+          )
+          break
+        }
+      }
+    }
+
+    if (
+      !tokenizer.inSFCRoot &&
+      isCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+        currentOptions,
+      ) &&
+      el.tag === 'template' &&
+      !isFragmentTemplate(el)
+    ) {
+      __DEV__ &&
+        warnDeprecation(
+          CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE,
+          currentOptions,
+          el.loc,
+        )
+      // unwrap
+      const parent = stack[0] || currentRoot
+      const index = parent.children.indexOf(el)
+      parent.children.splice(index, 1, ...el.children)
+    }
+
+    const inlineTemplateProp = props.find(
+      p => p.type === NodeTypes.ATTRIBUTE && p.name === 'inline-template',
+    ) as AttributeNode
+    if (
+      inlineTemplateProp &&
+      checkCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE,
+        currentOptions,
+        inlineTemplateProp.loc,
+      ) &&
+      el.children.length
+    ) {
+      inlineTemplateProp.value = {
+        type: NodeTypes.TEXT,
+        content: getSlice(
+          el.children[0].loc.start.offset,
+          el.children[el.children.length - 1].loc.end.offset,
+        ),
+        loc: inlineTemplateProp.loc,
+      }
+    }
+  }
+}
+
+function backTrack(index: number, c: number) {
+  let i = index
+  while (currentInput.charCodeAt(i) !== c && i >= 0) i--
+  return i
+}
+
+const specialTemplateDir = new Set(['if', 'else', 'else-if', 'for', 'slot'])
+function isFragmentTemplate({ tag, props }: ElementNode): boolean {
+  if (tag === 'template') {
+    for (let i = 0; i < props.length; i++) {
+      if (
+        props[i].type === NodeTypes.DIRECTIVE &&
+        specialTemplateDir.has((props[i] as DirectiveNode).name)
+      ) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+function isComponent({ tag, props }: ElementNode): boolean {
+  if (currentOptions.isCustomElement(tag)) {
+    return false
+  }
+  if (
+    tag === 'component' ||
+    isUpperCase(tag.charCodeAt(0)) ||
+    isCoreComponent(tag) ||
+    currentOptions.isBuiltInComponent?.(tag) ||
+    (currentOptions.isNativeTag && !currentOptions.isNativeTag(tag))
+  ) {
+    return true
+  }
+  // at this point the tag should be a native tag, but check for potential "is"
+  // casting
+  for (let i = 0; i < props.length; i++) {
+    const p = props[i]
+    if (p.type === NodeTypes.ATTRIBUTE) {
+      if (p.name === 'is' && p.value) {
+        if (p.value.content.startsWith('vue:')) {
+          return true
+        } else if (
+          __COMPAT__ &&
+          checkCompatEnabled(
+            CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
+            currentOptions,
+            p.loc,
+          )
+        ) {
+          return true
+        }
+      }
+    } else if (
+      __COMPAT__ &&
+      // :is on plain element - only treat as component in compat mode
+      p.name === 'bind' &&
+      isStaticArgOf(p.arg, 'is') &&
+      checkCompatEnabled(
+        CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
+        currentOptions,
+        p.loc,
+      )
+    ) {
+      return true
+    }
+  }
+  return false
+}
+
+function isUpperCase(c: number) {
+  return c > 64 && c < 91
+}
+
+const windowsNewlineRE = /\r\n/g
+function condenseWhitespace(
+  nodes: TemplateChildNode[],
+  tag?: string,
+): TemplateChildNode[] {
+  const shouldCondense = currentOptions.whitespace !== 'preserve'
+  let removedWhitespace = false
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    if (node.type === NodeTypes.TEXT) {
+      if (!inPre) {
+        if (isAllWhitespace(node.content)) {
+          const prev = nodes[i - 1]?.type
+          const next = nodes[i + 1]?.type
+          // Remove if:
+          // - the whitespace is the first or last node, or:
+          // - (condense mode) the whitespace is between two comments, or:
+          // - (condense mode) the whitespace is between comment and element, or:
+          // - (condense mode) the whitespace is between two elements AND contains newline
+          if (
+            !prev ||
+            !next ||
+            (shouldCondense &&
+              ((prev === NodeTypes.COMMENT &&
+                (next === NodeTypes.COMMENT || next === NodeTypes.ELEMENT)) ||
+                (prev === NodeTypes.ELEMENT &&
+                  (next === NodeTypes.COMMENT ||
+                    (next === NodeTypes.ELEMENT &&
+                      hasNewlineChar(node.content))))))
+          ) {
+            removedWhitespace = true
+            nodes[i] = null as any
+          } else {
+            // Otherwise, the whitespace is condensed into a single space
+            node.content = ' '
+          }
+        } else if (shouldCondense) {
+          // in condense mode, consecutive whitespaces in text are condensed
+          // down to a single space.
+          node.content = condense(node.content)
+        }
+      } else {
+        // #6410 normalize windows newlines in <pre>:
+        // in SSR, browsers normalize server-rendered \r\n into a single \n
+        // in the DOM
+        node.content = node.content.replace(windowsNewlineRE, '\n')
+      }
+    }
+  }
+  if (inPre && tag && currentOptions.isPreTag(tag)) {
+    // remove leading newline per html spec
+    // https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
+    const first = nodes[0]
+    if (first && first.type === NodeTypes.TEXT) {
+      first.content = first.content.replace(/^\r?\n/, '')
+    }
+  }
+  return removedWhitespace ? nodes.filter(Boolean) : nodes
+}
+
+function isAllWhitespace(str: string) {
+  for (let i = 0; i < str.length; i++) {
+    if (!isWhitespace(str.charCodeAt(i))) {
+      return false
+    }
+  }
+  return true
+}
+
+function hasNewlineChar(str: string) {
+  for (let i = 0; i < str.length; i++) {
+    const c = str.charCodeAt(i)
+    if (c === CharCodes.NewLine || c === CharCodes.CarriageReturn) {
+      return true
+    }
+  }
+  return false
+}
+
+function condense(str: string) {
+  let ret = ''
+  let prevCharIsWhitespace = false
+  for (let i = 0; i < str.length; i++) {
+    if (isWhitespace(str.charCodeAt(i))) {
+      if (!prevCharIsWhitespace) {
+        ret += ' '
+        prevCharIsWhitespace = true
+      }
+    } else {
+      ret += str[i]
+      prevCharIsWhitespace = false
+    }
+  }
+  return ret
+}
+
+function addNode(node: TemplateChildNode) {
+  ;(stack[0] || currentRoot).children.push(node)
+}
+
+function getLoc(start: number, end?: number): SourceLocation {
+  return {
+    start: tokenizer.getPos(start),
+    // @ts-expect-error allow late attachment
+    end: end == null ? end : tokenizer.getPos(end),
+    // @ts-expect-error allow late attachment
+    source: end == null ? end : getSlice(start, end),
+  }
+}
+
+function setLocEnd(loc: SourceLocation, end: number) {
+  loc.end = tokenizer.getPos(end)
+  loc.source = getSlice(loc.start.offset, end)
+}
+
+function dirToAttr(dir: DirectiveNode): AttributeNode {
+  const attr: AttributeNode = {
+    type: NodeTypes.ATTRIBUTE,
+    name: dir.rawName!,
+    nameLoc: getLoc(
+      dir.loc.start.offset,
+      dir.loc.start.offset + dir.rawName!.length,
+    ),
+    value: undefined,
+    loc: dir.loc,
+  }
+  if (dir.exp) {
+    // account for quotes
+    const loc = dir.exp.loc
+    if (loc.end.offset < dir.loc.end.offset) {
+      loc.start.offset--
+      loc.start.column--
+      loc.end.offset++
+      loc.end.column++
+    }
+    attr.value = {
+      type: NodeTypes.TEXT,
+      content: (dir.exp as SimpleExpressionNode).content,
+      loc,
+    }
+  }
+  return attr
+}
+
+enum ExpParseMode {
+  Normal,
+  Params,
+  Statements,
+  Skip,
+}
+
+function createExp(
+  content: SimpleExpressionNode['content'],
+  isStatic: SimpleExpressionNode['isStatic'] = false,
+  loc: SourceLocation,
+  constType: ConstantTypes = ConstantTypes.NOT_CONSTANT,
+  parseMode = ExpParseMode.Normal,
+) {
+  const exp = createSimpleExpression(content, isStatic, loc, constType)
+  if (
+    !__BROWSER__ &&
+    !isStatic &&
+    currentOptions.prefixIdentifiers &&
+    parseMode !== ExpParseMode.Skip &&
+    content.trim()
+  ) {
+    if (isSimpleIdentifier(content)) {
+      exp.ast = null // fast path
+      return exp
+    }
+    try {
+      const plugins = currentOptions.expressionPlugins
+      const options: BabelOptions = {
+        plugins: plugins ? [...plugins, 'typescript'] : ['typescript'],
+      }
+      if (parseMode === ExpParseMode.Statements) {
+        // v-on with multi-inline-statements, pad 1 char
+        exp.ast = parse(` ${content} `, options).program
+      } else if (parseMode === ExpParseMode.Params) {
+        exp.ast = parseExpression(`(${content})=>{}`, options)
+      } else {
+        // normal exp, wrap with parens
+        exp.ast = parseExpression(`(${content})`, options)
+      }
+    } catch (e: any) {
+      exp.ast = false // indicate an error
+      emitError(ErrorCodes.X_INVALID_EXPRESSION, loc.start.offset, e.message)
+    }
+  }
+  return exp
+}
+
+function emitError(code: ErrorCodes, index: number, message?: string) {
+  currentOptions.onError(
+    createCompilerError(code, getLoc(index, index), undefined, message),
+  )
+}
+
+function reset() {
+  tokenizer.reset()
+  currentOpenTag = null
+  currentProp = null
+  currentAttrValue = ''
+  currentAttrStartIndex = -1
+  currentAttrEndIndex = -1
+  stack.length = 0
+}
+
+export function baseParse(input: string, options?: ParserOptions): RootNode {
+  reset()
+  currentInput = input
+  currentOptions = extend({}, defaultParserOptions)
+
+  if (options) {
+    let key: keyof ParserOptions
+    for (key in options) {
+      if (options[key] != null) {
+        // @ts-expect-error
+        currentOptions[key] = options[key]
+      }
+    }
+  }
+
+  if (__DEV__) {
+    if (!__BROWSER__ && currentOptions.decodeEntities) {
+      console.warn(
+        `[@vue/compiler-core] decodeEntities option is passed but will be ` +
+          `ignored in non-browser builds.`,
+      )
+    } else if (__BROWSER__ && !currentOptions.decodeEntities) {
+      throw new Error(
+        `[@vue/compiler-core] decodeEntities option is required in browser builds.`,
+      )
+    }
+  }
+
+  tokenizer.mode =
+    currentOptions.parseMode === 'html'
+      ? ParseMode.HTML
+      : currentOptions.parseMode === 'sfc'
+        ? ParseMode.SFC
+        : ParseMode.BASE
+
+  tokenizer.inXML =
+    currentOptions.ns === Namespaces.SVG ||
+    currentOptions.ns === Namespaces.MATH_ML
+
+  const delimiters = options?.delimiters
+  if (delimiters) {
+    tokenizer.delimiterOpen = toCharCodes(delimiters[0])
+    tokenizer.delimiterClose = toCharCodes(delimiters[1])
+  }
+
+  const root = (currentRoot = createRoot([], input))
+  tokenizer.parse(currentInput)
+  root.loc = getLoc(0, input.length)
+  root.children = condenseWhitespace(root.children)
+  currentRoot = null
+  return root
+}
diff --git a/packages/compiler-core/src/runtimeHelpers.ts b/packages/compiler-core/src/runtimeHelpers.ts
index 3f5ef024797..47ab73e011a 100644
--- a/packages/compiler-core/src/runtimeHelpers.ts
+++ b/packages/compiler-core/src/runtimeHelpers.ts
@@ -13,7 +13,7 @@ export const CREATE_TEXT = Symbol(__DEV__ ? `createTextVNode` : ``)
 export const CREATE_STATIC = Symbol(__DEV__ ? `createStaticVNode` : ``)
 export const RESOLVE_COMPONENT = Symbol(__DEV__ ? `resolveComponent` : ``)
 export const RESOLVE_DYNAMIC_COMPONENT = Symbol(
-  __DEV__ ? `resolveDynamicComponent` : ``
+  __DEV__ ? `resolveDynamicComponent` : ``,
 )
 export const RESOLVE_DIRECTIVE = Symbol(__DEV__ ? `resolveDirective` : ``)
 export const RESOLVE_FILTER = Symbol(__DEV__ ? `resolveFilter` : ``)
@@ -81,7 +81,7 @@ export const helperNameMap: Record<symbol, string> = {
   [UNREF]: `unref`,
   [IS_REF]: `isRef`,
   [WITH_MEMO]: `withMemo`,
-  [IS_MEMO_SAME]: `isMemoSame`
+  [IS_MEMO_SAME]: `isMemoSame`,
 }
 
 export function registerRuntimeHelpers(helpers: Record<symbol, string>) {
diff --git a/packages/compiler-core/src/tokenizer.ts b/packages/compiler-core/src/tokenizer.ts
new file mode 100644
index 00000000000..c63ec6bfbb1
--- /dev/null
+++ b/packages/compiler-core/src/tokenizer.ts
@@ -0,0 +1,1176 @@
+/**
+ * This Tokenizer is adapted from htmlparser2 under the MIT License listed at
+ * https://github.com/fb55/htmlparser2/blob/master/LICENSE
+
+Copyright 2010, 2011, Chris Winberry <chris@winberry.net>. All rights reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+IN THE SOFTWARE.
+ */
+
+import { ErrorCodes } from './errors'
+import type { ElementNode, Position } from './ast'
+
+/**
+ * Note: entities is a non-browser-build-only dependency.
+ * In the browser, we use an HTML element to do the decoding.
+ * Make sure all imports from entities are only used in non-browser branches
+ * so that it can be properly treeshaken.
+ */
+import {
+  DecodingMode,
+  EntityDecoder,
+  fromCodePoint,
+  htmlDecodeTree,
+} from 'entities/lib/decode.js'
+
+export enum ParseMode {
+  BASE,
+  HTML,
+  SFC,
+}
+
+export enum CharCodes {
+  Tab = 0x9, // "\t"
+  NewLine = 0xa, // "\n"
+  FormFeed = 0xc, // "\f"
+  CarriageReturn = 0xd, // "\r"
+  Space = 0x20, // " "
+  ExclamationMark = 0x21, // "!"
+  Number = 0x23, // "#"
+  Amp = 0x26, // "&"
+  SingleQuote = 0x27, // "'"
+  DoubleQuote = 0x22, // '"'
+  GraveAccent = 96, // "`"
+  Dash = 0x2d, // "-"
+  Slash = 0x2f, // "/"
+  Zero = 0x30, // "0"
+  Nine = 0x39, // "9"
+  Semi = 0x3b, // ";"
+  Lt = 0x3c, // "<"
+  Eq = 0x3d, // "="
+  Gt = 0x3e, // ">"
+  Questionmark = 0x3f, // "?"
+  UpperA = 0x41, // "A"
+  LowerA = 0x61, // "a"
+  UpperF = 0x46, // "F"
+  LowerF = 0x66, // "f"
+  UpperZ = 0x5a, // "Z"
+  LowerZ = 0x7a, // "z"
+  LowerX = 0x78, // "x"
+  LowerV = 0x76, // "v"
+  Dot = 0x2e, // "."
+  Colon = 0x3a, // ":"
+  At = 0x40, // "@"
+  LeftSquare = 91, // "["
+  RightSquare = 93, // "]"
+}
+
+const defaultDelimitersOpen = new Uint8Array([123, 123]) // "{{"
+const defaultDelimitersClose = new Uint8Array([125, 125]) // "}}"
+
+/** All the states the tokenizer can be in. */
+export enum State {
+  Text = 1,
+
+  // interpolation
+  InterpolationOpen,
+  Interpolation,
+  InterpolationClose,
+
+  // Tags
+  BeforeTagName, // After <
+  InTagName,
+  InSelfClosingTag,
+  BeforeClosingTagName,
+  InClosingTagName,
+  AfterClosingTagName,
+
+  // Attrs
+  BeforeAttrName,
+  InAttrName,
+  InDirName,
+  InDirArg,
+  InDirDynamicArg,
+  InDirModifier,
+  AfterAttrName,
+  BeforeAttrValue,
+  InAttrValueDq, // "
+  InAttrValueSq, // '
+  InAttrValueNq,
+
+  // Declarations
+  BeforeDeclaration, // !
+  InDeclaration,
+
+  // Processing instructions
+  InProcessingInstruction, // ?
+
+  // Comments & CDATA
+  BeforeComment,
+  CDATASequence,
+  InSpecialComment,
+  InCommentLike,
+
+  // Special tags
+  BeforeSpecialS, // Decide if we deal with `<script` or `<style`
+  BeforeSpecialT, // Decide if we deal with `<title` or `<textarea`
+  SpecialStartSequence,
+  InRCDATA,
+
+  InEntity,
+
+  InSFCRootTagName,
+}
+
+/**
+ * HTML only allows ASCII alpha characters (a-z and A-Z) at the beginning of a
+ * tag name.
+ */
+function isTagStartChar(c: number): boolean {
+  return (
+    (c >= CharCodes.LowerA && c <= CharCodes.LowerZ) ||
+    (c >= CharCodes.UpperA && c <= CharCodes.UpperZ)
+  )
+}
+
+export function isWhitespace(c: number): boolean {
+  return (
+    c === CharCodes.Space ||
+    c === CharCodes.NewLine ||
+    c === CharCodes.Tab ||
+    c === CharCodes.FormFeed ||
+    c === CharCodes.CarriageReturn
+  )
+}
+
+function isEndOfTagSection(c: number): boolean {
+  return c === CharCodes.Slash || c === CharCodes.Gt || isWhitespace(c)
+}
+
+export function toCharCodes(str: string): Uint8Array {
+  const ret = new Uint8Array(str.length)
+  for (let i = 0; i < str.length; i++) {
+    ret[i] = str.charCodeAt(i)
+  }
+  return ret
+}
+
+export enum QuoteType {
+  NoValue = 0,
+  Unquoted = 1,
+  Single = 2,
+  Double = 3,
+}
+
+export interface Callbacks {
+  ontext(start: number, endIndex: number): void
+  ontextentity(char: string, start: number, endIndex: number): void
+
+  oninterpolation(start: number, endIndex: number): void
+
+  onopentagname(start: number, endIndex: number): void
+  onopentagend(endIndex: number): void
+  onselfclosingtag(endIndex: number): void
+  onclosetag(start: number, endIndex: number): void
+
+  onattribdata(start: number, endIndex: number): void
+  onattribentity(char: string, start: number, end: number): void
+  onattribend(quote: QuoteType, endIndex: number): void
+  onattribname(start: number, endIndex: number): void
+  onattribnameend(endIndex: number): void
+
+  ondirname(start: number, endIndex: number): void
+  ondirarg(start: number, endIndex: number): void
+  ondirmodifier(start: number, endIndex: number): void
+
+  oncomment(start: number, endIndex: number): void
+  oncdata(start: number, endIndex: number): void
+
+  onprocessinginstruction(start: number, endIndex: number): void
+  // ondeclaration(start: number, endIndex: number): void
+  onend(): void
+  onerr(code: ErrorCodes, index: number): void
+}
+
+/**
+ * Sequences used to match longer strings.
+ *
+ * We don't have `Script`, `Style`, or `Title` here. Instead, we re-use the *End
+ * sequences with an increased offset.
+ */
+export const Sequences = {
+  Cdata: new Uint8Array([0x43, 0x44, 0x41, 0x54, 0x41, 0x5b]), // CDATA[
+  CdataEnd: new Uint8Array([0x5d, 0x5d, 0x3e]), // ]]>
+  CommentEnd: new Uint8Array([0x2d, 0x2d, 0x3e]), // `-->`
+  ScriptEnd: new Uint8Array([0x3c, 0x2f, 0x73, 0x63, 0x72, 0x69, 0x70, 0x74]), // `</script`
+  StyleEnd: new Uint8Array([0x3c, 0x2f, 0x73, 0x74, 0x79, 0x6c, 0x65]), // `</style`
+  TitleEnd: new Uint8Array([0x3c, 0x2f, 0x74, 0x69, 0x74, 0x6c, 0x65]), // `</title`
+  TextareaEnd: new Uint8Array([
+    0x3c, 0x2f, 116, 101, 120, 116, 97, 114, 101, 97,
+  ]), // `</textarea
+}
+
+export default class Tokenizer {
+  /** The current state the tokenizer is in. */
+  public state = State.Text
+  /** The read buffer. */
+  private buffer = ''
+  /** The beginning of the section that is currently being read. */
+  public sectionStart = 0
+  /** The index within the buffer that we are currently looking at. */
+  private index = 0
+  /** The start of the last entity. */
+  private entityStart = 0
+  /** Some behavior, eg. when decoding entities, is done while we are in another state. This keeps track of the other state type. */
+  private baseState = State.Text
+  /** For special parsing behavior inside of script and style tags. */
+  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[] = []
+
+  private readonly entityDecoder?: EntityDecoder
+
+  public mode = ParseMode.BASE
+  public get inSFCRoot() {
+    return this.mode === ParseMode.SFC && this.stack.length === 0
+  }
+
+  constructor(
+    private readonly stack: ElementNode[],
+    private readonly cbs: Callbacks,
+  ) {
+    if (!__BROWSER__) {
+      this.entityDecoder = new EntityDecoder(htmlDecodeTree, (cp, consumed) =>
+        this.emitCodePoint(cp, consumed),
+      )
+    }
+  }
+
+  public reset(): void {
+    this.state = State.Text
+    this.mode = ParseMode.BASE
+    this.buffer = ''
+    this.sectionStart = 0
+    this.index = 0
+    this.baseState = State.Text
+    this.inRCDATA = false
+    this.currentSequence = undefined!
+    this.newlines.length = 0
+    this.delimiterOpen = defaultDelimitersOpen
+    this.delimiterClose = defaultDelimitersClose
+  }
+
+  /**
+   * Generate Position object with line / column information using recorded
+   * newline positions. We know the index is always going to be an already
+   * processed index, so all the newlines up to this index should have been
+   * recorded.
+   */
+  public getPos(index: number): Position {
+    let line = 1
+    let column = index + 1
+    for (let i = this.newlines.length - 1; i >= 0; i--) {
+      const newlineIndex = this.newlines[i]
+      if (index > newlineIndex) {
+        line = i + 2
+        column = index - newlineIndex
+        break
+      }
+    }
+    return {
+      column,
+      line,
+      offset: index,
+    }
+  }
+
+  private peek() {
+    return this.buffer.charCodeAt(this.index + 1)
+  }
+
+  private stateText(c: number): void {
+    if (c === CharCodes.Lt) {
+      if (this.index > this.sectionStart) {
+        this.cbs.ontext(this.sectionStart, this.index)
+      }
+      this.state = State.BeforeTagName
+      this.sectionStart = this.index
+    } else if (!__BROWSER__ && c === CharCodes.Amp) {
+      this.startEntity()
+    } else if (!this.inVPre && c === this.delimiterOpen[0]) {
+      this.state = State.InterpolationOpen
+      this.delimiterIndex = 0
+      this.stateInterpolationOpen(c)
+    }
+  }
+
+  public delimiterOpen: Uint8Array = defaultDelimitersOpen
+  public delimiterClose: Uint8Array = defaultDelimitersClose
+  private delimiterIndex = -1
+
+  private stateInterpolationOpen(c: number): void {
+    if (c === this.delimiterOpen[this.delimiterIndex]) {
+      if (this.delimiterIndex === this.delimiterOpen.length - 1) {
+        const start = this.index + 1 - this.delimiterOpen.length
+        if (start > this.sectionStart) {
+          this.cbs.ontext(this.sectionStart, start)
+        }
+        this.state = State.Interpolation
+        this.sectionStart = start
+      } else {
+        this.delimiterIndex++
+      }
+    } else if (this.inRCDATA) {
+      this.state = State.InRCDATA
+      this.stateInRCDATA(c)
+    } else {
+      this.state = State.Text
+      this.stateText(c)
+    }
+  }
+
+  private stateInterpolation(c: number): void {
+    if (c === this.delimiterClose[0]) {
+      this.state = State.InterpolationClose
+      this.delimiterIndex = 0
+      this.stateInterpolationClose(c)
+    }
+  }
+
+  private stateInterpolationClose(c: number) {
+    if (c === this.delimiterClose[this.delimiterIndex]) {
+      if (this.delimiterIndex === this.delimiterClose.length - 1) {
+        this.cbs.oninterpolation(this.sectionStart, this.index + 1)
+        if (this.inRCDATA) {
+          this.state = State.InRCDATA
+        } else {
+          this.state = State.Text
+        }
+        this.sectionStart = this.index + 1
+      } else {
+        this.delimiterIndex++
+      }
+    } else {
+      this.state = State.Interpolation
+      this.stateInterpolation(c)
+    }
+  }
+
+  public currentSequence: Uint8Array = undefined!
+  private sequenceIndex = 0
+  private stateSpecialStartSequence(c: number): void {
+    const isEnd = this.sequenceIndex === this.currentSequence.length
+    const isMatch = isEnd
+      ? // If we are at the end of the sequence, make sure the tag name has ended
+        isEndOfTagSection(c)
+      : // Otherwise, do a case-insensitive comparison
+        (c | 0x20) === this.currentSequence[this.sequenceIndex]
+
+    if (!isMatch) {
+      this.inRCDATA = false
+    } else if (!isEnd) {
+      this.sequenceIndex++
+      return
+    }
+
+    this.sequenceIndex = 0
+    this.state = State.InTagName
+    this.stateInTagName(c)
+  }
+
+  /** Look for an end tag. For <title> and <textarea>, also decode entities. */
+  private stateInRCDATA(c: number): void {
+    if (this.sequenceIndex === this.currentSequence.length) {
+      if (c === CharCodes.Gt || isWhitespace(c)) {
+        const endOfText = this.index - this.currentSequence.length
+
+        if (this.sectionStart < endOfText) {
+          // Spoof the index so that reported locations match up.
+          const actualIndex = this.index
+          this.index = endOfText
+          this.cbs.ontext(this.sectionStart, endOfText)
+          this.index = actualIndex
+        }
+
+        this.sectionStart = endOfText + 2 // Skip over the `</`
+        this.stateInClosingTagName(c)
+        this.inRCDATA = false
+        return // We are done; skip the rest of the function.
+      }
+
+      this.sequenceIndex = 0
+    }
+
+    if ((c | 0x20) === this.currentSequence[this.sequenceIndex]) {
+      this.sequenceIndex += 1
+    } else if (this.sequenceIndex === 0) {
+      if (
+        this.currentSequence === Sequences.TitleEnd ||
+        (this.currentSequence === Sequences.TextareaEnd && !this.inSFCRoot)
+      ) {
+        // We have to parse entities in <title> and <textarea> tags.
+        if (!__BROWSER__ && c === CharCodes.Amp) {
+          this.startEntity()
+        } else if (c === this.delimiterOpen[0]) {
+          // We also need to handle interpolation
+          this.state = State.InterpolationOpen
+          this.delimiterIndex = 0
+          this.stateInterpolationOpen(c)
+        }
+      } else if (this.fastForwardTo(CharCodes.Lt)) {
+        // Outside of <title> and <textarea> tags, we can fast-forward.
+        this.sequenceIndex = 1
+      }
+    } else {
+      // If we see a `<`, set the sequence index to 1; useful for eg. `<</script>`.
+      this.sequenceIndex = Number(c === CharCodes.Lt)
+    }
+  }
+
+  private stateCDATASequence(c: number): void {
+    if (c === Sequences.Cdata[this.sequenceIndex]) {
+      if (++this.sequenceIndex === Sequences.Cdata.length) {
+        this.state = State.InCommentLike
+        this.currentSequence = Sequences.CdataEnd
+        this.sequenceIndex = 0
+        this.sectionStart = this.index + 1
+      }
+    } else {
+      this.sequenceIndex = 0
+      this.state = State.InDeclaration
+      this.stateInDeclaration(c) // Reconsume the character
+    }
+  }
+
+  /**
+   * When we wait for one specific character, we can speed things up
+   * by skipping through the buffer until we find it.
+   *
+   * @returns Whether the character was found.
+   */
+  private fastForwardTo(c: number): boolean {
+    while (++this.index < this.buffer.length) {
+      const cc = this.buffer.charCodeAt(this.index)
+      if (cc === CharCodes.NewLine) {
+        this.newlines.push(this.index)
+      }
+      if (cc === c) {
+        return true
+      }
+    }
+
+    /*
+     * We increment the index at the end of the `parse` loop,
+     * so set it to `buffer.length - 1` here.
+     *
+     * TODO: Refactor `parse` to increment index before calling states.
+     */
+    this.index = this.buffer.length - 1
+
+    return false
+  }
+
+  /**
+   * Comments and CDATA end with `-->` and `]]>`.
+   *
+   * Their common qualities are:
+   * - Their end sequences have a distinct character they start with.
+   * - That character is then repeated, so we have to check multiple repeats.
+   * - All characters but the start character of the sequence can be skipped.
+   */
+  private stateInCommentLike(c: number): void {
+    if (c === this.currentSequence[this.sequenceIndex]) {
+      if (++this.sequenceIndex === this.currentSequence.length) {
+        if (this.currentSequence === Sequences.CdataEnd) {
+          this.cbs.oncdata(this.sectionStart, this.index - 2)
+        } else {
+          this.cbs.oncomment(this.sectionStart, this.index - 2)
+        }
+
+        this.sequenceIndex = 0
+        this.sectionStart = this.index + 1
+        this.state = State.Text
+      }
+    } else if (this.sequenceIndex === 0) {
+      // Fast-forward to the first character of the sequence
+      if (this.fastForwardTo(this.currentSequence[0])) {
+        this.sequenceIndex = 1
+      }
+    } else if (c !== this.currentSequence[this.sequenceIndex - 1]) {
+      // Allow long sequences, eg. --->, ]]]>
+      this.sequenceIndex = 0
+    }
+  }
+
+  private startSpecial(sequence: Uint8Array, offset: number) {
+    this.enterRCDATA(sequence, offset)
+    this.state = State.SpecialStartSequence
+  }
+
+  public enterRCDATA(sequence: Uint8Array, offset: number) {
+    this.inRCDATA = true
+    this.currentSequence = sequence
+    this.sequenceIndex = offset
+  }
+
+  private stateBeforeTagName(c: number): void {
+    if (c === CharCodes.ExclamationMark) {
+      this.state = State.BeforeDeclaration
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.Questionmark) {
+      this.state = State.InProcessingInstruction
+      this.sectionStart = this.index + 1
+    } else if (isTagStartChar(c)) {
+      this.sectionStart = this.index
+      if (this.mode === ParseMode.BASE) {
+        // no special tags in base mode
+        this.state = State.InTagName
+      } else if (this.inSFCRoot) {
+        // SFC mode + root level
+        // - everything except <template> is RAWTEXT
+        // - <template> with lang other than html is also RAWTEXT
+        this.state = State.InSFCRootTagName
+      } else if (!this.inXML) {
+        // HTML mode
+        // - <script>, <style> RAWTEXT
+        // - <title>, <textarea> RCDATA
+        const lower = c | 0x20
+        if (lower === 116 /* t */) {
+          this.state = State.BeforeSpecialT
+        } else {
+          this.state =
+            lower === 115 /* s */ ? State.BeforeSpecialS : State.InTagName
+        }
+      } else {
+        this.state = State.InTagName
+      }
+    } else if (c === CharCodes.Slash) {
+      this.state = State.BeforeClosingTagName
+    } else {
+      this.state = State.Text
+      this.stateText(c)
+    }
+  }
+  private stateInTagName(c: number): void {
+    if (isEndOfTagSection(c)) {
+      this.handleTagName(c)
+    }
+  }
+  private stateInSFCRootTagName(c: number): void {
+    if (isEndOfTagSection(c)) {
+      const tag = this.buffer.slice(this.sectionStart, this.index)
+      if (tag !== 'template') {
+        this.enterRCDATA(toCharCodes(`</` + tag), 0)
+      }
+      this.handleTagName(c)
+    }
+  }
+  private handleTagName(c: number) {
+    this.cbs.onopentagname(this.sectionStart, this.index)
+    this.sectionStart = -1
+    this.state = State.BeforeAttrName
+    this.stateBeforeAttrName(c)
+  }
+  private stateBeforeClosingTagName(c: number): void {
+    if (isWhitespace(c)) {
+      // Ignore
+    } else if (c === CharCodes.Gt) {
+      if (__DEV__ || !__BROWSER__) {
+        this.cbs.onerr(ErrorCodes.MISSING_END_TAG_NAME, this.index)
+      }
+      this.state = State.Text
+      // Ignore
+      this.sectionStart = this.index + 1
+    } else {
+      this.state = isTagStartChar(c)
+        ? State.InClosingTagName
+        : State.InSpecialComment
+      this.sectionStart = this.index
+    }
+  }
+  private stateInClosingTagName(c: number): void {
+    if (c === CharCodes.Gt || isWhitespace(c)) {
+      this.cbs.onclosetag(this.sectionStart, this.index)
+      this.sectionStart = -1
+      this.state = State.AfterClosingTagName
+      this.stateAfterClosingTagName(c)
+    }
+  }
+  private stateAfterClosingTagName(c: number): void {
+    // Skip everything until ">"
+    if (c === CharCodes.Gt) {
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateBeforeAttrName(c: number): void {
+    if (c === CharCodes.Gt) {
+      this.cbs.onopentagend(this.index)
+      if (this.inRCDATA) {
+        this.state = State.InRCDATA
+      } else {
+        this.state = State.Text
+      }
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.Slash) {
+      this.state = State.InSelfClosingTag
+      if ((__DEV__ || !__BROWSER__) && this.peek() !== CharCodes.Gt) {
+        this.cbs.onerr(ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG, this.index)
+      }
+    } else if (c === CharCodes.Lt && this.peek() === CharCodes.Slash) {
+      // special handling for </ appearing in open tag state
+      // this is different from standard HTML parsing but makes practical sense
+      // especially for parsing intermediate input state in IDEs.
+      this.cbs.onopentagend(this.index)
+      this.state = State.BeforeTagName
+      this.sectionStart = this.index
+    } else if (!isWhitespace(c)) {
+      if ((__DEV__ || !__BROWSER__) && c === CharCodes.Eq) {
+        this.cbs.onerr(
+          ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
+          this.index,
+        )
+      }
+      this.handleAttrStart(c)
+    }
+  }
+  private handleAttrStart(c: number) {
+    if (c === CharCodes.LowerV && this.peek() === CharCodes.Dash) {
+      this.state = State.InDirName
+      this.sectionStart = this.index
+    } else if (
+      c === CharCodes.Dot ||
+      c === CharCodes.Colon ||
+      c === CharCodes.At ||
+      c === CharCodes.Number
+    ) {
+      this.cbs.ondirname(this.index, this.index + 1)
+      this.state = State.InDirArg
+      this.sectionStart = this.index + 1
+    } else {
+      this.state = State.InAttrName
+      this.sectionStart = this.index
+    }
+  }
+  private stateInSelfClosingTag(c: number): void {
+    if (c === CharCodes.Gt) {
+      this.cbs.onselfclosingtag(this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+      this.inRCDATA = false // Reset special state, in case of self-closing special tags
+    } else if (!isWhitespace(c)) {
+      this.state = State.BeforeAttrName
+      this.stateBeforeAttrName(c)
+    }
+  }
+  private stateInAttrName(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.onattribname(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (
+      (__DEV__ || !__BROWSER__) &&
+      (c === CharCodes.DoubleQuote ||
+        c === CharCodes.SingleQuote ||
+        c === CharCodes.Lt)
+    ) {
+      this.cbs.onerr(
+        ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
+        this.index,
+      )
+    }
+  }
+  private stateInDirName(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirname(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (c === CharCodes.Colon) {
+      this.cbs.ondirname(this.sectionStart, this.index)
+      this.state = State.InDirArg
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.Dot) {
+      this.cbs.ondirname(this.sectionStart, this.index)
+      this.state = State.InDirModifier
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateInDirArg(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirarg(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (c === CharCodes.LeftSquare) {
+      this.state = State.InDirDynamicArg
+    } else if (c === CharCodes.Dot) {
+      this.cbs.ondirarg(this.sectionStart, this.index)
+      this.state = State.InDirModifier
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateInDynamicDirArg(c: number): void {
+    if (c === CharCodes.RightSquare) {
+      this.state = State.InDirArg
+    } else if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirarg(this.sectionStart, this.index + 1)
+      this.handleAttrNameEnd(c)
+      if (__DEV__ || !__BROWSER__) {
+        this.cbs.onerr(
+          ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
+          this.index,
+        )
+      }
+    }
+  }
+  private stateInDirModifier(c: number): void {
+    if (c === CharCodes.Eq || isEndOfTagSection(c)) {
+      this.cbs.ondirmodifier(this.sectionStart, this.index)
+      this.handleAttrNameEnd(c)
+    } else if (c === CharCodes.Dot) {
+      this.cbs.ondirmodifier(this.sectionStart, this.index)
+      this.sectionStart = this.index + 1
+    }
+  }
+  private handleAttrNameEnd(c: number): void {
+    this.sectionStart = this.index
+    this.state = State.AfterAttrName
+    this.cbs.onattribnameend(this.index)
+    this.stateAfterAttrName(c)
+  }
+  private stateAfterAttrName(c: number): void {
+    if (c === CharCodes.Eq) {
+      this.state = State.BeforeAttrValue
+    } else if (c === CharCodes.Slash || c === CharCodes.Gt) {
+      this.cbs.onattribend(QuoteType.NoValue, this.sectionStart)
+      this.sectionStart = -1
+      this.state = State.BeforeAttrName
+      this.stateBeforeAttrName(c)
+    } else if (!isWhitespace(c)) {
+      this.cbs.onattribend(QuoteType.NoValue, this.sectionStart)
+      this.handleAttrStart(c)
+    }
+  }
+  private stateBeforeAttrValue(c: number): void {
+    if (c === CharCodes.DoubleQuote) {
+      this.state = State.InAttrValueDq
+      this.sectionStart = this.index + 1
+    } else if (c === CharCodes.SingleQuote) {
+      this.state = State.InAttrValueSq
+      this.sectionStart = this.index + 1
+    } else if (!isWhitespace(c)) {
+      this.sectionStart = this.index
+      this.state = State.InAttrValueNq
+      this.stateInAttrValueNoQuotes(c) // Reconsume token
+    }
+  }
+  private handleInAttrValue(c: number, quote: number) {
+    if (c === quote || (__BROWSER__ && this.fastForwardTo(quote))) {
+      this.cbs.onattribdata(this.sectionStart, this.index)
+      this.sectionStart = -1
+      this.cbs.onattribend(
+        quote === CharCodes.DoubleQuote ? QuoteType.Double : QuoteType.Single,
+        this.index + 1,
+      )
+      this.state = State.BeforeAttrName
+    } else if (!__BROWSER__ && c === CharCodes.Amp) {
+      this.startEntity()
+    }
+  }
+  private stateInAttrValueDoubleQuotes(c: number): void {
+    this.handleInAttrValue(c, CharCodes.DoubleQuote)
+  }
+  private stateInAttrValueSingleQuotes(c: number): void {
+    this.handleInAttrValue(c, CharCodes.SingleQuote)
+  }
+  private stateInAttrValueNoQuotes(c: number): void {
+    if (isWhitespace(c) || c === CharCodes.Gt) {
+      this.cbs.onattribdata(this.sectionStart, this.index)
+      this.sectionStart = -1
+      this.cbs.onattribend(QuoteType.Unquoted, this.index)
+      this.state = State.BeforeAttrName
+      this.stateBeforeAttrName(c)
+    } else if (
+      ((__DEV__ || !__BROWSER__) && c === CharCodes.DoubleQuote) ||
+      c === CharCodes.SingleQuote ||
+      c === CharCodes.Lt ||
+      c === CharCodes.Eq ||
+      c === CharCodes.GraveAccent
+    ) {
+      this.cbs.onerr(
+        ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
+        this.index,
+      )
+    } else if (!__BROWSER__ && c === CharCodes.Amp) {
+      this.startEntity()
+    }
+  }
+  private stateBeforeDeclaration(c: number): void {
+    if (c === CharCodes.LeftSquare) {
+      this.state = State.CDATASequence
+      this.sequenceIndex = 0
+    } else {
+      this.state =
+        c === CharCodes.Dash ? State.BeforeComment : State.InDeclaration
+    }
+  }
+  private stateInDeclaration(c: number): void {
+    if (c === CharCodes.Gt || this.fastForwardTo(CharCodes.Gt)) {
+      // this.cbs.ondeclaration(this.sectionStart, this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateInProcessingInstruction(c: number): void {
+    if (c === CharCodes.Gt || this.fastForwardTo(CharCodes.Gt)) {
+      this.cbs.onprocessinginstruction(this.sectionStart, this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateBeforeComment(c: number): void {
+    if (c === CharCodes.Dash) {
+      this.state = State.InCommentLike
+      this.currentSequence = Sequences.CommentEnd
+      // Allow short comments (eg. <!-->)
+      this.sequenceIndex = 2
+      this.sectionStart = this.index + 1
+    } else {
+      this.state = State.InDeclaration
+    }
+  }
+  private stateInSpecialComment(c: number): void {
+    if (c === CharCodes.Gt || this.fastForwardTo(CharCodes.Gt)) {
+      this.cbs.oncomment(this.sectionStart, this.index)
+      this.state = State.Text
+      this.sectionStart = this.index + 1
+    }
+  }
+  private stateBeforeSpecialS(c: number): void {
+    const lower = c | 0x20
+    if (lower === Sequences.ScriptEnd[3]) {
+      this.startSpecial(Sequences.ScriptEnd, 4)
+    } else if (lower === Sequences.StyleEnd[3]) {
+      this.startSpecial(Sequences.StyleEnd, 4)
+    } else {
+      this.state = State.InTagName
+      this.stateInTagName(c) // Consume the token again
+    }
+  }
+  private stateBeforeSpecialT(c: number): void {
+    const lower = c | 0x20
+    if (lower === Sequences.TitleEnd[3]) {
+      this.startSpecial(Sequences.TitleEnd, 4)
+    } else if (lower === Sequences.TextareaEnd[3]) {
+      this.startSpecial(Sequences.TextareaEnd, 4)
+    } else {
+      this.state = State.InTagName
+      this.stateInTagName(c) // Consume the token again
+    }
+  }
+
+  private startEntity() {
+    if (!__BROWSER__) {
+      this.baseState = this.state
+      this.state = State.InEntity
+      this.entityStart = this.index
+      this.entityDecoder!.startEntity(
+        this.baseState === State.Text || this.baseState === State.InRCDATA
+          ? DecodingMode.Legacy
+          : DecodingMode.Attribute,
+      )
+    }
+  }
+
+  private stateInEntity(): void {
+    if (!__BROWSER__) {
+      const length = this.entityDecoder!.write(this.buffer, this.index)
+
+      // If `length` is positive, we are done with the entity.
+      if (length >= 0) {
+        this.state = this.baseState
+
+        if (length === 0) {
+          this.index = this.entityStart
+        }
+      } else {
+        // Mark buffer as consumed.
+        this.index = this.buffer.length - 1
+      }
+    }
+  }
+
+  /**
+   * Iterates through the buffer, calling the function corresponding to the current state.
+   *
+   * States that are more likely to be hit are higher up, as a performance improvement.
+   */
+  public parse(input: string) {
+    this.buffer = input
+    while (this.index < this.buffer.length) {
+      const c = this.buffer.charCodeAt(this.index)
+      if (c === CharCodes.NewLine) {
+        this.newlines.push(this.index)
+      }
+      switch (this.state) {
+        case State.Text: {
+          this.stateText(c)
+          break
+        }
+        case State.InterpolationOpen: {
+          this.stateInterpolationOpen(c)
+          break
+        }
+        case State.Interpolation: {
+          this.stateInterpolation(c)
+          break
+        }
+        case State.InterpolationClose: {
+          this.stateInterpolationClose(c)
+          break
+        }
+        case State.SpecialStartSequence: {
+          this.stateSpecialStartSequence(c)
+          break
+        }
+        case State.InRCDATA: {
+          this.stateInRCDATA(c)
+          break
+        }
+        case State.CDATASequence: {
+          this.stateCDATASequence(c)
+          break
+        }
+        case State.InAttrValueDq: {
+          this.stateInAttrValueDoubleQuotes(c)
+          break
+        }
+        case State.InAttrName: {
+          this.stateInAttrName(c)
+          break
+        }
+        case State.InDirName: {
+          this.stateInDirName(c)
+          break
+        }
+        case State.InDirArg: {
+          this.stateInDirArg(c)
+          break
+        }
+        case State.InDirDynamicArg: {
+          this.stateInDynamicDirArg(c)
+          break
+        }
+        case State.InDirModifier: {
+          this.stateInDirModifier(c)
+          break
+        }
+        case State.InCommentLike: {
+          this.stateInCommentLike(c)
+          break
+        }
+        case State.InSpecialComment: {
+          this.stateInSpecialComment(c)
+          break
+        }
+        case State.BeforeAttrName: {
+          this.stateBeforeAttrName(c)
+          break
+        }
+        case State.InTagName: {
+          this.stateInTagName(c)
+          break
+        }
+        case State.InSFCRootTagName: {
+          this.stateInSFCRootTagName(c)
+          break
+        }
+        case State.InClosingTagName: {
+          this.stateInClosingTagName(c)
+          break
+        }
+        case State.BeforeTagName: {
+          this.stateBeforeTagName(c)
+          break
+        }
+        case State.AfterAttrName: {
+          this.stateAfterAttrName(c)
+          break
+        }
+        case State.InAttrValueSq: {
+          this.stateInAttrValueSingleQuotes(c)
+          break
+        }
+        case State.BeforeAttrValue: {
+          this.stateBeforeAttrValue(c)
+          break
+        }
+        case State.BeforeClosingTagName: {
+          this.stateBeforeClosingTagName(c)
+          break
+        }
+        case State.AfterClosingTagName: {
+          this.stateAfterClosingTagName(c)
+          break
+        }
+        case State.BeforeSpecialS: {
+          this.stateBeforeSpecialS(c)
+          break
+        }
+        case State.BeforeSpecialT: {
+          this.stateBeforeSpecialT(c)
+          break
+        }
+        case State.InAttrValueNq: {
+          this.stateInAttrValueNoQuotes(c)
+          break
+        }
+        case State.InSelfClosingTag: {
+          this.stateInSelfClosingTag(c)
+          break
+        }
+        case State.InDeclaration: {
+          this.stateInDeclaration(c)
+          break
+        }
+        case State.BeforeDeclaration: {
+          this.stateBeforeDeclaration(c)
+          break
+        }
+        case State.BeforeComment: {
+          this.stateBeforeComment(c)
+          break
+        }
+        case State.InProcessingInstruction: {
+          this.stateInProcessingInstruction(c)
+          break
+        }
+        case State.InEntity: {
+          this.stateInEntity()
+          break
+        }
+      }
+      this.index++
+    }
+    this.cleanup()
+    this.finish()
+  }
+
+  /**
+   * Remove data that has already been consumed from the buffer.
+   */
+  private cleanup() {
+    // If we are inside of text or attributes, emit what we already have.
+    if (this.sectionStart !== this.index) {
+      if (
+        this.state === State.Text ||
+        (this.state === State.InRCDATA && this.sequenceIndex === 0)
+      ) {
+        this.cbs.ontext(this.sectionStart, this.index)
+        this.sectionStart = this.index
+      } else if (
+        this.state === State.InAttrValueDq ||
+        this.state === State.InAttrValueSq ||
+        this.state === State.InAttrValueNq
+      ) {
+        this.cbs.onattribdata(this.sectionStart, this.index)
+        this.sectionStart = this.index
+      }
+    }
+  }
+
+  private finish() {
+    if (!__BROWSER__ && this.state === State.InEntity) {
+      this.entityDecoder!.end()
+      this.state = this.baseState
+    }
+
+    this.handleTrailingData()
+
+    this.cbs.onend()
+  }
+
+  /** Handle any trailing data. */
+  private handleTrailingData() {
+    const endIndex = this.buffer.length
+
+    // If there is no remaining data, we are done.
+    if (this.sectionStart >= endIndex) {
+      return
+    }
+
+    if (this.state === State.InCommentLike) {
+      if (this.currentSequence === Sequences.CdataEnd) {
+        this.cbs.oncdata(this.sectionStart, endIndex)
+      } else {
+        this.cbs.oncomment(this.sectionStart, endIndex)
+      }
+    } else if (
+      this.state === State.InTagName ||
+      this.state === State.BeforeAttrName ||
+      this.state === State.BeforeAttrValue ||
+      this.state === State.AfterAttrName ||
+      this.state === State.InAttrName ||
+      this.state === State.InDirName ||
+      this.state === State.InDirArg ||
+      this.state === State.InDirDynamicArg ||
+      this.state === State.InDirModifier ||
+      this.state === State.InAttrValueSq ||
+      this.state === State.InAttrValueDq ||
+      this.state === State.InAttrValueNq ||
+      this.state === State.InClosingTagName
+    ) {
+      /*
+       * If we are currently in an opening or closing tag, us not calling the
+       * respective callback signals that the tag should be ignored.
+       */
+    } else {
+      this.cbs.ontext(this.sectionStart, endIndex)
+    }
+  }
+
+  private emitCodePoint(cp: number, consumed: number): void {
+    if (!__BROWSER__) {
+      if (this.baseState !== State.Text && this.baseState !== State.InRCDATA) {
+        if (this.sectionStart < this.entityStart) {
+          this.cbs.onattribdata(this.sectionStart, this.entityStart)
+        }
+        this.sectionStart = this.entityStart + consumed
+        this.index = this.sectionStart - 1
+
+        this.cbs.onattribentity(
+          fromCodePoint(cp),
+          this.entityStart,
+          this.sectionStart,
+        )
+      } else {
+        if (this.sectionStart < this.entityStart) {
+          this.cbs.ontext(this.sectionStart, this.entityStart)
+        }
+        this.sectionStart = this.entityStart + consumed
+        this.index = this.sectionStart - 1
+
+        this.cbs.ontextentity(
+          fromCodePoint(cp),
+          this.entityStart,
+          this.sectionStart,
+        )
+      }
+    }
+  }
+}
diff --git a/packages/compiler-core/src/transform.ts b/packages/compiler-core/src/transform.ts
index 4d9e8c6ed49..322d0e17638 100644
--- a/packages/compiler-core/src/transform.ts
+++ b/packages/compiler-core/src/transform.ts
@@ -1,45 +1,45 @@
-import { TransformOptions } from './options'
+import type { TransformOptions } from './options'
 import {
-  RootNode,
-  NodeTypes,
-  ParentNode,
-  TemplateChildNode,
-  ElementNode,
-  DirectiveNode,
-  Property,
-  ExpressionNode,
-  createSimpleExpression,
-  JSChildNode,
-  SimpleExpressionNode,
+  type ArrayExpression,
+  type CacheExpression,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
-  CacheExpression,
+  type ExpressionNode,
+  type JSChildNode,
+  NodeTypes,
+  type ParentNode,
+  type Property,
+  type RootNode,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TemplateLiteral,
+  convertToBlock,
   createCacheExpression,
-  TemplateLiteral,
+  createSimpleExpression,
   createVNodeCall,
-  ConstantTypes,
-  ArrayExpression,
-  convertToBlock
 } from './ast'
 import {
-  isString,
-  isArray,
+  EMPTY_OBJ,
   NOOP,
-  PatchFlags,
   PatchFlagNames,
-  EMPTY_OBJ,
+  PatchFlags,
+  camelize,
   capitalize,
-  camelize
+  isArray,
+  isString,
 } from '@vue/shared'
 import { defaultOnError, defaultOnWarn } from './errors'
 import {
-  TO_DISPLAY_STRING,
+  CREATE_COMMENT,
   FRAGMENT,
+  TO_DISPLAY_STRING,
   helperNameMap,
-  CREATE_COMMENT
 } from './runtimeHelpers'
 import { isVSlot } from './utils'
 import { hoistStatic, isSingleElementRoot } from './transforms/hoistStatic'
-import { CompilerCompatOptions } from './compat/compatConfig'
+import type { CompilerCompatOptions } from './compat/compatConfig'
 
 // There are two types of transforms:
 //
@@ -48,7 +48,7 @@ import { CompilerCompatOptions } from './compat/compatConfig'
 //   replace or remove the node being processed.
 export type NodeTransform = (
   node: RootNode | TemplateChildNode,
-  context: TransformContext
+  context: TransformContext,
 ) => void | (() => void) | (() => void)[]
 
 // - DirectiveTransform:
@@ -60,7 +60,7 @@ export type DirectiveTransform = (
   context: TransformContext,
   // a platform specific compiler can import the base transform and augment
   // it by passing in this optional argument.
-  augmentor?: (ret: DirectiveTransformResult) => DirectiveTransformResult
+  augmentor?: (ret: DirectiveTransformResult) => DirectiveTransformResult,
 ) => DirectiveTransformResult
 
 export interface DirectiveTransformResult {
@@ -74,7 +74,7 @@ export interface DirectiveTransformResult {
 export type StructuralDirectiveTransform = (
   node: ElementNode,
   dir: DirectiveNode,
-  context: TransformContext
+  context: TransformContext,
 ) => void | (() => void)
 
 export interface ImportItem {
@@ -83,9 +83,7 @@ export interface ImportItem {
 }
 
 export interface TransformContext
-  extends Required<
-      Omit<TransformOptions, 'filename' | keyof CompilerCompatOptions>
-    >,
+  extends Required<Omit<TransformOptions, keyof CompilerCompatOptions>>,
     CompilerCompatOptions {
   selfName: string | null
   root: RootNode
@@ -117,7 +115,7 @@ export interface TransformContext
   removeIdentifiers(exp: ExpressionNode | string): void
   hoist(exp: string | JSChildNode | ArrayExpression): SimpleExpressionNode
   cache<T extends JSChildNode>(exp: T, isVNode?: boolean): CacheExpression | T
-  constantCache: Map<TemplateChildNode, ConstantTypes>
+  constantCache: WeakMap<TemplateChildNode, ConstantTypes>
 
   // 2.x Compat only
   filters?: Set<string>
@@ -129,6 +127,7 @@ export function createTransformContext(
     filename = '',
     prefixIdentifiers = false,
     hoistStatic = false,
+    hmr = false,
     cacheHandlers = false,
     nodeTransforms = [],
     directiveTransforms = {},
@@ -146,15 +145,17 @@ export function createTransformContext(
     isTS = false,
     onError = defaultOnError,
     onWarn = defaultOnWarn,
-    compatConfig
-  }: TransformOptions
+    compatConfig,
+  }: TransformOptions,
 ): TransformContext {
   const nameMatch = filename.replace(/\?.*$/, '').match(/([^/\\]+)\.\w+$/)
   const context: TransformContext = {
     // options
+    filename,
     selfName: nameMatch && capitalize(camelize(nameMatch[1])),
     prefixIdentifiers,
     hoistStatic,
+    hmr,
     cacheHandlers,
     nodeTransforms,
     directiveTransforms,
@@ -181,7 +182,7 @@ export function createTransformContext(
     directives: new Set(),
     hoists: [],
     imports: [],
-    constantCache: new Map(),
+    constantCache: new WeakMap(),
     temps: 0,
     cached: 0,
     identifiers: Object.create(null),
@@ -189,7 +190,7 @@ export function createTransformContext(
       vFor: 0,
       vSlot: 0,
       vPre: 0,
-      vOnce: 0
+      vOnce: 0,
     },
     parent: null,
     currentNode: root,
@@ -236,8 +237,8 @@ export function createTransformContext(
       const removalIndex = node
         ? list.indexOf(node)
         : context.currentNode
-        ? context.childIndex
-        : -1
+          ? context.childIndex
+          : -1
       /* istanbul ignore if */
       if (__DEV__ && removalIndex < 0) {
         throw new Error(`node being removed is not a child of current parent`)
@@ -255,7 +256,7 @@ export function createTransformContext(
       }
       context.parent!.children.splice(removalIndex, 1)
     },
-    onNodeRemoved: () => {},
+    onNodeRemoved: NOOP,
     addIdentifiers(exp) {
       // identifier tracking only happens in non-browser builds.
       if (!__BROWSER__) {
@@ -286,14 +287,14 @@ export function createTransformContext(
         `_hoisted_${context.hoists.length}`,
         false,
         exp.loc,
-        ConstantTypes.CAN_HOIST
+        ConstantTypes.CAN_HOIST,
       )
       identifier.hoisted = exp
       return identifier
     },
     cache(exp, isVNode = false) {
       return createCacheExpression(context.cached++, exp, isVNode)
-    }
+    },
   }
 
   if (__COMPAT__) {
@@ -332,6 +333,7 @@ export function transform(root: RootNode, options: TransformOptions) {
   root.hoists = context.hoists
   root.temps = context.temps
   root.cached = context.cached
+  root.transformed = true
 
   if (__COMPAT__) {
     root.filters = [...context.filters!]
@@ -381,7 +383,7 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
       undefined,
       true,
       undefined,
-      false /* isComponent */
+      false /* isComponent */,
     )
   } else {
     // no children = noop. codegen will return null.
@@ -390,7 +392,7 @@ function createRootCodegen(root: RootNode, context: TransformContext) {
 
 export function traverseChildren(
   parent: ParentNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
   let i = 0
   const nodeRemoved = () => {
@@ -408,7 +410,7 @@ export function traverseChildren(
 
 export function traverseNode(
   node: RootNode | TemplateChildNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
   context.currentNode = node
   // apply transform plugins
@@ -471,7 +473,7 @@ export function traverseNode(
 
 export function createStructuralDirectiveTransform(
   name: string | RegExp,
-  fn: StructuralDirectiveTransform
+  fn: StructuralDirectiveTransform,
 ): NodeTransform {
   const matches = isString(name)
     ? (n: string) => n === name
diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 5526163c6f9..70a0468e519 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -1,30 +1,30 @@
 import {
+  type CallExpression,
+  type ComponentNode,
   ConstantTypes,
-  RootNode,
-  NodeTypes,
-  TemplateChildNode,
-  SimpleExpressionNode,
   ElementTypes,
-  PlainElementNode,
-  ComponentNode,
-  TemplateNode,
-  VNodeCall,
-  ParentNode,
-  JSChildNode,
-  CallExpression,
+  type JSChildNode,
+  NodeTypes,
+  type ParentNode,
+  type PlainElementNode,
+  type RootNode,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TemplateNode,
+  type VNodeCall,
   createArrayExpression,
   getVNodeBlockHelper,
-  getVNodeHelper
+  getVNodeHelper,
 } from '../ast'
-import { TransformContext } from '../transform'
-import { PatchFlags, isString, isSymbol, isArray } from '@vue/shared'
+import type { TransformContext } from '../transform'
+import { PatchFlags, isArray, isString, isSymbol } from '@vue/shared'
 import { isSlotOutlet } from '../utils'
 import {
-  OPEN_BLOCK,
   GUARD_REACTIVE_PROPS,
   NORMALIZE_CLASS,
   NORMALIZE_PROPS,
-  NORMALIZE_STYLE
+  NORMALIZE_STYLE,
+  OPEN_BLOCK,
 } from '../runtimeHelpers'
 
 export function hoistStatic(root: RootNode, context: TransformContext) {
@@ -33,13 +33,13 @@ export function hoistStatic(root: RootNode, context: TransformContext) {
     context,
     // Root node is unfortunately non-hoistable due to potential parent
     // fallthrough attributes.
-    isSingleElementRoot(root, root.children[0])
+    isSingleElementRoot(root, root.children[0]),
   )
 }
 
 export function isSingleElementRoot(
   root: RootNode,
-  child: TemplateChildNode
+  child: TemplateChildNode,
 ): child is PlainElementNode | ComponentNode | TemplateNode {
   const { children } = root
   return (
@@ -52,7 +52,7 @@ export function isSingleElementRoot(
 function walk(
   node: ParentNode,
   context: TransformContext,
-  doNotHoistNode: boolean = false
+  doNotHoistNode: boolean = false,
 ) {
   const { children } = node
   const originalCount = children.length
@@ -120,7 +120,7 @@ function walk(
         walk(
           child.branches[i],
           context,
-          child.branches[i].children.length === 1
+          child.branches[i].children.length === 1,
         )
       }
     }
@@ -140,15 +140,22 @@ function walk(
     node.codegenNode.type === NodeTypes.VNODE_CALL &&
     isArray(node.codegenNode.children)
   ) {
-    node.codegenNode.children = context.hoist(
-      createArrayExpression(node.codegenNode.children)
+    const hoisted = context.hoist(
+      createArrayExpression(node.codegenNode.children),
     )
+    // #6978, #7138, #7114
+    // a hoisted children array inside v-for can caused HMR errors since
+    // it might be mutated when mounting the v-for list
+    if (context.hmr) {
+      hoisted.content = `[...${hoisted.content}]`
+    }
+    node.codegenNode.children = hoisted
   }
 }
 
 export function getConstantType(
   node: TemplateChildNode | SimpleExpressionNode,
-  context: TransformContext
+  context: TransformContext,
 ): ConstantTypes {
   const { constantCache } = context
   switch (node.type) {
@@ -237,7 +244,7 @@ export function getConstantType(
 
           context.removeHelper(OPEN_BLOCK)
           context.removeHelper(
-            getVNodeBlockHelper(context.inSSR, codegenNode.isComponent)
+            getVNodeBlockHelper(context.inSSR, codegenNode.isComponent),
           )
           codegenNode.isBlock = false
           context.helper(getVNodeHelper(context.inSSR, codegenNode.isComponent))
@@ -289,12 +296,12 @@ const allowHoistedHelperSet = new Set([
   NORMALIZE_CLASS,
   NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  GUARD_REACTIVE_PROPS
+  GUARD_REACTIVE_PROPS,
 ])
 
 function getConstantTypeOfHelperCall(
   value: CallExpression,
-  context: TransformContext
+  context: TransformContext,
 ): ConstantTypes {
   if (
     value.type === NodeTypes.JS_CALL_EXPRESSION &&
@@ -314,7 +321,7 @@ function getConstantTypeOfHelperCall(
 
 function getGeneratedPropsConstantType(
   node: PlainElementNode,
-  context: TransformContext
+  context: TransformContext,
 ): ConstantTypes {
   let returnType = ConstantTypes.CAN_STRINGIFY
   const props = getNodeProps(node)
diff --git a/packages/compiler-core/src/transforms/noopDirectiveTransform.ts b/packages/compiler-core/src/transforms/noopDirectiveTransform.ts
index 5975069be0f..cd8e21453ce 100644
--- a/packages/compiler-core/src/transforms/noopDirectiveTransform.ts
+++ b/packages/compiler-core/src/transforms/noopDirectiveTransform.ts
@@ -1,3 +1,3 @@
-import { DirectiveTransform } from '../transform'
+import type { DirectiveTransform } from '../transform'
 
 export const noopDirectiveTransform: DirectiveTransform = () => ({ props: [] })
diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 253b6be5efa..c50f7f5e969 100644
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -1,69 +1,68 @@
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import {
-  NodeTypes,
+  type ArrayExpression,
+  type CallExpression,
+  type ComponentNode,
+  ConstantTypes,
+  type DirectiveArguments,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
-  CallExpression,
-  ObjectExpression,
-  ElementNode,
-  DirectiveNode,
-  ExpressionNode,
-  ArrayExpression,
-  createCallExpression,
+  type ExpressionNode,
+  type JSChildNode,
+  NodeTypes,
+  type ObjectExpression,
+  type Property,
+  type TemplateTextChildNode,
+  type VNodeCall,
   createArrayExpression,
+  createCallExpression,
+  createObjectExpression,
   createObjectProperty,
   createSimpleExpression,
-  createObjectExpression,
-  Property,
-  ComponentNode,
-  VNodeCall,
-  TemplateTextChildNode,
-  DirectiveArguments,
   createVNodeCall,
-  ConstantTypes
 } from '../ast'
 import {
-  PatchFlags,
   PatchFlagNames,
-  isSymbol,
-  isOn,
+  PatchFlags,
+  camelize,
+  capitalize,
+  isBuiltInDirective,
   isObject,
+  isOn,
   isReservedProp,
-  capitalize,
-  camelize,
-  isBuiltInDirective
+  isSymbol,
 } from '@vue/shared'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
-  RESOLVE_DIRECTIVE,
-  RESOLVE_COMPONENT,
-  RESOLVE_DYNAMIC_COMPONENT,
+  GUARD_REACTIVE_PROPS,
+  KEEP_ALIVE,
   MERGE_PROPS,
   NORMALIZE_CLASS,
-  NORMALIZE_STYLE,
   NORMALIZE_PROPS,
-  TO_HANDLERS,
-  TELEPORT,
-  KEEP_ALIVE,
+  NORMALIZE_STYLE,
+  RESOLVE_COMPONENT,
+  RESOLVE_DIRECTIVE,
+  RESOLVE_DYNAMIC_COMPONENT,
   SUSPENSE,
+  TELEPORT,
+  TO_HANDLERS,
   UNREF,
-  GUARD_REACTIVE_PROPS
 } from '../runtimeHelpers'
 import {
-  getInnerRange,
-  toValidAssetId,
   findProp,
   isCoreComponent,
   isStaticArgOf,
-  findDir,
-  isStaticExp
+  isStaticExp,
+  toValidAssetId,
 } from '../utils'
 import { buildSlots } from './vSlot'
 import { getConstantType } from './hoistStatic'
 import { BindingTypes } from '../options'
 import {
-  checkCompatEnabled,
   CompilerDeprecationTypes,
-  isCompatEnabled
+  checkCompatEnabled,
+  isCompatEnabled,
 } from '../compat/compatConfig'
 
 // some directive transforms (e.g. v-model) may return a symbol for runtime
@@ -126,7 +125,7 @@ export const transformElement: NodeTransform = (node, context) => {
         context,
         undefined,
         isComponent,
-        isDynamicComponent
+        isDynamicComponent,
       )
       vnodeProps = propsBuildResult.props
       patchFlag = propsBuildResult.patchFlag
@@ -135,7 +134,7 @@ export const transformElement: NodeTransform = (node, context) => {
       vnodeDirectives =
         directives && directives.length
           ? (createArrayExpression(
-              directives.map(dir => buildDirectiveArgs(dir, context))
+              directives.map(dir => buildDirectiveArgs(dir, context)),
             ) as DirectiveArguments)
           : undefined
 
@@ -161,8 +160,8 @@ export const transformElement: NodeTransform = (node, context) => {
             createCompilerError(ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN, {
               start: node.children[0].loc.start,
               end: node.children[node.children.length - 1].loc.end,
-              source: ''
-            })
+              source: '',
+            }),
           )
         }
       }
@@ -240,7 +239,7 @@ export const transformElement: NodeTransform = (node, context) => {
       !!shouldUseBlock,
       false /* disableTracking */,
       isComponent,
-      node.loc
+      node.loc,
     )
   }
 }
@@ -248,7 +247,7 @@ export const transformElement: NodeTransform = (node, context) => {
 export function resolveComponentType(
   node: ComponentNode,
   context: TransformContext,
-  ssr = false
+  ssr = false,
 ) {
   let { tag } = node
 
@@ -261,7 +260,7 @@ export function resolveComponentType(
       (__COMPAT__ &&
         isCompatEnabled(
           CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-          context
+          context,
         ))
     ) {
       const exp =
@@ -270,7 +269,7 @@ export function resolveComponentType(
           : isProp.exp
       if (exp) {
         return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
-          exp
+          exp,
         ])
       }
     } else if (
@@ -285,19 +284,6 @@ export function resolveComponentType(
     }
   }
 
-  // 1.5 v-is (TODO: remove in 3.4)
-  const isDir = !isExplicitDynamic && findDir(node, 'is')
-  if (isDir && isDir.exp) {
-    if (__DEV__) {
-      context.onWarn(
-        createCompilerError(ErrorCodes.DEPRECATION_V_IS, isDir.loc)
-      )
-    }
-    return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
-      isDir.exp
-    ])
-  }
-
   // 2. built-in components (Teleport, Transition, KeepAlive, Suspense...)
   const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag)
   if (builtIn) {
@@ -385,6 +371,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
@@ -395,7 +388,7 @@ export function buildProps(
   props: ElementNode['props'] = node.props,
   isComponent: boolean,
   isDynamicComponent: boolean,
-  ssr = false
+  ssr = false,
 ): {
   props: PropsExpression | undefined
   directives: DirectiveNode[]
@@ -423,7 +416,7 @@ export function buildProps(
   const pushMergeArg = (arg?: PropsExpression) => {
     if (properties.length) {
       mergeArgs.push(
-        createObjectExpression(dedupeProperties(properties), elementLoc)
+        createObjectExpression(dedupeProperties(properties), elementLoc),
       )
       properties = []
     }
@@ -452,6 +445,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 ||
@@ -489,7 +488,7 @@ export function buildProps(
     // static attribute
     const prop = props[i]
     if (prop.type === NodeTypes.ATTRIBUTE) {
-      const { loc, name, value } = prop
+      const { loc, name, nameLoc, value } = prop
       let isStatic = true
       if (name === 'ref') {
         hasRef = true
@@ -497,8 +496,8 @@ export function buildProps(
           properties.push(
             createObjectProperty(
               createSimpleExpression('ref_for', true),
-              createSimpleExpression('true')
-            )
+              createSimpleExpression('true'),
+            ),
           )
         }
         // in inline mode there is no setupState object, so we can't use string
@@ -515,8 +514,8 @@ export function buildProps(
             properties.push(
               createObjectProperty(
                 createSimpleExpression('ref_key', true),
-                createSimpleExpression(value.content, true, value.loc)
-              )
+                createSimpleExpression(value.content, true, value.loc),
+              ),
             )
           }
         }
@@ -529,28 +528,24 @@ export function buildProps(
           (__COMPAT__ &&
             isCompatEnabled(
               CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-              context
+              context,
             )))
       ) {
         continue
       }
       properties.push(
         createObjectProperty(
-          createSimpleExpression(
-            name,
-            true,
-            getInnerRange(loc, 0, name.length)
-          ),
+          createSimpleExpression(name, true, nameLoc),
           createSimpleExpression(
             value ? value.content : '',
             isStatic,
-            value ? value.loc : loc
-          )
-        )
+            value ? value.loc : loc,
+          ),
+        ),
       )
     } else {
       // directives
-      const { name, arg, exp, loc } = prop
+      const { name, arg, exp, loc, modifiers } = prop
       const isVBind = name === 'bind'
       const isVOn = name === 'on'
 
@@ -558,7 +553,7 @@ export function buildProps(
       if (name === 'slot') {
         if (!isComponent) {
           context.onError(
-            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, loc)
+            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, loc),
           )
         }
         continue
@@ -576,7 +571,7 @@ export function buildProps(
             (__COMPAT__ &&
               isCompatEnabled(
                 CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT,
-                context
+                context,
               ))))
       ) {
         continue
@@ -600,8 +595,8 @@ export function buildProps(
         properties.push(
           createObjectProperty(
             createSimpleExpression('ref_for', true),
-            createSimpleExpression('true')
-          )
+            createSimpleExpression('true'),
+          ),
         )
       }
 
@@ -639,7 +634,7 @@ export function buildProps(
                   checkCompatEnabled(
                     CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
                     context,
-                    loc
+                    loc,
                   )
                 }
               }
@@ -647,7 +642,7 @@ export function buildProps(
               if (
                 isCompatEnabled(
                   CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
-                  context
+                  context,
                 )
               ) {
                 mergeArgs.unshift(exp)
@@ -662,7 +657,7 @@ export function buildProps(
               type: NodeTypes.JS_CALL_EXPRESSION,
               loc,
               callee: context.helper(TO_HANDLERS),
-              arguments: isComponent ? [exp] : [exp, `true`]
+              arguments: isComponent ? [exp] : [exp, `true`],
             })
           }
         } else {
@@ -671,13 +666,18 @@ export function buildProps(
               isVBind
                 ? ErrorCodes.X_V_BIND_NO_EXPRESSION
                 : ErrorCodes.X_V_ON_NO_EXPRESSION,
-              loc
-            )
+              loc,
+            ),
           )
         }
         continue
       }
 
+      // force hydration for v-bind with .prop modifier
+      if (isVBind && modifiers.includes('prop')) {
+        patchFlag |= PatchFlags.NEED_HYDRATION
+      }
+
       const directiveTransform = context.directiveTransforms[name]
       if (directiveTransform) {
         // has built-in directive transform.
@@ -716,7 +716,7 @@ export function buildProps(
       propsExpression = createCallExpression(
         context.helper(MERGE_PROPS),
         mergeArgs,
-        elementLoc
+        elementLoc,
       )
     } else {
       // single v-bind with nothing else - no need for a mergeProps call
@@ -725,7 +725,7 @@ export function buildProps(
   } else if (properties.length) {
     propsExpression = createObjectExpression(
       dedupeProperties(properties),
-      elementLoc
+      elementLoc,
     )
   }
 
@@ -743,12 +743,12 @@ export function buildProps(
       patchFlag |= PatchFlags.PROPS
     }
     if (hasHydrationEventBinding) {
-      patchFlag |= PatchFlags.HYDRATE_EVENTS
+      patchFlag |= PatchFlags.NEED_HYDRATION
     }
   }
   if (
     !shouldUseBlock &&
-    (patchFlag === 0 || patchFlag === PatchFlags.HYDRATE_EVENTS) &&
+    (patchFlag === 0 || patchFlag === PatchFlags.NEED_HYDRATION) &&
     (hasRef || hasVnodeHook || runtimeDirectives.length > 0)
   ) {
     patchFlag |= PatchFlags.NEED_PATCH
@@ -785,7 +785,7 @@ export function buildProps(
           if (classProp && !isStaticExp(classProp.value)) {
             classProp.value = createCallExpression(
               context.helper(NORMALIZE_CLASS),
-              [classProp.value]
+              [classProp.value],
             )
           }
           if (
@@ -801,14 +801,14 @@ export function buildProps(
           ) {
             styleProp.value = createCallExpression(
               context.helper(NORMALIZE_STYLE),
-              [styleProp.value]
+              [styleProp.value],
             )
           }
         } else {
           // dynamic key binding, wrap with `normalizeProps`
           propsExpression = createCallExpression(
             context.helper(NORMALIZE_PROPS),
-            [propsExpression]
+            [propsExpression],
           )
         }
         break
@@ -821,9 +821,9 @@ export function buildProps(
           context.helper(NORMALIZE_PROPS),
           [
             createCallExpression(context.helper(GUARD_REACTIVE_PROPS), [
-              propsExpression
-            ])
-          ]
+              propsExpression,
+            ]),
+          ],
         )
         break
     }
@@ -834,7 +834,7 @@ export function buildProps(
     directives: runtimeDirectives,
     patchFlag,
     dynamicPropNames,
-    shouldUseBlock
+    shouldUseBlock,
   }
 }
 
@@ -875,14 +875,14 @@ function mergeAsArray(existing: Property, incoming: Property) {
   } else {
     existing.value = createArrayExpression(
       [existing.value, incoming.value],
-      existing.loc
+      existing.loc,
     )
   }
 }
 
 export function buildDirectiveArgs(
   dir: DirectiveNode,
-  context: TransformContext
+  context: TransformContext,
 ): ArrayExpression {
   const dirArgs: ArrayExpression['elements'] = []
   const runtime = directiveImportMap.get(dir)
@@ -922,10 +922,10 @@ export function buildDirectiveArgs(
     dirArgs.push(
       createObjectExpression(
         dir.modifiers.map(modifier =>
-          createObjectProperty(modifier, trueExpression)
+          createObjectProperty(modifier, trueExpression),
         ),
-        loc
-      )
+        loc,
+      ),
     )
   }
   return createArrayExpression(dirArgs, dir.loc)
diff --git a/packages/compiler-core/src/transforms/transformExpression.ts b/packages/compiler-core/src/transforms/transformExpression.ts
index eab6b237f13..c7cd1b63d56 100644
--- a/packages/compiler-core/src/transforms/transformExpression.ts
+++ b/packages/compiler-core/src/transforms/transformExpression.ts
@@ -7,36 +7,37 @@
 // - This transform is only applied in non-browser builds because it relies on
 //   an additional JavaScript parser. In the browser, there is no source-map
 //   support and the code is wrapped in `with (this) { ... }`.
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import {
+  type CompoundExpressionNode,
+  ConstantTypes,
+  type ExpressionNode,
   NodeTypes,
-  createSimpleExpression,
-  ExpressionNode,
-  SimpleExpressionNode,
-  CompoundExpressionNode,
+  type SimpleExpressionNode,
   createCompoundExpression,
-  ConstantTypes
+  createSimpleExpression,
 } from '../ast'
 import {
   isInDestructureAssignment,
+  isInNewExpression,
   isStaticProperty,
   isStaticPropertyKey,
-  walkIdentifiers
+  walkIdentifiers,
 } from '../babelUtils'
 import { advancePositionWithClone, isSimpleIdentifier } from '../utils'
 import {
-  isGloballyAllowed,
-  makeMap,
+  genPropsAccessExp,
   hasOwn,
+  isGloballyAllowed,
   isString,
-  genPropsAccessExp
+  makeMap,
 } from '@vue/shared'
-import { createCompilerError, ErrorCodes } from '../errors'
-import {
-  Node,
-  Identifier,
+import { ErrorCodes, createCompilerError } from '../errors'
+import type {
   AssignmentExpression,
-  UpdateExpression
+  Identifier,
+  Node,
+  UpdateExpression,
 } from '@babel/types'
 import { validateBrowserExpression } from '../validateExpression'
 import { parse } from '@babel/parser'
@@ -53,7 +54,7 @@ export const transformExpression: NodeTransform = (node, context) => {
   if (node.type === NodeTypes.INTERPOLATION) {
     node.content = processExpression(
       node.content as SimpleExpressionNode,
-      context
+      context,
     )
   } else if (node.type === NodeTypes.ELEMENT) {
     // handle directives on element
@@ -74,7 +75,7 @@ export const transformExpression: NodeTransform = (node, context) => {
             exp,
             context,
             // slot args must be processed as function params
-            dir.name === 'slot'
+            dir.name === 'slot',
           )
         }
         if (arg && arg.type === NodeTypes.SIMPLE_EXPRESSION && !arg.isStatic) {
@@ -104,7 +105,7 @@ export function processExpression(
   asParams = false,
   // v-on handler values may contain multiple statements
   asRawStatements = false,
-  localVars: Record<string, number> = Object.create(context.identifiers)
+  localVars: Record<string, number> = Object.create(context.identifiers),
 ): ExpressionNode {
   if (__BROWSER__) {
     if (__DEV__) {
@@ -131,6 +132,11 @@ export function processExpression(
       // ({ x } = y)
       const isDestructureAssignment =
         parent && isInDestructureAssignment(parent, parentStack)
+      const isNewExpression = parent && isInNewExpression(parentStack)
+      const wrapWithUnref = (raw: string) => {
+        const wrapped = `${context.helperString(UNREF)}(${raw})`
+        return isNewExpression ? `(${wrapped})` : wrapped
+      }
 
       if (
         isConst(type) ||
@@ -147,7 +153,7 @@ export function processExpression(
         // that assumes the value to be a ref for more efficiency
         return isAssignmentLVal || isUpdateArg || isDestructureAssignment
           ? `${raw}.value`
-          : `${context.helperString(UNREF)}(${raw})`
+          : wrapWithUnref(raw)
       } else if (type === BindingTypes.SETUP_LET) {
         if (isAssignmentLVal) {
           // let binding.
@@ -163,8 +169,8 @@ export function processExpression(
               context,
               false,
               false,
-              knownIds
-            )
+              knownIds,
+            ),
           )
           return `${context.helperString(IS_REF)}(${raw})${
             context.isTS ? ` //@ts-ignore\n` : ``
@@ -190,7 +196,7 @@ export function processExpression(
           // for now
           return raw
         } else {
-          return `${context.helperString(UNREF)}(${raw})`
+          return wrapWithUnref(raw)
         }
       } else if (type === BindingTypes.PROPS) {
         // use __props which is generated by compileScript so in ts mode
@@ -223,14 +229,26 @@ export function processExpression(
   // bail constant on parens (function invocation) and dot (member access)
   const bailConstant = constantBailRE.test(rawExp)
 
-  if (isSimpleIdentifier(rawExp)) {
+  let ast = node.ast
+
+  if (ast === false) {
+    // ast being false means it has caused an error already during parse phase
+    return node
+  }
+
+  if (ast === null || (!ast && isSimpleIdentifier(rawExp))) {
     const isScopeVarReference = context.identifiers[rawExp]
     const isAllowedGlobal = isGloballyAllowed(rawExp)
     const isLiteral = isLiteralWhitelisted(rawExp)
-    if (!asParams && !isScopeVarReference && !isAllowedGlobal && !isLiteral) {
+    if (
+      !asParams &&
+      !isScopeVarReference &&
+      !isLiteral &&
+      (!isAllowedGlobal || bindingMetadata[rawExp])
+    ) {
       // const bindings exposed from setup can be skipped for patching but
       // cannot be hoisted to module scope
-      if (isConst(bindingMetadata[node.content])) {
+      if (isConst(bindingMetadata[rawExp])) {
         node.constType = ConstantTypes.CAN_SKIP_PATCH
       }
       node.content = rewriteIdentifier(rawExp)
@@ -244,29 +262,30 @@ export function processExpression(
     return node
   }
 
-  let ast: any
-  // exp needs to be parsed differently:
-  // 1. Multiple inline statements (v-on, with presence of `;`): parse as raw
-  //    exp, but make sure to pad with spaces for consistent ranges
-  // 2. Expressions: wrap with parens (for e.g. object expressions)
-  // 3. Function arguments (v-for, v-slot): place in a function argument position
-  const source = asRawStatements
-    ? ` ${rawExp} `
-    : `(${rawExp})${asParams ? `=>{}` : ``}`
-  try {
-    ast = parse(source, {
-      plugins: context.expressionPlugins
-    }).program
-  } catch (e: any) {
-    context.onError(
-      createCompilerError(
-        ErrorCodes.X_INVALID_EXPRESSION,
-        node.loc,
-        undefined,
-        e.message
+  if (!ast) {
+    // exp needs to be parsed differently:
+    // 1. Multiple inline statements (v-on, with presence of `;`): parse as raw
+    //    exp, but make sure to pad with spaces for consistent ranges
+    // 2. Expressions: wrap with parens (for e.g. object expressions)
+    // 3. Function arguments (v-for, v-slot): place in a function argument position
+    const source = asRawStatements
+      ? ` ${rawExp} `
+      : `(${rawExp})${asParams ? `=>{}` : ``}`
+    try {
+      ast = parse(source, {
+        plugins: context.expressionPlugins,
+      }).program
+    } catch (e: any) {
+      context.onError(
+        createCompilerError(
+          ErrorCodes.X_INVALID_EXPRESSION,
+          node.loc,
+          undefined,
+          e.message,
+        ),
       )
-    )
-    return node
+      return node
+    }
   }
 
   type QualifiedId = Identifier & PrefixMeta
@@ -307,7 +326,7 @@ export function processExpression(
     },
     true, // invoke on ALL identifiers
     parentStack,
-    knownIds
+    knownIds,
   )
 
   // We break up the compound expression into an array of strings and sub
@@ -331,12 +350,14 @@ export function processExpression(
         id.name,
         false,
         {
-          source,
           start: advancePositionWithClone(node.loc.start, source, start),
-          end: advancePositionWithClone(node.loc.start, source, end)
+          end: advancePositionWithClone(node.loc.start, source, end),
+          source,
         },
-        id.isConstant ? ConstantTypes.CAN_STRINGIFY : ConstantTypes.NOT_CONSTANT
-      )
+        id.isConstant
+          ? ConstantTypes.CAN_STRINGIFY
+          : ConstantTypes.NOT_CONSTANT,
+      ),
     )
     if (i === ids.length - 1 && end < rawExp.length) {
       children.push(rawExp.slice(end))
@@ -346,6 +367,7 @@ export function processExpression(
   let ret
   if (children.length) {
     ret = createCompoundExpression(children, node.loc)
+    ret.ast = ast
   } else {
     ret = node
     ret.constType = bailConstant
diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
index 5fc0af5f7be..ea635e997b1 100644
--- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts
+++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts
@@ -1,17 +1,19 @@
-import { NodeTransform, TransformContext } from '../transform'
+import type { NodeTransform, TransformContext } from '../transform'
 import {
+  type CallExpression,
+  type ExpressionNode,
   NodeTypes,
-  CallExpression,
+  type SlotOutletNode,
   createCallExpression,
-  ExpressionNode,
-  SlotOutletNode,
-  createFunctionExpression
+  createFunctionExpression,
+  createSimpleExpression,
 } from '../ast'
 import { isSlotOutlet, isStaticArgOf, isStaticExp } from '../utils'
-import { buildProps, PropsExpression } from './transformElement'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { type PropsExpression, buildProps } from './transformElement'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { RENDER_SLOT } from '../runtimeHelpers'
 import { camelize } from '@vue/shared'
+import { processExpression } from './transformExpression'
 
 export const transformSlotOutlet: NodeTransform = (node, context) => {
   if (isSlotOutlet(node)) {
@@ -23,7 +25,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
       slotName,
       '{}',
       'undefined',
-      'true'
+      'true',
     ]
     let expectedLen = 2
 
@@ -45,7 +47,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
     node.codegenNode = createCallExpression(
       context.helper(RENDER_SLOT),
       slotArgs,
-      loc
+      loc,
     )
   }
 }
@@ -57,7 +59,7 @@ interface SlotOutletProcessResult {
 
 export function processSlotOutlet(
   node: SlotOutletNode,
-  context: TransformContext
+  context: TransformContext,
 ): SlotOutletProcessResult {
   let slotName: string | ExpressionNode = `"default"`
   let slotProps: PropsExpression | undefined = undefined
@@ -76,7 +78,15 @@ export function processSlotOutlet(
       }
     } else {
       if (p.name === 'bind' && isStaticArgOf(p.arg, 'name')) {
-        if (p.exp) slotName = p.exp
+        if (p.exp) {
+          slotName = p.exp
+        } else if (p.arg && p.arg.type === NodeTypes.SIMPLE_EXPRESSION) {
+          const name = camelize(p.arg.content)
+          slotName = p.exp = createSimpleExpression(name, false, p.arg.loc)
+          if (!__BROWSER__) {
+            slotName = p.exp = processExpression(p.exp, context)
+          }
+        }
       } else {
         if (p.name === 'bind' && p.arg && isStaticExp(p.arg)) {
           p.arg.content = camelize(p.arg.content)
@@ -92,7 +102,7 @@ export function processSlotOutlet(
       context,
       nonNameProps,
       false,
-      false
+      false,
     )
     slotProps = props
 
@@ -100,14 +110,14 @@ export function processSlotOutlet(
       context.onError(
         createCompilerError(
           ErrorCodes.X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
-          directives[0].loc
-        )
+          directives[0].loc,
+        ),
       )
     }
   }
 
   return {
     slotName,
-    slotProps
+    slotProps,
   }
 }
diff --git a/packages/compiler-core/src/transforms/transformText.ts b/packages/compiler-core/src/transforms/transformText.ts
index 2c8ab384fd8..bdfb37ccb07 100644
--- a/packages/compiler-core/src/transforms/transformText.ts
+++ b/packages/compiler-core/src/transforms/transformText.ts
@@ -1,16 +1,16 @@
-import { NodeTransform } from '../transform'
+import type { NodeTransform } from '../transform'
 import {
+  type CallExpression,
+  type CompoundExpressionNode,
+  ConstantTypes,
+  ElementTypes,
   NodeTypes,
-  CompoundExpressionNode,
   createCallExpression,
-  CallExpression,
-  ElementTypes,
-  ConstantTypes,
-  createCompoundExpression
+  createCompoundExpression,
 } from '../ast'
 import { isText } from '../utils'
 import { CREATE_TEXT } from '../runtimeHelpers'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { PatchFlagNames, PatchFlags } from '@vue/shared'
 import { getConstantType } from './hoistStatic'
 
 // Merge adjacent text nodes and expressions into a single expression
@@ -39,7 +39,7 @@ export const transformText: NodeTransform = (node, context) => {
               if (!currentContainer) {
                 currentContainer = children[i] = createCompoundExpression(
                   [child],
-                  child.loc
+                  child.loc,
                 )
               }
               // merge adjacent text node into current
@@ -72,7 +72,7 @@ export const transformText: NodeTransform = (node, context) => {
               !node.props.find(
                 p =>
                   p.type === NodeTypes.DIRECTIVE &&
-                  !context.directiveTransforms[p.name]
+                  !context.directiveTransforms[p.name],
               ) &&
               // in compat mode, <template> tags with no special directives
               // will be rendered as a fragment so its children must be
@@ -100,7 +100,7 @@ export const transformText: NodeTransform = (node, context) => {
           ) {
             callArgs.push(
               PatchFlags.TEXT +
-                (__DEV__ ? ` /* ${PatchFlagNames[PatchFlags.TEXT]} */` : ``)
+                (__DEV__ ? ` /* ${PatchFlagNames[PatchFlags.TEXT]} */` : ``),
             )
           }
           children[i] = {
@@ -109,8 +109,8 @@ export const transformText: NodeTransform = (node, context) => {
             loc: child.loc,
             codegenNode: createCallExpression(
               context.helper(CREATE_TEXT),
-              callArgs
-            )
+              callArgs,
+            ),
           }
         }
       }
diff --git a/packages/compiler-core/src/transforms/vBind.ts b/packages/compiler-core/src/transforms/vBind.ts
index ffaf903b9e8..234cf1fbc30 100644
--- a/packages/compiler-core/src/transforms/vBind.ts
+++ b/packages/compiler-core/src/transforms/vBind.ts
@@ -1,21 +1,68 @@
-import { DirectiveTransform } from '../transform'
+import type { DirectiveTransform } from '../transform'
 import {
+  type ExpressionNode,
+  NodeTypes,
+  type SimpleExpressionNode,
   createObjectProperty,
   createSimpleExpression,
-  ExpressionNode,
-  NodeTypes
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { camelize } from '@vue/shared'
 import { CAMELIZE } from '../runtimeHelpers'
+import { processExpression } from './transformExpression'
 
 // v-bind without arg is handled directly in ./transformElements.ts due to it affecting
 // codegen for the entire props object. This transform here is only for v-bind
 // *with* args.
 export const transformBind: DirectiveTransform = (dir, _node, context) => {
-  const { exp, modifiers, loc } = dir
+  const { modifiers, loc } = dir
   const arg = dir.arg!
 
+  let { exp } = dir
+
+  // handle empty expression
+  if (exp && exp.type === NodeTypes.SIMPLE_EXPRESSION && !exp.content.trim()) {
+    if (!__BROWSER__) {
+      // #10280 only error against empty expression in non-browser build
+      // because :foo in in-DOM templates will be parsed into :foo="" by the
+      // browser
+      context.onError(
+        createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc),
+      )
+      return {
+        props: [
+          createObjectProperty(arg, createSimpleExpression('', true, loc)),
+        ],
+      }
+    } else {
+      exp = undefined
+    }
+  }
+
+  // same-name shorthand - :arg is expanded to :arg="arg"
+  if (!exp) {
+    if (arg.type !== NodeTypes.SIMPLE_EXPRESSION || !arg.isStatic) {
+      // only simple expression is allowed for same-name shorthand
+      context.onError(
+        createCompilerError(
+          ErrorCodes.X_V_BIND_INVALID_SAME_NAME_ARGUMENT,
+          arg.loc,
+        ),
+      )
+      return {
+        props: [
+          createObjectProperty(arg, createSimpleExpression('', true, loc)),
+        ],
+      }
+    }
+
+    const propName = camelize((arg as SimpleExpressionNode).content)
+    exp = dir.exp = createSimpleExpression(propName, false, arg.loc)
+    if (!__BROWSER__) {
+      exp = dir.exp = processExpression(exp, context)
+    }
+  }
+
   if (arg.type !== NodeTypes.SIMPLE_EXPRESSION) {
     arg.children.unshift(`(`)
     arg.children.push(`) || ""`)
@@ -46,18 +93,8 @@ export const transformBind: DirectiveTransform = (dir, _node, context) => {
     }
   }
 
-  if (
-    !exp ||
-    (exp.type === NodeTypes.SIMPLE_EXPRESSION && !exp.content.trim())
-  ) {
-    context.onError(createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc))
-    return {
-      props: [createObjectProperty(arg, createSimpleExpression('', true, loc))]
-    }
-  }
-
   return {
-    props: [createObjectProperty(arg, exp)]
+    props: [createObjectProperty(arg, exp)],
   }
 }
 
diff --git a/packages/compiler-core/src/transforms/vFor.ts b/packages/compiler-core/src/transforms/vFor.ts
index a44532c0d58..5d423ee2429 100644
--- a/packages/compiler-core/src/transforms/vFor.ts
+++ b/packages/compiler-core/src/transforms/vFor.ts
@@ -1,53 +1,52 @@
 import {
+  type TransformContext,
   createStructuralDirectiveTransform,
-  TransformContext
 } from '../transform'
 import {
+  type BlockCodegenNode,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
+  type ExpressionNode,
+  type ForCodegenNode,
+  type ForIteratorExpression,
+  type ForNode,
+  type ForParseResult,
+  type ForRenderListExpression,
   NodeTypes,
-  ExpressionNode,
-  createSimpleExpression,
-  SourceLocation,
-  SimpleExpressionNode,
+  type PlainElementNode,
+  type RenderSlotCall,
+  type SimpleExpressionNode,
+  type SlotOutletNode,
+  type VNodeCall,
+  createBlockStatement,
   createCallExpression,
+  createCompoundExpression,
   createFunctionExpression,
   createObjectExpression,
   createObjectProperty,
-  ForCodegenNode,
-  RenderSlotCall,
-  SlotOutletNode,
-  ElementNode,
-  DirectiveNode,
-  ForNode,
-  PlainElementNode,
+  createSimpleExpression,
   createVNodeCall,
-  VNodeCall,
-  ForRenderListExpression,
-  BlockCodegenNode,
-  ForIteratorExpression,
-  ConstantTypes,
-  createBlockStatement,
-  createCompoundExpression,
   getVNodeBlockHelper,
-  getVNodeHelper
+  getVNodeHelper,
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
-  getInnerRange,
+  findDir,
   findProp,
-  isTemplateNode,
-  isSlotOutlet,
   injectProp,
-  findDir
+  isSlotOutlet,
+  isTemplateNode,
 } from '../utils'
 import {
-  RENDER_LIST,
-  OPEN_BLOCK,
   FRAGMENT,
-  IS_MEMO_SAME
+  IS_MEMO_SAME,
+  OPEN_BLOCK,
+  RENDER_LIST,
 } from '../runtimeHelpers'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { PatchFlagNames, PatchFlags } from '@vue/shared'
 
 export const transformFor = createStructuralDirectiveTransform(
   'for',
@@ -57,7 +56,7 @@ export const transformFor = createStructuralDirectiveTransform(
       // create the loop render function expression now, and add the
       // iterator on exit after all children have been traversed
       const renderExp = createCallExpression(helper(RENDER_LIST), [
-        forNode.source
+        forNode.source,
       ]) as ForRenderListExpression
       const isTemplate = isTemplateNode(node)
       const memo = findDir(node, 'memo')
@@ -77,13 +76,13 @@ export const transformFor = createStructuralDirectiveTransform(
         if (memo) {
           memo.exp = processExpression(
             memo.exp! as SimpleExpressionNode,
-            context
+            context,
           )
         }
         if (keyProperty && keyProp!.type !== NodeTypes.ATTRIBUTE) {
           keyProperty.value = processExpression(
             keyProperty.value as SimpleExpressionNode,
-            context
+            context,
           )
         }
       }
@@ -94,8 +93,8 @@ export const transformFor = createStructuralDirectiveTransform(
       const fragmentFlag = isStableFragment
         ? PatchFlags.STABLE_FRAGMENT
         : keyProp
-        ? PatchFlags.KEYED_FRAGMENT
-        : PatchFlags.UNKEYED_FRAGMENT
+          ? PatchFlags.KEYED_FRAGMENT
+          : PatchFlags.UNKEYED_FRAGMENT
 
       forNode.codegenNode = createVNodeCall(
         context,
@@ -109,7 +108,7 @@ export const transformFor = createStructuralDirectiveTransform(
         true /* isBlock */,
         !isStableFragment /* disableTracking */,
         false /* isComponent */,
-        node.loc
+        node.loc,
       ) as ForCodegenNode
 
       return () => {
@@ -126,8 +125,8 @@ export const transformFor = createStructuralDirectiveTransform(
                 context.onError(
                   createCompilerError(
                     ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT,
-                    key.loc
-                  )
+                    key.loc,
+                  ),
                 )
                 return true
               }
@@ -140,10 +139,10 @@ export const transformFor = createStructuralDirectiveTransform(
         const slotOutlet = isSlotOutlet(node)
           ? node
           : isTemplate &&
-            node.children.length === 1 &&
-            isSlotOutlet(node.children[0])
-          ? (node.children[0] as SlotOutletNode) // api-extractor somehow fails to infer this
-          : null
+              node.children.length === 1 &&
+              isSlotOutlet(node.children[0])
+            ? (node.children[0] as SlotOutletNode) // api-extractor somehow fails to infer this
+            : null
 
         if (slotOutlet) {
           // <slot v-for="..."> or <template v-for="..."><slot/></template>
@@ -170,7 +169,7 @@ export const transformFor = createStructuralDirectiveTransform(
             undefined,
             true,
             undefined,
-            false /* isComponent */
+            false /* isComponent */,
           )
         } else {
           // Normal element v-for. Directly use the child's codegenNode
@@ -185,12 +184,12 @@ export const transformFor = createStructuralDirectiveTransform(
               // switch from block to vnode
               removeHelper(OPEN_BLOCK)
               removeHelper(
-                getVNodeBlockHelper(context.inSSR, childBlock.isComponent)
+                getVNodeBlockHelper(context.inSSR, childBlock.isComponent),
               )
             } else {
               // switch from vnode to block
               removeHelper(
-                getVNodeHelper(context.inSSR, childBlock.isComponent)
+                getVNodeHelper(context.inSSR, childBlock.isComponent),
               )
             }
           }
@@ -206,8 +205,8 @@ export const transformFor = createStructuralDirectiveTransform(
         if (memo) {
           const loop = createFunctionExpression(
             createForLoopParams(forNode.parseResult, [
-              createSimpleExpression(`_cached`)
-            ])
+              createSimpleExpression(`_cached`),
+            ]),
           )
           loop.body = createBlockStatement([
             createCompoundExpression([`const _memo = (`, memo.exp!, `)`]),
@@ -215,30 +214,30 @@ export const transformFor = createStructuralDirectiveTransform(
               `if (_cached`,
               ...(keyExp ? [` && _cached.key === `, keyExp] : []),
               ` && ${context.helperString(
-                IS_MEMO_SAME
-              )}(_cached, _memo)) return _cached`
+                IS_MEMO_SAME,
+              )}(_cached, _memo)) return _cached`,
             ]),
             createCompoundExpression([`const _item = `, childBlock as any]),
             createSimpleExpression(`_item.memo = _memo`),
-            createSimpleExpression(`return _item`)
+            createSimpleExpression(`return _item`),
           ])
           renderExp.arguments.push(
             loop as ForIteratorExpression,
             createSimpleExpression(`_cache`),
-            createSimpleExpression(String(context.cached++))
+            createSimpleExpression(String(context.cached++)),
           )
         } else {
           renderExp.arguments.push(
             createFunctionExpression(
               createForLoopParams(forNode.parseResult),
               childBlock,
-              true /* force newline */
-            ) as ForIteratorExpression
+              true /* force newline */,
+            ) as ForIteratorExpression,
           )
         }
       }
     })
-  }
+  },
 )
 
 // target-agnostic transform used for both Client and SSR
@@ -246,29 +245,26 @@ export function processFor(
   node: ElementNode,
   dir: DirectiveNode,
   context: TransformContext,
-  processCodegen?: (forNode: ForNode) => (() => void) | undefined
+  processCodegen?: (forNode: ForNode) => (() => void) | undefined,
 ) {
   if (!dir.exp) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc),
     )
     return
   }
 
-  const parseResult = parseForExpression(
-    // can only be simple expression because vFor transform is applied
-    // before expression transform.
-    dir.exp as SimpleExpressionNode,
-    context
-  )
+  const parseResult = dir.forParseResult
 
   if (!parseResult) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, dir.loc),
     )
     return
   }
 
+  finalizeForParseResult(parseResult, context)
+
   const { addIdentifiers, removeIdentifiers, scopes } = context
   const { source, value, key, index } = parseResult
 
@@ -280,7 +276,7 @@ export function processFor(
     keyAlias: key,
     objectIndexAlias: index,
     parseResult,
-    children: isTemplateNode(node) ? node.children : [node]
+    children: isTemplateNode(node) ? node.children : [node],
   }
 
   context.replaceNode(forNode)
@@ -308,140 +304,75 @@ export function processFor(
   }
 }
 
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
-// This regex doesn't cover the case if key or index aliases have destructuring,
-// but those do not make sense in the first place, so this works in practice.
-const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
-const stripParensRE = /^\(|\)$/g
-
-export interface ForParseResult {
-  source: ExpressionNode
-  value: ExpressionNode | undefined
-  key: ExpressionNode | undefined
-  index: ExpressionNode | undefined
-}
-
-export function parseForExpression(
-  input: SimpleExpressionNode,
-  context: TransformContext
-): ForParseResult | undefined {
-  const loc = input.loc
-  const exp = input.content
-  const inMatch = exp.match(forAliasRE)
-  if (!inMatch) return
-
-  const [, LHS, RHS] = inMatch
+export function finalizeForParseResult(
+  result: ForParseResult,
+  context: TransformContext,
+) {
+  if (result.finalized) return
 
-  const result: ForParseResult = {
-    source: createAliasExpression(
-      loc,
-      RHS.trim(),
-      exp.indexOf(RHS, LHS.length)
-    ),
-    value: undefined,
-    key: undefined,
-    index: undefined
-  }
   if (!__BROWSER__ && context.prefixIdentifiers) {
     result.source = processExpression(
       result.source as SimpleExpressionNode,
-      context
+      context,
     )
+    if (result.key) {
+      result.key = processExpression(
+        result.key as SimpleExpressionNode,
+        context,
+        true,
+      )
+    }
+    if (result.index) {
+      result.index = processExpression(
+        result.index as SimpleExpressionNode,
+        context,
+        true,
+      )
+    }
+    if (result.value) {
+      result.value = processExpression(
+        result.value as SimpleExpressionNode,
+        context,
+        true,
+      )
+    }
   }
   if (__DEV__ && __BROWSER__) {
     validateBrowserExpression(result.source as SimpleExpressionNode, context)
-  }
-
-  let valueContent = LHS.trim().replace(stripParensRE, '').trim()
-  const trimmedOffset = LHS.indexOf(valueContent)
-
-  const iteratorMatch = valueContent.match(forIteratorRE)
-  if (iteratorMatch) {
-    valueContent = valueContent.replace(forIteratorRE, '').trim()
-
-    const keyContent = iteratorMatch[1].trim()
-    let keyOffset: number | undefined
-    if (keyContent) {
-      keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length)
-      result.key = createAliasExpression(loc, keyContent, keyOffset)
-      if (!__BROWSER__ && context.prefixIdentifiers) {
-        result.key = processExpression(result.key, context, true)
-      }
-      if (__DEV__ && __BROWSER__) {
-        validateBrowserExpression(
-          result.key as SimpleExpressionNode,
-          context,
-          true
-        )
-      }
-    }
-
-    if (iteratorMatch[2]) {
-      const indexContent = iteratorMatch[2].trim()
-
-      if (indexContent) {
-        result.index = createAliasExpression(
-          loc,
-          indexContent,
-          exp.indexOf(
-            indexContent,
-            result.key
-              ? keyOffset! + keyContent.length
-              : trimmedOffset + valueContent.length
-          )
-        )
-        if (!__BROWSER__ && context.prefixIdentifiers) {
-          result.index = processExpression(result.index, context, true)
-        }
-        if (__DEV__ && __BROWSER__) {
-          validateBrowserExpression(
-            result.index as SimpleExpressionNode,
-            context,
-            true
-          )
-        }
-      }
+    if (result.key) {
+      validateBrowserExpression(
+        result.key as SimpleExpressionNode,
+        context,
+        true,
+      )
     }
-  }
-
-  if (valueContent) {
-    result.value = createAliasExpression(loc, valueContent, trimmedOffset)
-    if (!__BROWSER__ && context.prefixIdentifiers) {
-      result.value = processExpression(result.value, context, true)
+    if (result.index) {
+      validateBrowserExpression(
+        result.index as SimpleExpressionNode,
+        context,
+        true,
+      )
     }
-    if (__DEV__ && __BROWSER__) {
+    if (result.value) {
       validateBrowserExpression(
         result.value as SimpleExpressionNode,
         context,
-        true
+        true,
       )
     }
   }
-
-  return result
-}
-
-function createAliasExpression(
-  range: SourceLocation,
-  content: string,
-  offset: number
-): SimpleExpressionNode {
-  return createSimpleExpression(
-    content,
-    false,
-    getInnerRange(range, offset, content.length)
-  )
+  result.finalized = true
 }
 
 export function createForLoopParams(
   { value, key, index }: ForParseResult,
-  memoArgs: ExpressionNode[] = []
+  memoArgs: ExpressionNode[] = [],
 ): ExpressionNode[] {
   return createParamsList([value, key, index, ...memoArgs])
 }
 
 function createParamsList(
-  args: (ExpressionNode | undefined)[]
+  args: (ExpressionNode | undefined)[],
 ): ExpressionNode[] {
   let i = args.length
   while (i--) {
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 4e1673561c5..a6437f89c63 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -1,43 +1,37 @@
 import {
+  type TransformContext,
   createStructuralDirectiveTransform,
-  TransformContext,
-  traverseNode
+  traverseNode,
 } from '../transform'
 import {
-  NodeTypes,
+  type AttributeNode,
+  type BlockCodegenNode,
+  type CacheExpression,
+  ConstantTypes,
+  type DirectiveNode,
+  type ElementNode,
   ElementTypes,
-  ElementNode,
-  DirectiveNode,
-  IfBranchNode,
-  SimpleExpressionNode,
+  type IfBranchNode,
+  type IfConditionalExpression,
+  type IfNode,
+  type MemoExpression,
+  NodeTypes,
+  type SimpleExpressionNode,
+  convertToBlock,
   createCallExpression,
   createConditionalExpression,
-  createSimpleExpression,
-  createObjectProperty,
   createObjectExpression,
-  IfConditionalExpression,
-  BlockCodegenNode,
-  IfNode,
+  createObjectProperty,
+  createSimpleExpression,
   createVNodeCall,
-  AttributeNode,
   locStub,
-  CacheExpression,
-  ConstantTypes,
-  MemoExpression,
-  convertToBlock
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
-import { FRAGMENT, CREATE_COMMENT } from '../runtimeHelpers'
-import {
-  injectProp,
-  findDir,
-  findProp,
-  isBuiltInType,
-  getMemoedVNodeCall
-} from '../utils'
-import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { CREATE_COMMENT, FRAGMENT } from '../runtimeHelpers'
+import { findDir, findProp, getMemoedVNodeCall, injectProp } from '../utils'
+import { PatchFlagNames, PatchFlags } from '@vue/shared'
 
 export const transformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
@@ -63,7 +57,7 @@ export const transformIf = createStructuralDirectiveTransform(
           ifNode.codegenNode = createCodegenNodeForBranch(
             branch,
             key,
-            context
+            context,
           ) as IfConditionalExpression
         } else {
           // attach this branch's codegen node to the v-if root.
@@ -71,12 +65,12 @@ export const transformIf = createStructuralDirectiveTransform(
           parentCondition.alternate = createCodegenNodeForBranch(
             branch,
             key + ifNode.branches.length - 1,
-            context
+            context,
           )
         }
       }
     })
-  }
+  },
 )
 
 // target-agnostic transform used for both Client and SSR
@@ -87,8 +81,8 @@ export function processIf(
   processCodegen?: (
     node: IfNode,
     branch: IfBranchNode,
-    isRoot: boolean
-  ) => (() => void) | undefined
+    isRoot: boolean,
+  ) => (() => void) | undefined,
 ) {
   if (
     dir.name !== 'else' &&
@@ -96,7 +90,7 @@ export function processIf(
   ) {
     const loc = dir.exp ? dir.exp.loc : node.loc
     context.onError(
-      createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc),
     )
     dir.exp = createSimpleExpression(`true`, false, loc)
   }
@@ -116,7 +110,7 @@ export function processIf(
     const ifNode: IfNode = {
       type: NodeTypes.IF,
       loc: node.loc,
-      branches: [branch]
+      branches: [branch],
     }
     context.replaceNode(ifNode)
     if (processCodegen) {
@@ -151,7 +145,7 @@ export function processIf(
           sibling.branches[sibling.branches.length - 1].condition === undefined
         ) {
           context.onError(
-            createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
+            createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc),
           )
         }
 
@@ -165,7 +159,8 @@ export function processIf(
           !(
             context.parent &&
             context.parent.type === NodeTypes.ELEMENT &&
-            isBuiltInType(context.parent.tag, 'transition')
+            (context.parent.tag === 'transition' ||
+              context.parent.tag === 'Transition')
           )
         ) {
           branch.children = [...comments, ...branch.children]
@@ -180,8 +175,8 @@ export function processIf(
                 context.onError(
                   createCompilerError(
                     ErrorCodes.X_V_IF_SAME_KEY,
-                    branch.userKey!.loc
-                  )
+                    branch.userKey!.loc,
+                  ),
                 )
               }
             })
@@ -200,7 +195,7 @@ export function processIf(
         context.currentNode = null
       } else {
         context.onError(
-          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
+          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc),
         )
       }
       break
@@ -216,14 +211,14 @@ function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
     condition: dir.name === 'else' ? undefined : dir.exp,
     children: isTemplateIf && !findDir(node, 'for') ? node.children : [node],
     userKey: findProp(node, `key`),
-    isTemplateIf
+    isTemplateIf,
   }
 }
 
 function createCodegenNodeForBranch(
   branch: IfBranchNode,
   keyIndex: number,
-  context: TransformContext
+  context: TransformContext,
 ): IfConditionalExpression | BlockCodegenNode | MemoExpression {
   if (branch.condition) {
     return createConditionalExpression(
@@ -233,8 +228,8 @@ function createCodegenNodeForBranch(
       // closes the current block.
       createCallExpression(context.helper(CREATE_COMMENT), [
         __DEV__ ? '"v-if"' : '""',
-        'true'
-      ])
+        'true',
+      ]),
     ) as IfConditionalExpression
   } else {
     return createChildrenCodegenNode(branch, keyIndex, context)
@@ -244,7 +239,7 @@ function createCodegenNodeForBranch(
 function createChildrenCodegenNode(
   branch: IfBranchNode,
   keyIndex: number,
-  context: TransformContext
+  context: TransformContext,
 ): BlockCodegenNode | MemoExpression {
   const { helper } = context
   const keyProperty = createObjectProperty(
@@ -253,8 +248,8 @@ function createChildrenCodegenNode(
       `${keyIndex}`,
       false,
       locStub,
-      ConstantTypes.CAN_HOIST
-    )
+      ConstantTypes.CAN_HOIST,
+    ),
   )
   const { children } = branch
   const firstChild = children[0]
@@ -291,7 +286,7 @@ function createChildrenCodegenNode(
         true,
         false,
         false /* isComponent */,
-        branch.loc
+        branch.loc,
       )
     }
   } else {
@@ -311,7 +306,7 @@ function createChildrenCodegenNode(
 
 function isSameKey(
   a: AttributeNode | DirectiveNode | undefined,
-  b: AttributeNode | DirectiveNode
+  b: AttributeNode | DirectiveNode,
 ): boolean {
   if (!a || a.type !== b.type) {
     return false
@@ -339,7 +334,7 @@ function isSameKey(
 }
 
 function getParentCondition(
-  node: IfConditionalExpression | CacheExpression
+  node: IfConditionalExpression | CacheExpression,
 ): IfConditionalExpression {
   while (true) {
     if (node.type === NodeTypes.JS_CONDITIONAL_EXPRESSION) {
diff --git a/packages/compiler-core/src/transforms/vMemo.ts b/packages/compiler-core/src/transforms/vMemo.ts
index c14f6ceb860..7c728f4caad 100644
--- a/packages/compiler-core/src/transforms/vMemo.ts
+++ b/packages/compiler-core/src/transforms/vMemo.ts
@@ -1,13 +1,13 @@
-import { NodeTransform } from '../transform'
+import type { NodeTransform } from '../transform'
 import { findDir } from '../utils'
 import {
+  ElementTypes,
+  type MemoExpression,
+  NodeTypes,
+  type PlainElementNode,
   convertToBlock,
   createCallExpression,
   createFunctionExpression,
-  ElementTypes,
-  MemoExpression,
-  NodeTypes,
-  PlainElementNode
 } from '../ast'
 import { WITH_MEMO } from '../runtimeHelpers'
 
@@ -33,7 +33,7 @@ export const transformMemo: NodeTransform = (node, context) => {
           dir.exp!,
           createFunctionExpression(undefined, codegenNode),
           `_cache`,
-          String(context.cached++)
+          String(context.cached++),
         ]) as MemoExpression
       }
     }
diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts
index 3f13f327098..863b3a7d729 100644
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -1,20 +1,20 @@
-import { DirectiveTransform } from '../transform'
+import type { DirectiveTransform } from '../transform'
 import {
-  createSimpleExpression,
-  createObjectProperty,
-  createCompoundExpression,
-  NodeTypes,
-  Property,
+  ConstantTypes,
   ElementTypes,
-  ExpressionNode,
-  ConstantTypes
+  type ExpressionNode,
+  NodeTypes,
+  type Property,
+  createCompoundExpression,
+  createObjectProperty,
+  createSimpleExpression,
 } from '../ast'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
+  hasScopeRef,
   isMemberExpression,
   isSimpleIdentifier,
-  hasScopeRef,
-  isStaticExp
+  isStaticExp,
 } from '../utils'
 import { IS_REF } from '../runtimeHelpers'
 import { BindingTypes } from '../options'
@@ -24,11 +24,13 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
   const { exp, arg } = dir
   if (!exp) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION, dir.loc)
+      createCompilerError(ErrorCodes.X_V_MODEL_NO_EXPRESSION, dir.loc),
     )
     return createTransformProps()
   }
 
+  // we assume v-model directives are always parsed
+  // (not artificially created by a transform)
   const rawExp = exp.loc.source
   const expString =
     exp.type === NodeTypes.SIMPLE_EXPRESSION ? exp.content : rawExp
@@ -58,7 +60,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     (!isMemberExpression(expString, context) && !maybeRef)
   ) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION, exp.loc)
+      createCompilerError(ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION, exp.loc),
     )
     return createTransformProps()
   }
@@ -70,7 +72,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     context.identifiers[expString]
   ) {
     context.onError(
-      createCompilerError(ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE, exp.loc)
+      createCompilerError(ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE, exp.loc),
     )
     return createTransformProps()
   }
@@ -90,7 +92,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       assignmentExp = createCompoundExpression([
         `${eventArg} => ((`,
         createSimpleExpression(rawExp, false, exp.loc),
-        `).value = $event)`
+        `).value = $event)`,
       ])
     } else {
       // v-model used on a potentially ref binding in <script setup> inline mode.
@@ -100,14 +102,14 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       assignmentExp = createCompoundExpression([
         `${eventArg} => (${context.helperString(IS_REF)}(${rawExp}) ? (`,
         createSimpleExpression(rawExp, false, exp.loc),
-        `).value = $event : ${altAssignment})`
+        `).value = $event : ${altAssignment})`,
       ])
     }
   } else {
     assignmentExp = createCompoundExpression([
       `${eventArg} => ((`,
       exp,
-      `) = $event)`
+      `) = $event)`,
     ])
   }
 
@@ -115,7 +117,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     // modelValue: foo
     createObjectProperty(propName, dir.exp!),
     // "onUpdate:modelValue": $event => (foo = $event)
-    createObjectProperty(eventName, assignmentExp)
+    createObjectProperty(eventName, assignmentExp),
   ]
 
   // cache v-model handler if applicable (when it doesn't refer any scope vars)
@@ -146,9 +148,9 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
           `{ ${modifiers} }`,
           false,
           dir.loc,
-          ConstantTypes.CAN_HOIST
-        )
-      )
+          ConstantTypes.CAN_HOIST,
+        ),
+      ),
     )
   }
 
diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts
index 3deee202418..8c13bdae524 100644
--- a/packages/compiler-core/src/transforms/vOn.ts
+++ b/packages/compiler-core/src/transforms/vOn.ts
@@ -1,16 +1,16 @@
-import { DirectiveTransform, DirectiveTransformResult } from '../transform'
+import type { DirectiveTransform, DirectiveTransformResult } from '../transform'
 import {
+  type DirectiveNode,
+  ElementTypes,
+  type ExpressionNode,
+  NodeTypes,
+  type SimpleExpressionNode,
   createCompoundExpression,
   createObjectProperty,
   createSimpleExpression,
-  DirectiveNode,
-  ElementTypes,
-  ExpressionNode,
-  NodeTypes,
-  SimpleExpressionNode
 } from '../ast'
 import { camelize, toHandlerKey } from '@vue/shared'
-import { createCompilerError, ErrorCodes } from '../errors'
+import { ErrorCodes, createCompilerError } from '../errors'
 import { processExpression } from './transformExpression'
 import { validateBrowserExpression } from '../validateExpression'
 import { hasScopeRef, isMemberExpression } from '../utils'
@@ -33,7 +33,7 @@ export const transformOn: DirectiveTransform = (
   dir,
   node,
   context,
-  augmentor
+  augmentor,
 ) => {
   const { loc, modifiers, arg } = dir as VOnDirectiveNode
   if (!dir.exp && !modifiers.length) {
@@ -44,9 +44,7 @@ export const transformOn: DirectiveTransform = (
     if (arg.isStatic) {
       let rawName = arg.content
       if (__DEV__ && rawName.startsWith('vnode')) {
-        context.onWarn(
-          createCompilerError(ErrorCodes.DEPRECATION_VNODE_HOOKS, arg.loc)
-        )
+        context.onError(createCompilerError(ErrorCodes.X_VNODE_HOOKS, arg.loc))
       }
       if (rawName.startsWith('vue:')) {
         rawName = `vnode-${rawName.slice(4)}`
@@ -67,7 +65,7 @@ export const transformOn: DirectiveTransform = (
       eventName = createCompoundExpression([
         `${context.helperString(TO_HANDLER_KEY)}(`,
         arg,
-        `)`
+        `)`,
       ])
     }
   } else {
@@ -97,7 +95,7 @@ export const transformOn: DirectiveTransform = (
         exp,
         context,
         false,
-        hasMultipleStatements
+        hasMultipleStatements,
       )
       isInlineStatement && context.removeIdentifiers(`$event`)
       // with scope analysis, the function is hoistable if it has no reference
@@ -136,7 +134,7 @@ export const transformOn: DirectiveTransform = (
         exp as SimpleExpressionNode,
         context,
         false,
-        hasMultipleStatements
+        hasMultipleStatements,
       )
     }
 
@@ -153,7 +151,7 @@ export const transformOn: DirectiveTransform = (
               }(...args)`
         } => ${hasMultipleStatements ? `{` : `(`}`,
         exp,
-        hasMultipleStatements ? `}` : `)`
+        hasMultipleStatements ? `}` : `)`,
       ])
     }
   }
@@ -162,9 +160,9 @@ export const transformOn: DirectiveTransform = (
     props: [
       createObjectProperty(
         eventName,
-        exp || createSimpleExpression(`() => {}`, false, loc)
-      )
-    ]
+        exp || createSimpleExpression(`() => {}`, false, loc),
+      ),
+    ],
   }
 
   // apply extended compiler augmentor
diff --git a/packages/compiler-core/src/transforms/vOnce.ts b/packages/compiler-core/src/transforms/vOnce.ts
index e1ec5e129df..483b98da961 100644
--- a/packages/compiler-core/src/transforms/vOnce.ts
+++ b/packages/compiler-core/src/transforms/vOnce.ts
@@ -1,6 +1,6 @@
-import { NodeTransform } from '../transform'
+import type { NodeTransform } from '../transform'
 import { findDir } from '../utils'
-import { ElementNode, ForNode, IfNode, NodeTypes } from '../ast'
+import { type ElementNode, type ForNode, type IfNode, NodeTypes } from '../ast'
 import { SET_BLOCK_TRACKING } from '../runtimeHelpers'
 
 const seen = new WeakSet()
diff --git a/packages/compiler-core/src/transforms/vSlot.ts b/packages/compiler-core/src/transforms/vSlot.ts
index c4416dd45f7..1b95e6f71db 100644
--- a/packages/compiler-core/src/transforms/vSlot.ts
+++ b/packages/compiler-core/src/transforms/vSlot.ts
@@ -1,38 +1,37 @@
 import {
-  ElementNode,
-  ObjectExpression,
-  createObjectExpression,
+  type CallExpression,
+  type ConditionalExpression,
+  type DirectiveNode,
+  type ElementNode,
+  ElementTypes,
+  type ExpressionNode,
+  type FunctionExpression,
   NodeTypes,
+  type ObjectExpression,
+  type Property,
+  type SlotsExpression,
+  type SourceLocation,
+  type TemplateChildNode,
+  createArrayExpression,
+  createCallExpression,
+  createConditionalExpression,
+  createFunctionExpression,
+  createObjectExpression,
   createObjectProperty,
   createSimpleExpression,
-  createFunctionExpression,
-  DirectiveNode,
-  ElementTypes,
-  ExpressionNode,
-  Property,
-  TemplateChildNode,
-  SourceLocation,
-  createConditionalExpression,
-  ConditionalExpression,
-  SimpleExpressionNode,
-  FunctionExpression,
-  CallExpression,
-  createCallExpression,
-  createArrayExpression,
-  SlotsExpression
 } from '../ast'
-import { TransformContext, NodeTransform } from '../transform'
-import { createCompilerError, ErrorCodes } from '../errors'
+import type { NodeTransform, TransformContext } from '../transform'
+import { ErrorCodes, createCompilerError } from '../errors'
 import {
+  assert,
   findDir,
+  hasScopeRef,
+  isStaticExp,
   isTemplateNode,
-  assert,
   isVSlot,
-  hasScopeRef,
-  isStaticExp
 } from '../utils'
 import { CREATE_SLOTS, RENDER_LIST, WITH_CTX } from '../runtimeHelpers'
-import { parseForExpression, createForLoopParams } from './vFor'
+import { createForLoopParams, finalizeForParseResult } from './vFor'
 import { SlotFlags, slotFlagsText } from '@vue/shared'
 
 const defaultFallback = createSimpleExpression(`undefined`, false)
@@ -78,11 +77,9 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
     node.props.some(isVSlot) &&
     (vFor = findDir(node, 'for'))
   ) {
-    const result = (vFor.parseResult = parseForExpression(
-      vFor.exp as SimpleExpressionNode,
-      context
-    ))
+    const result = vFor.forParseResult
     if (result) {
+      finalizeForParseResult(result, context)
       const { value, key, index } = result
       const { addIdentifiers, removeIdentifiers } = context
       value && addIdentifiers(value)
@@ -100,17 +97,18 @@ export const trackVForSlotScopes: NodeTransform = (node, context) => {
 
 export type SlotFnBuilder = (
   slotProps: ExpressionNode | undefined,
+  vFor: DirectiveNode | undefined,
   slotChildren: TemplateChildNode[],
-  loc: SourceLocation
+  loc: SourceLocation,
 ) => FunctionExpression
 
-const buildClientSlotFn: SlotFnBuilder = (props, children, loc) =>
+const buildClientSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) =>
   createFunctionExpression(
     props,
     children,
     false /* newline */,
     true /* isSlot */,
-    children.length ? children[0].loc : loc
+    children.length ? children[0].loc : loc,
   )
 
 // Instead of being a DirectiveTransform, v-slot processing is called during
@@ -118,7 +116,7 @@ const buildClientSlotFn: SlotFnBuilder = (props, children, loc) =>
 export function buildSlots(
   node: ElementNode,
   context: TransformContext,
-  buildSlotFn: SlotFnBuilder = buildClientSlotFn
+  buildSlotFn: SlotFnBuilder = buildClientSlotFn,
 ): {
   slots: SlotsExpression
   hasDynamicSlots: boolean
@@ -149,8 +147,8 @@ export function buildSlots(
     slotsProperties.push(
       createObjectProperty(
         arg || createSimpleExpression('default', true),
-        buildSlotFn(exp, children, loc)
-      )
+        buildSlotFn(exp, undefined, children, loc),
+      ),
     )
   }
 
@@ -180,7 +178,7 @@ export function buildSlots(
     if (onComponentSlot) {
       // already has on-component slot - this is incorrect usage.
       context.onError(
-        createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, slotDir.loc)
+        createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, slotDir.loc),
       )
       break
     }
@@ -190,7 +188,7 @@ export function buildSlots(
     const {
       arg: slotName = createSimpleExpression(`default`, true),
       exp: slotProps,
-      loc: dirLoc
+      loc: dirLoc,
     } = slotDir
 
     // check if name is dynamic.
@@ -201,19 +199,20 @@ export function buildSlots(
       hasDynamicSlots = true
     }
 
-    const slotFunction = buildSlotFn(slotProps, slotChildren, slotLoc)
+    const vFor = findDir(slotElement, 'for')
+    const slotFunction = buildSlotFn(slotProps, vFor, slotChildren, slotLoc)
+
     // check if this slot is conditional (v-if/v-for)
     let vIf: DirectiveNode | undefined
     let vElse: DirectiveNode | undefined
-    let vFor: DirectiveNode | undefined
     if ((vIf = findDir(slotElement, 'if'))) {
       hasDynamicSlots = true
       dynamicSlots.push(
         createConditionalExpression(
           vIf.exp!,
           buildDynamicSlot(slotName, slotFunction, conditionalBranchIndex++),
-          defaultFallback
-        )
+          defaultFallback,
+        ),
       )
     } else if (
       (vElse = findDir(slotElement, /^else(-if)?$/, true /* allowEmpty */))
@@ -247,22 +246,21 @@ export function buildSlots(
               buildDynamicSlot(
                 slotName,
                 slotFunction,
-                conditionalBranchIndex++
+                conditionalBranchIndex++,
               ),
-              defaultFallback
+              defaultFallback,
             )
           : buildDynamicSlot(slotName, slotFunction, conditionalBranchIndex++)
       } else {
         context.onError(
-          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, vElse.loc)
+          createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, vElse.loc),
         )
       }
-    } else if ((vFor = findDir(slotElement, 'for'))) {
+    } else if (vFor) {
       hasDynamicSlots = true
-      const parseResult =
-        vFor.parseResult ||
-        parseForExpression(vFor.exp as SimpleExpressionNode, context)
+      const parseResult = vFor.forParseResult
       if (parseResult) {
+        finalizeForParseResult(parseResult, context)
         // Render the dynamic slots as an array and add it to the createSlot()
         // args. The runtime knows how to handle it appropriately.
         dynamicSlots.push(
@@ -271,13 +269,16 @@ export function buildSlots(
             createFunctionExpression(
               createForLoopParams(parseResult),
               buildDynamicSlot(slotName, slotFunction),
-              true /* force newline */
-            )
-          ])
+              true /* force newline */,
+            ),
+          ]),
         )
       } else {
         context.onError(
-          createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, vFor.loc)
+          createCompilerError(
+            ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+            vFor.loc,
+          ),
         )
       }
     } else {
@@ -287,8 +288,8 @@ export function buildSlots(
           context.onError(
             createCompilerError(
               ErrorCodes.X_V_SLOT_DUPLICATE_SLOT_NAMES,
-              dirLoc
-            )
+              dirLoc,
+            ),
           )
           continue
         }
@@ -304,9 +305,9 @@ export function buildSlots(
   if (!onComponentSlot) {
     const buildDefaultSlotProperty = (
       props: ExpressionNode | undefined,
-      children: TemplateChildNode[]
+      children: TemplateChildNode[],
     ) => {
-      const fn = buildSlotFn(props, children, loc)
+      const fn = buildSlotFn(props, undefined, children, loc)
       if (__COMPAT__ && context.compatConfig) {
         fn.isNonScopedSlot = true
       }
@@ -328,12 +329,12 @@ export function buildSlots(
         context.onError(
           createCompilerError(
             ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN,
-            implicitDefaultChildren[0].loc
-          )
+            implicitDefaultChildren[0].loc,
+          ),
         )
       } else {
         slotsProperties.push(
-          buildDefaultSlotProperty(undefined, implicitDefaultChildren)
+          buildDefaultSlotProperty(undefined, implicitDefaultChildren),
         )
       }
     }
@@ -342,8 +343,8 @@ export function buildSlots(
   const slotFlag = hasDynamicSlots
     ? SlotFlags.DYNAMIC
     : hasForwardedSlots(node.children)
-    ? SlotFlags.FORWARDED
-    : SlotFlags.STABLE
+      ? SlotFlags.FORWARDED
+      : SlotFlags.STABLE
 
   let slots = createObjectExpression(
     slotsProperties.concat(
@@ -353,37 +354,37 @@ export function buildSlots(
         // 1 = compiled and static = can skip normalization AND diff as optimized
         createSimpleExpression(
           slotFlag + (__DEV__ ? ` /* ${slotFlagsText[slotFlag]} */` : ``),
-          false
-        )
-      )
+          false,
+        ),
+      ),
     ),
-    loc
+    loc,
   ) as SlotsExpression
   if (dynamicSlots.length) {
     slots = createCallExpression(context.helper(CREATE_SLOTS), [
       slots,
-      createArrayExpression(dynamicSlots)
+      createArrayExpression(dynamicSlots),
     ]) as SlotsExpression
   }
 
   return {
     slots,
-    hasDynamicSlots
+    hasDynamicSlots,
   }
 }
 
 function buildDynamicSlot(
   name: ExpressionNode,
   fn: FunctionExpression,
-  index?: number
+  index?: number,
 ): ObjectExpression {
   const props = [
     createObjectProperty(`name`, name),
-    createObjectProperty(`fn`, fn)
+    createObjectProperty(`fn`, fn),
   ]
   if (index != null) {
     props.push(
-      createObjectProperty(`key`, createSimpleExpression(String(index), true))
+      createObjectProperty(`key`, createSimpleExpression(String(index), true)),
     )
   }
   return createObjectExpression(props)
diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts
index bd2882b09e2..99a2c5b61a8 100644
--- a/packages/compiler-core/src/utils.ts
+++ b/packages/compiler-core/src/utils.ts
@@ -1,62 +1,64 @@
 import {
-  SourceLocation,
-  Position,
-  ElementNode,
+  type BlockCodegenNode,
+  type CallExpression,
+  type DirectiveNode,
+  type ElementNode,
+  ElementTypes,
+  type ExpressionNode,
+  type IfBranchNode,
+  type InterpolationNode,
+  type JSChildNode,
+  type MemoExpression,
   NodeTypes,
-  CallExpression,
+  type ObjectExpression,
+  type Position,
+  type Property,
+  type RenderSlotCall,
+  type RootNode,
+  type SimpleExpressionNode,
+  type SlotOutletNode,
+  type TemplateChildNode,
+  type TemplateNode,
+  type TextNode,
+  type VNodeCall,
   createCallExpression,
-  DirectiveNode,
-  ElementTypes,
-  TemplateChildNode,
-  RootNode,
-  ObjectExpression,
-  Property,
-  JSChildNode,
   createObjectExpression,
-  SlotOutletNode,
-  TemplateNode,
-  RenderSlotCall,
-  ExpressionNode,
-  IfBranchNode,
-  TextNode,
-  InterpolationNode,
-  VNodeCall,
-  SimpleExpressionNode,
-  BlockCodegenNode,
-  MemoExpression
 } from './ast'
-import { TransformContext } from './transform'
+import type { TransformContext } from './transform'
 import {
+  BASE_TRANSITION,
+  GUARD_REACTIVE_PROPS,
+  KEEP_ALIVE,
   MERGE_PROPS,
-  TELEPORT,
+  NORMALIZE_PROPS,
   SUSPENSE,
-  KEEP_ALIVE,
-  BASE_TRANSITION,
+  TELEPORT,
   TO_HANDLERS,
-  NORMALIZE_PROPS,
-  GUARD_REACTIVE_PROPS,
-  WITH_MEMO
+  WITH_MEMO,
 } from './runtimeHelpers'
-import { isString, isObject, hyphenate, extend, NOOP } from '@vue/shared'
-import { PropsExpression } from './transforms/transformElement'
+import { NOOP, isObject, isString } from '@vue/shared'
+import type { PropsExpression } from './transforms/transformElement'
 import { parseExpression } from '@babel/parser'
-import { Expression } from '@babel/types'
+import type { Expression } from '@babel/types'
+import { unwrapTSNode } from './babelUtils'
 
 export const isStaticExp = (p: JSChildNode): p is SimpleExpressionNode =>
   p.type === NodeTypes.SIMPLE_EXPRESSION && p.isStatic
 
-export const isBuiltInType = (tag: string, expected: string): boolean =>
-  tag === expected || tag === hyphenate(expected)
-
 export function isCoreComponent(tag: string): symbol | void {
-  if (isBuiltInType(tag, 'Teleport')) {
-    return TELEPORT
-  } else if (isBuiltInType(tag, 'Suspense')) {
-    return SUSPENSE
-  } else if (isBuiltInType(tag, 'KeepAlive')) {
-    return KEEP_ALIVE
-  } else if (isBuiltInType(tag, 'BaseTransition')) {
-    return BASE_TRANSITION
+  switch (tag) {
+    case 'Teleport':
+    case 'teleport':
+      return TELEPORT
+    case 'Suspense':
+    case 'suspense':
+      return SUSPENSE
+    case 'KeepAlive':
+    case 'keep-alive':
+      return KEEP_ALIVE
+    case 'BaseTransition':
+    case 'base-transition':
+      return BASE_TRANSITION
   }
 }
 
@@ -64,11 +66,11 @@ const nonIdentifierRE = /^\d|[^\$\w]/
 export const isSimpleIdentifier = (name: string): boolean =>
   !nonIdentifierRE.test(name)
 
-const enum MemberExpLexState {
+enum MemberExpLexState {
   inMemberExp,
   inBrackets,
   inParens,
-  inString
+  inString,
 }
 
 const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/
@@ -155,15 +157,13 @@ export const isMemberExpressionNode = __BROWSER__
   : (path: string, context: TransformContext): boolean => {
       try {
         let ret: Expression = parseExpression(path, {
-          plugins: context.expressionPlugins
+          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' ||
-          ret.type === 'Identifier'
+          (ret.type === 'Identifier' && ret.name !== 'undefined')
         )
       } catch (e) {
         return false
@@ -174,40 +174,19 @@ export const isMemberExpression = __BROWSER__
   ? isMemberExpressionBrowser
   : isMemberExpressionNode
 
-export function getInnerRange(
-  loc: SourceLocation,
-  offset: number,
-  length: number
-): SourceLocation {
-  __TEST__ && assert(offset <= loc.source.length)
-  const source = loc.source.slice(offset, offset + length)
-  const newLoc: SourceLocation = {
-    source,
-    start: advancePositionWithClone(loc.start, loc.source, offset),
-    end: loc.end
-  }
-
-  if (length != null) {
-    __TEST__ && assert(offset + length <= loc.source.length)
-    newLoc.end = advancePositionWithClone(
-      loc.start,
-      loc.source,
-      offset + length
-    )
-  }
-
-  return newLoc
-}
-
 export function advancePositionWithClone(
   pos: Position,
   source: string,
-  numberOfCharacters: number = source.length
+  numberOfCharacters: number = source.length,
 ): Position {
   return advancePositionWithMutation(
-    extend({}, pos),
+    {
+      offset: pos.offset,
+      line: pos.line,
+      column: pos.column,
+    },
     source,
-    numberOfCharacters
+    numberOfCharacters,
   )
 }
 
@@ -216,7 +195,7 @@ export function advancePositionWithClone(
 export function advancePositionWithMutation(
   pos: Position,
   source: string,
-  numberOfCharacters: number = source.length
+  numberOfCharacters: number = source.length,
 ): Position {
   let linesCount = 0
   let lastNewLinePos = -1
@@ -247,7 +226,7 @@ export function assert(condition: boolean, msg?: string) {
 export function findDir(
   node: ElementNode,
   name: string | RegExp,
-  allowEmpty: boolean = false
+  allowEmpty: boolean = false,
 ): DirectiveNode | undefined {
   for (let i = 0; i < node.props.length; i++) {
     const p = node.props[i]
@@ -265,7 +244,7 @@ export function findProp(
   node: ElementNode,
   name: string,
   dynamicOnly: boolean = false,
-  allowEmpty: boolean = false
+  allowEmpty: boolean = false,
 ): ElementNode['props'][0] | undefined {
   for (let i = 0; i < node.props.length; i++) {
     const p = node.props[i]
@@ -286,7 +265,7 @@ export function findProp(
 
 export function isStaticArgOf(
   arg: DirectiveNode['arg'],
-  name: string
+  name: string,
 ): boolean {
   return !!(arg && isStaticExp(arg) && arg.content === name)
 }
@@ -298,12 +277,12 @@ export function hasDynamicKeyVBind(node: ElementNode): boolean {
       p.name === 'bind' &&
       (!p.arg || // v-bind="obj"
         p.arg.type !== NodeTypes.SIMPLE_EXPRESSION || // v-bind:[_ctx.foo]
-        !p.arg.isStatic) // v-bind:[foo]
+        !p.arg.isStatic), // v-bind:[foo]
   )
 }
 
 export function isText(
-  node: TemplateChildNode
+  node: TemplateChildNode,
 ): node is TextNode | InterpolationNode {
   return node.type === NodeTypes.INTERPOLATION || node.type === NodeTypes.TEXT
 }
@@ -313,7 +292,7 @@ export function isVSlot(p: ElementNode['props'][0]): p is DirectiveNode {
 }
 
 export function isTemplateNode(
-  node: RootNode | TemplateChildNode
+  node: RootNode | TemplateChildNode,
 ): node is TemplateNode {
   return (
     node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.TEMPLATE
@@ -321,7 +300,7 @@ export function isTemplateNode(
 }
 
 export function isSlotOutlet(
-  node: RootNode | TemplateChildNode
+  node: RootNode | TemplateChildNode,
 ): node is SlotOutletNode {
   return node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
 }
@@ -330,7 +309,7 @@ const propsHelperSet = new Set([NORMALIZE_PROPS, GUARD_REACTIVE_PROPS])
 
 function getUnnormalizedProps(
   props: PropsExpression | '{}',
-  callPath: CallExpression[] = []
+  callPath: CallExpression[] = [],
 ): [PropsExpression | '{}', CallExpression[]] {
   if (
     props &&
@@ -341,7 +320,7 @@ function getUnnormalizedProps(
     if (!isString(callee) && propsHelperSet.has(callee)) {
       return getUnnormalizedProps(
         props.arguments[0] as PropsExpression,
-        callPath.concat(props)
+        callPath.concat(props),
       )
     }
   }
@@ -350,7 +329,7 @@ function getUnnormalizedProps(
 export function injectProp(
   node: VNodeCall | RenderSlotCall,
   prop: Property,
-  context: TransformContext
+  context: TransformContext,
 ) {
   let propsWithInjection: ObjectExpression | CallExpression | undefined
   /**
@@ -393,7 +372,7 @@ export function injectProp(
         // #2366
         propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
           createObjectExpression([prop]),
-          props
+          props,
         ])
       } else {
         props.arguments.unshift(createObjectExpression([prop]))
@@ -409,7 +388,7 @@ export function injectProp(
     // single v-bind with expression, return a merged replacement
     propsWithInjection = createCallExpression(context.helper(MERGE_PROPS), [
       createObjectExpression([prop]),
-      props
+      props,
     ])
     // in the case of nested helper call, e.g. `normalizeProps(guardReactiveProps(props))`,
     // it will be rewritten as `normalizeProps(mergeProps({ key: 0 }, props))`,
@@ -441,7 +420,7 @@ function hasProp(prop: Property, props: ObjectExpression) {
     result = props.properties.some(
       p =>
         p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
-        p.key.content === propKeyName
+        p.key.content === propKeyName,
     )
   }
   return result
@@ -449,7 +428,7 @@ function hasProp(prop: Property, props: ObjectExpression) {
 
 export function toValidAssetId(
   name: string,
-  type: 'component' | 'directive' | 'filter'
+  type: 'component' | 'directive' | 'filter',
 ): string {
   // see issue#4422, we need adding identifier on validAssetId if variable `name` has specific character
   return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
@@ -460,7 +439,7 @@ export function toValidAssetId(
 // Check if a node contains expressions that reference current context scope ids
 export function hasScopeRef(
   node: TemplateChildNode | IfBranchNode | ExpressionNode | undefined,
-  ids: TransformContext['identifiers']
+  ids: TransformContext['identifiers'],
 ): boolean {
   if (!node || Object.keys(ids).length === 0) {
     return false
@@ -519,3 +498,5 @@ export function getMemoedVNodeCall(node: BlockCodegenNode | MemoExpression) {
     return node
   }
 }
+
+export const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
diff --git a/packages/compiler-core/src/validateExpression.ts b/packages/compiler-core/src/validateExpression.ts
index 83998eee2c8..dca90ddd3f1 100644
--- a/packages/compiler-core/src/validateExpression.ts
+++ b/packages/compiler-core/src/validateExpression.ts
@@ -1,6 +1,6 @@
-import { SimpleExpressionNode } from './ast'
-import { TransformContext } from './transform'
-import { createCompilerError, ErrorCodes } from './errors'
+import type { SimpleExpressionNode } from './ast'
+import type { TransformContext } from './transform'
+import { ErrorCodes, createCompilerError } from './errors'
 
 // these keywords should not appear inside expressions, but operators like
 // 'typeof', 'instanceof', and 'in' are allowed
@@ -13,7 +13,7 @@ const prohibitedKeywordRE = new RegExp(
     )
       .split(',')
       .join('\\b|\\b') +
-    '\\b'
+    '\\b',
 )
 
 // strip strings in expressions
@@ -29,7 +29,7 @@ export function validateBrowserExpression(
   node: SimpleExpressionNode,
   context: TransformContext,
   asParams = false,
-  asRawStatements = false
+  asRawStatements = false,
 ) {
   const exp = node.content
 
@@ -43,7 +43,7 @@ export function validateBrowserExpression(
     new Function(
       asRawStatements
         ? ` ${exp} `
-        : `return ${asParams ? `(${exp}) => {}` : `(${exp})`}`
+        : `return ${asParams ? `(${exp}) => {}` : `(${exp})`}`,
     )
   } catch (e: any) {
     let message = e.message
@@ -58,8 +58,8 @@ export function validateBrowserExpression(
         ErrorCodes.X_INVALID_EXPRESSION,
         node.loc,
         undefined,
-        message
-      )
+        message,
+      ),
     )
   }
 }
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__/decoderHtmlBrowser.spec.ts b/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
index 03c0929dbe2..ecdc070ad96 100644
--- a/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
+++ b/packages/compiler-dom/__tests__/decoderHtmlBrowser.spec.ts
@@ -29,16 +29,16 @@ describe('decodeHtmlBrowser', () => {
 
     // #3001 html tags inside attribute values
     expect(decodeHtmlBrowser('<strong>Text</strong>', true)).toBe(
-      '<strong>Text</strong>'
+      '<strong>Text</strong>',
     )
     expect(decodeHtmlBrowser('<strong>&amp;</strong>', true)).toBe(
-      '<strong>&</strong>'
+      '<strong>&</strong>',
     )
     expect(
       decodeHtmlBrowser(
         '<strong>&lt;strong&gt;&amp;&lt;/strong&gt;</strong>',
-        true
-      )
+        true,
+      ),
     ).toBe('<strong><strong>&</strong></strong>')
   })
 })
diff --git a/packages/compiler-dom/__tests__/parse.spec.ts b/packages/compiler-dom/__tests__/parse.spec.ts
index 736ea729fc4..80a08e76af6 100644
--- a/packages/compiler-dom/__tests__/parse.spec.ts
+++ b/packages/compiler-dom/__tests__/parse.spec.ts
@@ -1,22 +1,22 @@
 import {
-  baseParse as parse,
-  NodeTypes,
-  ElementNode,
-  TextNode,
-  ErrorCodes,
+  type AttributeNode,
+  ConstantTypes,
+  type ElementNode,
   ElementTypes,
-  InterpolationNode,
-  AttributeNode,
-  ConstantTypes
+  type InterpolationNode,
+  Namespaces,
+  NodeTypes,
+  type TextNode,
+  baseParse as parse,
 } from '@vue/compiler-core'
-import { parserOptions, DOMNamespaces } from '../src/parserOptions'
+import { parserOptions } from '../src/parserOptions'
 
 describe('DOM parser', () => {
   describe('Text', () => {
     test('textarea handles comments/elements as just text', () => {
       const ast = parse(
         '<textarea>some<div>text</div>and<!--comment--></textarea>',
-        parserOptions
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -27,12 +27,12 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 46, line: 1, column: 47 },
-          source: 'some<div>text</div>and<!--comment-->'
-        }
+          source: 'some<div>text</div>and<!--comment-->',
+        },
       })
     })
 
-    test('textarea handles character references', () => {
+    test('textarea handles entities', () => {
       const ast = parse('<textarea>&amp;</textarea>', parserOptions)
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -43,8 +43,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 15, line: 1, column: 16 },
-          source: '&amp;'
-        }
+          source: '&amp;',
+        },
       })
     })
 
@@ -58,16 +58,16 @@ describe('DOM parser', () => {
           content: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `foo`,
-            isStatic: false
-          }
-        }
+            isStatic: false,
+          },
+        },
       ])
     })
 
     test('style handles comments/elements as just a text', () => {
       const ast = parse(
         '<style>some<div>text</div>and<!--comment--></style>',
-        parserOptions
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -78,8 +78,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 7, line: 1, column: 8 },
           end: { offset: 43, line: 1, column: 44 },
-          source: 'some<div>text</div>and<!--comment-->'
-        }
+          source: 'some<div>text</div>and<!--comment-->',
+        },
       })
     })
 
@@ -94,8 +94,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 7, line: 1, column: 8 },
           end: { offset: 12, line: 1, column: 13 },
-          source: '&amp;'
-        }
+          source: '&amp;',
+        },
       })
     })
 
@@ -109,8 +109,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 14, line: 1, column: 15 },
           end: { offset: 23, line: 1, column: 24 },
-          source: 'some text'
-        }
+          source: 'some text',
+        },
       })
     })
 
@@ -120,21 +120,21 @@ describe('DOM parser', () => {
       expect((ast.children[0] as ElementNode).children).toMatchObject([
         {
           type: NodeTypes.TEXT,
-          content: `  \na   `
+          content: `  \na   `,
         },
         {
           type: NodeTypes.ELEMENT,
           children: [
             {
               type: NodeTypes.TEXT,
-              content: `foo \n bar`
-            }
-          ]
+              content: `foo \n bar`,
+            },
+          ],
         },
         {
           type: NodeTypes.TEXT,
-          content: `   \n   c`
-        }
+          content: `   \n   c`,
+        },
       ])
     })
 
@@ -145,7 +145,7 @@ describe('DOM parser', () => {
       expect((ast.children[0] as ElementNode).children).toMatchObject([
         {
           type: NodeTypes.TEXT,
-          content: `hello`
+          content: `hello`,
         },
         {
           type: NodeTypes.ELEMENT,
@@ -153,10 +153,10 @@ describe('DOM parser', () => {
             {
               type: NodeTypes.TEXT,
               // should not remove the leading newline for nested elements
-              content: `\nbye`
-            }
-          ]
-        }
+              content: `\nbye`,
+            },
+          ],
+        },
       ])
     })
 
@@ -166,7 +166,7 @@ describe('DOM parser', () => {
       const ast = parse(`foo&nbsp;&nbsp;bar`, parserOptions)
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.TEXT,
-        content: `foo${nbsp}${nbsp}bar`
+        content: `foo${nbsp}${nbsp}bar`,
       })
     })
 
@@ -181,8 +181,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 11, line: 1, column: 12 },
-          source: '&ampersand;'
-        }
+          source: '&ampersand;',
+        },
       })
     })
 
@@ -190,7 +190,7 @@ describe('DOM parser', () => {
     test('HTML entities compatibility in attribute', () => {
       const ast = parse(
         '<div a="&ampersand;" b="&amp;ersand;" c="&amp!"></div>',
-        parserOptions
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text1 = (element.props[0] as AttributeNode).value
@@ -203,8 +203,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 7, line: 1, column: 8 },
           end: { offset: 20, line: 1, column: 21 },
-          source: '"&ampersand;"'
-        }
+          source: '"&ampersand;"',
+        },
       })
       expect(text2).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -212,8 +212,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 23, line: 1, column: 24 },
           end: { offset: 37, line: 1, column: 38 },
-          source: '"&amp;ersand;"'
-        }
+          source: '"&amp;ersand;"',
+        },
       })
       expect(text3).toStrictEqual({
         type: NodeTypes.TEXT,
@@ -221,8 +221,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 40, line: 1, column: 41 },
           end: { offset: 47, line: 1, column: 48 },
-          source: '"&amp!"'
-        }
+          source: '"&amp!"',
+        },
       })
     })
 
@@ -236,8 +236,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 6, line: 1, column: 7 },
-          source: '&#x86;'
-        }
+          source: '&#x86;',
+        },
       })
     })
   })
@@ -258,14 +258,14 @@ describe('DOM parser', () => {
           loc: {
             start: { offset: 8, line: 1, column: 9 },
             end: { offset: 16, line: 1, column: 17 },
-            source: 'a &lt; b'
-          }
+            source: 'a &lt; b',
+          },
         },
         loc: {
           start: { offset: 5, line: 1, column: 6 },
           end: { offset: 19, line: 1, column: 20 },
-          source: '{{ a &lt; b }}'
-        }
+          source: '{{ a &lt; b }}',
+        },
       })
     })
   })
@@ -277,18 +277,17 @@ describe('DOM parser', () => {
 
       expect(element).toStrictEqual({
         type: NodeTypes.ELEMENT,
-        ns: DOMNamespaces.HTML,
+        ns: Namespaces.HTML,
         tag: 'img',
         tagType: ElementTypes.ELEMENT,
         props: [],
-        isSelfClosing: false,
         children: [],
         loc: {
           start: { offset: 0, line: 1, column: 1 },
           end: { offset: 5, line: 1, column: 6 },
-          source: '<img>'
+          source: '<img>',
         },
-        codegenNode: undefined
+        codegenNode: undefined,
       })
     })
 
@@ -298,33 +297,26 @@ describe('DOM parser', () => {
       expect(ast.children[0]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'div',
-        tagType: ElementTypes.ELEMENT
+        tagType: ElementTypes.ELEMENT,
       })
 
       expect(ast.children[1]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
 
       expect(ast.children[2]).toMatchObject({
         type: NodeTypes.ELEMENT,
         tag: 'Comp',
-        tagType: ElementTypes.COMPONENT
+        tagType: ElementTypes.COMPONENT,
       })
     })
 
     test('Strict end tag detection for textarea.', () => {
       const ast = parse(
-        '<textarea>hello</textarea</textarea0></texTArea a="<>">',
-        {
-          ...parserOptions,
-          onError: err => {
-            if (err.code !== ErrorCodes.END_TAG_WITH_ATTRIBUTES) {
-              throw err
-            }
-          }
-        }
+        '<textarea>hello</textarea</textarea0></texTArea>',
+        parserOptions,
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
@@ -336,8 +328,8 @@ describe('DOM parser', () => {
         loc: {
           start: { offset: 10, line: 1, column: 11 },
           end: { offset: 37, line: 1, column: 38 },
-          source: 'hello</textarea</textarea0>'
-        }
+          source: 'hello</textarea</textarea0>',
+        },
       })
     })
   })
@@ -347,74 +339,74 @@ describe('DOM parser', () => {
       const ast = parse('<html>test</html>', parserOptions)
       const element = ast.children[0] as ElementNode
 
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('SVG namespace', () => {
       const ast = parse('<svg>test</svg>', parserOptions)
       const element = ast.children[0] as ElementNode
 
-      expect(element.ns).toBe(DOMNamespaces.SVG)
+      expect(element.ns).toBe(Namespaces.SVG)
     })
 
     test('MATH_ML namespace', () => {
       const ast = parse('<math>test</math>', parserOptions)
       const element = ast.children[0] as ElementNode
 
-      expect(element.ns).toBe(DOMNamespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.MATH_ML)
     })
 
     test('SVG in MATH_ML namespace', () => {
       const ast = parse(
         '<math><annotation-xml><svg></svg></annotation-xml></math>',
-        parserOptions
+        parserOptions,
       )
       const elementMath = ast.children[0] as ElementNode
       const elementAnnotation = elementMath.children[0] as ElementNode
       const elementSvg = elementAnnotation.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
     })
 
     test('html text/html in MATH_ML namespace', () => {
       const ast = parse(
         '<math><annotation-xml encoding="text/html"><test/></annotation-xml></math>',
-        parserOptions
+        parserOptions,
       )
 
       const elementMath = ast.children[0] as ElementNode
       const elementAnnotation = elementMath.children[0] as ElementNode
       const element = elementAnnotation.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('html application/xhtml+xml in MATH_ML namespace', () => {
       const ast = parse(
         '<math><annotation-xml encoding="application/xhtml+xml"><test/></annotation-xml></math>',
-        parserOptions
+        parserOptions,
       )
       const elementMath = ast.children[0] as ElementNode
       const elementAnnotation = elementMath.children[0] as ElementNode
       const element = elementAnnotation.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('mtext malignmark in MATH_ML namespace', () => {
       const ast = parse(
         '<math><mtext><malignmark/></mtext></math>',
-        parserOptions
+        parserOptions,
       )
       const elementMath = ast.children[0] as ElementNode
       const elementText = elementMath.children[0] as ElementNode
       const element = elementText.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.MATH_ML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.MATH_ML)
     })
 
     test('mtext and not malignmark tag in MATH_ML namespace', () => {
@@ -423,21 +415,21 @@ describe('DOM parser', () => {
       const elementText = elementMath.children[0] as ElementNode
       const element = elementText.children[0] as ElementNode
 
-      expect(elementMath.ns).toBe(DOMNamespaces.MATH_ML)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementMath.ns).toBe(Namespaces.MATH_ML)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('foreignObject tag in SVG namespace', () => {
       const ast = parse(
         '<svg><foreignObject><test/></foreignObject></svg>',
-        parserOptions
+        parserOptions,
       )
       const elementSvg = ast.children[0] as ElementNode
       const elementForeignObject = elementSvg.children[0] as ElementNode
       const element = elementForeignObject.children[0] as ElementNode
 
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('desc tag in SVG namespace', () => {
@@ -446,8 +438,8 @@ describe('DOM parser', () => {
       const elementDesc = elementSvg.children[0] as ElementNode
       const element = elementDesc.children[0] as ElementNode
 
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('title tag in SVG namespace', () => {
@@ -456,8 +448,8 @@ describe('DOM parser', () => {
       const elementTitle = elementSvg.children[0] as ElementNode
       const element = elementTitle.children[0] as ElementNode
 
-      expect(elementSvg.ns).toBe(DOMNamespaces.SVG)
-      expect(element.ns).toBe(DOMNamespaces.HTML)
+      expect(elementSvg.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
     })
 
     test('SVG in HTML namespace', () => {
@@ -465,8 +457,8 @@ describe('DOM parser', () => {
       const elementHtml = ast.children[0] as ElementNode
       const element = elementHtml.children[0] as ElementNode
 
-      expect(elementHtml.ns).toBe(DOMNamespaces.HTML)
-      expect(element.ns).toBe(DOMNamespaces.SVG)
+      expect(elementHtml.ns).toBe(Namespaces.HTML)
+      expect(element.ns).toBe(Namespaces.SVG)
     })
 
     test('MATH in HTML namespace', () => {
@@ -474,8 +466,35 @@ describe('DOM parser', () => {
       const elementHtml = ast.children[0] as ElementNode
       const element = elementHtml.children[0] as ElementNode
 
-      expect(elementHtml.ns).toBe(DOMNamespaces.HTML)
-      expect(element.ns).toBe(DOMNamespaces.MATH_ML)
+      expect(elementHtml.ns).toBe(Namespaces.HTML)
+      expect(element.ns).toBe(Namespaces.MATH_ML)
+    })
+
+    test('root ns', () => {
+      const ast = parse('<foreignObject><test/></foreignObject>', {
+        ...parserOptions,
+        ns: Namespaces.SVG,
+      })
+      const elementForieng = ast.children[0] as ElementNode
+      const element = elementForieng.children[0] as ElementNode
+
+      expect(elementForieng.ns).toBe(Namespaces.SVG)
+      expect(element.ns).toBe(Namespaces.HTML)
+    })
+
+    test('correct XML handling with root ns', () => {
+      // when root ns is an XML namespace, there should be no special content
+      // treatment for <script>, <style>, <textarea> etc.
+      const ast = parse('<script><g/><g/></script>', {
+        ...parserOptions,
+        ns: Namespaces.SVG,
+      })
+      const elementSvg = ast.children[0] as ElementNode
+      // should parse as nodes instead of text
+      expect(elementSvg.children).toMatchObject([
+        { type: NodeTypes.ELEMENT, tag: 'g' },
+        { type: NodeTypes.ELEMENT, tag: 'g' },
+      ])
     })
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/Transition.spec.ts b/packages/compiler-dom/__tests__/transforms/Transition.spec.ts
index 12eb280aa7b..8f64adb80a3 100644
--- a/packages/compiler-dom/__tests__/transforms/Transition.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/Transition.spec.ts
@@ -4,7 +4,7 @@ describe('Transition multi children warnings', () => {
   function checkWarning(
     template: string,
     shouldWarn: boolean,
-    message = `<Transition> expects exactly one child element or component.`
+    message = `<Transition> expects exactly one child element or component.`,
   ) {
     const spy = vi.fn()
     compile(template.trim(), {
@@ -12,7 +12,7 @@ describe('Transition multi children warnings', () => {
       transformHoist: null,
       onError: err => {
         spy(err.message)
-      }
+      },
     })
 
     if (shouldWarn) expect(spy).toHaveBeenCalledWith(message)
@@ -27,7 +27,7 @@ describe('Transition multi children warnings', () => {
         <div>hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -38,7 +38,7 @@ describe('Transition multi children warnings', () => {
         <div v-for="i in items">hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -50,7 +50,7 @@ describe('Transition multi children warnings', () => {
         <div v-else v-for="i in items">hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -61,7 +61,7 @@ describe('Transition multi children warnings', () => {
         <template v-if="ok"></template>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -73,7 +73,7 @@ describe('Transition multi children warnings', () => {
         <template v-else></template>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -85,7 +85,7 @@ describe('Transition multi children warnings', () => {
         <div v-if="other">hey</div>
       </transition>
       `,
-      true
+      true,
     )
   })
 
@@ -96,7 +96,7 @@ describe('Transition multi children warnings', () => {
         <div>hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 
@@ -107,7 +107,7 @@ describe('Transition multi children warnings', () => {
         <div v-if="a">hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 
@@ -120,7 +120,7 @@ describe('Transition multi children warnings', () => {
         <div v-else>hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 
@@ -132,7 +132,7 @@ describe('Transition multi children warnings', () => {
         <div v-else>hey</div>
       </transition>
       `,
-      false
+      false,
     )
   })
 })
@@ -143,7 +143,7 @@ test('inject persisted when child has v-show', () => {
     <transition>
       <div v-show="ok" />
     </transition>
-    `).code
+    `).code,
   ).toMatchSnapshot()
 })
 
@@ -161,6 +161,6 @@ test('the v-if/else-if/else branches in Transition should ignore comments', () =
         <p v-else/>
       </div>
     </transition>
-    `).code
+    `).code,
   ).toMatchSnapshot()
 })
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-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts b/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
index 4df6ee297f3..f06b9fd52dd 100644
--- a/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/ignoreSideEffectTags.spec.ts
@@ -1,4 +1,4 @@
-import { compile, CompilerError } from '../../src'
+import { type CompilerError, compile } from '../../src'
 
 describe('compiler: ignore side effect tags', () => {
   it('should ignore script', () => {
@@ -6,7 +6,7 @@ describe('compiler: ignore side effect tags', () => {
     const { code } = compile(`<script>console.log(1)</script>`, {
       onError(e) {
         err = e
-      }
+      },
     })
     expect(code).not.toMatch('script')
     expect(err).toBeDefined()
@@ -18,7 +18,7 @@ describe('compiler: ignore side effect tags', () => {
     const { code } = compile(`<style>h1 { color: red }</style>`, {
       onError(e) {
         err = e
-      }
+      },
     })
     expect(code).not.toMatch('style')
     expect(err).toBeDefined()
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 85efeafb8c9..b0eb515c254 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -1,13 +1,13 @@
 import {
-  compile,
-  NodeTypes,
   CREATE_STATIC,
+  ConstantTypes,
+  NodeTypes,
+  compile,
   createSimpleExpression,
-  ConstantTypes
 } from '../../src'
 import {
+  StringifyThresholds,
   stringifyStatic,
-  StringifyThresholds
 } from '../../src/transforms/stringifyStatic'
 
 describe('stringify static html', () => {
@@ -15,20 +15,17 @@ describe('stringify static html', () => {
     return compile(template, {
       hoistStatic: true,
       prefixIdentifiers: true,
-      transformHoist: stringifyStatic
+      transformHoist: stringifyStatic,
     })
   }
 
   function repeat(code: string, n: number): string {
-    return new Array(n)
-      .fill(0)
-      .map(() => code)
-      .join('')
+    return code.repeat(n)
   }
 
   test('should bail on non-eligible static trees', () => {
     const { ast } = compileWithStringify(
-      `<div><div><div>hello</div><div>hello</div></div></div>`
+      `<div><div><div>hello</div><div>hello</div></div></div>`,
     )
     // should be a normal vnode call
     expect(ast.hoists[0]!.type).toBe(NodeTypes.VNODE_CALL)
@@ -38,8 +35,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div><div>${repeat(
         `<span class="foo"/>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
     expect(ast.hoists).toMatchObject([
@@ -50,15 +47,15 @@ describe('stringify static html', () => {
           JSON.stringify(
             `<div>${repeat(
               `<span class="foo"></span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )}</div>`
+              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+            )}</div>`,
           ),
-          '1'
-        ]
+          '1',
+        ],
       }, // the children array is hoisted as well
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -66,8 +63,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div><div>${repeat(
         `<span/>`,
-        StringifyThresholds.NODE_COUNT
-      )}</div></div>`
+        StringifyThresholds.NODE_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
     expect(ast.hoists).toMatchObject([
@@ -78,16 +75,16 @@ describe('stringify static html', () => {
           JSON.stringify(
             `<div>${repeat(
               `<span></span>`,
-              StringifyThresholds.NODE_COUNT
-            )}</div>`
+              StringifyThresholds.NODE_COUNT,
+            )}</div>`,
           ),
-          '1'
-        ]
+          '1',
+        ],
       },
       // the children array is hoisted as well
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -95,8 +92,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div>${repeat(
         `<span class="foo"/>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div>`,
     )
     // should have 6 hoisted nodes (including the entire array),
     // but 2~5 should be null because they are merged into 1
@@ -108,19 +105,19 @@ describe('stringify static html', () => {
           JSON.stringify(
             repeat(
               `<span class="foo"></span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )
+              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+            ),
           ),
-          '5'
-        ]
+          '5',
+        ],
       },
       null,
       null,
       null,
       null,
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -128,8 +125,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div><div :style="{ color: 'red' }">${repeat(
         `<span :class="[{ foo: true }, { bar: true }]">{{ 1 }} + {{ false }}</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
     expect(ast.hoists).toMatchObject([
@@ -140,15 +137,15 @@ describe('stringify static html', () => {
           JSON.stringify(
             `<div style="color:red;">${repeat(
               `<span class="foo bar">1 + false</span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )}</div>`
+              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+            )}</div>`,
           ),
-          '1'
-        ]
+          '1',
+        ],
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -157,8 +154,8 @@ describe('stringify static html', () => {
       `<div><div>${repeat(
         `<span :class="'foo' + '&gt;ar'">{{ 1 }} + {{ '<' }}</span>` +
           `<span>&amp;</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     // should be optimized now
     expect(ast.hoists).toMatchObject([
@@ -169,15 +166,15 @@ describe('stringify static html', () => {
           JSON.stringify(
             `<div>${repeat(
               `<span class="foo&gt;ar">1 + &lt;</span>` + `<span>&amp;</span>`,
-              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-            )}</div>`
+              StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+            )}</div>`,
           ),
-          '1'
-        ]
+          '1',
+        ],
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -185,7 +182,7 @@ describe('stringify static html', () => {
     const { ast, code } = compile(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
       )}<img src="./foo" /></div></div>`,
       {
         hoistStatic: true,
@@ -198,7 +195,7 @@ describe('stringify static html', () => {
                 '_imports_0_',
                 false,
                 node.loc,
-                ConstantTypes.CAN_HOIST
+                ConstantTypes.CAN_HOIST,
               )
               node.props[0] = {
                 type: NodeTypes.DIRECTIVE,
@@ -206,23 +203,23 @@ describe('stringify static html', () => {
                 arg: createSimpleExpression('src', true),
                 exp,
                 modifiers: [],
-                loc: node.loc
+                loc: node.loc,
               }
             }
-          }
-        ]
-      }
+          },
+        ],
+      },
     )
     expect(ast.hoists).toMatchObject([
       {
         // the expression and the tree are still hoistable
         // but should stay NodeTypes.VNODE_CALL
         // if it's stringified it will be NodeTypes.JS_CALL_EXPRESSION
-        type: NodeTypes.VNODE_CALL
+        type: NodeTypes.VNODE_CALL,
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
     expect(code).toMatchSnapshot()
   })
@@ -233,7 +230,7 @@ describe('stringify static html', () => {
     const { ast, code } = compile(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
       )}<img src="./foo" /></div></div>`,
       {
         hoistStatic: true,
@@ -246,7 +243,7 @@ describe('stringify static html', () => {
                 '_imports_0_',
                 false,
                 node.loc,
-                ConstantTypes.CAN_STRINGIFY
+                ConstantTypes.CAN_STRINGIFY,
               )
               node.props[0] = {
                 type: NodeTypes.DIRECTIVE,
@@ -254,22 +251,22 @@ describe('stringify static html', () => {
                 arg: createSimpleExpression('src', true),
                 exp,
                 modifiers: [],
-                loc: node.loc
+                loc: node.loc,
               }
             }
-          }
-        ]
-      }
+          },
+        ],
+      },
     )
     expect(ast.hoists).toMatchObject([
       {
         // the hoisted node should be NodeTypes.JS_CALL_EXPRESSION
         // of `createStaticVNode()` instead of dynamic NodeTypes.VNODE_CALL
-        type: NodeTypes.JS_CALL_EXPRESSION
+        type: NodeTypes.JS_CALL_EXPRESSION,
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
     expect(code).toMatchSnapshot()
   })
@@ -279,31 +276,31 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div><div><input indeterminate>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     expect(ast.hoists).toMatchObject([
       {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
 
     const { ast: ast2 } = compileWithStringify(
       `<div><div><input :indeterminate="true">${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div></div>`,
     )
     expect(ast2.hoists).toMatchObject([
       {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -311,31 +308,31 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}<input indeterminate></div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}<input indeterminate></div></div>`,
     )
     expect(ast.hoists).toMatchObject([
       {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
 
     const { ast: ast2 } = compileWithStringify(
       `<div><div>${repeat(
         `<span class="foo">foo</span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}<input :indeterminate="true"></div></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}<input :indeterminate="true"></div></div>`,
     )
     expect(ast2.hoists).toMatchObject([
       {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -343,16 +340,16 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<table><tbody>${repeat(
         `<tr class="foo"><td>foo</td></tr>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</tbody></table>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</tbody></table>`,
     )
     expect(ast.hoists).toMatchObject([
       {
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       },
       {
-        type: NodeTypes.JS_ARRAY_EXPRESSION
-      }
+        type: NodeTypes.JS_ARRAY_EXPRESSION,
+      },
     ])
   })
 
@@ -360,30 +357,30 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<foo>${repeat(
         `<div class="foo"></div>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</foo>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</foo>`,
     )
     expect(ast.hoists.length).toBe(
-      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
     )
     ast.hoists.forEach(node => {
       expect(node).toMatchObject({
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       })
     })
 
     const { ast: ast2 } = compileWithStringify(
       `<foo><template #foo>${repeat(
         `<div class="foo"></div>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</template></foo>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</template></foo>`,
     )
     expect(ast2.hoists.length).toBe(
-      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
     )
     ast2.hoists.forEach(node => {
       expect(node).toMatchObject({
-        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+        type: NodeTypes.VNODE_CALL, // not CALL_EXPRESSION
       })
     })
   })
@@ -392,8 +389,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div>${repeat(
         `<span :title="null"></span>`,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</div>`,
     )
     expect(ast.hoists[0]).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -402,11 +399,11 @@ describe('stringify static html', () => {
         JSON.stringify(
           `${repeat(
             `<span></span>`,
-            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-          )}`
+            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+          )}`,
         ),
-        '5'
-      ]
+        '5',
+      ],
     })
   })
 
@@ -415,8 +412,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<button :disabled="false">enable</button>${repeat(
         `<div></div>`,
-        StringifyThresholds.NODE_COUNT
-      )}`
+        StringifyThresholds.NODE_COUNT,
+      )}`,
     )
     expect(ast.hoists[0]).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -425,11 +422,11 @@ describe('stringify static html', () => {
         JSON.stringify(
           `<button>enable</button>${repeat(
             `<div></div>`,
-            StringifyThresholds.NODE_COUNT
-          )}`
+            StringifyThresholds.NODE_COUNT,
+          )}`,
         ),
-        '21'
-      ]
+        '21',
+      ],
     })
   })
 
@@ -439,8 +436,8 @@ describe('stringify static html', () => {
     const { ast } = compileWithStringify(
       `<div>${svg}${repeat(
         repeated,
-        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-      )}</svg></div>`
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+      )}</svg></div>`,
     )
     expect(ast.hoists[0]).toMatchObject({
       type: NodeTypes.JS_CALL_EXPRESSION,
@@ -449,11 +446,11 @@ describe('stringify static html', () => {
         JSON.stringify(
           `${svg}${repeat(
             repeated,
-            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
-          )}</svg>`
+            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT,
+          )}</svg>`,
         ),
-        '1'
-      ]
+        '1',
+      ],
     })
   })
 
diff --git a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
index 6eee9f8ba38..51c40c45d98 100644
--- a/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/transformStyle.spec.ts
@@ -1,10 +1,10 @@
 import {
+  type CompilerOptions,
+  type ElementNode,
+  NodeTypes,
+  type VNodeCall,
   baseParse as parse,
   transform,
-  CompilerOptions,
-  ElementNode,
-  NodeTypes,
-  VNodeCall
 } from '@vue/compiler-core'
 import { transformBind } from '../../../compiler-core/src/transforms/vBind'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -12,16 +12,16 @@ import { transformStyle } from '../../src/transforms/transformStyle'
 
 function transformWithStyleTransform(
   template: string,
-  options: CompilerOptions = {}
+  options: CompilerOptions = {},
 ) {
   const ast = parse(template)
   transform(ast, {
     nodeTransforms: [transformStyle],
-    ...options
+    ...options,
   })
   return {
     root: ast,
-    node: ast.children[0] as ElementNode
+    node: ast.children[0] as ElementNode,
   }
 }
 
@@ -34,13 +34,13 @@ describe('compiler: style transform', () => {
       arg: {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: `style`,
-        isStatic: true
+        isStatic: true,
       },
       exp: {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: `{"color":"red"}`,
-        isStatic: false
-      }
+        isStatic: false,
+      },
     })
   })
 
@@ -48,8 +48,8 @@ describe('compiler: style transform', () => {
     const { node } = transformWithStyleTransform(`<div style="color: red"/>`, {
       nodeTransforms: [transformStyle, transformElement],
       directiveTransforms: {
-        bind: transformBind
-      }
+        bind: transformBind,
+      },
     })
     expect((node.codegenNode as VNodeCall).props).toMatchObject({
       type: NodeTypes.JS_OBJECT_EXPRESSION,
@@ -58,15 +58,15 @@ describe('compiler: style transform', () => {
           key: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `style`,
-            isStatic: true
+            isStatic: true,
           },
           value: {
             type: NodeTypes.SIMPLE_EXPRESSION,
             content: `{"color":"red"}`,
-            isStatic: false
-          }
-        }
-      ]
+            isStatic: false,
+          },
+        },
+      ],
     })
     // should not cause the STYLE patchFlag to be attached
     expect((node.codegenNode as VNodeCall).patchFlag).toBeUndefined()
diff --git a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
index af336523938..a59a7a40aaf 100644
--- a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
@@ -1,14 +1,14 @@
 import {
+  type CompilerOptions,
+  type PlainElementNode,
   baseParse as parse,
   transform,
-  PlainElementNode,
-  CompilerOptions
 } from '@vue/compiler-core'
 import { transformVHtml } from '../../src/transforms/vHtml'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import {
   createObjectMatcher,
-  genFlagText
+  genFlagText,
 } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
@@ -18,9 +18,9 @@ function transformWithVHtml(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      html: transformVHtml
+      html: transformVHtml,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -31,40 +31,40 @@ describe('compiler: v-html transform', () => {
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        innerHTML: `[test]`
+        innerHTML: `[test]`,
       }),
       children: undefined,
       patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["innerHTML"]`
+      dynamicProps: `["innerHTML"]`,
     })
   })
 
   it('should raise error and ignore children when v-html is present', () => {
     const onError = vi.fn()
     const ast = transformWithVHtml(`<div v-html="test">hello</div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }]
+      [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }],
     ])
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
-        innerHTML: `[test]`
+        innerHTML: `[test]`,
       }),
       children: undefined, // <-- children should have been removed
       patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["innerHTML"]`
+      dynamicProps: `["innerHTML"]`,
     })
   })
 
   it('should raise error if has no expression', () => {
     const onError = vi.fn()
     transformWithVHtml(`<div v-html></div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }]
+      [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
     ])
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
index dce8f09b02c..02d188f01b9 100644
--- a/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vModel.spec.ts
@@ -1,8 +1,8 @@
 import {
+  type CompilerOptions,
+  generate,
   baseParse as parse,
   transform,
-  CompilerOptions,
-  generate
 } from '@vue/compiler-core'
 import { transformModel } from '../../src/transforms/vModel'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
@@ -12,7 +12,7 @@ import {
   V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
-  V_MODEL_TEXT
+  V_MODEL_TEXT,
 } from '../../src/runtimeHelpers'
 
 function transformWithModel(template: string, options: CompilerOptions = {}) {
@@ -20,9 +20,9 @@ function transformWithModel(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      model: transformModel
+      model: transformModel,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -70,7 +70,7 @@ describe('compiler: transform v-model', () => {
     expect(generate(root).code).toMatchSnapshot()
 
     const root2 = transformWithModel(
-      '<input v-bind:[key]="val" v-model="model" />'
+      '<input v-bind:[key]="val" v-model="model" />',
     )
     expect(root2.helpers).toContain(V_MODEL_DYNAMIC)
     expect(generate(root2).code).toMatchSnapshot()
@@ -98,8 +98,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT
-        })
+          code: DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
+        }),
       )
     })
 
@@ -110,8 +110,8 @@ describe('compiler: transform v-model', () => {
       expect(onError).toHaveBeenCalledTimes(1)
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT
-        })
+          code: DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
+        }),
       )
     })
 
@@ -119,7 +119,7 @@ describe('compiler: transform v-model', () => {
       const onError = vi.fn()
       const root = transformWithModel('<my-input v-model="model" />', {
         onError,
-        isCustomElement: tag => tag.startsWith('my-')
+        isCustomElement: tag => tag.startsWith('my-'),
       })
       expect(root.helpers).toContain(V_MODEL_TEXT)
       expect(onError).not.toHaveBeenCalled()
@@ -129,14 +129,35 @@ describe('compiler: transform v-model', () => {
     test('should raise error if used file input element', () => {
       const onError = vi.fn()
       transformWithModel(`<input type="file" v-model="test"/>`, {
-        onError
+        onError,
       })
       expect(onError).toHaveBeenCalledWith(
         expect.objectContaining({
-          code: DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT
-        })
+          code: DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
+        }),
       )
     })
+
+    test('should error on dynamic value binding alongside v-model', () => {
+      const onError = vi.fn()
+      transformWithModel(`<input v-model="test" :value="test" />`, {
+        onError,
+      })
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
+        }),
+      )
+    })
+
+    // #3596
+    test('should NOT error on static value binding alongside v-model', () => {
+      const onError = vi.fn()
+      transformWithModel(`<input v-model="test" value="test" />`, {
+        onError,
+      })
+      expect(onError).not.toHaveBeenCalled()
+    })
   })
 
   describe('modifiers', () => {
diff --git a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
index efc7fee374f..2e80729119d 100644
--- a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts
@@ -1,13 +1,14 @@
 import {
-  baseParse as parse,
-  CompilerOptions,
-  ElementNode,
+  BindingTypes,
+  type CompilerOptions,
+  type ElementNode,
+  NodeTypes,
+  type ObjectExpression,
   TO_HANDLER_KEY,
+  type VNodeCall,
   helperNameMap,
-  NodeTypes,
-  ObjectExpression,
+  baseParse as parse,
   transform,
-  VNodeCall
 } from '@vue/compiler-core'
 import { transformOn } from '../../src/transforms/vOn'
 import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../../src/runtimeHelpers'
@@ -21,32 +22,31 @@ function parseWithVOn(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformExpression, transformElement],
     directiveTransforms: {
-      on: transformOn
+      on: transformOn,
     },
-    ...options
+    ...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,
   }
 }
 
 describe('compiler-dom: transform v-on', () => {
   it('should support multiple modifiers w/ prefixIdentifiers: true', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.stop.prevent="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["stop","prevent"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["stop","prevent"]'],
+      },
     })
   })
 
@@ -54,8 +54,8 @@ describe('compiler-dom: transform v-on', () => {
     const { props } = parseWithVOn(
       `<div @click.stop="test" @keyup.enter="test" />`,
       {
-        prefixIdentifiers: true
-      }
+        prefixIdentifiers: true,
+      },
     )
     const [clickProp, keyUpProp] = props
 
@@ -64,95 +64,95 @@ describe('compiler-dom: transform v-on', () => {
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["stop"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["stop"]'],
+      },
     })
     expect(keyUpProp).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_KEYS,
-        arguments: [{ content: '_ctx.test' }, '["enter"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["enter"]'],
+      },
     })
   })
 
   it('should support multiple modifiers and event options w/ prefixIdentifiers: true', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.stop.capture.once="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       key: {
-        content: `onClickCaptureOnce`
+        content: `onClickCaptureOnce`,
       },
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["stop"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["stop"]'],
+      },
     })
   })
 
   it('should wrap keys guard for keyboard events or dynamic events', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keydown.stop.capture.ctrl.a="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       key: {
-        content: `onKeydownCapture`
+        content: `onKeydownCapture`,
       },
       value: {
         callee: V_ON_WITH_KEYS,
         arguments: [
           {
             callee: V_ON_WITH_MODIFIERS,
-            arguments: [{ content: '_ctx.test' }, '["stop","ctrl"]']
+            arguments: [{ content: '_ctx.test' }, '["stop","ctrl"]'],
           },
-          '["a"]'
-        ]
-      }
+          '["a"]',
+        ],
+      },
     })
   })
 
   it('should not wrap keys guard if no key modifier is present', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.exact="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_MODIFIERS,
-        arguments: [{ content: '_ctx.test' }, '["exact"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["exact"]'],
+      },
     })
   })
 
   it('should wrap keys guard for static key event w/ left/right modifiers', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.left="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_KEYS,
-        arguments: [{ content: '_ctx.test' }, '["left"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["left"]'],
+      },
     })
   })
 
   it('should wrap both for dynamic key event w/ left/right modifiers', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @[e].left="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
@@ -161,41 +161,41 @@ describe('compiler-dom: transform v-on', () => {
         arguments: [
           {
             callee: V_ON_WITH_MODIFIERS,
-            arguments: [{ content: `_ctx.test` }, `["left"]`]
+            arguments: [{ content: `_ctx.test` }, `["left"]`],
           },
-          '["left"]'
-        ]
-      }
+          '["left"]',
+        ],
+      },
     })
   })
 
   it('should not wrap normal guard if there is only keys guard', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.enter="test"/>`, {
-      prefixIdentifiers: true
+      prefixIdentifiers: true,
     })
     expect(prop).toMatchObject({
       type: NodeTypes.JS_PROPERTY,
       value: {
         callee: V_ON_WITH_KEYS,
-        arguments: [{ content: '_ctx.test' }, '["enter"]']
-      }
+        arguments: [{ content: '_ctx.test' }, '["enter"]'],
+      },
     })
   })
 
   test('should transform click.right', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.right="test"/>`)
     expect(prop.key).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `onContextmenu`
+      content: `onContextmenu`,
     })
 
     // dynamic
     const {
-      props: [prop2]
+      props: [prop2],
     } = parseWithVOn(`<div @[event].right="test"/>`)
     // (_toHandlerKey(event)).toLowerCase() === "onclick" ? "onContextmenu" : (_toHandlerKey(event))
     expect(prop2.key).toMatchObject({
@@ -206,34 +206,34 @@ describe('compiler-dom: transform v-on', () => {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
         `) === "onClick" ? "onContextmenu" : (`,
         {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
-        `)`
-      ]
+        `)`,
+      ],
     })
   })
 
   test('should transform click.middle', () => {
     const {
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @click.middle="test"/>`)
     expect(prop.key).toMatchObject({
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `onMouseup`
+      content: `onMouseup`,
     })
 
     // dynamic
     const {
-      props: [prop2]
+      props: [prop2],
     } = parseWithVOn(`<div @[event].middle="test"/>`)
     // (_eventNaming(event)).toLowerCase() === "onclick" ? "onMouseup" : (_eventNaming(event))
     expect(prop2.key).toMatchObject({
@@ -244,48 +244,62 @@ describe('compiler-dom: transform v-on', () => {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
         `) === "onClick" ? "onMouseup" : (`,
         {
           children: [
             `_${helperNameMap[TO_HANDLER_KEY]}(`,
             { content: 'event' },
-            `)`
-          ]
+            `)`,
+          ],
         },
-        `)`
-      ]
+        `)`,
+      ],
     })
   })
 
   test('cache handler w/ modifiers', () => {
     const {
       root,
-      props: [prop]
+      props: [prop],
     } = parseWithVOn(`<div @keyup.enter.capture="foo" />`, {
       prefixIdentifiers: true,
-      cacheHandlers: true
+      cacheHandlers: true,
     })
     expect(root.cached).toBe(1)
     // should not treat cached handler as dynamicProp, so it should have no
     // dynamicProps flags and only the hydration flag
     expect((root as any).children[0].codegenNode.patchFlag).toBe(
-      genFlagText(PatchFlags.HYDRATE_EVENTS)
+      genFlagText(PatchFlags.NEED_HYDRATION),
     )
     expect(prop).toMatchObject({
       key: {
-        content: `onKeyupCapture`
+        content: `onKeyupCapture`,
       },
       value: {
         type: NodeTypes.JS_CACHE_EXPRESSION,
         index: 0,
         value: {
           type: NodeTypes.JS_CALL_EXPRESSION,
-          callee: V_ON_WITH_KEYS
-        }
-      }
+          callee: V_ON_WITH_KEYS,
+        },
+      },
+    })
+  })
+
+  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))
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vShow.spec.ts b/packages/compiler-dom/__tests__/transforms/vShow.spec.ts
index 6d521c8e10d..11aa62464d3 100644
--- a/packages/compiler-dom/__tests__/transforms/vShow.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vShow.spec.ts
@@ -1,8 +1,8 @@
 import {
+  type CompilerOptions,
+  generate,
   baseParse as parse,
   transform,
-  generate,
-  CompilerOptions
 } from '@vue/compiler-core'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import { transformShow } from '../../src/transforms/vShow'
@@ -13,9 +13,9 @@ function transformWithShow(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      show: transformShow
+      show: transformShow,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -34,8 +34,8 @@ describe('compiler: v-show transform', () => {
     expect(onError).toHaveBeenCalledTimes(1)
     expect(onError).toHaveBeenCalledWith(
       expect.objectContaining({
-        code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION
-      })
+        code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION,
+      }),
     )
   })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vText.spec.ts b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
index 22db3ec05e2..1b717e83398 100644
--- a/packages/compiler-dom/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
@@ -1,14 +1,14 @@
 import {
+  type CompilerOptions,
+  type PlainElementNode,
   baseParse as parse,
   transform,
-  PlainElementNode,
-  CompilerOptions
 } from '@vue/compiler-core'
 import { transformVText } from '../../src/transforms/vText'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import {
   createObjectMatcher,
-  genFlagText
+  genFlagText,
 } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
@@ -18,9 +18,9 @@ function transformWithVText(template: string, options: CompilerOptions = {}) {
   transform(ast, {
     nodeTransforms: [transformElement],
     directiveTransforms: {
-      text: transformVText
+      text: transformVText,
     },
-    ...options
+    ...options,
   })
   return ast
 }
@@ -32,43 +32,43 @@ describe('compiler: v-text transform', () => {
       tag: `"div"`,
       props: createObjectMatcher({
         textContent: {
-          arguments: [{ content: 'test' }]
-        }
+          arguments: [{ content: 'test' }],
+        },
       }),
       children: undefined,
       patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["textContent"]`
+      dynamicProps: `["textContent"]`,
     })
   })
 
   it('should raise error and ignore children when v-text is present', () => {
     const onError = vi.fn()
     const ast = transformWithVText(`<div v-text="test">hello</div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }]
+      [{ code: DOMErrorCodes.X_V_TEXT_WITH_CHILDREN }],
     ])
     expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
       tag: `"div"`,
       props: createObjectMatcher({
         textContent: {
-          arguments: [{ content: 'test' }]
-        }
+          arguments: [{ content: 'test' }],
+        },
       }),
       children: undefined, // <-- children should have been removed
       patchFlag: genFlagText(PatchFlags.PROPS),
-      dynamicProps: `["textContent"]`
+      dynamicProps: `["textContent"]`,
     })
   })
 
   it('should raise error if has no expression', () => {
     const onError = vi.fn()
     transformWithVText(`<div v-text></div>`, {
-      onError
+      onError,
     })
     expect(onError.mock.calls).toMatchObject([
-      [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }]
+      [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }],
     ])
   })
 })
diff --git a/packages/compiler-dom/package.json b/packages/compiler-dom/package.json
index db4c1f5af1d..e9db0c0aa1d 100644
--- a/packages/compiler-dom/package.json
+++ b/packages/compiler-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
@@ -11,6 +11,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/compiler-dom.d.ts",
+      "node": {
+        "production": "./dist/compiler-dom.cjs.prod.js",
+        "development": "./dist/compiler-dom.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/compiler-dom.esm-bundler.js",
+      "import": "./dist/compiler-dom.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "buildOptions": {
     "name": "VueCompilerDOM",
@@ -37,7 +51,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-dom#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/compiler-core": "3.3.5"
+    "@vue/shared": "workspace:*",
+    "@vue/compiler-core": "workspace:*"
   }
 }
diff --git a/packages/compiler-dom/src/decodeHtml.ts b/packages/compiler-dom/src/decodeHtml.ts
deleted file mode 100644
index 68b0277a434..00000000000
--- a/packages/compiler-dom/src/decodeHtml.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { ParserOptions } from '@vue/compiler-core'
-import namedCharacterReferences from './namedChars.json'
-
-// lazy compute this to make this file tree-shakable for browser
-let maxCRNameLength: number
-
-export const decodeHtml: ParserOptions['decodeEntities'] = (
-  rawText,
-  asAttr
-) => {
-  let offset = 0
-  const end = rawText.length
-  let decodedText = ''
-
-  function advance(length: number) {
-    offset += length
-    rawText = rawText.slice(length)
-  }
-
-  while (offset < end) {
-    const head = /&(?:#x?)?/i.exec(rawText)
-    if (!head || offset + head.index >= end) {
-      const remaining = end - offset
-      decodedText += rawText.slice(0, remaining)
-      advance(remaining)
-      break
-    }
-
-    // Advance to the "&".
-    decodedText += rawText.slice(0, head.index)
-    advance(head.index)
-
-    if (head[0] === '&') {
-      // Named character reference.
-      let name = ''
-      let value: string | undefined = undefined
-      if (/[0-9a-z]/i.test(rawText[1])) {
-        if (!maxCRNameLength) {
-          maxCRNameLength = Object.keys(namedCharacterReferences).reduce(
-            (max, name) => Math.max(max, name.length),
-            0
-          )
-        }
-        for (let length = maxCRNameLength; !value && length > 0; --length) {
-          name = rawText.slice(1, 1 + length)
-          value = (namedCharacterReferences as Record<string, string>)[name]
-        }
-        if (value) {
-          const semi = name.endsWith(';')
-          if (
-            asAttr &&
-            !semi &&
-            /[=a-z0-9]/i.test(rawText[name.length + 1] || '')
-          ) {
-            decodedText += '&' + name
-            advance(1 + name.length)
-          } else {
-            decodedText += value
-            advance(1 + name.length)
-          }
-        } else {
-          decodedText += '&' + name
-          advance(1 + name.length)
-        }
-      } else {
-        decodedText += '&'
-        advance(1)
-      }
-    } else {
-      // Numeric character reference.
-      const hex = head[0] === '&#x'
-      const pattern = hex ? /^&#x([0-9a-f]+);?/i : /^&#([0-9]+);?/
-      const body = pattern.exec(rawText)
-      if (!body) {
-        decodedText += head[0]
-        advance(head[0].length)
-      } else {
-        // https://html.spec.whatwg.org/multipage/parsing.html#numeric-character-reference-end-state
-        let cp = Number.parseInt(body[1], hex ? 16 : 10)
-        if (cp === 0) {
-          cp = 0xfffd
-        } else if (cp > 0x10ffff) {
-          cp = 0xfffd
-        } else if (cp >= 0xd800 && cp <= 0xdfff) {
-          cp = 0xfffd
-        } else if ((cp >= 0xfdd0 && cp <= 0xfdef) || (cp & 0xfffe) === 0xfffe) {
-          // noop
-        } else if (
-          (cp >= 0x01 && cp <= 0x08) ||
-          cp === 0x0b ||
-          (cp >= 0x0d && cp <= 0x1f) ||
-          (cp >= 0x7f && cp <= 0x9f)
-        ) {
-          cp = CCR_REPLACEMENTS[cp] || cp
-        }
-        decodedText += String.fromCodePoint(cp)
-        advance(body[0].length)
-      }
-    }
-  }
-  return decodedText
-}
-
-// https://html.spec.whatwg.org/multipage/parsing.html#numeric-character-reference-end-state
-const CCR_REPLACEMENTS: Record<number, number | undefined> = {
-  0x80: 0x20ac,
-  0x82: 0x201a,
-  0x83: 0x0192,
-  0x84: 0x201e,
-  0x85: 0x2026,
-  0x86: 0x2020,
-  0x87: 0x2021,
-  0x88: 0x02c6,
-  0x89: 0x2030,
-  0x8a: 0x0160,
-  0x8b: 0x2039,
-  0x8c: 0x0152,
-  0x8e: 0x017d,
-  0x91: 0x2018,
-  0x92: 0x2019,
-  0x93: 0x201c,
-  0x94: 0x201d,
-  0x95: 0x2022,
-  0x96: 0x2013,
-  0x97: 0x2014,
-  0x98: 0x02dc,
-  0x99: 0x2122,
-  0x9a: 0x0161,
-  0x9b: 0x203a,
-  0x9c: 0x0153,
-  0x9e: 0x017e,
-  0x9f: 0x0178
-}
diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index b519dbdb762..b47624840ab 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -1,8 +1,8 @@
 import {
-  SourceLocation,
-  CompilerError,
+  type CompilerError,
+  ErrorCodes,
+  type SourceLocation,
   createCompilerError,
-  ErrorCodes
 } from '@vue/compiler-core'
 
 export interface DOMCompilerError extends CompilerError {
@@ -11,16 +11,16 @@ export interface DOMCompilerError extends CompilerError {
 
 export function createDOMCompilerError(
   code: DOMErrorCodes,
-  loc?: SourceLocation
+  loc?: SourceLocation,
 ) {
   return createCompilerError(
     code,
     loc,
-    __DEV__ || !__BROWSER__ ? DOMErrorMessages : undefined
+    __DEV__ || !__BROWSER__ ? DOMErrorMessages : undefined,
   ) as DOMCompilerError
 }
 
-export const enum DOMErrorCodes {
+export enum DOMErrorCodes {
   X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
   X_V_TEXT_NO_EXPRESSION,
@@ -32,18 +32,18 @@ export const enum DOMErrorCodes {
   X_V_SHOW_NO_EXPRESSION,
   X_TRANSITION_INVALID_CHILDREN,
   X_IGNORED_SIDE_EFFECT_TAG,
-  __EXTEND_POINT__
+  __EXTEND_POINT__,
 }
 
 if (__TEST__) {
-  // esbuild cannot infer const enum increments if first value is from another
+  // esbuild cannot infer enum increments if first value is from another
   // file, so we have to manually keep them in sync. this check ensures it
   // errors out if there are collisions.
   if (DOMErrorCodes.X_V_HTML_NO_EXPRESSION < ErrorCodes.__EXTEND_POINT__) {
     throw new Error(
       `DOMErrorCodes need to be updated to ${
         ErrorCodes.__EXTEND_POINT__ + 1
-      } to match extension point from core ErrorCodes.`
+      } to match extension point from core ErrorCodes.`,
     )
   }
 }
@@ -59,5 +59,5 @@ export const DOMErrorMessages: { [code: number]: string } = {
   [DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
   [DOMErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`,
   [DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN]: `<Transition> expects exactly one child element or component.`,
-  [DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
+  [DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`,
 }
diff --git a/packages/compiler-dom/src/index.ts b/packages/compiler-dom/src/index.ts
index 2c6f71cefbb..a3a738a8fb1 100644
--- a/packages/compiler-dom/src/index.ts
+++ b/packages/compiler-dom/src/index.ts
@@ -1,13 +1,13 @@
 import {
+  type CodegenResult,
+  type CompilerOptions,
+  type DirectiveTransform,
+  type NodeTransform,
+  type ParserOptions,
+  type RootNode,
   baseCompile,
   baseParse,
-  CompilerOptions,
-  CodegenResult,
-  ParserOptions,
-  RootNode,
   noopDirectiveTransform,
-  NodeTransform,
-  DirectiveTransform
 } from '@vue/compiler-core'
 import { parserOptions } from './parserOptions'
 import { transformStyle } from './transforms/transformStyle'
@@ -25,7 +25,7 @@ export { parserOptions }
 
 export const DOMNodeTransforms: NodeTransform[] = [
   transformStyle,
-  ...(__DEV__ ? [transformTransition] : [])
+  ...(__DEV__ ? [transformTransition] : []),
 ]
 
 export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
@@ -34,15 +34,15 @@ export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
   text: transformVText,
   model: transformModel, // override compiler-core
   on: transformOn, // override compiler-core
-  show: transformShow
+  show: transformShow,
 }
 
 export function compile(
-  template: string,
-  options: CompilerOptions = {}
+  src: string | RootNode,
+  options: CompilerOptions = {},
 ): CodegenResult {
   return baseCompile(
-    template,
+    src,
     extend({}, parserOptions, options, {
       nodeTransforms: [
         // ignore <script> and <tag>
@@ -50,15 +50,15 @@ export function compile(
         // by compiler-ssr to generate vnode fallback branches
         ignoreSideEffectTags,
         ...DOMNodeTransforms,
-        ...(options.nodeTransforms || [])
+        ...(options.nodeTransforms || []),
       ],
       directiveTransforms: extend(
         {},
         DOMDirectiveTransforms,
-        options.directiveTransforms || {}
+        options.directiveTransforms || {},
       ),
-      transformHoist: __BROWSER__ ? null : stringifyStatic
-    })
+      transformHoist: __BROWSER__ ? null : stringifyStatic,
+    }),
   )
 }
 
@@ -68,5 +68,9 @@ export function parse(template: string, options: ParserOptions = {}): RootNode {
 
 export * from './runtimeHelpers'
 export { transformStyle } from './transforms/transformStyle'
-export { createDOMCompilerError, DOMErrorCodes } from './errors'
+export {
+  createDOMCompilerError,
+  DOMErrorCodes,
+  DOMErrorMessages,
+} from './errors'
 export * from '@vue/compiler-core'
diff --git a/packages/compiler-dom/src/namedChars.json b/packages/compiler-dom/src/namedChars.json
deleted file mode 100644
index 0bda5db6f25..00000000000
--- a/packages/compiler-dom/src/namedChars.json
+++ /dev/null
@@ -1,2233 +0,0 @@
-{
-  "GT": ">",
-  "gt": ">",
-  "LT": "<",
-  "lt": "<",
-  "ac;": "∾",
-  "af;": "⁡",
-  "AMP": "&",
-  "amp": "&",
-  "ap;": "≈",
-  "DD;": "ⅅ",
-  "dd;": "ⅆ",
-  "deg": "°",
-  "ee;": "ⅇ",
-  "eg;": "⪚",
-  "el;": "⪙",
-  "ETH": "Ð",
-  "eth": "ð",
-  "gE;": "≧",
-  "ge;": "≥",
-  "Gg;": "⋙",
-  "gg;": "≫",
-  "gl;": "≷",
-  "GT;": ">",
-  "Gt;": "≫",
-  "gt;": ">",
-  "ic;": "⁣",
-  "ii;": "ⅈ",
-  "Im;": "ℑ",
-  "in;": "∈",
-  "it;": "⁢",
-  "lE;": "≦",
-  "le;": "≤",
-  "lg;": "≶",
-  "Ll;": "⋘",
-  "ll;": "≪",
-  "LT;": "<",
-  "Lt;": "≪",
-  "lt;": "<",
-  "mp;": "∓",
-  "Mu;": "Μ",
-  "mu;": "μ",
-  "ne;": "≠",
-  "ni;": "∋",
-  "not": "¬",
-  "Nu;": "Ν",
-  "nu;": "ν",
-  "Or;": "⩔",
-  "or;": "∨",
-  "oS;": "Ⓢ",
-  "Pi;": "Π",
-  "pi;": "π",
-  "pm;": "±",
-  "Pr;": "⪻",
-  "pr;": "≺",
-  "Re;": "ℜ",
-  "REG": "®",
-  "reg": "®",
-  "rx;": "℞",
-  "Sc;": "⪼",
-  "sc;": "≻",
-  "shy": "­",
-  "uml": "¨",
-  "wp;": "℘",
-  "wr;": "≀",
-  "Xi;": "Ξ",
-  "xi;": "ξ",
-  "yen": "¥",
-  "acd;": "∿",
-  "acE;": "∾̳",
-  "Acy;": "А",
-  "acy;": "а",
-  "Afr;": "𝔄",
-  "afr;": "𝔞",
-  "AMP;": "&",
-  "amp;": "&",
-  "And;": "⩓",
-  "and;": "∧",
-  "ang;": "∠",
-  "apE;": "⩰",
-  "ape;": "≊",
-  "ast;": "*",
-  "Auml": "Ä",
-  "auml": "ä",
-  "Bcy;": "Б",
-  "bcy;": "б",
-  "Bfr;": "𝔅",
-  "bfr;": "𝔟",
-  "bne;": "=⃥",
-  "bot;": "⊥",
-  "Cap;": "⋒",
-  "cap;": "∩",
-  "cent": "¢",
-  "Cfr;": "ℭ",
-  "cfr;": "𝔠",
-  "Chi;": "Χ",
-  "chi;": "χ",
-  "cir;": "○",
-  "COPY": "©",
-  "copy": "©",
-  "Cup;": "⋓",
-  "cup;": "∪",
-  "Dcy;": "Д",
-  "dcy;": "д",
-  "deg;": "°",
-  "Del;": "∇",
-  "Dfr;": "𝔇",
-  "dfr;": "𝔡",
-  "die;": "¨",
-  "div;": "÷",
-  "Dot;": "¨",
-  "dot;": "˙",
-  "Ecy;": "Э",
-  "ecy;": "э",
-  "Efr;": "𝔈",
-  "efr;": "𝔢",
-  "egs;": "⪖",
-  "ell;": "ℓ",
-  "els;": "⪕",
-  "ENG;": "Ŋ",
-  "eng;": "ŋ",
-  "Eta;": "Η",
-  "eta;": "η",
-  "ETH;": "Ð",
-  "eth;": "ð",
-  "Euml": "Ë",
-  "euml": "ë",
-  "Fcy;": "Ф",
-  "fcy;": "ф",
-  "Ffr;": "𝔉",
-  "ffr;": "𝔣",
-  "gap;": "⪆",
-  "Gcy;": "Г",
-  "gcy;": "г",
-  "gEl;": "⪌",
-  "gel;": "⋛",
-  "geq;": "≥",
-  "ges;": "⩾",
-  "Gfr;": "𝔊",
-  "gfr;": "𝔤",
-  "ggg;": "⋙",
-  "gla;": "⪥",
-  "glE;": "⪒",
-  "glj;": "⪤",
-  "gnE;": "≩",
-  "gne;": "⪈",
-  "Hat;": "^",
-  "Hfr;": "ℌ",
-  "hfr;": "𝔥",
-  "Icy;": "И",
-  "icy;": "и",
-  "iff;": "⇔",
-  "Ifr;": "ℑ",
-  "ifr;": "𝔦",
-  "Int;": "∬",
-  "int;": "∫",
-  "Iuml": "Ï",
-  "iuml": "ï",
-  "Jcy;": "Й",
-  "jcy;": "й",
-  "Jfr;": "𝔍",
-  "jfr;": "𝔧",
-  "Kcy;": "К",
-  "kcy;": "к",
-  "Kfr;": "𝔎",
-  "kfr;": "𝔨",
-  "lap;": "⪅",
-  "lat;": "⪫",
-  "Lcy;": "Л",
-  "lcy;": "л",
-  "lEg;": "⪋",
-  "leg;": "⋚",
-  "leq;": "≤",
-  "les;": "⩽",
-  "Lfr;": "𝔏",
-  "lfr;": "𝔩",
-  "lgE;": "⪑",
-  "lnE;": "≨",
-  "lne;": "⪇",
-  "loz;": "◊",
-  "lrm;": "‎",
-  "Lsh;": "↰",
-  "lsh;": "↰",
-  "macr": "¯",
-  "Map;": "⤅",
-  "map;": "↦",
-  "Mcy;": "М",
-  "mcy;": "м",
-  "Mfr;": "𝔐",
-  "mfr;": "𝔪",
-  "mho;": "℧",
-  "mid;": "∣",
-  "nap;": "≉",
-  "nbsp": " ",
-  "Ncy;": "Н",
-  "ncy;": "н",
-  "Nfr;": "𝔑",
-  "nfr;": "𝔫",
-  "ngE;": "≧̸",
-  "nge;": "≱",
-  "nGg;": "⋙̸",
-  "nGt;": "≫⃒",
-  "ngt;": "≯",
-  "nis;": "⋼",
-  "niv;": "∋",
-  "nlE;": "≦̸",
-  "nle;": "≰",
-  "nLl;": "⋘̸",
-  "nLt;": "≪⃒",
-  "nlt;": "≮",
-  "Not;": "⫬",
-  "not;": "¬",
-  "npr;": "⊀",
-  "nsc;": "⊁",
-  "num;": "#",
-  "Ocy;": "О",
-  "ocy;": "о",
-  "Ofr;": "𝔒",
-  "ofr;": "𝔬",
-  "ogt;": "⧁",
-  "ohm;": "Ω",
-  "olt;": "⧀",
-  "ord;": "⩝",
-  "ordf": "ª",
-  "ordm": "º",
-  "orv;": "⩛",
-  "Ouml": "Ö",
-  "ouml": "ö",
-  "par;": "∥",
-  "para": "¶",
-  "Pcy;": "П",
-  "pcy;": "п",
-  "Pfr;": "𝔓",
-  "pfr;": "𝔭",
-  "Phi;": "Φ",
-  "phi;": "φ",
-  "piv;": "ϖ",
-  "prE;": "⪳",
-  "pre;": "⪯",
-  "Psi;": "Ψ",
-  "psi;": "ψ",
-  "Qfr;": "𝔔",
-  "qfr;": "𝔮",
-  "QUOT": "\"",
-  "quot": "\"",
-  "Rcy;": "Р",
-  "rcy;": "р",
-  "REG;": "®",
-  "reg;": "®",
-  "Rfr;": "ℜ",
-  "rfr;": "𝔯",
-  "Rho;": "Ρ",
-  "rho;": "ρ",
-  "rlm;": "‏",
-  "Rsh;": "↱",
-  "rsh;": "↱",
-  "scE;": "⪴",
-  "sce;": "⪰",
-  "Scy;": "С",
-  "scy;": "с",
-  "sect": "§",
-  "Sfr;": "𝔖",
-  "sfr;": "𝔰",
-  "shy;": "­",
-  "sim;": "∼",
-  "smt;": "⪪",
-  "sol;": "/",
-  "squ;": "□",
-  "Sub;": "⋐",
-  "sub;": "⊂",
-  "Sum;": "∑",
-  "sum;": "∑",
-  "Sup;": "⋑",
-  "sup;": "⊃",
-  "sup1": "¹",
-  "sup2": "²",
-  "sup3": "³",
-  "Tab;": "\t",
-  "Tau;": "Τ",
-  "tau;": "τ",
-  "Tcy;": "Т",
-  "tcy;": "т",
-  "Tfr;": "𝔗",
-  "tfr;": "𝔱",
-  "top;": "⊤",
-  "Ucy;": "У",
-  "ucy;": "у",
-  "Ufr;": "𝔘",
-  "ufr;": "𝔲",
-  "uml;": "¨",
-  "Uuml": "Ü",
-  "uuml": "ü",
-  "Vcy;": "В",
-  "vcy;": "в",
-  "Vee;": "⋁",
-  "vee;": "∨",
-  "Vfr;": "𝔙",
-  "vfr;": "𝔳",
-  "Wfr;": "𝔚",
-  "wfr;": "𝔴",
-  "Xfr;": "𝔛",
-  "xfr;": "𝔵",
-  "Ycy;": "Ы",
-  "ycy;": "ы",
-  "yen;": "¥",
-  "Yfr;": "𝔜",
-  "yfr;": "𝔶",
-  "yuml": "ÿ",
-  "Zcy;": "З",
-  "zcy;": "з",
-  "Zfr;": "ℨ",
-  "zfr;": "𝔷",
-  "zwj;": "‍",
-  "Acirc": "Â",
-  "acirc": "â",
-  "acute": "´",
-  "AElig": "Æ",
-  "aelig": "æ",
-  "andd;": "⩜",
-  "andv;": "⩚",
-  "ange;": "⦤",
-  "Aopf;": "𝔸",
-  "aopf;": "𝕒",
-  "apid;": "≋",
-  "apos;": "'",
-  "Aring": "Å",
-  "aring": "å",
-  "Ascr;": "𝒜",
-  "ascr;": "𝒶",
-  "Auml;": "Ä",
-  "auml;": "ä",
-  "Barv;": "⫧",
-  "bbrk;": "⎵",
-  "Beta;": "Β",
-  "beta;": "β",
-  "beth;": "ℶ",
-  "bNot;": "⫭",
-  "bnot;": "⌐",
-  "Bopf;": "𝔹",
-  "bopf;": "𝕓",
-  "boxH;": "═",
-  "boxh;": "─",
-  "boxV;": "║",
-  "boxv;": "│",
-  "Bscr;": "ℬ",
-  "bscr;": "𝒷",
-  "bsim;": "∽",
-  "bsol;": "\\",
-  "bull;": "•",
-  "bump;": "≎",
-  "caps;": "∩︀",
-  "Cdot;": "Ċ",
-  "cdot;": "ċ",
-  "cedil": "¸",
-  "cent;": "¢",
-  "CHcy;": "Ч",
-  "chcy;": "ч",
-  "circ;": "ˆ",
-  "cirE;": "⧃",
-  "cire;": "≗",
-  "comp;": "∁",
-  "cong;": "≅",
-  "Copf;": "ℂ",
-  "copf;": "𝕔",
-  "COPY;": "©",
-  "copy;": "©",
-  "Cscr;": "𝒞",
-  "cscr;": "𝒸",
-  "csub;": "⫏",
-  "csup;": "⫐",
-  "cups;": "∪︀",
-  "Darr;": "↡",
-  "dArr;": "⇓",
-  "darr;": "↓",
-  "dash;": "‐",
-  "dHar;": "⥥",
-  "diam;": "⋄",
-  "DJcy;": "Ђ",
-  "djcy;": "ђ",
-  "Dopf;": "𝔻",
-  "dopf;": "𝕕",
-  "Dscr;": "𝒟",
-  "dscr;": "𝒹",
-  "DScy;": "Ѕ",
-  "dscy;": "ѕ",
-  "dsol;": "⧶",
-  "dtri;": "▿",
-  "DZcy;": "Џ",
-  "dzcy;": "џ",
-  "ecir;": "≖",
-  "Ecirc": "Ê",
-  "ecirc": "ê",
-  "Edot;": "Ė",
-  "eDot;": "≑",
-  "edot;": "ė",
-  "emsp;": " ",
-  "ensp;": " ",
-  "Eopf;": "𝔼",
-  "eopf;": "𝕖",
-  "epar;": "⋕",
-  "epsi;": "ε",
-  "Escr;": "ℰ",
-  "escr;": "ℯ",
-  "Esim;": "⩳",
-  "esim;": "≂",
-  "Euml;": "Ë",
-  "euml;": "ë",
-  "euro;": "€",
-  "excl;": "!",
-  "flat;": "♭",
-  "fnof;": "ƒ",
-  "Fopf;": "𝔽",
-  "fopf;": "𝕗",
-  "fork;": "⋔",
-  "Fscr;": "ℱ",
-  "fscr;": "𝒻",
-  "Gdot;": "Ġ",
-  "gdot;": "ġ",
-  "geqq;": "≧",
-  "gesl;": "⋛︀",
-  "GJcy;": "Ѓ",
-  "gjcy;": "ѓ",
-  "gnap;": "⪊",
-  "gneq;": "⪈",
-  "Gopf;": "𝔾",
-  "gopf;": "𝕘",
-  "Gscr;": "𝒢",
-  "gscr;": "ℊ",
-  "gsim;": "≳",
-  "gtcc;": "⪧",
-  "gvnE;": "≩︀",
-  "half;": "½",
-  "hArr;": "⇔",
-  "harr;": "↔",
-  "hbar;": "ℏ",
-  "Hopf;": "ℍ",
-  "hopf;": "𝕙",
-  "Hscr;": "ℋ",
-  "hscr;": "𝒽",
-  "Icirc": "Î",
-  "icirc": "î",
-  "Idot;": "İ",
-  "IEcy;": "Е",
-  "iecy;": "е",
-  "iexcl": "¡",
-  "imof;": "⊷",
-  "IOcy;": "Ё",
-  "iocy;": "ё",
-  "Iopf;": "𝕀",
-  "iopf;": "𝕚",
-  "Iota;": "Ι",
-  "iota;": "ι",
-  "Iscr;": "ℐ",
-  "iscr;": "𝒾",
-  "isin;": "∈",
-  "Iuml;": "Ï",
-  "iuml;": "ï",
-  "Jopf;": "𝕁",
-  "jopf;": "𝕛",
-  "Jscr;": "𝒥",
-  "jscr;": "𝒿",
-  "KHcy;": "Х",
-  "khcy;": "х",
-  "KJcy;": "Ќ",
-  "kjcy;": "ќ",
-  "Kopf;": "𝕂",
-  "kopf;": "𝕜",
-  "Kscr;": "𝒦",
-  "kscr;": "𝓀",
-  "Lang;": "⟪",
-  "lang;": "⟨",
-  "laquo": "«",
-  "Larr;": "↞",
-  "lArr;": "⇐",
-  "larr;": "←",
-  "late;": "⪭",
-  "lcub;": "{",
-  "ldca;": "⤶",
-  "ldsh;": "↲",
-  "leqq;": "≦",
-  "lesg;": "⋚︀",
-  "lHar;": "⥢",
-  "LJcy;": "Љ",
-  "ljcy;": "љ",
-  "lnap;": "⪉",
-  "lneq;": "⪇",
-  "Lopf;": "𝕃",
-  "lopf;": "𝕝",
-  "lozf;": "⧫",
-  "lpar;": "(",
-  "Lscr;": "ℒ",
-  "lscr;": "𝓁",
-  "lsim;": "≲",
-  "lsqb;": "[",
-  "ltcc;": "⪦",
-  "ltri;": "◃",
-  "lvnE;": "≨︀",
-  "macr;": "¯",
-  "male;": "♂",
-  "malt;": "✠",
-  "micro": "µ",
-  "mlcp;": "⫛",
-  "mldr;": "…",
-  "Mopf;": "𝕄",
-  "mopf;": "𝕞",
-  "Mscr;": "ℳ",
-  "mscr;": "𝓂",
-  "nang;": "∠⃒",
-  "napE;": "⩰̸",
-  "nbsp;": " ",
-  "ncap;": "⩃",
-  "ncup;": "⩂",
-  "ngeq;": "≱",
-  "nges;": "⩾̸",
-  "ngtr;": "≯",
-  "nGtv;": "≫̸",
-  "nisd;": "⋺",
-  "NJcy;": "Њ",
-  "njcy;": "њ",
-  "nldr;": "‥",
-  "nleq;": "≰",
-  "nles;": "⩽̸",
-  "nLtv;": "≪̸",
-  "nmid;": "∤",
-  "Nopf;": "ℕ",
-  "nopf;": "𝕟",
-  "npar;": "∦",
-  "npre;": "⪯̸",
-  "nsce;": "⪰̸",
-  "Nscr;": "𝒩",
-  "nscr;": "𝓃",
-  "nsim;": "≁",
-  "nsub;": "⊄",
-  "nsup;": "⊅",
-  "ntgl;": "≹",
-  "ntlg;": "≸",
-  "nvap;": "≍⃒",
-  "nvge;": "≥⃒",
-  "nvgt;": ">⃒",
-  "nvle;": "≤⃒",
-  "nvlt;": "<⃒",
-  "oast;": "⊛",
-  "ocir;": "⊚",
-  "Ocirc": "Ô",
-  "ocirc": "ô",
-  "odiv;": "⨸",
-  "odot;": "⊙",
-  "ogon;": "˛",
-  "oint;": "∮",
-  "omid;": "⦶",
-  "Oopf;": "𝕆",
-  "oopf;": "𝕠",
-  "opar;": "⦷",
-  "ordf;": "ª",
-  "ordm;": "º",
-  "oror;": "⩖",
-  "Oscr;": "𝒪",
-  "oscr;": "ℴ",
-  "osol;": "⊘",
-  "Ouml;": "Ö",
-  "ouml;": "ö",
-  "para;": "¶",
-  "part;": "∂",
-  "perp;": "⊥",
-  "phiv;": "ϕ",
-  "plus;": "+",
-  "Popf;": "ℙ",
-  "popf;": "𝕡",
-  "pound": "£",
-  "prap;": "⪷",
-  "prec;": "≺",
-  "prnE;": "⪵",
-  "prod;": "∏",
-  "prop;": "∝",
-  "Pscr;": "𝒫",
-  "pscr;": "𝓅",
-  "qint;": "⨌",
-  "Qopf;": "ℚ",
-  "qopf;": "𝕢",
-  "Qscr;": "𝒬",
-  "qscr;": "𝓆",
-  "QUOT;": "\"",
-  "quot;": "\"",
-  "race;": "∽̱",
-  "Rang;": "⟫",
-  "rang;": "⟩",
-  "raquo": "»",
-  "Rarr;": "↠",
-  "rArr;": "⇒",
-  "rarr;": "→",
-  "rcub;": "}",
-  "rdca;": "⤷",
-  "rdsh;": "↳",
-  "real;": "ℜ",
-  "rect;": "▭",
-  "rHar;": "⥤",
-  "rhov;": "ϱ",
-  "ring;": "˚",
-  "Ropf;": "ℝ",
-  "ropf;": "𝕣",
-  "rpar;": ")",
-  "Rscr;": "ℛ",
-  "rscr;": "𝓇",
-  "rsqb;": "]",
-  "rtri;": "▹",
-  "scap;": "⪸",
-  "scnE;": "⪶",
-  "sdot;": "⋅",
-  "sect;": "§",
-  "semi;": ";",
-  "sext;": "✶",
-  "SHcy;": "Ш",
-  "shcy;": "ш",
-  "sime;": "≃",
-  "simg;": "⪞",
-  "siml;": "⪝",
-  "smid;": "∣",
-  "smte;": "⪬",
-  "solb;": "⧄",
-  "Sopf;": "𝕊",
-  "sopf;": "𝕤",
-  "spar;": "∥",
-  "Sqrt;": "√",
-  "squf;": "▪",
-  "Sscr;": "𝒮",
-  "sscr;": "𝓈",
-  "Star;": "⋆",
-  "star;": "☆",
-  "subE;": "⫅",
-  "sube;": "⊆",
-  "succ;": "≻",
-  "sung;": "♪",
-  "sup1;": "¹",
-  "sup2;": "²",
-  "sup3;": "³",
-  "supE;": "⫆",
-  "supe;": "⊇",
-  "szlig": "ß",
-  "tbrk;": "⎴",
-  "tdot;": "⃛",
-  "THORN": "Þ",
-  "thorn": "þ",
-  "times": "×",
-  "tint;": "∭",
-  "toea;": "⤨",
-  "Topf;": "𝕋",
-  "topf;": "𝕥",
-  "tosa;": "⤩",
-  "trie;": "≜",
-  "Tscr;": "𝒯",
-  "tscr;": "𝓉",
-  "TScy;": "Ц",
-  "tscy;": "ц",
-  "Uarr;": "↟",
-  "uArr;": "⇑",
-  "uarr;": "↑",
-  "Ucirc": "Û",
-  "ucirc": "û",
-  "uHar;": "⥣",
-  "Uopf;": "𝕌",
-  "uopf;": "𝕦",
-  "Upsi;": "ϒ",
-  "upsi;": "υ",
-  "Uscr;": "𝒰",
-  "uscr;": "𝓊",
-  "utri;": "▵",
-  "Uuml;": "Ü",
-  "uuml;": "ü",
-  "vArr;": "⇕",
-  "varr;": "↕",
-  "Vbar;": "⫫",
-  "vBar;": "⫨",
-  "Vert;": "‖",
-  "vert;": "|",
-  "Vopf;": "𝕍",
-  "vopf;": "𝕧",
-  "Vscr;": "𝒱",
-  "vscr;": "𝓋",
-  "Wopf;": "𝕎",
-  "wopf;": "𝕨",
-  "Wscr;": "𝒲",
-  "wscr;": "𝓌",
-  "xcap;": "⋂",
-  "xcup;": "⋃",
-  "xmap;": "⟼",
-  "xnis;": "⋻",
-  "Xopf;": "𝕏",
-  "xopf;": "𝕩",
-  "Xscr;": "𝒳",
-  "xscr;": "𝓍",
-  "xvee;": "⋁",
-  "YAcy;": "Я",
-  "yacy;": "я",
-  "YIcy;": "Ї",
-  "yicy;": "ї",
-  "Yopf;": "𝕐",
-  "yopf;": "𝕪",
-  "Yscr;": "𝒴",
-  "yscr;": "𝓎",
-  "YUcy;": "Ю",
-  "yucy;": "ю",
-  "Yuml;": "Ÿ",
-  "yuml;": "ÿ",
-  "Zdot;": "Ż",
-  "zdot;": "ż",
-  "Zeta;": "Ζ",
-  "zeta;": "ζ",
-  "ZHcy;": "Ж",
-  "zhcy;": "ж",
-  "Zopf;": "ℤ",
-  "zopf;": "𝕫",
-  "Zscr;": "𝒵",
-  "zscr;": "𝓏",
-  "zwnj;": "‌",
-  "Aacute": "Á",
-  "aacute": "á",
-  "Acirc;": "Â",
-  "acirc;": "â",
-  "acute;": "´",
-  "AElig;": "Æ",
-  "aelig;": "æ",
-  "Agrave": "À",
-  "agrave": "à",
-  "aleph;": "ℵ",
-  "Alpha;": "Α",
-  "alpha;": "α",
-  "Amacr;": "Ā",
-  "amacr;": "ā",
-  "amalg;": "⨿",
-  "angle;": "∠",
-  "angrt;": "∟",
-  "angst;": "Å",
-  "Aogon;": "Ą",
-  "aogon;": "ą",
-  "Aring;": "Å",
-  "aring;": "å",
-  "asymp;": "≈",
-  "Atilde": "Ã",
-  "atilde": "ã",
-  "awint;": "⨑",
-  "bcong;": "≌",
-  "bdquo;": "„",
-  "bepsi;": "϶",
-  "blank;": "␣",
-  "blk12;": "▒",
-  "blk14;": "░",
-  "blk34;": "▓",
-  "block;": "█",
-  "boxDL;": "╗",
-  "boxDl;": "╖",
-  "boxdL;": "╕",
-  "boxdl;": "┐",
-  "boxDR;": "╔",
-  "boxDr;": "╓",
-  "boxdR;": "╒",
-  "boxdr;": "┌",
-  "boxHD;": "╦",
-  "boxHd;": "╤",
-  "boxhD;": "╥",
-  "boxhd;": "┬",
-  "boxHU;": "╩",
-  "boxHu;": "╧",
-  "boxhU;": "╨",
-  "boxhu;": "┴",
-  "boxUL;": "╝",
-  "boxUl;": "╜",
-  "boxuL;": "╛",
-  "boxul;": "┘",
-  "boxUR;": "╚",
-  "boxUr;": "╙",
-  "boxuR;": "╘",
-  "boxur;": "└",
-  "boxVH;": "╬",
-  "boxVh;": "╫",
-  "boxvH;": "╪",
-  "boxvh;": "┼",
-  "boxVL;": "╣",
-  "boxVl;": "╢",
-  "boxvL;": "╡",
-  "boxvl;": "┤",
-  "boxVR;": "╠",
-  "boxVr;": "╟",
-  "boxvR;": "╞",
-  "boxvr;": "├",
-  "Breve;": "˘",
-  "breve;": "˘",
-  "brvbar": "¦",
-  "bsemi;": "⁏",
-  "bsime;": "⋍",
-  "bsolb;": "⧅",
-  "bumpE;": "⪮",
-  "bumpe;": "≏",
-  "caret;": "⁁",
-  "caron;": "ˇ",
-  "ccaps;": "⩍",
-  "Ccedil": "Ç",
-  "ccedil": "ç",
-  "Ccirc;": "Ĉ",
-  "ccirc;": "ĉ",
-  "ccups;": "⩌",
-  "cedil;": "¸",
-  "check;": "✓",
-  "clubs;": "♣",
-  "Colon;": "∷",
-  "colon;": ":",
-  "comma;": ",",
-  "crarr;": "↵",
-  "Cross;": "⨯",
-  "cross;": "✗",
-  "csube;": "⫑",
-  "csupe;": "⫒",
-  "ctdot;": "⋯",
-  "cuepr;": "⋞",
-  "cuesc;": "⋟",
-  "cupor;": "⩅",
-  "curren": "¤",
-  "cuvee;": "⋎",
-  "cuwed;": "⋏",
-  "cwint;": "∱",
-  "Dashv;": "⫤",
-  "dashv;": "⊣",
-  "dblac;": "˝",
-  "ddarr;": "⇊",
-  "Delta;": "Δ",
-  "delta;": "δ",
-  "dharl;": "⇃",
-  "dharr;": "⇂",
-  "diams;": "♦",
-  "disin;": "⋲",
-  "divide": "÷",
-  "doteq;": "≐",
-  "dtdot;": "⋱",
-  "dtrif;": "▾",
-  "duarr;": "⇵",
-  "duhar;": "⥯",
-  "Eacute": "É",
-  "eacute": "é",
-  "Ecirc;": "Ê",
-  "ecirc;": "ê",
-  "eDDot;": "⩷",
-  "efDot;": "≒",
-  "Egrave": "È",
-  "egrave": "è",
-  "Emacr;": "Ē",
-  "emacr;": "ē",
-  "empty;": "∅",
-  "Eogon;": "Ę",
-  "eogon;": "ę",
-  "eplus;": "⩱",
-  "epsiv;": "ϵ",
-  "eqsim;": "≂",
-  "Equal;": "⩵",
-  "equiv;": "≡",
-  "erarr;": "⥱",
-  "erDot;": "≓",
-  "esdot;": "≐",
-  "exist;": "∃",
-  "fflig;": "ff",
-  "filig;": "fi",
-  "fjlig;": "fj",
-  "fllig;": "fl",
-  "fltns;": "▱",
-  "forkv;": "⫙",
-  "frac12": "½",
-  "frac14": "¼",
-  "frac34": "¾",
-  "frasl;": "⁄",
-  "frown;": "⌢",
-  "Gamma;": "Γ",
-  "gamma;": "γ",
-  "Gcirc;": "Ĝ",
-  "gcirc;": "ĝ",
-  "gescc;": "⪩",
-  "gimel;": "ℷ",
-  "gneqq;": "≩",
-  "gnsim;": "⋧",
-  "grave;": "`",
-  "gsime;": "⪎",
-  "gsiml;": "⪐",
-  "gtcir;": "⩺",
-  "gtdot;": "⋗",
-  "Hacek;": "ˇ",
-  "harrw;": "↭",
-  "Hcirc;": "Ĥ",
-  "hcirc;": "ĥ",
-  "hoarr;": "⇿",
-  "Iacute": "Í",
-  "iacute": "í",
-  "Icirc;": "Î",
-  "icirc;": "î",
-  "iexcl;": "¡",
-  "Igrave": "Ì",
-  "igrave": "ì",
-  "iiint;": "∭",
-  "iiota;": "℩",
-  "IJlig;": "IJ",
-  "ijlig;": "ij",
-  "Imacr;": "Ī",
-  "imacr;": "ī",
-  "image;": "ℑ",
-  "imath;": "ı",
-  "imped;": "Ƶ",
-  "infin;": "∞",
-  "Iogon;": "Į",
-  "iogon;": "į",
-  "iprod;": "⨼",
-  "iquest": "¿",
-  "isinE;": "⋹",
-  "isins;": "⋴",
-  "isinv;": "∈",
-  "Iukcy;": "І",
-  "iukcy;": "і",
-  "Jcirc;": "Ĵ",
-  "jcirc;": "ĵ",
-  "jmath;": "ȷ",
-  "Jukcy;": "Є",
-  "jukcy;": "є",
-  "Kappa;": "Κ",
-  "kappa;": "κ",
-  "lAarr;": "⇚",
-  "langd;": "⦑",
-  "laquo;": "«",
-  "larrb;": "⇤",
-  "lates;": "⪭︀",
-  "lBarr;": "⤎",
-  "lbarr;": "⤌",
-  "lbbrk;": "❲",
-  "lbrke;": "⦋",
-  "lceil;": "⌈",
-  "ldquo;": "“",
-  "lescc;": "⪨",
-  "lhard;": "↽",
-  "lharu;": "↼",
-  "lhblk;": "▄",
-  "llarr;": "⇇",
-  "lltri;": "◺",
-  "lneqq;": "≨",
-  "lnsim;": "⋦",
-  "loang;": "⟬",
-  "loarr;": "⇽",
-  "lobrk;": "⟦",
-  "lopar;": "⦅",
-  "lrarr;": "⇆",
-  "lrhar;": "⇋",
-  "lrtri;": "⊿",
-  "lsime;": "⪍",
-  "lsimg;": "⪏",
-  "lsquo;": "‘",
-  "ltcir;": "⩹",
-  "ltdot;": "⋖",
-  "ltrie;": "⊴",
-  "ltrif;": "◂",
-  "mdash;": "—",
-  "mDDot;": "∺",
-  "micro;": "µ",
-  "middot": "·",
-  "minus;": "−",
-  "mumap;": "⊸",
-  "nabla;": "∇",
-  "napid;": "≋̸",
-  "napos;": "ʼn",
-  "natur;": "♮",
-  "nbump;": "≎̸",
-  "ncong;": "≇",
-  "ndash;": "–",
-  "neArr;": "⇗",
-  "nearr;": "↗",
-  "nedot;": "≐̸",
-  "nesim;": "≂̸",
-  "ngeqq;": "≧̸",
-  "ngsim;": "≵",
-  "nhArr;": "⇎",
-  "nharr;": "↮",
-  "nhpar;": "⫲",
-  "nlArr;": "⇍",
-  "nlarr;": "↚",
-  "nleqq;": "≦̸",
-  "nless;": "≮",
-  "nlsim;": "≴",
-  "nltri;": "⋪",
-  "notin;": "∉",
-  "notni;": "∌",
-  "npart;": "∂̸",
-  "nprec;": "⊀",
-  "nrArr;": "⇏",
-  "nrarr;": "↛",
-  "nrtri;": "⋫",
-  "nsime;": "≄",
-  "nsmid;": "∤",
-  "nspar;": "∦",
-  "nsubE;": "⫅̸",
-  "nsube;": "⊈",
-  "nsucc;": "⊁",
-  "nsupE;": "⫆̸",
-  "nsupe;": "⊉",
-  "Ntilde": "Ñ",
-  "ntilde": "ñ",
-  "numsp;": " ",
-  "nvsim;": "∼⃒",
-  "nwArr;": "⇖",
-  "nwarr;": "↖",
-  "Oacute": "Ó",
-  "oacute": "ó",
-  "Ocirc;": "Ô",
-  "ocirc;": "ô",
-  "odash;": "⊝",
-  "OElig;": "Œ",
-  "oelig;": "œ",
-  "ofcir;": "⦿",
-  "Ograve": "Ò",
-  "ograve": "ò",
-  "ohbar;": "⦵",
-  "olarr;": "↺",
-  "olcir;": "⦾",
-  "oline;": "‾",
-  "Omacr;": "Ō",
-  "omacr;": "ō",
-  "Omega;": "Ω",
-  "omega;": "ω",
-  "operp;": "⦹",
-  "oplus;": "⊕",
-  "orarr;": "↻",
-  "order;": "ℴ",
-  "Oslash": "Ø",
-  "oslash": "ø",
-  "Otilde": "Õ",
-  "otilde": "õ",
-  "ovbar;": "⌽",
-  "parsl;": "⫽",
-  "phone;": "☎",
-  "plusb;": "⊞",
-  "pluse;": "⩲",
-  "plusmn": "±",
-  "pound;": "£",
-  "prcue;": "≼",
-  "Prime;": "″",
-  "prime;": "′",
-  "prnap;": "⪹",
-  "prsim;": "≾",
-  "quest;": "?",
-  "rAarr;": "⇛",
-  "radic;": "√",
-  "rangd;": "⦒",
-  "range;": "⦥",
-  "raquo;": "»",
-  "rarrb;": "⇥",
-  "rarrc;": "⤳",
-  "rarrw;": "↝",
-  "ratio;": "∶",
-  "RBarr;": "⤐",
-  "rBarr;": "⤏",
-  "rbarr;": "⤍",
-  "rbbrk;": "❳",
-  "rbrke;": "⦌",
-  "rceil;": "⌉",
-  "rdquo;": "”",
-  "reals;": "ℝ",
-  "rhard;": "⇁",
-  "rharu;": "⇀",
-  "rlarr;": "⇄",
-  "rlhar;": "⇌",
-  "rnmid;": "⫮",
-  "roang;": "⟭",
-  "roarr;": "⇾",
-  "robrk;": "⟧",
-  "ropar;": "⦆",
-  "rrarr;": "⇉",
-  "rsquo;": "’",
-  "rtrie;": "⊵",
-  "rtrif;": "▸",
-  "sbquo;": "‚",
-  "sccue;": "≽",
-  "Scirc;": "Ŝ",
-  "scirc;": "ŝ",
-  "scnap;": "⪺",
-  "scsim;": "≿",
-  "sdotb;": "⊡",
-  "sdote;": "⩦",
-  "seArr;": "⇘",
-  "searr;": "↘",
-  "setmn;": "∖",
-  "sharp;": "♯",
-  "Sigma;": "Σ",
-  "sigma;": "σ",
-  "simeq;": "≃",
-  "simgE;": "⪠",
-  "simlE;": "⪟",
-  "simne;": "≆",
-  "slarr;": "←",
-  "smile;": "⌣",
-  "smtes;": "⪬︀",
-  "sqcap;": "⊓",
-  "sqcup;": "⊔",
-  "sqsub;": "⊏",
-  "sqsup;": "⊐",
-  "srarr;": "→",
-  "starf;": "★",
-  "strns;": "¯",
-  "subnE;": "⫋",
-  "subne;": "⊊",
-  "supnE;": "⫌",
-  "supne;": "⊋",
-  "swArr;": "⇙",
-  "swarr;": "↙",
-  "szlig;": "ß",
-  "Theta;": "Θ",
-  "theta;": "θ",
-  "thkap;": "≈",
-  "THORN;": "Þ",
-  "thorn;": "þ",
-  "Tilde;": "∼",
-  "tilde;": "˜",
-  "times;": "×",
-  "TRADE;": "™",
-  "trade;": "™",
-  "trisb;": "⧍",
-  "TSHcy;": "Ћ",
-  "tshcy;": "ћ",
-  "twixt;": "≬",
-  "Uacute": "Ú",
-  "uacute": "ú",
-  "Ubrcy;": "Ў",
-  "ubrcy;": "ў",
-  "Ucirc;": "Û",
-  "ucirc;": "û",
-  "udarr;": "⇅",
-  "udhar;": "⥮",
-  "Ugrave": "Ù",
-  "ugrave": "ù",
-  "uharl;": "↿",
-  "uharr;": "↾",
-  "uhblk;": "▀",
-  "ultri;": "◸",
-  "Umacr;": "Ū",
-  "umacr;": "ū",
-  "Union;": "⋃",
-  "Uogon;": "Ų",
-  "uogon;": "ų",
-  "uplus;": "⊎",
-  "upsih;": "ϒ",
-  "UpTee;": "⊥",
-  "Uring;": "Ů",
-  "uring;": "ů",
-  "urtri;": "◹",
-  "utdot;": "⋰",
-  "utrif;": "▴",
-  "uuarr;": "⇈",
-  "varpi;": "ϖ",
-  "vBarv;": "⫩",
-  "VDash;": "⊫",
-  "Vdash;": "⊩",
-  "vDash;": "⊨",
-  "vdash;": "⊢",
-  "veeeq;": "≚",
-  "vltri;": "⊲",
-  "vnsub;": "⊂⃒",
-  "vnsup;": "⊃⃒",
-  "vprop;": "∝",
-  "vrtri;": "⊳",
-  "Wcirc;": "Ŵ",
-  "wcirc;": "ŵ",
-  "Wedge;": "⋀",
-  "wedge;": "∧",
-  "xcirc;": "◯",
-  "xdtri;": "▽",
-  "xhArr;": "⟺",
-  "xharr;": "⟷",
-  "xlArr;": "⟸",
-  "xlarr;": "⟵",
-  "xodot;": "⨀",
-  "xrArr;": "⟹",
-  "xrarr;": "⟶",
-  "xutri;": "△",
-  "Yacute": "Ý",
-  "yacute": "ý",
-  "Ycirc;": "Ŷ",
-  "ycirc;": "ŷ",
-  "Aacute;": "Á",
-  "aacute;": "á",
-  "Abreve;": "Ă",
-  "abreve;": "ă",
-  "Agrave;": "À",
-  "agrave;": "à",
-  "andand;": "⩕",
-  "angmsd;": "∡",
-  "angsph;": "∢",
-  "apacir;": "⩯",
-  "approx;": "≈",
-  "Assign;": "≔",
-  "Atilde;": "Ã",
-  "atilde;": "ã",
-  "barvee;": "⊽",
-  "Barwed;": "⌆",
-  "barwed;": "⌅",
-  "becaus;": "∵",
-  "bernou;": "ℬ",
-  "bigcap;": "⋂",
-  "bigcup;": "⋃",
-  "bigvee;": "⋁",
-  "bkarow;": "⤍",
-  "bottom;": "⊥",
-  "bowtie;": "⋈",
-  "boxbox;": "⧉",
-  "bprime;": "‵",
-  "brvbar;": "¦",
-  "bullet;": "•",
-  "Bumpeq;": "≎",
-  "bumpeq;": "≏",
-  "Cacute;": "Ć",
-  "cacute;": "ć",
-  "capand;": "⩄",
-  "capcap;": "⩋",
-  "capcup;": "⩇",
-  "capdot;": "⩀",
-  "Ccaron;": "Č",
-  "ccaron;": "č",
-  "Ccedil;": "Ç",
-  "ccedil;": "ç",
-  "circeq;": "≗",
-  "cirmid;": "⫯",
-  "Colone;": "⩴",
-  "colone;": "≔",
-  "commat;": "@",
-  "compfn;": "∘",
-  "Conint;": "∯",
-  "conint;": "∮",
-  "coprod;": "∐",
-  "copysr;": "℗",
-  "cularr;": "↶",
-  "CupCap;": "≍",
-  "cupcap;": "⩆",
-  "cupcup;": "⩊",
-  "cupdot;": "⊍",
-  "curarr;": "↷",
-  "curren;": "¤",
-  "cylcty;": "⌭",
-  "Dagger;": "‡",
-  "dagger;": "†",
-  "daleth;": "ℸ",
-  "Dcaron;": "Ď",
-  "dcaron;": "ď",
-  "dfisht;": "⥿",
-  "divide;": "÷",
-  "divonx;": "⋇",
-  "dlcorn;": "⌞",
-  "dlcrop;": "⌍",
-  "dollar;": "$",
-  "DotDot;": "⃜",
-  "drcorn;": "⌟",
-  "drcrop;": "⌌",
-  "Dstrok;": "Đ",
-  "dstrok;": "đ",
-  "Eacute;": "É",
-  "eacute;": "é",
-  "easter;": "⩮",
-  "Ecaron;": "Ě",
-  "ecaron;": "ě",
-  "ecolon;": "≕",
-  "Egrave;": "È",
-  "egrave;": "è",
-  "egsdot;": "⪘",
-  "elsdot;": "⪗",
-  "emptyv;": "∅",
-  "emsp13;": " ",
-  "emsp14;": " ",
-  "eparsl;": "⧣",
-  "eqcirc;": "≖",
-  "equals;": "=",
-  "equest;": "≟",
-  "Exists;": "∃",
-  "female;": "♀",
-  "ffilig;": "ffi",
-  "ffllig;": "ffl",
-  "ForAll;": "∀",
-  "forall;": "∀",
-  "frac12;": "½",
-  "frac13;": "⅓",
-  "frac14;": "¼",
-  "frac15;": "⅕",
-  "frac16;": "⅙",
-  "frac18;": "⅛",
-  "frac23;": "⅔",
-  "frac25;": "⅖",
-  "frac34;": "¾",
-  "frac35;": "⅗",
-  "frac38;": "⅜",
-  "frac45;": "⅘",
-  "frac56;": "⅚",
-  "frac58;": "⅝",
-  "frac78;": "⅞",
-  "gacute;": "ǵ",
-  "Gammad;": "Ϝ",
-  "gammad;": "ϝ",
-  "Gbreve;": "Ğ",
-  "gbreve;": "ğ",
-  "Gcedil;": "Ģ",
-  "gesdot;": "⪀",
-  "gesles;": "⪔",
-  "gtlPar;": "⦕",
-  "gtrarr;": "⥸",
-  "gtrdot;": "⋗",
-  "gtrsim;": "≳",
-  "hairsp;": " ",
-  "hamilt;": "ℋ",
-  "HARDcy;": "Ъ",
-  "hardcy;": "ъ",
-  "hearts;": "♥",
-  "hellip;": "…",
-  "hercon;": "⊹",
-  "homtht;": "∻",
-  "horbar;": "―",
-  "hslash;": "ℏ",
-  "Hstrok;": "Ħ",
-  "hstrok;": "ħ",
-  "hybull;": "⁃",
-  "hyphen;": "‐",
-  "Iacute;": "Í",
-  "iacute;": "í",
-  "Igrave;": "Ì",
-  "igrave;": "ì",
-  "iiiint;": "⨌",
-  "iinfin;": "⧜",
-  "incare;": "℅",
-  "inodot;": "ı",
-  "intcal;": "⊺",
-  "iquest;": "¿",
-  "isinsv;": "⋳",
-  "Itilde;": "Ĩ",
-  "itilde;": "ĩ",
-  "Jsercy;": "Ј",
-  "jsercy;": "ј",
-  "kappav;": "ϰ",
-  "Kcedil;": "Ķ",
-  "kcedil;": "ķ",
-  "kgreen;": "ĸ",
-  "Lacute;": "Ĺ",
-  "lacute;": "ĺ",
-  "lagran;": "ℒ",
-  "Lambda;": "Λ",
-  "lambda;": "λ",
-  "langle;": "⟨",
-  "larrfs;": "⤝",
-  "larrhk;": "↩",
-  "larrlp;": "↫",
-  "larrpl;": "⤹",
-  "larrtl;": "↢",
-  "lAtail;": "⤛",
-  "latail;": "⤙",
-  "lbrace;": "{",
-  "lbrack;": "[",
-  "Lcaron;": "Ľ",
-  "lcaron;": "ľ",
-  "Lcedil;": "Ļ",
-  "lcedil;": "ļ",
-  "ldquor;": "„",
-  "lesdot;": "⩿",
-  "lesges;": "⪓",
-  "lfisht;": "⥼",
-  "lfloor;": "⌊",
-  "lharul;": "⥪",
-  "llhard;": "⥫",
-  "Lmidot;": "Ŀ",
-  "lmidot;": "ŀ",
-  "lmoust;": "⎰",
-  "loplus;": "⨭",
-  "lowast;": "∗",
-  "lowbar;": "_",
-  "lparlt;": "⦓",
-  "lrhard;": "⥭",
-  "lsaquo;": "‹",
-  "lsquor;": "‚",
-  "Lstrok;": "Ł",
-  "lstrok;": "ł",
-  "lthree;": "⋋",
-  "ltimes;": "⋉",
-  "ltlarr;": "⥶",
-  "ltrPar;": "⦖",
-  "mapsto;": "↦",
-  "marker;": "▮",
-  "mcomma;": "⨩",
-  "midast;": "*",
-  "midcir;": "⫰",
-  "middot;": "·",
-  "minusb;": "⊟",
-  "minusd;": "∸",
-  "mnplus;": "∓",
-  "models;": "⊧",
-  "mstpos;": "∾",
-  "Nacute;": "Ń",
-  "nacute;": "ń",
-  "nbumpe;": "≏̸",
-  "Ncaron;": "Ň",
-  "ncaron;": "ň",
-  "Ncedil;": "Ņ",
-  "ncedil;": "ņ",
-  "nearhk;": "⤤",
-  "nequiv;": "≢",
-  "nesear;": "⤨",
-  "nexist;": "∄",
-  "nltrie;": "⋬",
-  "notinE;": "⋹̸",
-  "nparsl;": "⫽⃥",
-  "nprcue;": "⋠",
-  "nrarrc;": "⤳̸",
-  "nrarrw;": "↝̸",
-  "nrtrie;": "⋭",
-  "nsccue;": "⋡",
-  "nsimeq;": "≄",
-  "Ntilde;": "Ñ",
-  "ntilde;": "ñ",
-  "numero;": "№",
-  "nVDash;": "⊯",
-  "nVdash;": "⊮",
-  "nvDash;": "⊭",
-  "nvdash;": "⊬",
-  "nvHarr;": "⤄",
-  "nvlArr;": "⤂",
-  "nvrArr;": "⤃",
-  "nwarhk;": "⤣",
-  "nwnear;": "⤧",
-  "Oacute;": "Ó",
-  "oacute;": "ó",
-  "Odblac;": "Ő",
-  "odblac;": "ő",
-  "odsold;": "⦼",
-  "Ograve;": "Ò",
-  "ograve;": "ò",
-  "ominus;": "⊖",
-  "origof;": "⊶",
-  "Oslash;": "Ø",
-  "oslash;": "ø",
-  "Otilde;": "Õ",
-  "otilde;": "õ",
-  "Otimes;": "⨷",
-  "otimes;": "⊗",
-  "parsim;": "⫳",
-  "percnt;": "%",
-  "period;": ".",
-  "permil;": "‰",
-  "phmmat;": "ℳ",
-  "planck;": "ℏ",
-  "plankv;": "ℏ",
-  "plusdo;": "∔",
-  "plusdu;": "⨥",
-  "plusmn;": "±",
-  "preceq;": "⪯",
-  "primes;": "ℙ",
-  "prnsim;": "⋨",
-  "propto;": "∝",
-  "prurel;": "⊰",
-  "puncsp;": " ",
-  "qprime;": "⁗",
-  "Racute;": "Ŕ",
-  "racute;": "ŕ",
-  "rangle;": "⟩",
-  "rarrap;": "⥵",
-  "rarrfs;": "⤞",
-  "rarrhk;": "↪",
-  "rarrlp;": "↬",
-  "rarrpl;": "⥅",
-  "Rarrtl;": "⤖",
-  "rarrtl;": "↣",
-  "rAtail;": "⤜",
-  "ratail;": "⤚",
-  "rbrace;": "}",
-  "rbrack;": "]",
-  "Rcaron;": "Ř",
-  "rcaron;": "ř",
-  "Rcedil;": "Ŗ",
-  "rcedil;": "ŗ",
-  "rdquor;": "”",
-  "rfisht;": "⥽",
-  "rfloor;": "⌋",
-  "rharul;": "⥬",
-  "rmoust;": "⎱",
-  "roplus;": "⨮",
-  "rpargt;": "⦔",
-  "rsaquo;": "›",
-  "rsquor;": "’",
-  "rthree;": "⋌",
-  "rtimes;": "⋊",
-  "Sacute;": "Ś",
-  "sacute;": "ś",
-  "Scaron;": "Š",
-  "scaron;": "š",
-  "Scedil;": "Ş",
-  "scedil;": "ş",
-  "scnsim;": "⋩",
-  "searhk;": "⤥",
-  "seswar;": "⤩",
-  "sfrown;": "⌢",
-  "SHCHcy;": "Щ",
-  "shchcy;": "щ",
-  "sigmaf;": "ς",
-  "sigmav;": "ς",
-  "simdot;": "⩪",
-  "smashp;": "⨳",
-  "SOFTcy;": "Ь",
-  "softcy;": "ь",
-  "solbar;": "⌿",
-  "spades;": "♠",
-  "sqcaps;": "⊓︀",
-  "sqcups;": "⊔︀",
-  "sqsube;": "⊑",
-  "sqsupe;": "⊒",
-  "Square;": "□",
-  "square;": "□",
-  "squarf;": "▪",
-  "ssetmn;": "∖",
-  "ssmile;": "⌣",
-  "sstarf;": "⋆",
-  "subdot;": "⪽",
-  "Subset;": "⋐",
-  "subset;": "⊂",
-  "subsim;": "⫇",
-  "subsub;": "⫕",
-  "subsup;": "⫓",
-  "succeq;": "⪰",
-  "supdot;": "⪾",
-  "Supset;": "⋑",
-  "supset;": "⊃",
-  "supsim;": "⫈",
-  "supsub;": "⫔",
-  "supsup;": "⫖",
-  "swarhk;": "⤦",
-  "swnwar;": "⤪",
-  "target;": "⌖",
-  "Tcaron;": "Ť",
-  "tcaron;": "ť",
-  "Tcedil;": "Ţ",
-  "tcedil;": "ţ",
-  "telrec;": "⌕",
-  "there4;": "∴",
-  "thetav;": "ϑ",
-  "thinsp;": " ",
-  "thksim;": "∼",
-  "timesb;": "⊠",
-  "timesd;": "⨰",
-  "topbot;": "⌶",
-  "topcir;": "⫱",
-  "tprime;": "‴",
-  "tridot;": "◬",
-  "Tstrok;": "Ŧ",
-  "tstrok;": "ŧ",
-  "Uacute;": "Ú",
-  "uacute;": "ú",
-  "Ubreve;": "Ŭ",
-  "ubreve;": "ŭ",
-  "Udblac;": "Ű",
-  "udblac;": "ű",
-  "ufisht;": "⥾",
-  "Ugrave;": "Ù",
-  "ugrave;": "ù",
-  "ulcorn;": "⌜",
-  "ulcrop;": "⌏",
-  "urcorn;": "⌝",
-  "urcrop;": "⌎",
-  "Utilde;": "Ũ",
-  "utilde;": "ũ",
-  "vangrt;": "⦜",
-  "varphi;": "ϕ",
-  "varrho;": "ϱ",
-  "Vdashl;": "⫦",
-  "veebar;": "⊻",
-  "vellip;": "⋮",
-  "Verbar;": "‖",
-  "verbar;": "|",
-  "vsubnE;": "⫋︀",
-  "vsubne;": "⊊︀",
-  "vsupnE;": "⫌︀",
-  "vsupne;": "⊋︀",
-  "Vvdash;": "⊪",
-  "wedbar;": "⩟",
-  "wedgeq;": "≙",
-  "weierp;": "℘",
-  "wreath;": "≀",
-  "xoplus;": "⨁",
-  "xotime;": "⨂",
-  "xsqcup;": "⨆",
-  "xuplus;": "⨄",
-  "xwedge;": "⋀",
-  "Yacute;": "Ý",
-  "yacute;": "ý",
-  "Zacute;": "Ź",
-  "zacute;": "ź",
-  "Zcaron;": "Ž",
-  "zcaron;": "ž",
-  "zeetrf;": "ℨ",
-  "alefsym;": "ℵ",
-  "angrtvb;": "⊾",
-  "angzarr;": "⍼",
-  "asympeq;": "≍",
-  "backsim;": "∽",
-  "Because;": "∵",
-  "because;": "∵",
-  "bemptyv;": "⦰",
-  "between;": "≬",
-  "bigcirc;": "◯",
-  "bigodot;": "⨀",
-  "bigstar;": "★",
-  "bnequiv;": "≡⃥",
-  "boxplus;": "⊞",
-  "Cayleys;": "ℭ",
-  "Cconint;": "∰",
-  "ccupssm;": "⩐",
-  "Cedilla;": "¸",
-  "cemptyv;": "⦲",
-  "cirscir;": "⧂",
-  "coloneq;": "≔",
-  "congdot;": "⩭",
-  "cudarrl;": "⤸",
-  "cudarrr;": "⤵",
-  "cularrp;": "⤽",
-  "curarrm;": "⤼",
-  "dbkarow;": "⤏",
-  "ddagger;": "‡",
-  "ddotseq;": "⩷",
-  "demptyv;": "⦱",
-  "Diamond;": "⋄",
-  "diamond;": "⋄",
-  "digamma;": "ϝ",
-  "dotplus;": "∔",
-  "DownTee;": "⊤",
-  "dwangle;": "⦦",
-  "Element;": "∈",
-  "Epsilon;": "Ε",
-  "epsilon;": "ε",
-  "eqcolon;": "≕",
-  "equivDD;": "⩸",
-  "gesdoto;": "⪂",
-  "gtquest;": "⩼",
-  "gtrless;": "≷",
-  "harrcir;": "⥈",
-  "Implies;": "⇒",
-  "intprod;": "⨼",
-  "isindot;": "⋵",
-  "larrbfs;": "⤟",
-  "larrsim;": "⥳",
-  "lbrksld;": "⦏",
-  "lbrkslu;": "⦍",
-  "ldrdhar;": "⥧",
-  "LeftTee;": "⊣",
-  "lesdoto;": "⪁",
-  "lessdot;": "⋖",
-  "lessgtr;": "≶",
-  "lesssim;": "≲",
-  "lotimes;": "⨴",
-  "lozenge;": "◊",
-  "ltquest;": "⩻",
-  "luruhar;": "⥦",
-  "maltese;": "✠",
-  "minusdu;": "⨪",
-  "napprox;": "≉",
-  "natural;": "♮",
-  "nearrow;": "↗",
-  "NewLine;": "\n",
-  "nexists;": "∄",
-  "NoBreak;": "⁠",
-  "notinva;": "∉",
-  "notinvb;": "⋷",
-  "notinvc;": "⋶",
-  "NotLess;": "≮",
-  "notniva;": "∌",
-  "notnivb;": "⋾",
-  "notnivc;": "⋽",
-  "npolint;": "⨔",
-  "npreceq;": "⪯̸",
-  "nsqsube;": "⋢",
-  "nsqsupe;": "⋣",
-  "nsubset;": "⊂⃒",
-  "nsucceq;": "⪰̸",
-  "nsupset;": "⊃⃒",
-  "nvinfin;": "⧞",
-  "nvltrie;": "⊴⃒",
-  "nvrtrie;": "⊵⃒",
-  "nwarrow;": "↖",
-  "olcross;": "⦻",
-  "Omicron;": "Ο",
-  "omicron;": "ο",
-  "orderof;": "ℴ",
-  "orslope;": "⩗",
-  "OverBar;": "‾",
-  "pertenk;": "‱",
-  "planckh;": "ℎ",
-  "pluscir;": "⨢",
-  "plussim;": "⨦",
-  "plustwo;": "⨧",
-  "precsim;": "≾",
-  "Product;": "∏",
-  "quatint;": "⨖",
-  "questeq;": "≟",
-  "rarrbfs;": "⤠",
-  "rarrsim;": "⥴",
-  "rbrksld;": "⦎",
-  "rbrkslu;": "⦐",
-  "rdldhar;": "⥩",
-  "realine;": "ℛ",
-  "rotimes;": "⨵",
-  "ruluhar;": "⥨",
-  "searrow;": "↘",
-  "simplus;": "⨤",
-  "simrarr;": "⥲",
-  "subedot;": "⫃",
-  "submult;": "⫁",
-  "subplus;": "⪿",
-  "subrarr;": "⥹",
-  "succsim;": "≿",
-  "supdsub;": "⫘",
-  "supedot;": "⫄",
-  "suphsol;": "⟉",
-  "suphsub;": "⫗",
-  "suplarr;": "⥻",
-  "supmult;": "⫂",
-  "supplus;": "⫀",
-  "swarrow;": "↙",
-  "topfork;": "⫚",
-  "triplus;": "⨹",
-  "tritime;": "⨻",
-  "UpArrow;": "↑",
-  "Uparrow;": "⇑",
-  "uparrow;": "↑",
-  "Upsilon;": "Υ",
-  "upsilon;": "υ",
-  "uwangle;": "⦧",
-  "vzigzag;": "⦚",
-  "zigrarr;": "⇝",
-  "andslope;": "⩘",
-  "angmsdaa;": "⦨",
-  "angmsdab;": "⦩",
-  "angmsdac;": "⦪",
-  "angmsdad;": "⦫",
-  "angmsdae;": "⦬",
-  "angmsdaf;": "⦭",
-  "angmsdag;": "⦮",
-  "angmsdah;": "⦯",
-  "angrtvbd;": "⦝",
-  "approxeq;": "≊",
-  "awconint;": "∳",
-  "backcong;": "≌",
-  "barwedge;": "⌅",
-  "bbrktbrk;": "⎶",
-  "bigoplus;": "⨁",
-  "bigsqcup;": "⨆",
-  "biguplus;": "⨄",
-  "bigwedge;": "⋀",
-  "boxminus;": "⊟",
-  "boxtimes;": "⊠",
-  "bsolhsub;": "⟈",
-  "capbrcup;": "⩉",
-  "circledR;": "®",
-  "circledS;": "Ⓢ",
-  "cirfnint;": "⨐",
-  "clubsuit;": "♣",
-  "cupbrcap;": "⩈",
-  "curlyvee;": "⋎",
-  "cwconint;": "∲",
-  "DDotrahd;": "⤑",
-  "doteqdot;": "≑",
-  "DotEqual;": "≐",
-  "dotminus;": "∸",
-  "drbkarow;": "⤐",
-  "dzigrarr;": "⟿",
-  "elinters;": "⏧",
-  "emptyset;": "∅",
-  "eqvparsl;": "⧥",
-  "fpartint;": "⨍",
-  "geqslant;": "⩾",
-  "gesdotol;": "⪄",
-  "gnapprox;": "⪊",
-  "hksearow;": "⤥",
-  "hkswarow;": "⤦",
-  "imagline;": "ℐ",
-  "imagpart;": "ℑ",
-  "infintie;": "⧝",
-  "integers;": "ℤ",
-  "Integral;": "∫",
-  "intercal;": "⊺",
-  "intlarhk;": "⨗",
-  "laemptyv;": "⦴",
-  "ldrushar;": "⥋",
-  "leqslant;": "⩽",
-  "lesdotor;": "⪃",
-  "LessLess;": "⪡",
-  "llcorner;": "⌞",
-  "lnapprox;": "⪉",
-  "lrcorner;": "⌟",
-  "lurdshar;": "⥊",
-  "mapstoup;": "↥",
-  "multimap;": "⊸",
-  "naturals;": "ℕ",
-  "ncongdot;": "⩭̸",
-  "NotEqual;": "≠",
-  "notindot;": "⋵̸",
-  "NotTilde;": "≁",
-  "otimesas;": "⨶",
-  "parallel;": "∥",
-  "PartialD;": "∂",
-  "plusacir;": "⨣",
-  "pointint;": "⨕",
-  "Precedes;": "≺",
-  "precneqq;": "⪵",
-  "precnsim;": "⋨",
-  "profalar;": "⌮",
-  "profline;": "⌒",
-  "profsurf;": "⌓",
-  "raemptyv;": "⦳",
-  "realpart;": "ℜ",
-  "RightTee;": "⊢",
-  "rppolint;": "⨒",
-  "rtriltri;": "⧎",
-  "scpolint;": "⨓",
-  "setminus;": "∖",
-  "shortmid;": "∣",
-  "smeparsl;": "⧤",
-  "sqsubset;": "⊏",
-  "sqsupset;": "⊐",
-  "subseteq;": "⊆",
-  "Succeeds;": "≻",
-  "succneqq;": "⪶",
-  "succnsim;": "⋩",
-  "SuchThat;": "∋",
-  "Superset;": "⊃",
-  "supseteq;": "⊇",
-  "thetasym;": "ϑ",
-  "thicksim;": "∼",
-  "timesbar;": "⨱",
-  "triangle;": "▵",
-  "triminus;": "⨺",
-  "trpezium;": "⏢",
-  "Uarrocir;": "⥉",
-  "ulcorner;": "⌜",
-  "UnderBar;": "_",
-  "urcorner;": "⌝",
-  "varkappa;": "ϰ",
-  "varsigma;": "ς",
-  "vartheta;": "ϑ",
-  "backprime;": "‵",
-  "backsimeq;": "⋍",
-  "Backslash;": "∖",
-  "bigotimes;": "⨂",
-  "CenterDot;": "·",
-  "centerdot;": "·",
-  "checkmark;": "✓",
-  "CircleDot;": "⊙",
-  "complexes;": "ℂ",
-  "Congruent;": "≡",
-  "Coproduct;": "∐",
-  "dotsquare;": "⊡",
-  "DoubleDot;": "¨",
-  "DownArrow;": "↓",
-  "Downarrow;": "⇓",
-  "downarrow;": "↓",
-  "DownBreve;": "̑",
-  "gtrapprox;": "⪆",
-  "gtreqless;": "⋛",
-  "gvertneqq;": "≩︀",
-  "heartsuit;": "♥",
-  "HumpEqual;": "≏",
-  "LeftArrow;": "←",
-  "Leftarrow;": "⇐",
-  "leftarrow;": "←",
-  "LeftFloor;": "⌊",
-  "lesseqgtr;": "⋚",
-  "LessTilde;": "≲",
-  "lvertneqq;": "≨︀",
-  "Mellintrf;": "ℳ",
-  "MinusPlus;": "∓",
-  "ngeqslant;": "⩾̸",
-  "nleqslant;": "⩽̸",
-  "NotCupCap;": "≭",
-  "NotExists;": "∄",
-  "NotSubset;": "⊂⃒",
-  "nparallel;": "∦",
-  "nshortmid;": "∤",
-  "nsubseteq;": "⊈",
-  "nsupseteq;": "⊉",
-  "OverBrace;": "⏞",
-  "pitchfork;": "⋔",
-  "PlusMinus;": "±",
-  "rationals;": "ℚ",
-  "spadesuit;": "♠",
-  "subseteqq;": "⫅",
-  "subsetneq;": "⊊",
-  "supseteqq;": "⫆",
-  "supsetneq;": "⊋",
-  "Therefore;": "∴",
-  "therefore;": "∴",
-  "ThinSpace;": " ",
-  "triangleq;": "≜",
-  "TripleDot;": "⃛",
-  "UnionPlus;": "⊎",
-  "varpropto;": "∝",
-  "Bernoullis;": "ℬ",
-  "circledast;": "⊛",
-  "CirclePlus;": "⊕",
-  "complement;": "∁",
-  "curlywedge;": "⋏",
-  "eqslantgtr;": "⪖",
-  "EqualTilde;": "≂",
-  "Fouriertrf;": "ℱ",
-  "gtreqqless;": "⪌",
-  "ImaginaryI;": "ⅈ",
-  "Laplacetrf;": "ℒ",
-  "LeftVector;": "↼",
-  "lessapprox;": "⪅",
-  "lesseqqgtr;": "⪋",
-  "Lleftarrow;": "⇚",
-  "lmoustache;": "⎰",
-  "longmapsto;": "⟼",
-  "mapstodown;": "↧",
-  "mapstoleft;": "↤",
-  "nLeftarrow;": "⇍",
-  "nleftarrow;": "↚",
-  "NotElement;": "∉",
-  "NotGreater;": "≯",
-  "nsubseteqq;": "⫅̸",
-  "nsupseteqq;": "⫆̸",
-  "precapprox;": "⪷",
-  "Proportion;": "∷",
-  "RightArrow;": "→",
-  "Rightarrow;": "⇒",
-  "rightarrow;": "→",
-  "RightFloor;": "⌋",
-  "rmoustache;": "⎱",
-  "sqsubseteq;": "⊑",
-  "sqsupseteq;": "⊒",
-  "subsetneqq;": "⫋",
-  "succapprox;": "⪸",
-  "supsetneqq;": "⫌",
-  "ThickSpace;": "  ",
-  "TildeEqual;": "≃",
-  "TildeTilde;": "≈",
-  "UnderBrace;": "⏟",
-  "UpArrowBar;": "⤒",
-  "UpTeeArrow;": "↥",
-  "upuparrows;": "⇈",
-  "varepsilon;": "ϵ",
-  "varnothing;": "∅",
-  "backepsilon;": "϶",
-  "blacksquare;": "▪",
-  "circledcirc;": "⊚",
-  "circleddash;": "⊝",
-  "CircleMinus;": "⊖",
-  "CircleTimes;": "⊗",
-  "curlyeqprec;": "⋞",
-  "curlyeqsucc;": "⋟",
-  "diamondsuit;": "♦",
-  "eqslantless;": "⪕",
-  "Equilibrium;": "⇌",
-  "expectation;": "ℰ",
-  "GreaterLess;": "≷",
-  "LeftCeiling;": "⌈",
-  "LessGreater;": "≶",
-  "MediumSpace;": " ",
-  "NotLessLess;": "≪̸",
-  "NotPrecedes;": "⊀",
-  "NotSucceeds;": "⊁",
-  "NotSuperset;": "⊃⃒",
-  "nRightarrow;": "⇏",
-  "nrightarrow;": "↛",
-  "OverBracket;": "⎴",
-  "preccurlyeq;": "≼",
-  "precnapprox;": "⪹",
-  "quaternions;": "ℍ",
-  "RightVector;": "⇀",
-  "Rrightarrow;": "⇛",
-  "RuleDelayed;": "⧴",
-  "SmallCircle;": "∘",
-  "SquareUnion;": "⊔",
-  "straightphi;": "ϕ",
-  "SubsetEqual;": "⊆",
-  "succcurlyeq;": "≽",
-  "succnapprox;": "⪺",
-  "thickapprox;": "≈",
-  "UpDownArrow;": "↕",
-  "Updownarrow;": "⇕",
-  "updownarrow;": "↕",
-  "VerticalBar;": "∣",
-  "blacklozenge;": "⧫",
-  "DownArrowBar;": "⤓",
-  "DownTeeArrow;": "↧",
-  "ExponentialE;": "ⅇ",
-  "exponentiale;": "ⅇ",
-  "GreaterEqual;": "≥",
-  "GreaterTilde;": "≳",
-  "HilbertSpace;": "ℋ",
-  "HumpDownHump;": "≎",
-  "Intersection;": "⋂",
-  "LeftArrowBar;": "⇤",
-  "LeftTeeArrow;": "↤",
-  "LeftTriangle;": "⊲",
-  "LeftUpVector;": "↿",
-  "NotCongruent;": "≢",
-  "NotHumpEqual;": "≏̸",
-  "NotLessEqual;": "≰",
-  "NotLessTilde;": "≴",
-  "Proportional;": "∝",
-  "RightCeiling;": "⌉",
-  "risingdotseq;": "≓",
-  "RoundImplies;": "⥰",
-  "ShortUpArrow;": "↑",
-  "SquareSubset;": "⊏",
-  "triangledown;": "▿",
-  "triangleleft;": "◃",
-  "UnderBracket;": "⎵",
-  "varsubsetneq;": "⊊︀",
-  "varsupsetneq;": "⊋︀",
-  "VerticalLine;": "|",
-  "ApplyFunction;": "⁡",
-  "bigtriangleup;": "△",
-  "blacktriangle;": "▴",
-  "DifferentialD;": "ⅆ",
-  "divideontimes;": "⋇",
-  "DoubleLeftTee;": "⫤",
-  "DoubleUpArrow;": "⇑",
-  "fallingdotseq;": "≒",
-  "hookleftarrow;": "↩",
-  "leftarrowtail;": "↢",
-  "leftharpoonup;": "↼",
-  "LeftTeeVector;": "⥚",
-  "LeftVectorBar;": "⥒",
-  "LessFullEqual;": "≦",
-  "LongLeftArrow;": "⟵",
-  "Longleftarrow;": "⟸",
-  "longleftarrow;": "⟵",
-  "looparrowleft;": "↫",
-  "measuredangle;": "∡",
-  "NotEqualTilde;": "≂̸",
-  "NotTildeEqual;": "≄",
-  "NotTildeTilde;": "≉",
-  "ntriangleleft;": "⋪",
-  "Poincareplane;": "ℌ",
-  "PrecedesEqual;": "⪯",
-  "PrecedesTilde;": "≾",
-  "RightArrowBar;": "⇥",
-  "RightTeeArrow;": "↦",
-  "RightTriangle;": "⊳",
-  "RightUpVector;": "↾",
-  "shortparallel;": "∥",
-  "smallsetminus;": "∖",
-  "SucceedsEqual;": "⪰",
-  "SucceedsTilde;": "≿",
-  "SupersetEqual;": "⊇",
-  "triangleright;": "▹",
-  "UpEquilibrium;": "⥮",
-  "upharpoonleft;": "↿",
-  "varsubsetneqq;": "⫋︀",
-  "varsupsetneqq;": "⫌︀",
-  "VerticalTilde;": "≀",
-  "VeryThinSpace;": " ",
-  "curvearrowleft;": "↶",
-  "DiacriticalDot;": "˙",
-  "doublebarwedge;": "⌆",
-  "DoubleRightTee;": "⊨",
-  "downdownarrows;": "⇊",
-  "DownLeftVector;": "↽",
-  "GreaterGreater;": "⪢",
-  "hookrightarrow;": "↪",
-  "HorizontalLine;": "─",
-  "InvisibleComma;": "⁣",
-  "InvisibleTimes;": "⁢",
-  "LeftDownVector;": "⇃",
-  "leftleftarrows;": "⇇",
-  "LeftRightArrow;": "↔",
-  "Leftrightarrow;": "⇔",
-  "leftrightarrow;": "↔",
-  "leftthreetimes;": "⋋",
-  "LessSlantEqual;": "⩽",
-  "LongRightArrow;": "⟶",
-  "Longrightarrow;": "⟹",
-  "longrightarrow;": "⟶",
-  "looparrowright;": "↬",
-  "LowerLeftArrow;": "↙",
-  "NestedLessLess;": "≪",
-  "NotGreaterLess;": "≹",
-  "NotLessGreater;": "≸",
-  "NotSubsetEqual;": "⊈",
-  "NotVerticalBar;": "∤",
-  "nshortparallel;": "∦",
-  "ntriangleright;": "⋫",
-  "OpenCurlyQuote;": "‘",
-  "ReverseElement;": "∋",
-  "rightarrowtail;": "↣",
-  "rightharpoonup;": "⇀",
-  "RightTeeVector;": "⥛",
-  "RightVectorBar;": "⥓",
-  "ShortDownArrow;": "↓",
-  "ShortLeftArrow;": "←",
-  "SquareSuperset;": "⊐",
-  "TildeFullEqual;": "≅",
-  "trianglelefteq;": "⊴",
-  "upharpoonright;": "↾",
-  "UpperLeftArrow;": "↖",
-  "ZeroWidthSpace;": "​",
-  "bigtriangledown;": "▽",
-  "circlearrowleft;": "↺",
-  "CloseCurlyQuote;": "’",
-  "ContourIntegral;": "∮",
-  "curvearrowright;": "↷",
-  "DoubleDownArrow;": "⇓",
-  "DoubleLeftArrow;": "⇐",
-  "downharpoonleft;": "⇃",
-  "DownRightVector;": "⇁",
-  "leftharpoondown;": "↽",
-  "leftrightarrows;": "⇆",
-  "LeftRightVector;": "⥎",
-  "LeftTriangleBar;": "⧏",
-  "LeftUpTeeVector;": "⥠",
-  "LeftUpVectorBar;": "⥘",
-  "LowerRightArrow;": "↘",
-  "nLeftrightarrow;": "⇎",
-  "nleftrightarrow;": "↮",
-  "NotGreaterEqual;": "≱",
-  "NotGreaterTilde;": "≵",
-  "NotHumpDownHump;": "≎̸",
-  "NotLeftTriangle;": "⋪",
-  "NotSquareSubset;": "⊏̸",
-  "ntrianglelefteq;": "⋬",
-  "OverParenthesis;": "⏜",
-  "RightDownVector;": "⇂",
-  "rightleftarrows;": "⇄",
-  "rightsquigarrow;": "↝",
-  "rightthreetimes;": "⋌",
-  "ShortRightArrow;": "→",
-  "straightepsilon;": "ϵ",
-  "trianglerighteq;": "⊵",
-  "UpperRightArrow;": "↗",
-  "vartriangleleft;": "⊲",
-  "circlearrowright;": "↻",
-  "DiacriticalAcute;": "´",
-  "DiacriticalGrave;": "`",
-  "DiacriticalTilde;": "˜",
-  "DoubleRightArrow;": "⇒",
-  "DownArrowUpArrow;": "⇵",
-  "downharpoonright;": "⇂",
-  "EmptySmallSquare;": "◻",
-  "GreaterEqualLess;": "⋛",
-  "GreaterFullEqual;": "≧",
-  "LeftAngleBracket;": "⟨",
-  "LeftUpDownVector;": "⥑",
-  "LessEqualGreater;": "⋚",
-  "NonBreakingSpace;": " ",
-  "NotPrecedesEqual;": "⪯̸",
-  "NotRightTriangle;": "⋫",
-  "NotSucceedsEqual;": "⪰̸",
-  "NotSucceedsTilde;": "≿̸",
-  "NotSupersetEqual;": "⊉",
-  "ntrianglerighteq;": "⋭",
-  "rightharpoondown;": "⇁",
-  "rightrightarrows;": "⇉",
-  "RightTriangleBar;": "⧐",
-  "RightUpTeeVector;": "⥜",
-  "RightUpVectorBar;": "⥔",
-  "twoheadleftarrow;": "↞",
-  "UnderParenthesis;": "⏝",
-  "UpArrowDownArrow;": "⇅",
-  "vartriangleright;": "⊳",
-  "blacktriangledown;": "▾",
-  "blacktriangleleft;": "◂",
-  "DoubleUpDownArrow;": "⇕",
-  "DoubleVerticalBar;": "∥",
-  "DownLeftTeeVector;": "⥞",
-  "DownLeftVectorBar;": "⥖",
-  "FilledSmallSquare;": "◼",
-  "GreaterSlantEqual;": "⩾",
-  "LeftDoubleBracket;": "⟦",
-  "LeftDownTeeVector;": "⥡",
-  "LeftDownVectorBar;": "⥙",
-  "leftrightharpoons;": "⇋",
-  "LeftTriangleEqual;": "⊴",
-  "NegativeThinSpace;": "​",
-  "NotGreaterGreater;": "≫̸",
-  "NotLessSlantEqual;": "⩽̸",
-  "NotNestedLessLess;": "⪡̸",
-  "NotReverseElement;": "∌",
-  "NotSquareSuperset;": "⊐̸",
-  "NotTildeFullEqual;": "≇",
-  "RightAngleBracket;": "⟩",
-  "rightleftharpoons;": "⇌",
-  "RightUpDownVector;": "⥏",
-  "SquareSubsetEqual;": "⊑",
-  "twoheadrightarrow;": "↠",
-  "VerticalSeparator;": "❘",
-  "blacktriangleright;": "▸",
-  "DownRightTeeVector;": "⥟",
-  "DownRightVectorBar;": "⥗",
-  "LongLeftRightArrow;": "⟷",
-  "Longleftrightarrow;": "⟺",
-  "longleftrightarrow;": "⟷",
-  "NegativeThickSpace;": "​",
-  "NotLeftTriangleBar;": "⧏̸",
-  "PrecedesSlantEqual;": "≼",
-  "ReverseEquilibrium;": "⇋",
-  "RightDoubleBracket;": "⟧",
-  "RightDownTeeVector;": "⥝",
-  "RightDownVectorBar;": "⥕",
-  "RightTriangleEqual;": "⊵",
-  "SquareIntersection;": "⊓",
-  "SucceedsSlantEqual;": "≽",
-  "DoubleLongLeftArrow;": "⟸",
-  "DownLeftRightVector;": "⥐",
-  "LeftArrowRightArrow;": "⇆",
-  "leftrightsquigarrow;": "↭",
-  "NegativeMediumSpace;": "​",
-  "NotGreaterFullEqual;": "≧̸",
-  "NotRightTriangleBar;": "⧐̸",
-  "RightArrowLeftArrow;": "⇄",
-  "SquareSupersetEqual;": "⊒",
-  "CapitalDifferentialD;": "ⅅ",
-  "DoubleLeftRightArrow;": "⇔",
-  "DoubleLongRightArrow;": "⟹",
-  "EmptyVerySmallSquare;": "▫",
-  "NestedGreaterGreater;": "≫",
-  "NotDoubleVerticalBar;": "∦",
-  "NotGreaterSlantEqual;": "⩾̸",
-  "NotLeftTriangleEqual;": "⋬",
-  "NotSquareSubsetEqual;": "⋢",
-  "OpenCurlyDoubleQuote;": "“",
-  "ReverseUpEquilibrium;": "⥯",
-  "CloseCurlyDoubleQuote;": "”",
-  "DoubleContourIntegral;": "∯",
-  "FilledVerySmallSquare;": "▪",
-  "NegativeVeryThinSpace;": "​",
-  "NotPrecedesSlantEqual;": "⋠",
-  "NotRightTriangleEqual;": "⋭",
-  "NotSucceedsSlantEqual;": "⋡",
-  "DiacriticalDoubleAcute;": "˝",
-  "NotSquareSupersetEqual;": "⋣",
-  "NotNestedGreaterGreater;": "⪢̸",
-  "ClockwiseContourIntegral;": "∲",
-  "DoubleLongLeftRightArrow;": "⟺",
-  "CounterClockwiseContourIntegral;": "∳"
-}
diff --git a/packages/compiler-dom/src/parserOptions.ts b/packages/compiler-dom/src/parserOptions.ts
index 4d06a776b7a..e4899a9bf21 100644
--- a/packages/compiler-dom/src/parserOptions.ts
+++ b/packages/compiler-dom/src/parserOptions.ts
@@ -1,48 +1,30 @@
-import {
-  TextModes,
-  ParserOptions,
-  ElementNode,
-  NodeTypes,
-  isBuiltInType
-} from '@vue/compiler-core'
-import { makeMap, isVoidTag, isHTMLTag, isSVGTag } from '@vue/shared'
+import { Namespaces, NodeTypes, type ParserOptions } from '@vue/compiler-core'
+import { isHTMLTag, isMathMLTag, isSVGTag, isVoidTag } from '@vue/shared'
 import { TRANSITION, TRANSITION_GROUP } from './runtimeHelpers'
-import { decodeHtml } from './decodeHtml'
 import { decodeHtmlBrowser } from './decodeHtmlBrowser'
 
-const isRawTextContainer = /*#__PURE__*/ makeMap(
-  'style,iframe,script,noscript',
-  true
-)
-
-export const enum DOMNamespaces {
-  HTML = 0 /* Namespaces.HTML */,
-  SVG,
-  MATH_ML
-}
-
 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 : decodeHtml,
+  decodeEntities: __BROWSER__ ? decodeHtmlBrowser : undefined,
 
-  isBuiltInComponent: (tag: string): symbol | undefined => {
-    if (isBuiltInType(tag, `Transition`)) {
+  isBuiltInComponent: tag => {
+    if (tag === 'Transition' || tag === 'transition') {
       return TRANSITION
-    } else if (isBuiltInType(tag, `TransitionGroup`)) {
+    } else if (tag === 'TransitionGroup' || tag === 'transition-group') {
       return TRANSITION_GROUP
     }
   },
 
   // https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
-  getNamespace(tag: string, parent: ElementNode | undefined): DOMNamespaces {
-    let ns = parent ? parent.ns : DOMNamespaces.HTML
-
-    if (parent && ns === DOMNamespaces.MATH_ML) {
+  getNamespace(tag, parent, rootNamespace) {
+    let ns = parent ? parent.ns : rootNamespace
+    if (parent && ns === Namespaces.MATH_ML) {
       if (parent.tag === 'annotation-xml') {
         if (tag === 'svg') {
-          return DOMNamespaces.SVG
+          return Namespaces.SVG
         }
         if (
           parent.props.some(
@@ -51,49 +33,36 @@ export const parserOptions: ParserOptions = {
               a.name === 'encoding' &&
               a.value != null &&
               (a.value.content === 'text/html' ||
-                a.value.content === 'application/xhtml+xml')
+                a.value.content === 'application/xhtml+xml'),
           )
         ) {
-          ns = DOMNamespaces.HTML
+          ns = Namespaces.HTML
         }
       } else if (
         /^m(?:[ions]|text)$/.test(parent.tag) &&
         tag !== 'mglyph' &&
         tag !== 'malignmark'
       ) {
-        ns = DOMNamespaces.HTML
+        ns = Namespaces.HTML
       }
-    } else if (parent && ns === DOMNamespaces.SVG) {
+    } else if (parent && ns === Namespaces.SVG) {
       if (
         parent.tag === 'foreignObject' ||
         parent.tag === 'desc' ||
         parent.tag === 'title'
       ) {
-        ns = DOMNamespaces.HTML
+        ns = Namespaces.HTML
       }
     }
 
-    if (ns === DOMNamespaces.HTML) {
+    if (ns === Namespaces.HTML) {
       if (tag === 'svg') {
-        return DOMNamespaces.SVG
+        return Namespaces.SVG
       }
       if (tag === 'math') {
-        return DOMNamespaces.MATH_ML
+        return Namespaces.MATH_ML
       }
     }
     return ns
   },
-
-  // https://html.spec.whatwg.org/multipage/parsing.html#parsing-html-fragments
-  getTextMode({ tag, ns }: ElementNode): TextModes {
-    if (ns === DOMNamespaces.HTML) {
-      if (tag === 'textarea' || tag === 'title') {
-        return TextModes.RCDATA
-      }
-      if (isRawTextContainer(tag)) {
-        return TextModes.RAWTEXT
-      }
-    }
-    return TextModes.DATA
-  }
 }
diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index 19c595ef69a..db829096cb8 100644
--- a/packages/compiler-dom/src/runtimeHelpers.ts
+++ b/packages/compiler-dom/src/runtimeHelpers.ts
@@ -24,5 +24,5 @@ registerRuntimeHelpers({
   [V_ON_WITH_KEYS]: `withKeys`,
   [V_SHOW]: `vShow`,
   [TRANSITION]: `Transition`,
-  [TRANSITION_GROUP]: `TransitionGroup`
+  [TRANSITION_GROUP]: `TransitionGroup`,
 })
diff --git a/packages/compiler-dom/src/transforms/Transition.ts b/packages/compiler-dom/src/transforms/Transition.ts
index 56d05ef03c1..f6cf968e372 100644
--- a/packages/compiler-dom/src/transforms/Transition.ts
+++ b/packages/compiler-dom/src/transforms/Transition.ts
@@ -1,12 +1,12 @@
 import {
-  NodeTransform,
-  NodeTypes,
+  type ComponentNode,
   ElementTypes,
-  ComponentNode,
-  IfBranchNode
+  type IfBranchNode,
+  type NodeTransform,
+  NodeTypes,
 } from '@vue/compiler-core'
 import { TRANSITION } from '../runtimeHelpers'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformTransition: NodeTransform = (node, context) => {
   if (
@@ -28,9 +28,9 @@ export const transformTransition: NodeTransform = (node, context) => {
               {
                 start: node.children[0].loc.start,
                 end: node.children[node.children.length - 1].loc.end,
-                source: ''
-              }
-            )
+                source: '',
+              },
+            ),
           )
         }
 
@@ -43,8 +43,9 @@ export const transformTransition: NodeTransform = (node, context) => {
               node.props.push({
                 type: NodeTypes.ATTRIBUTE,
                 name: 'persisted',
+                nameLoc: node.loc,
                 value: undefined,
-                loc: node.loc
+                loc: node.loc,
               })
             }
           }
@@ -59,7 +60,7 @@ function hasMultipleChildren(node: ComponentNode | IfBranchNode): boolean {
   const children = (node.children = node.children.filter(
     c =>
       c.type !== NodeTypes.COMMENT &&
-      !(c.type === NodeTypes.TEXT && !c.content.trim())
+      !(c.type === NodeTypes.TEXT && !c.content.trim()),
   ))
   const child = children[0]
   return (
diff --git a/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts b/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
index fa37b366fa2..81dc498497b 100644
--- a/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
+++ b/packages/compiler-dom/src/transforms/ignoreSideEffectTags.ts
@@ -1,4 +1,4 @@
-import { NodeTransform, NodeTypes, ElementTypes } from '@vue/compiler-core'
+import { ElementTypes, type NodeTransform, NodeTypes } from '@vue/compiler-core'
 import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const ignoreSideEffectTags: NodeTransform = (node, context) => {
@@ -11,8 +11,8 @@ export const ignoreSideEffectTags: NodeTransform = (node, context) => {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG,
-          node.loc
-        )
+          node.loc,
+        ),
       )
     context.removeNode()
   }
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index 0b47cb435b0..a5ff770f4e8 100644
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -2,40 +2,40 @@
  * This module is Node-only.
  */
 import {
-  NodeTypes,
-  ElementNode,
-  TransformContext,
-  TemplateChildNode,
-  SimpleExpressionNode,
-  createCallExpression,
-  HoistTransform,
   CREATE_STATIC,
-  ExpressionNode,
+  ConstantTypes,
+  type ElementNode,
   ElementTypes,
-  PlainElementNode,
-  JSChildNode,
-  TextCallNode,
-  ConstantTypes
+  type ExpressionNode,
+  type HoistTransform,
+  type JSChildNode,
+  Namespaces,
+  NodeTypes,
+  type PlainElementNode,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
+  type TextCallNode,
+  type TransformContext,
+  createCallExpression,
 } from '@vue/compiler-core'
 import {
-  isVoidTag,
+  escapeHtml,
+  isBooleanAttr,
+  isKnownHtmlAttr,
+  isKnownSvgAttr,
   isString,
   isSymbol,
-  isKnownHtmlAttr,
-  escapeHtml,
-  toDisplayString,
+  isVoidTag,
+  makeMap,
   normalizeClass,
   normalizeStyle,
   stringifyStyle,
-  makeMap,
-  isKnownSvgAttr,
-  isBooleanAttr
+  toDisplayString,
 } from '@vue/shared'
-import { DOMNamespaces } from '../parserOptions'
 
-export const enum StringifyThresholds {
+export enum StringifyThresholds {
   ELEMENT_WITH_BINDING_COUNT = 5,
-  NODE_COUNT = 20
+  NODE_COUNT = 20,
 }
 
 type StringifiableNode = PlainElementNode | TextCallNode
@@ -87,11 +87,11 @@ export const stringifyStatic: HoistTransform = (children, context, parent) => {
       // combine all currently eligible nodes into a single static vnode call
       const staticCall = createCallExpression(context.helper(CREATE_STATIC), [
         JSON.stringify(
-          currentChunk.map(node => stringifyNode(node, context)).join('')
+          currentChunk.map(node => stringifyNode(node, context)).join(''),
         ).replace(expReplaceRE, `" + $1 + "`),
         // the 2nd argument indicates the number of DOM nodes this static vnode
         // will insert / hydrate
-        String(currentChunk.length)
+        String(currentChunk.length),
       ])
       // replace the first node's hoisted expression with the static vnode call
       replaceHoist(currentChunk[0], staticCall, context)
@@ -148,27 +148,27 @@ const getHoistedNode = (node: TemplateChildNode) =>
   node.codegenNode.hoisted
 
 const dataAriaRE = /^(data|aria)-/
-const isStringifiableAttr = (name: string, ns: DOMNamespaces) => {
+const isStringifiableAttr = (name: string, ns: Namespaces) => {
   return (
-    (ns === DOMNamespaces.HTML
+    (ns === Namespaces.HTML
       ? isKnownHtmlAttr(name)
-      : ns === DOMNamespaces.SVG
-      ? isKnownSvgAttr(name)
-      : false) || dataAriaRE.test(name)
+      : ns === Namespaces.SVG
+        ? isKnownSvgAttr(name)
+        : false) || dataAriaRE.test(name)
   )
 }
 
 const replaceHoist = (
   node: StringifiableNode,
   replacement: JSChildNode | null,
-  context: TransformContext
+  context: TransformContext,
 ) => {
   const hoistToReplace = (node.codegenNode as SimpleExpressionNode).hoisted!
   context.hoists[context.hoists.indexOf(hoistToReplace)] = replacement
 }
 
 const isNonStringifiable = /*#__PURE__*/ makeMap(
-  `caption,thead,tr,th,tbody,td,tfoot,colgroup,col`
+  `caption,thead,tr,th,tbody,td,tfoot,colgroup,col`,
 )
 
 /**
@@ -248,7 +248,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
 
 function stringifyNode(
   node: string | TemplateChildNode,
-  context: TransformContext
+  context: TransformContext,
 ): string {
   if (isString(node)) {
     return node
@@ -277,7 +277,7 @@ function stringifyNode(
 
 function stringifyElement(
   node: ElementNode,
-  context: TransformContext
+  context: TransformContext,
 ): string {
   let res = `<${node.tag}`
   let innerHTML = ''
@@ -316,7 +316,7 @@ function stringifyElement(
             evaluated = stringifyStyle(normalizeStyle(evaluated))
           }
           res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
-            evaluated
+            evaluated,
           )}"`
         }
       } else if (p.name === 'html') {
@@ -325,7 +325,7 @@ function stringifyElement(
         innerHTML = evaluateConstant(p.exp as SimpleExpressionNode)
       } else if (p.name === 'text') {
         innerHTML = escapeHtml(
-          toDisplayString(evaluateConstant(p.exp as SimpleExpressionNode))
+          toDisplayString(evaluateConstant(p.exp as SimpleExpressionNode)),
         )
       }
     }
diff --git a/packages/compiler-dom/src/transforms/transformStyle.ts b/packages/compiler-dom/src/transforms/transformStyle.ts
index d87b241609f..405b6da47ab 100644
--- a/packages/compiler-dom/src/transforms/transformStyle.ts
+++ b/packages/compiler-dom/src/transforms/transformStyle.ts
@@ -1,10 +1,10 @@
 import {
-  NodeTransform,
+  ConstantTypes,
+  type NodeTransform,
   NodeTypes,
+  type SimpleExpressionNode,
+  type SourceLocation,
   createSimpleExpression,
-  SimpleExpressionNode,
-  SourceLocation,
-  ConstantTypes
 } from '@vue/compiler-core'
 import { parseStringStyle } from '@vue/shared'
 
@@ -25,7 +25,7 @@ export const transformStyle: NodeTransform = node => {
           arg: createSimpleExpression(`style`, true, p.loc),
           exp: parseInlineCSS(p.value.content, p.loc),
           modifiers: [],
-          loc: p.loc
+          loc: p.loc,
         }
       }
     })
@@ -34,13 +34,13 @@ export const transformStyle: NodeTransform = node => {
 
 const parseInlineCSS = (
   cssText: string,
-  loc: SourceLocation
+  loc: SourceLocation,
 ): SimpleExpressionNode => {
   const normalized = parseStringStyle(cssText)
   return createSimpleExpression(
     JSON.stringify(normalized),
     false,
     loc,
-    ConstantTypes.CAN_STRINGIFY
+    ConstantTypes.CAN_STRINGIFY,
   )
 }
diff --git a/packages/compiler-dom/src/transforms/vHtml.ts b/packages/compiler-dom/src/transforms/vHtml.ts
index e42451a58c2..d44ae508fe7 100644
--- a/packages/compiler-dom/src/transforms/vHtml.ts
+++ b/packages/compiler-dom/src/transforms/vHtml.ts
@@ -1,20 +1,20 @@
 import {
-  DirectiveTransform,
+  type DirectiveTransform,
   createObjectProperty,
-  createSimpleExpression
+  createSimpleExpression,
 } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVHtml: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
   if (!exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc),
     )
   }
   if (node.children.length) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc),
     )
     node.children.length = 0
   }
@@ -22,8 +22,8 @@ export const transformVHtml: DirectiveTransform = (dir, node, context) => {
     props: [
       createObjectProperty(
         createSimpleExpression(`innerHTML`, true, loc),
-        exp || createSimpleExpression('', true)
-      )
-    ]
+        exp || createSimpleExpression('', true),
+      ),
+    ],
   }
 }
diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts
index 5dff390d3d8..5c28580b984 100644
--- a/packages/compiler-dom/src/transforms/vModel.ts
+++ b/packages/compiler-dom/src/transforms/vModel.ts
@@ -1,18 +1,20 @@
 import {
-  transformModel as baseTransform,
-  DirectiveTransform,
+  type DirectiveTransform,
   ElementTypes,
-  findProp,
   NodeTypes,
-  hasDynamicKeyVBind
+  transformModel as baseTransform,
+  findDir,
+  findProp,
+  hasDynamicKeyVBind,
+  isStaticArgOf,
 } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 import {
   V_MODEL_CHECKBOX,
+  V_MODEL_DYNAMIC,
   V_MODEL_RADIO,
   V_MODEL_SELECT,
   V_MODEL_TEXT,
-  V_MODEL_DYNAMIC
 } from '../runtimeHelpers'
 
 export const transformModel: DirectiveTransform = (dir, node, context) => {
@@ -26,19 +28,19 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     context.onError(
       createDOMCompilerError(
         DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT,
-        dir.arg.loc
-      )
+        dir.arg.loc,
+      ),
     )
   }
 
   function checkDuplicatedValue() {
-    const value = findProp(node, 'value')
-    if (value) {
+    const value = findDir(node, 'bind')
+    if (value && isStaticArgOf(value.arg, 'value')) {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
-          value.loc
-        )
+          value.loc,
+        ),
       )
     }
   }
@@ -72,8 +74,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
               context.onError(
                 createDOMCompilerError(
                   DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
-                  dir.loc
-                )
+                  dir.loc,
+                ),
               )
               break
             default:
@@ -106,8 +108,8 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
     context.onError(
       createDOMCompilerError(
         DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
-        dir.loc
-      )
+        dir.loc,
+      ),
     )
   }
 
@@ -118,7 +120,7 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
       !(
         p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
         p.key.content === 'modelValue'
-      )
+      ),
   )
 
   return baseResult
diff --git a/packages/compiler-dom/src/transforms/vOn.ts b/packages/compiler-dom/src/transforms/vOn.ts
index 660003b4839..88d2c5db741 100644
--- a/packages/compiler-dom/src/transforms/vOn.ts
+++ b/packages/compiler-dom/src/transforms/vOn.ts
@@ -1,21 +1,21 @@
 import {
+  CompilerDeprecationTypes,
+  type DirectiveTransform,
+  type ExpressionNode,
+  NodeTypes,
+  type SimpleExpressionNode,
+  type SourceLocation,
+  type TransformContext,
   transformOn as baseTransform,
-  DirectiveTransform,
-  createObjectProperty,
+  checkCompatEnabled,
   createCallExpression,
-  createSimpleExpression,
-  NodeTypes,
   createCompoundExpression,
-  ExpressionNode,
-  SimpleExpressionNode,
+  createObjectProperty,
+  createSimpleExpression,
   isStaticExp,
-  CompilerDeprecationTypes,
-  TransformContext,
-  SourceLocation,
-  checkCompatEnabled
 } from '@vue/compiler-core'
-import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../runtimeHelpers'
-import { makeMap, capitalize } from '@vue/shared'
+import { V_ON_WITH_KEYS, V_ON_WITH_MODIFIERS } from '../runtimeHelpers'
+import { capitalize, makeMap } from '@vue/shared'
 
 const isEventOptionModifier = /*#__PURE__*/ makeMap(`passive,once,capture`)
 const isNonKeyModifier = /*#__PURE__*/ makeMap(
@@ -24,20 +24,20 @@ const isNonKeyModifier = /*#__PURE__*/ makeMap(
     // system modifiers + exact
     `ctrl,shift,alt,meta,exact,` +
     // mouse
-    `middle`
+    `middle`,
 )
 // left & right could be mouse or key modifiers based on event type
 const maybeKeyModifier = /*#__PURE__*/ makeMap('left,right')
 const isKeyboardEvent = /*#__PURE__*/ makeMap(
   `onkeyup,onkeydown,onkeypress`,
-  true
+  true,
 )
 
 const resolveModifiers = (
   key: ExpressionNode,
   modifiers: string[],
   context: TransformContext,
-  loc: SourceLocation
+  loc: SourceLocation,
 ) => {
   const keyModifiers = []
   const nonKeyModifiers = []
@@ -52,7 +52,7 @@ const resolveModifiers = (
       checkCompatEnabled(
         CompilerDeprecationTypes.COMPILER_V_ON_NATIVE,
         context,
-        loc
+        loc,
       )
     ) {
       eventOptionModifiers.push(modifier)
@@ -86,7 +86,7 @@ const resolveModifiers = (
   return {
     keyModifiers,
     nonKeyModifiers,
-    eventOptionModifiers
+    eventOptionModifiers,
   }
 }
 
@@ -96,14 +96,14 @@ const transformClick = (key: ExpressionNode, event: string) => {
   return isStaticClick
     ? createSimpleExpression(event, true)
     : key.type !== NodeTypes.SIMPLE_EXPRESSION
-    ? createCompoundExpression([
-        `(`,
-        key,
-        `) === "onClick" ? "${event}" : (`,
-        key,
-        `)`
-      ])
-    : key
+      ? createCompoundExpression([
+          `(`,
+          key,
+          `) === "onClick" ? "${event}" : (`,
+          key,
+          `)`,
+        ])
+      : key
 }
 
 export const transformOn: DirectiveTransform = (dir, node, context) => {
@@ -126,7 +126,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     if (nonKeyModifiers.length) {
       handlerExp = createCallExpression(context.helper(V_ON_WITH_MODIFIERS), [
         handlerExp,
-        JSON.stringify(nonKeyModifiers)
+        JSON.stringify(nonKeyModifiers),
       ])
     }
 
@@ -137,7 +137,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     ) {
       handlerExp = createCallExpression(context.helper(V_ON_WITH_KEYS), [
         handlerExp,
-        JSON.stringify(keyModifiers)
+        JSON.stringify(keyModifiers),
       ])
     }
 
@@ -149,7 +149,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => {
     }
 
     return {
-      props: [createObjectProperty(key, handlerExp)]
+      props: [createObjectProperty(key, handlerExp)],
     }
   })
 }
diff --git a/packages/compiler-dom/src/transforms/vShow.ts b/packages/compiler-dom/src/transforms/vShow.ts
index 7fe76d0ba77..37c077a0c4f 100644
--- a/packages/compiler-dom/src/transforms/vShow.ts
+++ b/packages/compiler-dom/src/transforms/vShow.ts
@@ -1,17 +1,17 @@
-import { DirectiveTransform } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import type { DirectiveTransform } from '@vue/compiler-core'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 import { V_SHOW } from '../runtimeHelpers'
 
 export const transformShow: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
   if (!exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc),
     )
   }
 
   return {
     props: [],
-    needRuntime: context.helper(V_SHOW)
+    needRuntime: context.helper(V_SHOW),
   }
 }
diff --git a/packages/compiler-dom/src/transforms/vText.ts b/packages/compiler-dom/src/transforms/vText.ts
index 77bf0032b8e..de46e40fffc 100644
--- a/packages/compiler-dom/src/transforms/vText.ts
+++ b/packages/compiler-dom/src/transforms/vText.ts
@@ -1,23 +1,23 @@
 import {
-  DirectiveTransform,
-  createObjectProperty,
-  createSimpleExpression,
+  type DirectiveTransform,
   TO_DISPLAY_STRING,
   createCallExpression,
-  getConstantType
+  createObjectProperty,
+  createSimpleExpression,
+  getConstantType,
 } from '@vue/compiler-core'
-import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVText: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
   if (!exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc),
     )
   }
   if (node.children.length) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_WITH_CHILDREN, loc)
+      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_WITH_CHILDREN, loc),
     )
     node.children.length = 0
   }
@@ -31,10 +31,10 @@ export const transformVText: DirectiveTransform = (dir, node, context) => {
             : createCallExpression(
                 context.helperString(TO_DISPLAY_STRING),
                 [exp],
-                loc
+                loc,
               )
-          : createSimpleExpression('', true)
-      )
-    ]
+          : createSimpleExpression('', true),
+      ),
+    ],
   }
 }
diff --git a/packages/compiler-sfc/README.md b/packages/compiler-sfc/README.md
index c76618e4a4d..4f8ff3ac8b3 100644
--- a/packages/compiler-sfc/README.md
+++ b/packages/compiler-sfc/README.md
@@ -4,7 +4,7 @@
 
 **Note: as of 3.2.13+, this package is included as a dependency of the main `vue` package and can be accessed as `vue/compiler-sfc`. This means you no longer need to explicitly install this package and ensure its version match that of `vue`'s. Just use the main `vue/compiler-sfc` deep import instead.**
 
-This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader), [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue) and [vite](https://github.com/vitejs/vite).
+This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue Single File Components (SFCs) into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader) and [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
 
 ## API
 
@@ -77,4 +77,4 @@ export default script
 
 Options needed for these APIs can be passed via the query string.
 
-For detailed API references and options, check out the source type definitions. For actual usage of these APIs, check out [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue/tree/next) or [vue-loader](https://github.com/vuejs/vue-loader/tree/next).
+For detailed API references and options, check out the source type definitions. For actual usage of these APIs, check out [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) or [vue-loader](https://github.com/vuejs/vue-loader/tree/next).
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 949c9946d9f..6efe6fb92af 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -14,7 +14,8 @@ return { a }
 `;
 
 exports[`SFC analyze <script> bindings > auto name inference > do not overwrite manual name (call) 1`] = `
-"import { defineComponent } from 'vue'
+"
+        import { defineComponent } from 'vue'
         const __default__ = defineComponent({
           name: 'Baz'
         })
@@ -30,7 +31,8 @@ return { a, defineComponent }
 `;
 
 exports[`SFC analyze <script> bindings > auto name inference > do not overwrite manual name (object) 1`] = `
-"const __default__ = {
+"
+        const __default__ = {
           name: 'Baz'
         }
         
@@ -45,8 +47,9 @@ return { a }
 `;
 
 exports[`SFC compile <script setup> > <script> and <script setup> co-usage > export call expression as default 1`] = `
-"function fn() {
-        return \\"hello, world\\";
+"
+      function fn() {
+        return "hello, world";
       }
       const __default__ = fn();
       
@@ -63,7 +66,8 @@ return { fn }
 `;
 
 exports[`SFC compile <script setup> > <script> and <script setup> co-usage > keep original semi style 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   emits: ['change'],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -123,7 +127,7 @@ exports[`SFC compile <script setup> > <script> and <script setup> co-usage > scr
 import { x } from './x'
       
       const __default__ = {
-        name: \\"test\\"
+        name: "test"
       }
       
 
@@ -515,27 +519,28 @@ return {  }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > ref 1`] = `
-"import { withAsyncContext as _withAsyncContext, ref as _ref } from 'vue'
+"import { withAsyncContext as _withAsyncContext } from 'vue'
 
 export default {
   async setup(__props, { expose: __expose }) {
   __expose();
 
 let __temp, __restore
-let a = _ref(1 + ((
+let a = ref(1 + ((
   ([__temp,__restore] = _withAsyncContext(() => foo)),
   __temp = await __temp,
   __restore(),
   __temp
 )))
-return { a }
+return { get a() { return a }, set a(v) { a = v } }
 }
 
 }"
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 async function foo() { await bar }
@@ -546,7 +551,8 @@ return { foo }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 2`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 const foo = async () => { await bar }
@@ -557,7 +563,8 @@ return { foo }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 3`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 const obj = { async method() { await bar }}
@@ -568,7 +575,8 @@ return { obj }
 `;
 
 exports[`SFC compile <script setup> > async/await detection > should ignore await inside functions 4`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 const cls = class Foo { async method() { await bar }}
@@ -618,7 +626,8 @@ return { a }
 `;
 
 exports[`SFC compile <script setup> > binding analysis for destructure 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -630,145 +639,6 @@ return { foo, bar, baz, y, z }
 }"
 `;
 
-exports[`SFC compile <script setup> > dev mode import usage check > TS annotations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { Foo, Bar, Baz, Qux, Fred } from './x'
-        const a = 1
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        function b() {}
-        
-return { a, b, get Baz() { return Baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > attribute expressions 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { bar, baz } from './x'
-        const cond = true
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { cond, get bar() { return bar }, get baz() { return baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > components 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, FooBaz, FooQux, foo } from './x'
-        const fooBar: FooBar = 1
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > directive 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { vMyDir } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get vMyDir() { return vMyDir } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, foo, bar, unused } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { VAR, VAR2, VAR3 } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > last tag 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { FooBaz, Last } from './x'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        
-return { get FooBaz() { return FooBaz }, get Last() { return Last } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > template ref 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { foo, bar, Baz } from './foo'
-        
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-          
-return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
-}
-
-})"
-`;
-
-exports[`SFC compile <script setup> > dev mode import usage check > vue interpolations 1`] = `
-"import { defineComponent as _defineComponent } from 'vue'
-import { x, y, z, x$y } from './x'
-      
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-      
-return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
-}
-
-})"
-`;
-
 exports[`SFC compile <script setup> > errors > should allow defineProps/Emit() referencing imported binding 1`] = `
 "import { bar } from './bar'
         
@@ -818,23 +688,29 @@ return { bar }
 `;
 
 exports[`SFC compile <script setup> > imports > dedupe between user & helper 1`] = `
-"import { ref as _ref } from 'vue'
-import { ref } from 'vue'
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+import { useCssVars, ref } from 'vue'
       
 export default {
   setup(__props, { expose: __expose }) {
   __expose();
 
-      let foo = _ref(1)
+_useCssVars(_ctx => ({
+  "xxxxxxxx-msg": (msg.value)
+}))
+
+      const msg = ref()
       
-return { foo, ref }
+return { msg, useCssVars, ref }
 }
 
 }"
 `;
 
 exports[`SFC compile <script setup> > imports > import dedupe between <script> and <script setup> 1`] = `
-"import { x } from './x'
+"
+        
+        import { x } from './x'
         
 export default {
   setup(__props, { expose: __expose }) {
@@ -898,7 +774,9 @@ 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 +790,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 +814,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 +824,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 +836,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 +849,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 +862,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 +872,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'
         
@@ -1003,10 +881,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)
@@ -1022,7 +902,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'
         
@@ -1036,28 +916,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
               (()=>{
@@ -1079,7 +959,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'
         
@@ -1093,13 +973,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 */))
@@ -1110,7 +990,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'
         
@@ -1123,22 +1003,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 */))
@@ -1148,8 +1028,28 @@ return (_ctx, _cache) => {
 }"
 `;
 
+exports[`SFC compile <script setup> > inlineTemplate mode > unref + new expression 1`] = `
+"import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+
+import Foo from './foo'
+        
+export default {
+  setup(__props) {
+
+        
+return (_ctx, _cache) => {
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createElementVNode("div", null, _toDisplayString(new (_unref(Foo))()), 1 /* TEXT */),
+    _createElementVNode("div", null, _toDisplayString(new (_unref(Foo)).Bar()), 1 /* TEXT */)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+}
+
+}"
+`;
+
 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'
         
@@ -1162,18 +1062,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)]
     ])
@@ -1185,7 +1085,8 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > with defineExpose() 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
 
         const count = ref(0)
@@ -1302,9 +1203,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 }) {
@@ -1318,6 +1219,21 @@ return { D, C, B, Foo }
 })"
 `;
 
+exports[`SFC compile <script setup> > with TypeScript > with generic attribute 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+type Bar = {}
+      
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return {  }
+}
+
+})"
+`;
+
 exports[`SFC genDefaultAs > <script setup> only 1`] = `
 "const a = 1
       
@@ -1348,7 +1264,8 @@ return { a }
 `;
 
 exports[`SFC genDefaultAs > <script> + <script setup> 1`] = `
-"const __default__ = {}
+"
+      const __default__ = {}
       
 const _sfc_ = /*#__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
@@ -1363,7 +1280,8 @@ return { a }
 `;
 
 exports[`SFC genDefaultAs > <script> + <script setup> 2`] = `
-"const __default__ = {}
+"
+      const __default__ = {}
       
 const _sfc_ = /*#__PURE__*/Object.assign(__default__, {
   setup(__props, { expose: __expose }) {
@@ -1408,7 +1326,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__
@@ -1416,3 +1334,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__/__snapshots__/compileTemplate.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap
index 35b87c4ec71..784ff1bf186 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 })
           ])
         ]
       }
@@ -58,28 +58,9 @@ export function ssrRender(_ctx, _push, _parent, _attrs) {
 }"
 `;
 
-exports[`source map 1`] = `
-{
-  "mappings": ";;;wBACE,oBAA8B;IAAzB,oBAAmB,4BAAbA,WAAM",
-  "names": [
-    "render",
-  ],
-  "sources": [
-    "example.vue",
-  ],
-  "sourcesContent": [
-    "
-  <div><p>{{ render }}</p></div>
-",
-  ],
-  "version": 3,
-}
-`;
-
 exports[`template errors 1`] = `
 [
   [SyntaxError: Error parsing JavaScript expression: Unexpected token (1:3)],
-  [SyntaxError: v-bind is missing expression.],
   [SyntaxError: v-model can only be used on <input>, <textarea> and <select> elements.],
 ]
 `;
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.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 75289d21ee2..2b9acbc7fd2 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode, mockId } from './utils'
+import { assertCode, compileSFCScript as compile, mockId } from './utils'
 
 describe('SFC compile <script setup>', () => {
   test('should compile JS syntax', () => {
@@ -34,7 +34,7 @@ describe('SFC compile <script setup>', () => {
     expect(content).toMatch(
       `return { get aa() { return aa }, set aa(v) { aa = v }, ` +
         `bb, cc, dd, get a() { return a }, set a(v) { a = v }, b, c, d, ` +
-        `get xx() { return xx }, get x() { return x } }`
+        `get xx() { return xx }, get x() { return x } }`,
     )
     expect(bindings).toStrictEqual({
       x: BindingTypes.SETUP_MAYBE_REF,
@@ -46,7 +46,7 @@ describe('SFC compile <script setup>', () => {
       aa: BindingTypes.SETUP_LET,
       bb: BindingTypes.LITERAL_CONST,
       cc: BindingTypes.SETUP_CONST,
-      dd: BindingTypes.SETUP_CONST
+      dd: BindingTypes.SETUP_CONST,
     })
     assertCode(content)
   })
@@ -63,7 +63,7 @@ describe('SFC compile <script setup>', () => {
       bar: BindingTypes.SETUP_MAYBE_REF,
       baz: BindingTypes.SETUP_MAYBE_REF,
       y: BindingTypes.SETUP_MAYBE_REF,
-      z: BindingTypes.SETUP_MAYBE_REF
+      z: BindingTypes.SETUP_MAYBE_REF,
     })
     assertCode(content)
   })
@@ -209,7 +209,7 @@ describe('SFC compile <script setup>', () => {
         compile(`<script setup>
           import { ref } from 'vue'
           import 'foo/css'
-        </script>`).content
+        </script>`).content,
       )
     })
 
@@ -220,7 +220,7 @@ describe('SFC compile <script setup>', () => {
         import a from 'a' // comment
         import b from 'b'
         </script>
-        `).content
+        `).content,
       )
     })
 
@@ -232,7 +232,7 @@ describe('SFC compile <script setup>', () => {
       defineProps(['foo'])
       defineEmits(['bar'])
       const r = ref(0)
-      </script>`).content
+      </script>`).content,
       )
     })
 
@@ -240,14 +240,22 @@ describe('SFC compile <script setup>', () => {
       const { content } = compile(
         `
       <script setup>
-      import { ref } from 'vue'
-      let foo = $ref(1)
+      import { useCssVars, ref } from 'vue'
+      const msg = ref()
       </script>
+
+      <style>
+      .foo {
+        color: v-bind(msg)
+      }
+      </style>
       `,
-        { reactivityTransform: true }
       )
       assertCode(content)
-      expect(content).toMatch(`import { ref } from 'vue'`)
+      expect(content).toMatch(
+        `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`,
+      )
+      expect(content).toMatch(`import { useCssVars, ref } from 'vue'`)
     })
 
     test('import dedupe between <script> and <script setup>', () => {
@@ -262,7 +270,7 @@ describe('SFC compile <script setup>', () => {
         `)
       assertCode(content)
       expect(content.indexOf(`import { x }`)).toEqual(
-        content.lastIndexOf(`import { x }`)
+        content.lastIndexOf(`import { x }`),
       )
     })
 
@@ -280,7 +288,7 @@ describe('SFC compile <script setup>', () => {
           ref: BindingTypes.SETUP_MAYBE_REF,
           reactive: BindingTypes.SETUP_MAYBE_REF,
           foo: BindingTypes.SETUP_MAYBE_REF,
-          bar: BindingTypes.SETUP_MAYBE_REF
+          bar: BindingTypes.SETUP_MAYBE_REF,
         })
       })
 
@@ -297,7 +305,7 @@ describe('SFC compile <script setup>', () => {
           _reactive: BindingTypes.SETUP_MAYBE_REF,
           _ref: BindingTypes.SETUP_MAYBE_REF,
           foo: BindingTypes.SETUP_MAYBE_REF,
-          bar: BindingTypes.SETUP_MAYBE_REF
+          bar: BindingTypes.SETUP_MAYBE_REF,
         })
       })
 
@@ -310,7 +318,7 @@ describe('SFC compile <script setup>', () => {
       `)
         expect(bindings).toStrictEqual({
           bar: BindingTypes.SETUP_REACTIVE_CONST,
-          x: BindingTypes.SETUP_CONST
+          x: BindingTypes.SETUP_CONST,
         })
       })
     })
@@ -326,191 +334,11 @@ describe('SFC compile <script setup>', () => {
     `)
       assertCode(content)
       expect(bindings).toStrictEqual({
-        foo: BindingTypes.SETUP_MAYBE_REF
+        foo: BindingTypes.SETUP_MAYBE_REF,
       })
     })
   })
 
-  // in dev mode, declared bindings are returned as an object from setup()
-  // when using TS, users may import types which should not be returned as
-  // values, so we need to check import usage in the template to determine
-  // what to be returned.
-  describe('dev mode import usage check', () => {
-    test('components', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBar, FooBaz, FooQux, foo } from './x'
-        const fooBar: FooBar = 1
-        </script>
-        <template>
-          <FooBaz></FooBaz>
-          <foo-qux/>
-          <foo/>
-          FooBar
-        </template>
-        `)
-      // FooBar: should not be matched by plain text or incorrect case
-      // FooBaz: used as PascalCase component
-      // FooQux: used as kebab-case component
-      // foo: lowercase component
-      expect(content).toMatch(
-        `return { fooBar, get FooBaz() { return FooBaz }, ` +
-          `get FooQux() { return FooQux }, get foo() { return foo } }`
-      )
-      assertCode(content)
-    })
-
-    test('directive', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { vMyDir } from './x'
-        </script>
-        <template>
-          <div v-my-dir></div>
-        </template>
-        `)
-      expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
-      assertCode(content)
-    })
-
-    test('dynamic arguments', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBar, foo, bar, unused } from './x'
-        </script>
-        <template>
-          <FooBar #[foo.slotName] />
-          <FooBar #unused />
-          <div :[bar.attrName]="15"></div>
-          <div unused="unused"></div>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
-          `get bar() { return bar } }`
-      )
-      assertCode(content)
-    })
-
-    // https://github.com/vuejs/core/issues/4599
-    test('attribute expressions', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { bar, baz } from './x'
-        const cond = true
-        </script>
-        <template>
-          <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { cond, get bar() { return bar }, get baz() { return baz } }`
-      )
-      assertCode(content)
-    })
-
-    test('vue interpolations', () => {
-      const { content } = compile(`
-      <script setup lang="ts">
-      import { x, y, z, x$y } from './x'
-      </script>
-      <template>
-        <div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
-      </template>
-      `)
-      // x: used in interpolation
-      // y: should not be matched by {{ yy }} or 'y' in binding exps
-      // x$y: #4274 should escape special chars when creating Regex
-      expect(content).toMatch(
-        `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`
-      )
-      assertCode(content)
-    })
-
-    // #4340 interpolations in template strings
-    test('js template string interpolations', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { VAR, VAR2, VAR3 } from './x'
-        </script>
-        <template>
-          {{ \`\${VAR}VAR2\${VAR3}\` }}
-        </template>
-        `)
-      // VAR2 should not be matched
-      expect(content).toMatch(
-        `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`
-      )
-      assertCode(content)
-    })
-
-    // edge case: last tag in template
-    test('last tag', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { FooBaz, Last } from './x'
-        </script>
-        <template>
-          <FooBaz></FooBaz>
-          <Last/>
-        </template>
-        `)
-      expect(content).toMatch(
-        `return { get FooBaz() { return FooBaz }, get Last() { return Last } }`
-      )
-      assertCode(content)
-    })
-
-    test('TS annotations', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-        import { Foo, Bar, Baz, Qux, Fred } from './x'
-        const a = 1
-        function b() {}
-        </script>
-        <template>
-          {{ a as Foo }}
-          {{ b<Bar>() }}
-          {{ Baz }}
-          <Comp v-slot="{ data }: Qux">{{ data }}</Comp>
-          <div v-for="{ z = x as Qux } in list as Fred"/>
-        </template>
-        `)
-      expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
-      assertCode(content)
-    })
-
-    // vuejs/vue#12591
-    test('v-on inline statement', () => {
-      // should not error
-      compile(`
-      <script setup lang="ts">
-        import { foo } from './foo'
-      </script>
-      <template>
-        <div @click="$emit('update:a');"></div>
-      </template>
-      `)
-    })
-
-    test('template ref', () => {
-      const { content } = compile(`
-        <script setup lang="ts">
-          import { foo, bar, Baz } from './foo'
-        </script>
-        <template>
-          <div ref="foo"></div>
-          <div ref=""></div>
-          <Baz ref="bar" />
-        </template>
-        `)
-      expect(content).toMatch(
-        'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }'
-      )
-      assertCode(content)
-    })
-  })
-
   describe('inlineTemplate mode', () => {
     test('should work', () => {
       const { content } = compile(
@@ -524,7 +352,7 @@ describe('SFC compile <script setup>', () => {
           <div>static</div>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // check snapshot and make sure helper imports and
       // hoists are placed correctly.
@@ -542,7 +370,7 @@ describe('SFC compile <script setup>', () => {
         defineExpose({ count })
         </script>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       assertCode(content)
       expect(content).toMatch(`setup(__props, { expose: __expose })`)
@@ -563,7 +391,7 @@ describe('SFC compile <script setup>', () => {
           <some-other-comp/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       expect(content).toMatch('[_unref(vMyDir)]')
       expect(content).toMatch('_createVNode(ChildComp)')
@@ -592,7 +420,7 @@ describe('SFC compile <script setup>', () => {
           {{ tree.foo() }}
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // no need to unref vue component import
       expect(content).toMatch(`createVNode(Foo,`)
@@ -631,7 +459,7 @@ describe('SFC compile <script setup>', () => {
           <input v-model="lett">
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`(count).value = $event`)
@@ -639,7 +467,7 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`_isRef(maybe) ? (maybe).value = $event : null`)
       // let: handle both cases
       expect(content).toMatch(
-        `_isRef(lett) ? (lett).value = $event : lett = $event`
+        `_isRef(lett) ? (lett).value = $event : lett = $event`,
       )
       assertCode(content)
     })
@@ -659,7 +487,7 @@ describe('SFC compile <script setup>', () => {
           <input v-model="foo">
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       expect(content).not.toMatch(`_isRef(foo)`)
     })
@@ -697,7 +525,7 @@ describe('SFC compile <script setup>', () => {
            }"/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`count.value = 1`)
@@ -705,7 +533,7 @@ describe('SFC compile <script setup>', () => {
       expect(content).toMatch(`maybe.value = count.value`)
       // let: handle both cases
       expect(content).toMatch(
-        `_isRef(lett) ? lett.value = count.value : lett = count.value`
+        `_isRef(lett) ? lett.value = count.value : lett = count.value`,
       )
       expect(content).toMatch(`_isRef(v) ? v.value += 1 : v += 1`)
       expect(content).toMatch(`_isRef(v) ? v.value -= 1 : v -= 1`)
@@ -731,7 +559,7 @@ describe('SFC compile <script setup>', () => {
           <div @click="--lett"/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`count.value++`)
@@ -760,7 +588,7 @@ describe('SFC compile <script setup>', () => {
           <div @click="({ lett } = val)"/>
         </template>
         `,
-        { inlineTemplate: true }
+        { inlineTemplate: true },
       )
       // known const ref: set value
       expect(content).toMatch(`({ count: count.value } = val)`)
@@ -777,6 +605,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>
@@ -784,20 +613,22 @@ describe('SFC compile <script setup>', () => {
         </template>
         <style>
         div { color: v-bind(count) }
+        span { color: v-bind(style.color) }
         </style>
         `,
         {
           inlineTemplate: true,
           templateOptions: {
-            ssr: true
-          }
-        }
+            ssr: true,
+          },
+        },
       )
       expect(content).toMatch(`\n  __ssrInlineRender: true,\n`)
       expect(content).toMatch(`return (_ctx, _push`)
       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)
     })
 
@@ -814,11 +645,29 @@ describe('SFC compile <script setup>', () => {
         </template>
         `,
           {
-            inlineTemplate: false
-          }
-        )
+            inlineTemplate: false,
+          },
+        ),
       ).not.toThrowError()
     })
+
+    test('unref + new expression', () => {
+      const { content } = compile(
+        `
+        <script setup>
+        import Foo from './foo'
+        </script>
+        <template>
+          <div>{{ new Foo() }}</div>
+          <div>{{ new Foo.Bar() }}</div>
+        </template>
+        `,
+        { inlineTemplate: true },
+      )
+      expect(content).toMatch(`new (_unref(Foo))()`)
+      expect(content).toMatch(`new (_unref(Foo)).Bar()`)
+      assertCode(content)
+    })
   })
 
   describe('with TypeScript', () => {
@@ -835,11 +684,11 @@ describe('SFC compile <script setup>', () => {
       const { content, bindings } = compile(
         `<script setup lang="ts">
         enum Foo { A = 123 }
-        </script>`
+        </script>`,
       )
       assertCode(content)
       expect(bindings).toStrictEqual({
-        Foo: BindingTypes.LITERAL_CONST
+        Foo: BindingTypes.LITERAL_CONST,
       })
     })
 
@@ -852,14 +701,14 @@ describe('SFC compile <script setup>', () => {
         </script>
         <script setup lang="ts">
         enum Foo { A = 123 }
-        </script>`
+        </script>`,
       )
       assertCode(content)
       expect(bindings).toStrictEqual({
         D: BindingTypes.LITERAL_CONST,
         C: BindingTypes.LITERAL_CONST,
         B: BindingTypes.LITERAL_CONST,
-        Foo: BindingTypes.LITERAL_CONST
+        Foo: BindingTypes.LITERAL_CONST,
       })
     })
 
@@ -868,11 +717,11 @@ describe('SFC compile <script setup>', () => {
         `<script setup lang="ts">
         const enum Foo { A = 123 }
         </script>`,
-        { hoistStatic: true }
+        { hoistStatic: true },
       )
       assertCode(content)
       expect(bindings).toStrictEqual({
-        Foo: BindingTypes.LITERAL_CONST
+        Foo: BindingTypes.LITERAL_CONST,
       })
     })
 
@@ -881,18 +730,24 @@ describe('SFC compile <script setup>', () => {
         `<script setup lang="ts">
         import type { Foo } from './main.ts'
         import { type Bar, Baz } from './main.ts'
-        </script>`
+        </script>`,
       )
       expect(content).toMatch(`return { get Baz() { return Baz } }`)
       assertCode(content)
     })
+
+    test('with generic attribute', () => {
+      const { content } = compile(`
+      <script setup lang="ts" generic="T extends Record<string,string>">
+        type Bar = {}
+      </script>`)
+      assertCode(content)
+    })
   })
 
   describe('async/await detection', () => {
     function assertAwaitDetection(code: string, shouldAsync = true) {
-      const { content } = compile(`<script setup>${code}</script>`, {
-        reactivityTransform: true
-      })
+      const { content } = compile(`<script setup>${code}</script>`)
       if (shouldAsync) {
         expect(content).toMatch(`let __temp, __restore`)
       }
@@ -910,7 +765,7 @@ describe('SFC compile <script setup>', () => {
     })
 
     test('ref', () => {
-      assertAwaitDetection(`let a = $ref(1 + (await foo))`)
+      assertAwaitDetection(`let a = ref(1 + (await foo))`)
     })
 
     // #4448
@@ -999,7 +854,7 @@ describe('SFC compile <script setup>', () => {
       // class method
       assertAwaitDetection(
         `const cls = class Foo { async method() { await bar }}`,
-        false
+        false,
       )
     })
   })
@@ -1007,7 +862,7 @@ describe('SFC compile <script setup>', () => {
   describe('errors', () => {
     test('<script> and <script setup> must have same lang', () => {
       expect(() =>
-        compile(`<script>foo()</script><script setup lang="ts">bar()</script>`)
+        compile(`<script>foo()</script><script setup lang="ts">bar()</script>`),
       ).toThrow(`<script> and <script setup> must have the same language type`)
     })
 
@@ -1017,20 +872,20 @@ describe('SFC compile <script setup>', () => {
       expect(() =>
         compile(`<script setup>
         export const a = 1
-        </script>`)
+        </script>`),
       ).toThrow(moduleErrorMsg)
 
       expect(() =>
         compile(`<script setup>
         export * from './foo'
-        </script>`)
+        </script>`),
       ).toThrow(moduleErrorMsg)
 
       expect(() =>
         compile(`<script setup>
           const bar = 1
           export { bar as default }
-        </script>`)
+        </script>`),
       ).toThrow(moduleErrorMsg)
     })
 
@@ -1043,14 +898,14 @@ describe('SFC compile <script setup>', () => {
             default: () => bar
           }
         })
-        </script>`)
+        </script>`),
       ).toThrow(`cannot reference locally declared variables`)
 
       expect(() =>
         compile(`<script setup>
         let bar = 'hello'
         defineEmits([bar])
-        </script>`)
+        </script>`),
       ).toThrow(`cannot reference locally declared variables`)
 
       // #4644
@@ -1063,7 +918,7 @@ describe('SFC compile <script setup>', () => {
             default: () => bar
           }
         })
-        </script>`)
+        </script>`),
       ).not.toThrow(`cannot reference locally declared variables`)
     })
 
@@ -1079,7 +934,7 @@ describe('SFC compile <script setup>', () => {
           defineEmits({
             foo: bar => bar > 1
           })
-        </script>`).content
+        </script>`).content,
       )
     })
 
@@ -1095,9 +950,41 @@ describe('SFC compile <script setup>', () => {
         defineEmits({
           foo: () => bar > 1
         })
-        </script>`).content
+        </script>`).content,
       )
     })
+
+    test('defineModel() referencing local var', () => {
+      expect(() =>
+        compile(`<script setup>
+        let bar = 1
+        defineModel({
+          default: () => bar
+        })
+        </script>`),
+      ).toThrow(`cannot reference locally declared variables`)
+
+      // allow const
+      expect(() =>
+        compile(`<script setup>
+        const bar = 1
+        defineModel({
+          default: () => bar
+        })
+        </script>`),
+      ).not.toThrow(`cannot reference locally declared variables`)
+
+      // allow in get/set
+      expect(() =>
+        compile(`<script setup>
+        let bar = 1
+        defineModel({
+          get: () => bar,
+          set: () => bar
+        })
+        </script>`),
+      ).not.toThrow(`cannot reference locally declared variables`)
+    })
   })
 })
 
@@ -1129,7 +1016,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
-      bar: BindingTypes.PROPS
+      bar: BindingTypes.PROPS,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1153,7 +1040,7 @@ describe('SFC analyze <script> bindings', () => {
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
       baz: BindingTypes.PROPS,
-      qux: BindingTypes.PROPS
+      qux: BindingTypes.PROPS,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1174,7 +1061,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.SETUP_MAYBE_REF,
-      bar: BindingTypes.SETUP_MAYBE_REF
+      bar: BindingTypes.SETUP_MAYBE_REF,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1189,7 +1076,7 @@ describe('SFC analyze <script> bindings', () => {
       </script>
     `)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.LITERAL_CONST
+      foo: BindingTypes.LITERAL_CONST,
     })
   })
 
@@ -1209,7 +1096,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.SETUP_MAYBE_REF,
-      bar: BindingTypes.SETUP_MAYBE_REF
+      bar: BindingTypes.SETUP_MAYBE_REF,
     })
     expect(bindings!.__isScriptSetup).toBe(false)
   })
@@ -1230,7 +1117,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.DATA,
-      bar: BindingTypes.DATA
+      bar: BindingTypes.DATA,
     })
   })
 
@@ -1263,7 +1150,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.OPTIONS,
-      bar: BindingTypes.OPTIONS
+      bar: BindingTypes.OPTIONS,
     })
   })
 
@@ -1277,7 +1164,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.OPTIONS,
-      bar: BindingTypes.OPTIONS
+      bar: BindingTypes.OPTIONS,
     })
   })
 
@@ -1294,7 +1181,7 @@ describe('SFC analyze <script> bindings', () => {
     `)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.OPTIONS,
-      bar: BindingTypes.OPTIONS
+      bar: BindingTypes.OPTIONS,
     })
   })
 
@@ -1331,7 +1218,7 @@ describe('SFC analyze <script> bindings', () => {
       baz: BindingTypes.SETUP_MAYBE_REF,
       qux: BindingTypes.DATA,
       quux: BindingTypes.OPTIONS,
-      quuz: BindingTypes.OPTIONS
+      quuz: BindingTypes.OPTIONS,
     })
   })
 
@@ -1358,7 +1245,7 @@ describe('SFC analyze <script> bindings', () => {
       c: BindingTypes.LITERAL_CONST,
       d: BindingTypes.SETUP_MAYBE_REF,
       e: BindingTypes.SETUP_LET,
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -1369,8 +1256,8 @@ describe('SFC analyze <script> bindings', () => {
         <template>{{ a }}</template>`,
         undefined,
         {
-          filename: 'FooBar.vue'
-        }
+          filename: 'FooBar.vue',
+        },
       )
       expect(content).toMatch(`export default {
   __name: 'FooBar'`)
@@ -1388,8 +1275,8 @@ describe('SFC analyze <script> bindings', () => {
         <template>{{ a }}</template>`,
         undefined,
         {
-          filename: 'FooBar.vue'
-        }
+          filename: 'FooBar.vue',
+        },
       )
       expect(content).not.toMatch(`name: 'FooBar'`)
       expect(content).toMatch(`name: 'Baz'`)
@@ -1408,8 +1295,8 @@ describe('SFC analyze <script> bindings', () => {
         <template>{{ a }}</template>`,
         undefined,
         {
-          filename: 'FooBar.vue'
-        }
+          filename: 'FooBar.vue',
+        },
       )
       expect(content).not.toMatch(`name: 'FooBar'`)
       expect(content).toMatch(`name: 'Baz'`)
@@ -1425,8 +1312,8 @@ describe('SFC genDefaultAs', () => {
       export default {}
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(`const _sfc_ = {}`)
@@ -1442,8 +1329,8 @@ describe('SFC genDefaultAs', () => {
       .foo { color: v-bind(x) }
       </style>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).not.toMatch('__default__')
@@ -1460,12 +1347,12 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`
+      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`,
     )
     assertCode(content)
   })
@@ -1479,12 +1366,12 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`
+      `const _sfc_ = /*#__PURE__*/Object.assign(__default__`,
     )
     assertCode(content)
   })
@@ -1495,8 +1382,8 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(`const _sfc_ = {\n  setup`)
@@ -1509,8 +1396,8 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(`const _sfc_ = /*#__PURE__*/_defineComponent(`)
@@ -1526,12 +1413,12 @@ describe('SFC genDefaultAs', () => {
       const a = 1
       </script>`,
       {
-        genDefaultAs: '_sfc_'
-      }
+        genDefaultAs: '_sfc_',
+      },
     )
     expect(content).not.toMatch('export default')
     expect(content).toMatch(
-      `const _sfc_ = /*#__PURE__*/_defineComponent({\n  ...__default__`
+      `const _sfc_ = /*#__PURE__*/_defineComponent({\n  ...__default__`,
     )
     assertCode(content)
   })
@@ -1542,12 +1429,46 @@ describe('SFC genDefaultAs', () => {
       import { toRef } from 'vue'
       const props = defineProps<{foo: string}>()
       const foo = toRef(() => props.foo)
-      </script>`
+      </script>`,
     )
     expect(bindings).toStrictEqual({
       toRef: BindingTypes.SETUP_CONST,
       props: BindingTypes.SETUP_REACTIVE_CONST,
-      foo: BindingTypes.SETUP_REF
+      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__/compileScript/__snapshots__/defineEmits.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
index 1e851cbf4df..26444fd63d3 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineEmits.spec.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`defineEmits > basic usage 1`] = `
-"export default {
+"
+export default {
   emits: ['foo', 'bar'],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
@@ -35,7 +36,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 +53,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();
 
@@ -81,12 +82,30 @@ return { emit }
 })"
 `;
 
+exports[`defineEmits > w/ type (interface w/ extends) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Base { (e: 'foo'): void }
+    interface Emits extends Base { (e: 'bar'): void }
+    
+export default /*#__PURE__*/_defineComponent({
+  emits: ["bar", "foo"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+  __expose();
+
+    const emit = __emit
+    
+return { emit }
+}
+
+})"
+`;
+
 exports[`defineEmits > w/ type (interface) 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 interface Emits { (e: 'foo' | 'bar'): void }
     
 export default /*#__PURE__*/_defineComponent({
-  emits: [\\"foo\\", \\"bar\\"],
+  emits: ["foo", "bar"],
   setup(__props, { expose: __expose, emit: __emit }) {
   __expose();
 
@@ -102,7 +121,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();
 
@@ -118,7 +137,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();
 
@@ -135,7 +154,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();
 
@@ -152,7 +171,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();
 
@@ -169,7 +188,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();
 
@@ -185,7 +204,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();
 
@@ -199,11 +218,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();
 
@@ -219,7 +238,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();
 
@@ -235,7 +254,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();
 
@@ -253,7 +272,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__/defineExpose.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap
index d72726460bf..f8754f8a9af 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineExpose.spec.ts.snap
@@ -16,7 +16,8 @@ return { n, get x() { return x } }
 `;
 
 exports[`defineExpose() 1`] = `
-"export default {
+"
+export default {
   setup(__props, { expose: __expose }) {
 
 __expose({ foo: 123 })
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 fdfd3710efc..b6a93541d36 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap
@@ -5,56 +5,118 @@ exports[`defineModel() > basic usage 1`] = `
 
 export default {
   props: {
-    \\"modelValue\\": { required: true },
-    \\"count\\": {},
+    "modelValue": { required: true },
+    "modelModifiers": {},
+    "count": {},
+    "countModifiers": {},
+    "toString": { type: Function },
+    "toStringModifiers": {},
   },
-  emits: [\\"update:modelValue\\", \\"update:count\\"],
+  emits: ["update:modelValue", "update:count", "update:toString"],
   setup(__props, { expose: __expose }) {
   __expose();
 
-      const modelValue = _useModel(__props, \\"modelValue\\")
-      const c = _useModel(__props, \\"count\\")
+      const modelValue = _useModel(__props, "modelValue")
+      const c = _useModel(__props, 'count')
+      const toString = _useModel(__props, 'toString')
       
-return { modelValue, c }
+return { modelValue, c, toString }
 }
 
 }"
 `;
 
-exports[`defineModel() > w/ array props 1`] = `
-"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+exports[`defineModel() > get / set transformers 1`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
 
-export default {
-  props: _mergeModels(['foo', 'bar'], {
-    \\"count\\": {},
-  }),
-  emits: [\\"update:count\\"],
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    "modelValue": {
+        required: true
+      },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
   __expose();
 
+      const modelValue = _useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+        })
       
-      const count = _useModel(__props, \\"count\\")
+return { modelValue }
+}
+
+})"
+`;
+
+exports[`defineModel() > get / set transformers 2`] = `
+"import { useModel as _useModel, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    "modelValue": {
+        default: 0,
+        required: true,
+        },
+    "modelModifiers": {},
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      const modelValue = _useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+      })
       
-return { count }
+return { modelValue }
 }
 
-}"
+})"
 `;
 
-exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
+exports[`defineModel() > usage w/ props destructure 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  props: /*#__PURE__*/_mergeModels({
+    x: { type: Number, required: true }
+  }, {
+    "modelValue": {
+        },
+    "modelModifiers": {},
+  }),
+  emits: ["update:modelValue"],
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      
+      const modelValue = _useModel(__props, "modelValue", {
+        set: (v) => { return v + __props.x }
+      })
+      
+return { modelValue }
+}
+
+})"
+`;
+
+exports[`defineModel() > w/ array props 1`] = `
 "import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
 
 export default {
-  props: _mergeModels({ foo: String }, {
-    \\"modelValue\\": { default: 0 },
+  props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
+    "count": {},
+    "countModifiers": {},
   }),
-  emits: _mergeModels(['change'], [\\"update:modelValue\\"]),
+  emits: ["update:count"],
   setup(__props, { expose: __expose }) {
   __expose();
 
       
-      
-      const count = _useModel(__props, \\"modelValue\\")
+      const count = _useModel(__props, 'count')
       
 return { count }
 }
@@ -62,33 +124,23 @@ return { count }
 }"
 `;
 
-exports[`defineModel() > w/ local flag 1`] = `
-"import { useModel as _useModel } from 'vue'
-const local = true
-      
+exports[`defineModel() > w/ defineProps and defineEmits 1`] = `
+"import { useModel as _useModel, mergeModels as _mergeModels } from 'vue'
+
 export default {
-  props: {
-    \\"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\\"],
+  props: /*#__PURE__*/_mergeModels({ foo: String }, {
+    "modelValue": { default: 0 },
+    "modelModifiers": {},
+  }),
+  emits: /*#__PURE__*/_mergeModels(['change'], ["update:modelValue"]),
   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 foo2 = _useModel(__props, \\"foo2\\", { local: true })
-
-      const hoist = _useModel(__props, \\"hoist\\", { local })
       
-return { foo, bar, baz, qux, foo2, local, hoist }
+      
+      const count = _useModel(__props, "modelValue")
+      
+return { count }
 }
 
 }"
@@ -99,19 +151,23 @@ 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] },
+    "modelModifiers": {},
+    "count": { type: Number },
+    "countModifiers": {},
+    "disabled": { type: Number, ...{ required: false } },
+    "disabledModifiers": {},
+    "any": { type: Boolean, skipCheck: true },
+    "anyModifiers": {},
   },
-  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<boolean | string>(__props, "modelValue")
+      const count = _useModel<number>(__props, 'count')
+      const disabled = _useModel<number>(__props, 'disabled')
+      const any = _useModel<any | boolean>(__props, 'any')
       
 return { modelValue, count, disabled, any }
 }
@@ -124,21 +180,26 @@ 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 },
+    "modelModifiers": {},
+    "fn": {},
+    "fnModifiers": {},
+    "fnWithDefault": { type: Function, ...{ default: () => null } },
+    "fnWithDefaultModifiers": {},
+    "str": {},
+    "strModifiers": {},
+    "optional": { required: false },
+    "optionalModifiers": {},
   },
-  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<boolean>(__props, "modelValue")
+      const fn = _useModel<() => void>(__props, 'fn')
+      const fnWithDefault = _useModel<() => void>(__props, 'fnWithDefault')
+      const str = _useModel<string>(__props, 'str')
+      const optional = _useModel<string>(__props, 'optional')
       
 return { modelValue, fn, fnWithDefault, str, optional }
 }
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
index 47f3cef0ae1..9cb168be161 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineOptions.spec.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`defineOptions() > basic usage 1`] = `
-"export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
+"
+export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, {
   setup(__props, { expose: __expose }) {
   __expose();
 
@@ -14,7 +15,8 @@ return {  }
 `;
 
 exports[`defineOptions() > empty argument 1`] = `
-"export default {
+"
+export default {
   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 30e00e518b2..ce5eaed18fd 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineProps.spec.ts.snap
@@ -18,6 +18,47 @@ return { props, bar }
 }"
 `;
 
+exports[`defineProps > custom element retains the props type & default value & production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Props { 
+          foo?: number;
+      }
+      
+export default /*#__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: { default: 5.5, type: Number }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props;
+      
+return { props }
+}
+
+})"
+`;
+
+exports[`defineProps > custom element retains the props type & production mode 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+export default /*#__PURE__*/_defineComponent({
+  __name: 'app.ce',
+  props: {
+    foo: {type: Number}
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+      const props = __props
+      
+return { props }
+}
+
+})"
+`;
+
 exports[`defineProps > defineProps w/ runtime options 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 
@@ -46,6 +87,51 @@ export default /*#__PURE__*/_defineComponent({
 
       const { foo } = __props
       
+return {  }
+}
+
+})"
+`;
+
+exports[`defineProps > should escape names w/ special symbols 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+
+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 }
+  },
+  setup(__props: any, { expose: __expose }) {
+  __expose();
+
+    
+    
 return {  }
 }
 
@@ -232,6 +318,7 @@ export default /*#__PURE__*/_defineComponent({
     alias: { type: Array, required: true },
     method: { type: Function, required: true },
     symbol: { type: Symbol, required: true },
+    error: { type: Error, required: true },
     extract: { type: Number, required: true },
     exclude: { type: [Number, Boolean], required: true },
     uppercase: { type: String, required: true },
@@ -286,7 +373,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 }
@@ -307,7 +394,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] },
@@ -329,7 +416,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 }
@@ -354,7 +441,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();
@@ -416,7 +503,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..8b5325cc3c5 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 {
@@ -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,9 +101,9 @@ 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'
+  "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) {
 
@@ -177,7 +177,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > defineProps/defineEmits in multi-variable declaration (full removal) 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   emits: ['a'],
   setup(__props, { emit: __emit }) {
@@ -192,7 +193,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multi-variable declaration 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   setup(__props) {
 
@@ -205,7 +207,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multi-variable declaration fix #6757  1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   setup(__props) {
 
@@ -218,7 +221,8 @@ return () => {}
 `;
 
 exports[`sfc reactive props destructure > multi-variable declaration fix #7422 1`] = `
-"export default {
+"
+export default {
   props: ['item'],
   setup(__props) {
 
@@ -232,7 +236,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 +246,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 */))
 }
 }
 
@@ -250,7 +254,8 @@ return (_ctx, _cache) => {
 `;
 
 exports[`sfc reactive props destructure > nested scope 1`] = `
-"export default {
+"
+export default {
   props: ['foo', 'bar'],
   setup(__props) {
 
@@ -267,7 +272,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 +280,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 +297,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__/compileScript/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
index 307b3e212fe..5ab70d9b6c6 100644
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/hoistStatic.spec.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`sfc hoist static > should enable when only script setup 1`] = `
-"const foo = 'bar'
+"
+    const foo = 'bar'
     
 export default {
   setup(__props) {
@@ -91,7 +92,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist a function or class 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     const fn = () => {}
@@ -105,7 +107,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist a object or array 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     const obj = { foo: 'bar' }
@@ -118,7 +121,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist a variable 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     let KEY1 = 'default value'
@@ -133,7 +137,8 @@ return () => {}
 `;
 
 exports[`sfc hoist static > should not hoist when disabled 1`] = `
-"export default {
+"
+export default {
   setup(__props) {
 
     const foo = 'bar'
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
new file mode 100644
index 00000000000..cfdbf5f45c2
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
@@ -0,0 +1,215 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TS annotations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz, Qux, Fred } from './x'
+    const a = 1
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    function b() {}
+    
+return { a, b, get Baz() { return Baz } }
+}
+
+})"
+`;
+
+exports[`attribute expressions 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { bar, baz } from './x'
+    const cond = true
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { cond, get bar() { return bar }, get baz() { return baz } }
+}
+
+})"
+`;
+
+exports[`components 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, FooBaz, FooQux, foo } from './x'
+    const fooBar: FooBar = 1
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { fooBar, get FooBaz() { return FooBaz }, get FooQux() { return FooQux }, get foo() { return foo } }
+}
+
+})"
+`;
+
+exports[`directive 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { vMyDir } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get vMyDir() { return vMyDir } }
+}
+
+})"
+`;
+
+exports[`dynamic arguments 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, foo, bar, unused, baz } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
+}
+
+})"
+`;
+
+exports[`import namespace 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import * as Foo from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`js template string interpolations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { VAR, VAR2, VAR3 } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get VAR() { return VAR }, get VAR3() { return VAR3 } }
+}
+
+})"
+`;
+
+exports[`last tag 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBaz, Last } from './x'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+    
+return { get FooBaz() { return FooBaz }, get Last() { return Last } }
+}
+
+})"
+`;
+
+exports[`namespace / dot component usage 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import * as Foo from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`property access (whitespace) 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`property access 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`spread operator 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { Foo, Bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get Foo() { return Foo } }
+}
+
+})"
+`;
+
+exports[`template ref 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { foo, bar, Baz } from './foo'
+    
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+      
+return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }
+}
+
+})"
+`;
+
+exports[`vue interpolations 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { x, y, z, x$y } from './x'
+  
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+  
+return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }
+}
+
+})"
+`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/reactivityTransform.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/reactivityTransform.spec.ts.snap
deleted file mode 100644
index e20640d8abb..00000000000
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/reactivityTransform.spec.ts.snap
+++ /dev/null
@@ -1,113 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`sfc ref transform > $ unwrapping 1`] = `
-"import { ref, shallowRef } from 'vue'
-    
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    let foo = (ref())
-    let a = (ref(1))
-    let b = (shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    
-return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v }, ref, shallowRef }
-}
-
-}"
-`;
-
-exports[`sfc ref transform > $ref & $shallowRef declarations 1`] = `
-"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
-
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    let foo = _ref()
-    let a = _ref(1)
-    let b = _shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    
-return { foo, a, b, get c() { return c }, set c(v) { c = v }, get d() { return d }, set d(v) { d = v } }
-}
-
-}"
-`;
-
-exports[`sfc ref transform > usage /w typescript 1`] = `
-"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
-
-export default /*#__PURE__*/_defineComponent({
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-        let msg = _ref<string | number>('foo');
-        let bar = _ref <string | number>('bar');
-      
-return { msg, bar }
-}
-
-})"
-`;
-
-exports[`sfc ref transform > usage in normal <script> 1`] = `
-"import { ref as _ref } from 'vue'
-
-    export default {
-      setup() {
-        let count = _ref(0)
-        const inc = () => count.value++
-        return ({ count })
-      }
-    }
-    "
-`;
-
-exports[`sfc ref transform > usage with normal <script> (has macro usage) + <script setup> (no macro usage) 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let data = _ref()
-    
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    console.log(data.value)
-    
-return { data }
-}
-
-}"
-`;
-
-exports[`sfc ref transform > usage with normal <script> + <script setup> 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(0)
-    let c = _ref(0)
-    
-export default {
-  setup(__props, { expose: __expose }) {
-  __expose();
-
-    let b = _ref(0)
-    let c = 0
-    function change() {
-      a.value++
-      b.value++
-      c++
-    }
-    
-return { a, c, b, change }
-}
-
-}"
-`;
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
index 13b981db3d7..55bc4216272 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineEmits.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineEmits', () => {
   test('basic usage', () => {
@@ -10,13 +10,13 @@ const myEmit = defineEmits(['foo', 'bar'])
   `)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      myEmit: BindingTypes.SETUP_CONST
+      myEmit: BindingTypes.SETUP_CONST,
     })
     // should remove defineEmits import and call
     expect(content).not.toMatch('defineEmits')
     // should generate correct setup signature
     expect(content).toMatch(
-      `setup(__props, { expose: __expose, emit: __emit }) {`
+      `setup(__props, { expose: __expose, emit: __emit }) {`,
     )
     expect(content).toMatch('const myEmit = __emit')
     // should include context options in default export
@@ -80,6 +80,18 @@ const emit = defineEmits(['a', 'b'])
     expect(content).toMatch(`emits: ["foo", "bar"]`)
   })
 
+  test('w/ type (interface w/ extends)', () => {
+    const { content } = compile(`
+    <script setup lang="ts">
+    interface Base { (e: 'foo'): void }
+    interface Emits extends Base { (e: 'bar'): void }
+    const emit = defineEmits<Emits>()
+    </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch(`emits: ["bar", "foo"]`)
+  })
+
   test('w/ type (exported interface)', () => {
     const { content } = compile(`
     <script setup lang="ts">
@@ -214,9 +226,9 @@ const emit = defineEmits(['a', 'b'])
           foo: []
           (e: 'hi'): void
         }>()
-        </script>`)
+        </script>`),
       ).toThrow(
-        `defineEmits() type cannot mixed call signature and property syntax.`
+        `defineEmits() type cannot mixed call signature and property syntax.`,
       )
     })
   })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts
index 8ddd28a89e6..7b2a9f7cbe4 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineExpose.spec.ts
@@ -1,4 +1,4 @@
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 test('defineExpose()', () => {
   const { content } = compile(`
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
index 61a9adcbe0d..304258615a8 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineModel()', () => {
   test('basic usage', () => {
@@ -8,26 +8,31 @@ describe('defineModel()', () => {
       <script setup>
       const modelValue = defineModel({ required: true })
       const c = defineModel('count')
+      const toString = defineModel('toString', { type: Function })
       </script>
       `,
-      { defineModel: true }
     )
     assertCode(content)
     expect(content).toMatch('props: {')
     expect(content).toMatch('"modelValue": { required: true },')
     expect(content).toMatch('"count": {},')
-    expect(content).toMatch('emits: ["update:modelValue", "update:count"],')
+    expect(content).toMatch('"toString": { type: Function },')
     expect(content).toMatch(
-      `const modelValue = _useModel(__props, "modelValue")`
+      'emits: ["update:modelValue", "update:count", "update:toString"],',
     )
-    expect(content).toMatch(`const c = _useModel(__props, "count")`)
-    expect(content).toMatch(`return { modelValue, c }`)
+    expect(content).toMatch(
+      `const modelValue = _useModel(__props, "modelValue")`,
+    )
+    expect(content).toMatch(`const c = _useModel(__props, 'count')`)
+    expect(content).toMatch(`const toString = _useModel(__props, 'toString')`)
+    expect(content).toMatch(`return { modelValue, c, toString }`)
     expect(content).not.toMatch('defineModel')
 
     expect(bindings).toStrictEqual({
       modelValue: BindingTypes.SETUP_REF,
       count: BindingTypes.PROPS,
-      c: BindingTypes.SETUP_REF
+      c: BindingTypes.SETUP_REF,
+      toString: BindingTypes.SETUP_REF,
     })
   })
 
@@ -40,17 +45,16 @@ describe('defineModel()', () => {
       const count = defineModel({ default: 0 })
       </script>
     `,
-      { 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')
     expect(bindings).toStrictEqual({
       count: BindingTypes.SETUP_REF,
       foo: BindingTypes.PROPS,
-      modelValue: BindingTypes.PROPS
+      modelValue: BindingTypes.PROPS,
     })
   })
 
@@ -62,45 +66,21 @@ describe('defineModel()', () => {
       const count = defineModel('count')
       </script>
     `,
-      { defineModel: true }
     )
     assertCode(content)
-    expect(content).toMatch(`props: _mergeModels(['foo', 'bar'], {
+    expect(content).toMatch(`props: /*#__PURE__*/_mergeModels(['foo', 'bar'], {
     "count": {},
+    "countModifiers": {},
   })`)
-    expect(content).toMatch(`const count = _useModel(__props, "count")`)
+    expect(content).toMatch(`const count = _useModel(__props, 'count')`)
     expect(content).not.toMatch('defineModel')
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
-      count: BindingTypes.SETUP_REF
+      count: BindingTypes.SETUP_REF,
     })
   })
 
-  test('w/ local flag', () => {
-    const { content } = compile(
-      `<script setup>
-      const foo = defineModel({ local: true, default: 1 })
-      const bar = defineModel('bar', { [key]: true })
-      const baz = defineModel('baz', { ...x })
-      const qux = defineModel('qux', x)
-
-      const foo2 = defineModel('foo2', { local: true, ...x })
-
-      const local = true
-      const hoist = defineModel('hoist', { local })
-      </script>`,
-      { defineModel: true }
-    )
-    assertCode(content)
-    expect(content).toMatch(`_useModel(__props, "modelValue", { local: true })`)
-    expect(content).toMatch(`_useModel(__props, "bar", { [key]: true })`)
-    expect(content).toMatch(`_useModel(__props, "baz", { ...x })`)
-    expect(content).toMatch(`_useModel(__props, "qux", x)`)
-    expect(content).toMatch(`_useModel(__props, "foo2", { local: true })`)
-    expect(content).toMatch(`_useModel(__props, "hoist", { local })`)
-  })
-
   test('w/ types, basic usage', () => {
     const { content, bindings } = compile(
       `
@@ -111,31 +91,35 @@ describe('defineModel()', () => {
       const any = defineModel<any | boolean>('any')
       </script>
       `,
-      { defineModel: true }
     )
     assertCode(content)
     expect(content).toMatch('"modelValue": { type: [Boolean, String] }')
+    expect(content).toMatch('"modelModifiers": {}')
     expect(content).toMatch('"count": { type: Number }')
     expect(content).toMatch(
-      '"disabled": { type: Number, ...{ required: false } }'
+      '"disabled": { type: Number, ...{ required: false } }',
     )
     expect(content).toMatch('"any": { type: Boolean, skipCheck: true }')
     expect(content).toMatch(
-      'emits: ["update:modelValue", "update:count", "update:disabled", "update:any"]'
+      'emits: ["update:modelValue", "update:count", "update:disabled", "update:any"]',
     )
 
     expect(content).toMatch(
-      `const modelValue = _useModel(__props, "modelValue")`
+      `const modelValue = _useModel<boolean | string>(__props, "modelValue")`,
+    )
+    expect(content).toMatch(`const count = _useModel<number>(__props, 'count')`)
+    expect(content).toMatch(
+      `const disabled = _useModel<number>(__props, 'disabled')`,
+    )
+    expect(content).toMatch(
+      `const any = _useModel<any | boolean>(__props, 'any')`,
     )
-    expect(content).toMatch(`const count = _useModel(__props, "count")`)
-    expect(content).toMatch(`const disabled = _useModel(__props, "disabled")`)
-    expect(content).toMatch(`const any = _useModel(__props, "any")`)
 
     expect(bindings).toStrictEqual({
       modelValue: BindingTypes.SETUP_REF,
       count: BindingTypes.SETUP_REF,
       disabled: BindingTypes.SETUP_REF,
-      any: BindingTypes.SETUP_REF
+      any: BindingTypes.SETUP_REF,
     })
   })
 
@@ -150,30 +134,91 @@ describe('defineModel()', () => {
       const optional = defineModel<string>('optional', { required: false })
       </script>
       `,
-      { defineModel: true, isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     expect(content).toMatch('"modelValue": { type: Boolean }')
     expect(content).toMatch('"fn": {}')
     expect(content).toMatch(
-      '"fnWithDefault": { type: Function, ...{ default: () => null } },'
+      '"fnWithDefault": { type: Function, ...{ default: () => null } },',
     )
     expect(content).toMatch('"str": {}')
     expect(content).toMatch('"optional": { required: false }')
     expect(content).toMatch(
-      'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]'
+      'emits: ["update:modelValue", "update:fn", "update:fnWithDefault", "update:str", "update:optional"]',
     )
     expect(content).toMatch(
-      `const modelValue = _useModel(__props, "modelValue")`
+      `const modelValue = _useModel<boolean>(__props, "modelValue")`,
     )
-    expect(content).toMatch(`const fn = _useModel(__props, "fn")`)
-    expect(content).toMatch(`const str = _useModel(__props, "str")`)
+    expect(content).toMatch(`const fn = _useModel<() => void>(__props, 'fn')`)
+    expect(content).toMatch(`const str = _useModel<string>(__props, 'str')`)
     expect(bindings).toStrictEqual({
       modelValue: BindingTypes.SETUP_REF,
       fn: BindingTypes.SETUP_REF,
       fnWithDefault: BindingTypes.SETUP_REF,
       str: BindingTypes.SETUP_REF,
-      optional: BindingTypes.SETUP_REF
+      optional: BindingTypes.SETUP_REF,
     })
   })
+
+  test('get / set transformers', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel({
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+        required: true
+      })
+      </script>
+      `,
+    )
+    assertCode(content)
+    expect(content).toMatch(/"modelValue": {\s+required: true,?\s+}/m)
+    expect(content).toMatch(
+      `_useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+        })`,
+    )
+
+    const { content: content2 } = compile(
+      `
+      <script setup lang="ts">
+      const modelValue = defineModel({
+        default: 0,
+        get(v) { return v - 1 },
+        required: true,
+        set: (v) => { return v + 1 },
+      })
+      </script>
+      `,
+    )
+    assertCode(content2)
+    expect(content2).toMatch(
+      /"modelValue": {\s+default: 0,\s+required: true,?\s+}/m,
+    )
+    expect(content2).toMatch(
+      `_useModel(__props, "modelValue", {
+        get(v) { return v - 1 },
+        set: (v) => { return v + 1 },
+      })`,
+    )
+  })
+
+  test('usage w/ props destructure', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+      const { x } = defineProps<{ x: number }>()
+      const modelValue = defineModel({
+        set: (v) => { return v + x }
+      })
+      </script>
+      `,
+      { propsDestructure: true },
+    )
+    assertCode(content)
+    expect(content).toMatch(`set: (v) => { return v + __props.x }`)
+  })
 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
index e4f50be38f7..dac9ef64188 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineOptions.spec.ts
@@ -1,4 +1,4 @@
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineOptions()', () => {
   test('basic usage', () => {
@@ -12,7 +12,7 @@ describe('defineOptions()', () => {
     expect(content).not.toMatch('defineOptions')
     // should include context options in default export
     expect(content).toMatch(
-      `export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, `
+      `export default /*#__PURE__*/Object.assign({ name: 'FooApp' }, `,
     )
   })
 
@@ -35,7 +35,7 @@ describe('defineOptions()', () => {
       defineOptions({ name: 'FooApp' })
       defineOptions({ name: 'BarApp' })
       </script>
-      `)
+      `),
     ).toThrowError('[@vue/compiler-sfc] duplicate defineOptions() call')
   })
 
@@ -45,9 +45,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ props: { foo: String } })
       </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.',
     )
 
     expect(() =>
@@ -55,9 +55,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ emits: ['update'] })
       </script>
-    `)
+    `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead.',
     )
 
     expect(() =>
@@ -65,9 +65,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ expose: ['foo'] })
       </script>
-    `)
+    `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead.',
     )
 
     expect(() =>
@@ -75,9 +75,9 @@ describe('defineOptions()', () => {
       <script setup>
       defineOptions({ slots: ['foo'] })
       </script>
-    `)
+    `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead.',
     )
   })
 
@@ -87,9 +87,9 @@ describe('defineOptions()', () => {
       <script setup lang="ts">
       defineOptions<{ name: 'FooApp' }>()
       </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot accept type arguments'
+      '[@vue/compiler-sfc] defineOptions() cannot accept type arguments',
     )
   })
 
@@ -99,9 +99,9 @@ describe('defineOptions()', () => {
       <script setup lang="ts">
       defineOptions({ props: [] } as any)
       </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead.',
     )
   })
 
@@ -111,9 +111,9 @@ describe('defineOptions()', () => {
         <script setup>
         defineOptions({ props: ['foo'] })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare props. Use defineProps() instead',
     )
 
     expect(() =>
@@ -121,9 +121,9 @@ describe('defineOptions()', () => {
         <script setup>
         defineOptions({ emits: ['update'] })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare emits. Use defineEmits() instead',
     )
 
     expect(() =>
@@ -131,9 +131,9 @@ describe('defineOptions()', () => {
         <script setup>
         defineOptions({ expose: ['foo'] })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare expose. Use defineExpose() instead',
     )
 
     expect(() =>
@@ -141,9 +141,9 @@ describe('defineOptions()', () => {
         <script setup lang="ts">
         defineOptions({ slots: Object })
         </script>
-      `)
+      `),
     ).toThrowError(
-      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead'
+      '[@vue/compiler-sfc] defineOptions() cannot be used to declare slots. Use defineSlots() instead',
     )
   })
 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
index 43f54b0aa1e..c139a3d7b73 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineProps.spec.ts
@@ -1,5 +1,5 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineProps', () => {
   test('basic usage', () => {
@@ -17,7 +17,7 @@ const bar = 1
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.LITERAL_CONST,
-      props: BindingTypes.SETUP_REACTIVE_CONST
+      props: BindingTypes.SETUP_REACTIVE_CONST,
     })
 
     // should remove defineOptions import and call
@@ -97,6 +97,7 @@ const props = defineProps({ foo: String })
       alias: Alias
       method(): void
       symbol: symbol
+      error: Error
       extract: Extract<1 | 2 | boolean, 2>
       exclude: Exclude<1 | 2 | boolean, 2>
       uppercase: Uppercase<'foo'>
@@ -143,12 +144,13 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`alias: { type: Array, required: true }`)
     expect(content).toMatch(`method: { type: Function, required: true }`)
     expect(content).toMatch(`symbol: { type: Symbol, required: true }`)
+    expect(content).toMatch(`error: { type: Error, required: true }`)
     expect(content).toMatch(
-      `objectOrFn: { type: [Function, Object], required: true },`
+      `objectOrFn: { type: [Function, Object], required: true },`,
     )
     expect(content).toMatch(`extract: { type: Number, required: true }`)
     expect(content).toMatch(
-      `exclude: { type: [Number, Boolean], required: true }`
+      `exclude: { type: [Number, Boolean], required: true }`,
     )
     expect(content).toMatch(`uppercase: { type: String, required: true }`)
     expect(content).toMatch(`params: { type: Array, required: true }`)
@@ -156,10 +158,10 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`union: { type: [String, Number], required: true }`)
     expect(content).toMatch(`literalUnion: { type: String, required: true }`)
     expect(content).toMatch(
-      `literalUnionNumber: { type: Number, required: true }`
+      `literalUnionNumber: { type: Number, required: true }`,
     )
     expect(content).toMatch(
-      `literalUnionMixed: { type: [String, Number, Boolean], required: true }`
+      `literalUnionMixed: { type: [String, Number, Boolean], required: true }`,
     )
     expect(content).toMatch(`intersection: { type: Object, required: true }`)
     expect(content).toMatch(`intersection2: { type: String, required: true }`)
@@ -169,13 +171,13 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`unknownUnion: { type: null, required: true }`)
     // intersection containing unknown type: narrow to the known types
     expect(content).toMatch(
-      `unknownIntersection: { type: Object, required: true },`
+      `unknownIntersection: { type: Object, required: true },`,
     )
     expect(content).toMatch(
-      `unknownUnionWithBoolean: { type: Boolean, required: true, skipCheck: true },`
+      `unknownUnionWithBoolean: { type: Boolean, required: true, skipCheck: true },`,
     )
     expect(content).toMatch(
-      `unknownUnionWithFunction: { type: Function, required: true, skipCheck: true }`
+      `unknownUnionWithFunction: { type: Function, required: true, skipCheck: true }`,
     )
     expect(bindings).toStrictEqual({
       string: BindingTypes.PROPS,
@@ -198,6 +200,7 @@ const props = defineProps({ foo: String })
       alias: BindingTypes.PROPS,
       method: BindingTypes.PROPS,
       symbol: BindingTypes.PROPS,
+      error: BindingTypes.PROPS,
       objectOrFn: BindingTypes.PROPS,
       extract: BindingTypes.PROPS,
       exclude: BindingTypes.PROPS,
@@ -215,7 +218,7 @@ const props = defineProps({ foo: String })
       unknownUnion: BindingTypes.PROPS,
       unknownIntersection: BindingTypes.PROPS,
       unknownUnionWithBoolean: BindingTypes.PROPS,
-      unknownUnionWithFunction: BindingTypes.PROPS
+      unknownUnionWithFunction: BindingTypes.PROPS,
     })
   })
 
@@ -229,7 +232,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -254,7 +257,7 @@ const props = defineProps({ foo: String })
     expect(bindings).toStrictEqual({
       x: BindingTypes.PROPS,
       y: BindingTypes.PROPS,
-      z: BindingTypes.PROPS
+      z: BindingTypes.PROPS,
     })
   })
 
@@ -268,7 +271,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -284,7 +287,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -298,7 +301,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -312,7 +315,7 @@ const props = defineProps({ foo: String })
     assertCode(content)
     expect(content).toMatch(`x: { type: Number, required: false }`)
     expect(bindings).toStrictEqual({
-      x: BindingTypes.PROPS
+      x: BindingTypes.PROPS,
     })
   })
 
@@ -325,7 +328,7 @@ const props = defineProps({ foo: String })
     expect(content).toMatch(`props: ['foo']`)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -351,21 +354,21 @@ const props = defineProps({ foo: String })
     `)
     assertCode(content)
     expect(content).toMatch(
-      `foo: { type: String, required: false, default: 'hi' }`
+      `foo: { type: String, required: false, default: 'hi' }`,
     )
     expect(content).toMatch(`bar: { type: Number, required: false }`)
     expect(content).toMatch(`baz: { type: Boolean, required: true }`)
     expect(content).toMatch(
-      `qux: { type: Function, required: false, default() { return 1 } }`
+      `qux: { type: Function, required: false, default() { return 1 } }`,
     )
     expect(content).toMatch(
-      `quux: { type: Function, required: false, default() { } }`
+      `quux: { type: Function, required: false, default() { } }`,
     )
     expect(content).toMatch(
-      `quuxx: { type: Promise, required: false, async default() { return await Promise.resolve('hi') } }`
+      `quuxx: { type: Promise, required: false, async default() { return await Promise.resolve('hi') } }`,
     )
     expect(content).toMatch(
-      `fred: { type: String, required: false, get default() { return 'fred' } }`
+      `fred: { type: String, required: false, get default() { return 'fred' } }`,
     )
     expect(content).toMatch(`const props = __props`)
     expect(bindings).toStrictEqual({
@@ -376,7 +379,7 @@ const props = defineProps({ foo: String })
       quux: BindingTypes.PROPS,
       quuxx: BindingTypes.PROPS,
       fred: BindingTypes.PROPS,
-      props: BindingTypes.SETUP_CONST
+      props: BindingTypes.SETUP_CONST,
     })
   })
 
@@ -412,7 +415,7 @@ const props = defineProps({ foo: String })
     })
     </script>
     `,
-      { isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     expect(content).toMatch(`const props = __props`)
@@ -443,7 +446,7 @@ const props = defineProps({ foo: String })
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
-  }, { ...defaults })`.trim()
+  }, { ...defaults })`.trim(),
     )
   })
 
@@ -466,7 +469,7 @@ const props = defineProps({ foo: String })
     foo: { type: String, required: false },
     bar: { type: Number, required: false },
     baz: { type: Boolean, required: true }
-  }, defaults)`.trim()
+  }, defaults)`.trim(),
     )
   })
 
@@ -484,7 +487,7 @@ const props = defineProps({ foo: String })
     }>(), { ...defaults })
     </script>
     `,
-      { isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     expect(content).toMatch(`import { mergeDefaults as _mergeDefaults`)
@@ -495,7 +498,7 @@ const props = defineProps({ foo: String })
     bar: { type: Boolean },
     baz: { type: [Boolean, Function] },
     qux: {}
-  }, { ...defaults })`.trim()
+  }, { ...defaults })`.trim(),
     )
   })
 
@@ -517,7 +520,7 @@ const props = defineProps({ foo: String })
     foo: { type: Function, required: false }
   }, {
       ['fo' + 'o']() { return 'foo' }
-    })`.trim()
+    })`.trim(),
     )
   })
 
@@ -530,8 +533,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: Number`)
 
     expect(
@@ -542,8 +545,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: String`)
 
     expect(
@@ -554,8 +557,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: [String, Number]`)
 
     expect(
@@ -566,8 +569,8 @@ const props = defineProps({ foo: String })
         foo: Foo
       }>()
       </script>`,
-        { hoistStatic: true }
-      ).content
+        { hoistStatic: true },
+      ).content,
     ).toMatch(`foo: { type: Number`)
   })
 
@@ -582,7 +585,7 @@ const props = defineProps({ foo: String })
   `)
     expect(bindings).toStrictEqual({
       bar: BindingTypes.SETUP_REF,
-      computed: BindingTypes.SETUP_CONST
+      computed: BindingTypes.SETUP_CONST,
     })
   })
 
@@ -593,7 +596,7 @@ const props = defineProps({ foo: String })
       const { foo } = defineProps<{
         foo: Foo
       }>()
-      </script>`
+      </script>`,
     )
     expect(content).toMatch(`const { foo } = __props`)
     assertCode(content)
@@ -608,4 +611,134 @@ const props = defineProps({ foo: String })
       }).toThrow(`cannot accept both type and non-type arguments`)
     })
   })
+
+  test('should escape names w/ special symbols', () => {
+    const { content, bindings } = compile(`
+    <script setup lang="ts">
+    defineProps<{
+      'spa ce': unknown
+      'exclamation!mark': unknown
+      'double"quote': unknown
+      'hash#tag': unknown
+      'dollar$sign': unknown
+      'percentage%sign': unknown
+      'amper&sand': unknown
+      "single'quote": unknown
+      'round(brack)ets': unknown
+      'aste*risk': unknown
+      'pl+us': unknown
+      'com,ma': unknown
+      'do.t': unknown
+      'sla/sh': unknown
+      'co:lon': unknown
+      'semi;colon': unknown
+      'angle<brack>ets': unknown
+      'equal=sign': unknown
+      'question?mark': unknown
+      'at@sign': unknown
+      'square[brack]ets': unknown
+      'back\\\\slash': unknown
+      'ca^ret': unknown
+      'back\`tick': unknown
+      'curly{bra}ces': unknown
+      'pi|pe': unknown
+      'til~de': unknown
+      'da-sh': unknown
+    }>()
+    </script>`)
+    assertCode(content)
+    expect(content).toMatch(`"spa ce": { type: null, required: true }`)
+    expect(content).toMatch(
+      `"exclamation!mark": { type: null, required: true }`,
+    )
+    expect(content).toMatch(`"double\\"quote": { type: null, required: true }`)
+    expect(content).toMatch(`"hash#tag": { type: null, required: true }`)
+    expect(content).toMatch(`"dollar$sign": { type: null, required: true }`)
+    expect(content).toMatch(`"percentage%sign": { type: null, required: true }`)
+    expect(content).toMatch(`"amper&sand": { type: null, required: true }`)
+    expect(content).toMatch(`"single'quote": { type: null, required: true }`)
+    expect(content).toMatch(`"round(brack)ets": { type: null, required: true }`)
+    expect(content).toMatch(`"aste*risk": { type: null, required: true }`)
+    expect(content).toMatch(`"pl+us": { type: null, required: true }`)
+    expect(content).toMatch(`"com,ma": { type: null, required: true }`)
+    expect(content).toMatch(`"do.t": { type: null, required: true }`)
+    expect(content).toMatch(`"sla/sh": { type: null, required: true }`)
+    expect(content).toMatch(`"co:lon": { type: null, required: true }`)
+    expect(content).toMatch(`"semi;colon": { type: null, required: true }`)
+    expect(content).toMatch(`"angle<brack>ets": { type: null, required: true }`)
+    expect(content).toMatch(`"equal=sign": { type: null, required: true }`)
+    expect(content).toMatch(`"question?mark": { type: null, required: true }`)
+    expect(content).toMatch(`"at@sign": { type: null, required: true }`)
+    expect(content).toMatch(
+      `"square[brack]ets": { type: null, required: true }`,
+    )
+    expect(content).toMatch(`"back\\\\slash": { type: null, required: true }`)
+    expect(content).toMatch(`"ca^ret": { type: null, required: true }`)
+    expect(content).toMatch(`"back\`tick": { type: null, required: true }`)
+    expect(content).toMatch(`"curly{bra}ces": { type: null, required: true }`)
+    expect(content).toMatch(`"pi|pe": { type: null, required: true }`)
+    expect(content).toMatch(`"til~de": { type: null, required: true }`)
+    expect(content).toMatch(`"da-sh": { type: null, required: true }`)
+    expect(bindings).toStrictEqual({
+      'spa ce': BindingTypes.PROPS,
+      'exclamation!mark': BindingTypes.PROPS,
+      'double"quote': BindingTypes.PROPS,
+      'hash#tag': BindingTypes.PROPS,
+      dollar$sign: BindingTypes.PROPS,
+      'percentage%sign': BindingTypes.PROPS,
+      'amper&sand': BindingTypes.PROPS,
+      "single'quote": BindingTypes.PROPS,
+      'round(brack)ets': BindingTypes.PROPS,
+      'aste*risk': BindingTypes.PROPS,
+      'pl+us': BindingTypes.PROPS,
+      'com,ma': BindingTypes.PROPS,
+      'do.t': BindingTypes.PROPS,
+      'sla/sh': BindingTypes.PROPS,
+      'co:lon': BindingTypes.PROPS,
+      'semi;colon': BindingTypes.PROPS,
+      'angle<brack>ets': BindingTypes.PROPS,
+      'equal=sign': BindingTypes.PROPS,
+      'question?mark': BindingTypes.PROPS,
+      'at@sign': BindingTypes.PROPS,
+      'square[brack]ets': BindingTypes.PROPS,
+      'back\\slash': BindingTypes.PROPS,
+      'ca^ret': BindingTypes.PROPS,
+      'back`tick': BindingTypes.PROPS,
+      'curly{bra}ces': BindingTypes.PROPS,
+      'pi|pe': BindingTypes.PROPS,
+      'til~de': BindingTypes.PROPS,
+      'da-sh': BindingTypes.PROPS,
+    })
+  })
+
+  // #8989
+  test('custom element retains the props type & production mode', () => {
+    const { content } = compile(
+      `<script setup lang="ts">
+      const props = defineProps<{ foo: number}>()
+      </script>`,
+      { isProd: true, customElement: filename => /\.ce\.vue$/.test(filename) },
+      { filename: 'app.ce.vue' },
+    )
+
+    expect(content).toMatch(`foo: {type: Number}`)
+    assertCode(content)
+  })
+
+  test('custom element retains the props type & default value & production mode', () => {
+    const { content } = compile(
+      `<script setup lang="ts">
+      interface Props { 
+          foo?: number;
+      }
+      const props = withDefaults(defineProps<Props>(), {
+          foo: 5.5,
+      });
+      </script>`,
+      { isProd: true, customElement: filename => /\.ce\.vue$/.test(filename) },
+      { filename: 'app.ce.vue' },
+    )
+    expect(content).toMatch(`foo: { default: 5.5, type: Number }`)
+    assertCode(content)
+  })
 })
diff --git a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
index a41f3131bef..3843ef92190 100644
--- a/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/definePropsDestructure.spec.ts
@@ -1,13 +1,13 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { SFCScriptCompileOptions } from '../../src'
-import { compileSFCScript, assertCode } from '../utils'
+import type { SFCScriptCompileOptions } from '../../src'
+import { assertCode, compileSFCScript } from '../utils'
 
 describe('sfc reactive props destructure', () => {
   function compile(src: string, options?: Partial<SFCScriptCompileOptions>) {
     return compileSFCScript(src, {
       inlineTemplate: true,
       propsDestructure: true,
-      ...options
+      ...options,
     })
   }
 
@@ -24,7 +24,7 @@ describe('sfc reactive props destructure', () => {
     expect(content).toMatch(`_toDisplayString(__props.foo)`)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -44,7 +44,7 @@ describe('sfc reactive props destructure', () => {
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.LITERAL_CONST,
-      hello: BindingTypes.LITERAL_CONST
+      hello: BindingTypes.LITERAL_CONST,
     })
   })
 
@@ -65,7 +65,7 @@ describe('sfc reactive props destructure', () => {
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
-      test: BindingTypes.SETUP_CONST
+      test: BindingTypes.SETUP_CONST,
     })
   })
 
@@ -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,
@@ -114,15 +115,15 @@ describe('sfc reactive props destructure', () => {
     `)
     expect(bindings).toStrictEqual({
       __propsAliases: {
-        fooBar: 'foo:bar'
+        fooBar: 'foo:bar',
       },
       foo: BindingTypes.PROPS,
       'foo:bar': BindingTypes.PROPS,
-      fooBar: BindingTypes.PROPS_ALIASED
+      fooBar: BindingTypes.PROPS_ALIASED,
     })
 
     expect(content).toMatch(`
-  props: _mergeDefaults(['foo', 'foo:bar'], {
+  props: /*#__PURE__*/_mergeDefaults(['foo', 'foo:bar'], {
   foo: 1,
   "foo:bar": 'foo-bar'
 }),`)
@@ -158,13 +159,13 @@ describe('sfc reactive props destructure', () => {
     `)
     expect(bindings).toStrictEqual({
       __propsAliases: {
-        fooBar: 'foo:bar'
+        fooBar: 'foo:bar',
       },
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
       'foo:bar': BindingTypes.PROPS,
       fooBar: BindingTypes.PROPS_ALIASED,
-      'onUpdate:modelValue': BindingTypes.PROPS
+      'onUpdate:modelValue': BindingTypes.PROPS,
     })
     expect(content).toMatch(`
   props: {
@@ -183,7 +184,7 @@ describe('sfc reactive props destructure', () => {
       const { foo = 1, bar = {}, func = () => {} } = defineProps<{ foo?: number, bar?: object, baz?: any, boola?: boolean, boolb?: boolean | number, func?: Function }>()
       </script>
     `,
-      { isProd: true }
+      { isProd: true },
     )
     assertCode(content)
     // literals can be used as-is, non-literals are always returned from a
@@ -219,8 +220,8 @@ describe('sfc reactive props destructure', () => {
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS_ALIASED,
       __propsAliases: {
-        bar: 'foo'
-      }
+        bar: 'foo',
+      },
     })
   })
 
@@ -241,8 +242,8 @@ describe('sfc reactive props destructure', () => {
       'foo.bar': BindingTypes.PROPS,
       fooBar: BindingTypes.PROPS_ALIASED,
       __propsAliases: {
-        fooBar: 'foo.bar'
-      }
+        fooBar: 'foo.bar',
+      },
     })
   })
 
@@ -253,14 +254,14 @@ describe('sfc reactive props destructure', () => {
       </script>
     `)
     expect(content).toMatch(
-      `const rest = _createPropsRestProxy(__props, ["foo","bar"])`
+      `const rest = _createPropsRestProxy(__props, ["foo","bar"])`,
     )
     assertCode(content)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
       bar: BindingTypes.PROPS,
       baz: BindingTypes.PROPS,
-      rest: BindingTypes.SETUP_REACTIVE_CONST
+      rest: BindingTypes.SETUP_REACTIVE_CONST,
     })
   })
 
@@ -278,7 +279,7 @@ describe('sfc reactive props destructure', () => {
     expect(content).toMatch(`_toDisplayString(__props.foo)`)
     assertCode(content)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.PROPS
+      foo: BindingTypes.PROPS,
     })
   })
 
@@ -338,22 +339,22 @@ describe('sfc reactive props destructure', () => {
     test('should error on deep destructure', () => {
       expect(() =>
         compile(
-          `<script setup>const { foo: [bar] } = defineProps(['foo'])</script>`
-        )
+          `<script setup>const { foo: [bar] } = defineProps(['foo'])</script>`,
+        ),
       ).toThrow(`destructure does not support nested patterns`)
 
       expect(() =>
         compile(
-          `<script setup>const { foo: { bar } } = defineProps(['foo'])</script>`
-        )
+          `<script setup>const { foo: { bar } } = defineProps(['foo'])</script>`,
+        ),
       ).toThrow(`destructure does not support nested patterns`)
     })
 
     test('should error on computed key', () => {
       expect(() =>
         compile(
-          `<script setup>const { [foo]: bar } = defineProps(['foo'])</script>`
-        )
+          `<script setup>const { [foo]: bar } = defineProps(['foo'])</script>`,
+        ),
       ).toThrow(`destructure cannot use computed key`)
     })
 
@@ -362,8 +363,8 @@ describe('sfc reactive props destructure', () => {
         compile(
           `<script setup lang="ts">
           const { foo } = withDefaults(defineProps<{ foo: string }>(), { foo: 'foo' })
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`withDefaults() is unnecessary when using destructure`)
     })
 
@@ -375,8 +376,8 @@ describe('sfc reactive props destructure', () => {
           const {
             foo = () => x
           } = defineProps(['foo'])
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`cannot reference locally declared variables`)
     })
 
@@ -386,8 +387,8 @@ describe('sfc reactive props destructure', () => {
           `<script setup>
           const { foo } = defineProps(['foo'])
           foo = 'bar'
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`Cannot assign to destructured props`)
 
       expect(() =>
@@ -395,8 +396,8 @@ describe('sfc reactive props destructure', () => {
           `<script setup>
           let { foo } = defineProps(['foo'])
           foo = 'bar'
-          </script>`
-        )
+          </script>`,
+        ),
       ).toThrow(`Cannot assign to destructured props`)
     })
 
@@ -407,10 +408,10 @@ describe('sfc reactive props destructure', () => {
         import { watch } from 'vue'
         const { foo } = defineProps(['foo'])
         watch(foo, () => {})
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to watch().`
+        `"foo" is a destructured prop and should not be passed directly to watch().`,
       )
 
       expect(() =>
@@ -419,10 +420,10 @@ describe('sfc reactive props destructure', () => {
         import { watch as w } from 'vue'
         const { foo } = defineProps(['foo'])
         w(foo, () => {})
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to watch().`
+        `"foo" is a destructured prop and should not be passed directly to watch().`,
       )
 
       expect(() =>
@@ -431,10 +432,10 @@ describe('sfc reactive props destructure', () => {
         import { toRef } from 'vue'
         const { foo } = defineProps(['foo'])
         toRef(foo)
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to toRef().`
+        `"foo" is a destructured prop and should not be passed directly to toRef().`,
       )
 
       expect(() =>
@@ -443,10 +444,10 @@ describe('sfc reactive props destructure', () => {
         import { toRef as r } from 'vue'
         const { foo } = defineProps(['foo'])
         r(foo)
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(
-        `"foo" is a destructured prop and should not be passed directly to toRef().`
+        `"foo" is a destructured prop and should not be passed directly to toRef().`,
       )
     })
 
@@ -456,8 +457,8 @@ describe('sfc reactive props destructure', () => {
         compile(
           `<script setup lang="ts">
         const { foo = 'hello' } = defineProps<{ foo?: number }>()
-        </script>`
-        )
+        </script>`,
+        ),
       ).toThrow(`Default value of prop "foo" does not match declared type.`)
     })
 
@@ -471,8 +472,8 @@ describe('sfc reactive props destructure', () => {
         const { error: e, info } = useRequest();
         watch(e, () => {});
         watch(info, () => {});
-        </script>`
-        )
+        </script>`,
+        ),
       ).not.toThrowError()
     })
   })
diff --git a/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts b/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts
index c7becacc02a..357709afdf3 100644
--- a/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/defineSlots.spec.ts
@@ -1,4 +1,4 @@
-import { compileSFCScript as compile, assertCode } from '../utils'
+import { assertCode, compileSFCScript as compile } from '../utils'
 
 describe('defineSlots()', () => {
   test('basic usage', () => {
diff --git a/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts b/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
index d2c76c9a2cc..ce6191777cc 100644
--- a/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/hoistStatic.spec.ts
@@ -1,13 +1,13 @@
 import { BindingTypes } from '@vue/compiler-core'
-import { SFCScriptCompileOptions } from '../../src'
-import { compileSFCScript, assertCode } from '../utils'
+import type { SFCScriptCompileOptions } from '../../src'
+import { assertCode, compileSFCScript } from '../utils'
 
 describe('sfc hoist static', () => {
   function compile(src: string, options?: Partial<SFCScriptCompileOptions>) {
     return compileSFCScript(src, {
       inlineTemplate: true,
       hoistStatic: true,
-      ...options
+      ...options,
     })
   }
 
@@ -34,7 +34,7 @@ describe('sfc hoist static', () => {
       boolean: BindingTypes.LITERAL_CONST,
       nil: BindingTypes.LITERAL_CONST,
       bigint: BindingTypes.LITERAL_CONST,
-      template: BindingTypes.LITERAL_CONST
+      template: BindingTypes.LITERAL_CONST,
     })
     assertCode(content)
   })
@@ -57,7 +57,7 @@ describe('sfc hoist static', () => {
       binary: BindingTypes.LITERAL_CONST,
       conditional: BindingTypes.LITERAL_CONST,
       unary: BindingTypes.LITERAL_CONST,
-      sequence: BindingTypes.LITERAL_CONST
+      sequence: BindingTypes.LITERAL_CONST,
     })
     assertCode(content)
   })
@@ -79,7 +79,7 @@ describe('sfc hoist static', () => {
     expect(content.startsWith(hoistCode)).toBe(true)
     expect(bindings).toStrictEqual({
       foo: BindingTypes.PROPS,
-      defaultValue: BindingTypes.LITERAL_CONST
+      defaultValue: BindingTypes.LITERAL_CONST,
     })
     assertCode(content)
   })
@@ -100,7 +100,7 @@ describe('sfc hoist static', () => {
       KEY1: BindingTypes.SETUP_LET,
       KEY2: BindingTypes.SETUP_LET,
       regex: BindingTypes.SETUP_CONST,
-      undef: BindingTypes.SETUP_MAYBE_REF
+      undef: BindingTypes.SETUP_MAYBE_REF,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -131,7 +131,7 @@ describe('sfc hoist static', () => {
       KEY4: BindingTypes.SETUP_CONST,
       KEY5: BindingTypes.SETUP_CONST,
       KEY6: BindingTypes.SETUP_CONST,
-      i: BindingTypes.SETUP_LET
+      i: BindingTypes.SETUP_LET,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -149,7 +149,7 @@ describe('sfc hoist static', () => {
     `)
     expect(bindings).toStrictEqual({
       arr: BindingTypes.SETUP_CONST,
-      obj: BindingTypes.SETUP_CONST
+      obj: BindingTypes.SETUP_CONST,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -169,7 +169,7 @@ describe('sfc hoist static', () => {
     expect(bindings).toStrictEqual({
       Foo: BindingTypes.SETUP_CONST,
       fn: BindingTypes.SETUP_CONST,
-      fn2: BindingTypes.SETUP_CONST
+      fn2: BindingTypes.SETUP_CONST,
     })
     expect(content).toMatch(`setup(__props) {\n\n    ${code}`)
     assertCode(content)
@@ -185,7 +185,7 @@ describe('sfc hoist static', () => {
     </script>
     `)
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_CONST
+      foo: BindingTypes.SETUP_CONST,
     })
     assertCode(content)
   })
@@ -197,10 +197,10 @@ describe('sfc hoist static', () => {
     const foo = 'bar'
     </script>
     `,
-      { hoistStatic: false }
+      { hoistStatic: false },
     )
     expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_CONST
+      foo: BindingTypes.SETUP_CONST,
     })
     assertCode(content)
   })
@@ -212,7 +212,7 @@ describe('sfc hoist static', () => {
     const foo = 'bar'
     </script>
     <template>{{ foo }}</template>
-    `
+    `,
     )
     expect(content).toMatch('_toDisplayString(foo)')
   })
diff --git a/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
new file mode 100644
index 00000000000..d9fd1dfe529
--- /dev/null
+++ b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
@@ -0,0 +1,235 @@
+import { assertCode, compileSFCScript as compile } from '../utils'
+
+// in dev mode, declared bindings are returned as an object from setup()
+// when using TS, users may import types which should not be returned as
+// values, so we need to check import usage in the template to determine
+// what to be returned.
+
+test('components', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBar, FooBaz, FooQux, foo } from './x'
+    const fooBar: FooBar = 1
+    </script>
+    <template>
+      <FooBaz></FooBaz>
+      <foo-qux/>
+      <foo/>
+      FooBar
+    </template>
+    `)
+  // FooBar: should not be matched by plain text or incorrect case
+  // FooBaz: used as PascalCase component
+  // FooQux: used as kebab-case component
+  // foo: lowercase component
+  expect(content).toMatch(
+    `return { fooBar, get FooBaz() { return FooBaz }, ` +
+      `get FooQux() { return FooQux }, get foo() { return foo } }`,
+  )
+  assertCode(content)
+})
+
+test('directive', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { vMyDir } from './x'
+    </script>
+    <template>
+      <div v-my-dir></div>
+    </template>
+    `)
+  expect(content).toMatch(`return { get vMyDir() { return vMyDir } }`)
+  assertCode(content)
+})
+
+test('dynamic arguments', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBar, foo, bar, unused, baz } from './x'
+    </script>
+    <template>
+      <FooBar #[foo.slotName] />
+      <FooBar #unused />
+      <div :[bar.attrName]="15"></div>
+      <div unused="unused"></div>
+      <div #[\`item:\${baz.key}\`]="{ value }"></div>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
+      `get bar() { return bar }, get baz() { return baz } }`,
+  )
+  assertCode(content)
+})
+
+// https://github.com/vuejs/core/issues/4599
+test('attribute expressions', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { bar, baz } from './x'
+    const cond = true
+    </script>
+    <template>
+      <div :class="[cond ? '' : bar(), 'default']" :style="baz"></div>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { cond, get bar() { return bar }, get baz() { return baz } }`,
+  )
+  assertCode(content)
+})
+
+test('vue interpolations', () => {
+  const { content } = compile(`
+  <script setup lang="ts">
+  import { x, y, z, x$y } from './x'
+  </script>
+  <template>
+    <div :id="z + 'y'">{{ x }} {{ yy }} {{ x$y }}</div>
+  </template>
+  `)
+  // x: used in interpolation
+  // y: should not be matched by {{ yy }} or 'y' in binding exps
+  // x$y: #4274 should escape special chars when creating Regex
+  expect(content).toMatch(
+    `return { get x() { return x }, get z() { return z }, get x$y() { return x$y } }`,
+  )
+  assertCode(content)
+})
+
+// #4340 interpolations in template strings
+test('js template string interpolations', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { VAR, VAR2, VAR3 } from './x'
+    </script>
+    <template>
+      {{ \`\${VAR}VAR2\${VAR3}\` }}
+    </template>
+    `)
+  // VAR2 should not be matched
+  expect(content).toMatch(
+    `return { get VAR() { return VAR }, get VAR3() { return VAR3 } }`,
+  )
+  assertCode(content)
+})
+
+// edge case: last tag in template
+test('last tag', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { FooBaz, Last } from './x'
+    </script>
+    <template>
+      <FooBaz></FooBaz>
+      <Last/>
+    </template>
+    `)
+  expect(content).toMatch(
+    `return { get FooBaz() { return FooBaz }, get Last() { return Last } }`,
+  )
+  assertCode(content)
+})
+
+test('TS annotations', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+    import { Foo, Bar, Baz, Qux, Fred } from './x'
+    const a = 1
+    function b() {}
+    </script>
+    <template>
+      {{ a as Foo }}
+      {{ b<Bar>() }}
+      {{ Baz }}
+      <Comp v-slot="{ data }: Qux">{{ data }}</Comp>
+      <div v-for="{ z = x as Qux } in list as Fred"/>
+    </template>
+    `)
+  expect(content).toMatch(`return { a, b, get Baz() { return Baz } }`)
+  assertCode(content)
+})
+
+// vuejs/vue#12591
+test('v-on inline statement', () => {
+  // should not error
+  compile(`
+  <script setup lang="ts">
+    import { foo } from './foo'
+  </script>
+  <template>
+    <div @click="$emit('update:a');"></div>
+  </template>
+  `)
+})
+
+test('template ref', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { foo, bar, Baz } from './foo'
+    </script>
+    <template>
+      <div ref="foo"></div>
+      <div ref=""></div>
+      <Baz ref="bar" />
+    </template>
+    `)
+  expect(content).toMatch(
+    'return { get foo() { return foo }, get bar() { return bar }, get Baz() { return Baz } }',
+  )
+  assertCode(content)
+})
+
+// https://github.com/nuxt/nuxt/issues/22416
+test('property access', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div>{{ Foo.Bar.Baz }}</div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('spread operator', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div v-bind="{ ...Foo.Bar.Baz }"></div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+test('property access (whitespace)', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import { Foo, Bar, Baz } from './foo'
+    </script>
+    <template>
+      <div>{{ Foo . Bar . Baz }}</div>
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
+
+// #9974
+test('namespace / dot component usage', () => {
+  const { content } = compile(`
+    <script setup lang="ts">
+      import * as Foo from './foo'
+    </script>
+    <template>
+      <Foo.Bar />
+    </template>
+    `)
+  expect(content).toMatch('return { get Foo() { return Foo } }')
+  assertCode(content)
+})
diff --git a/packages/compiler-sfc/__tests__/compileScript/reactivityTransform.spec.ts b/packages/compiler-sfc/__tests__/compileScript/reactivityTransform.spec.ts
deleted file mode 100644
index 44d51c14e75..00000000000
--- a/packages/compiler-sfc/__tests__/compileScript/reactivityTransform.spec.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-// TODO remove in 3.4
-import { BindingTypes } from '@vue/compiler-core'
-import { compileSFCScript as compile, assertCode } from '../utils'
-
-// this file only tests integration with SFC - main test case for the ref
-// transform can be found in <root>/packages/reactivity-transform/__tests__
-describe('sfc ref transform', () => {
-  function compileWithReactivityTransform(src: string) {
-    return compile(src, { reactivityTransform: true })
-  }
-
-  test('$ unwrapping', () => {
-    const { content, bindings } = compileWithReactivityTransform(`<script setup>
-    import { ref, shallowRef } from 'vue'
-    let foo = $(ref())
-    let a = $(ref(1))
-    let b = $(shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    </script>`)
-    expect(content).not.toMatch(`$(ref())`)
-    expect(content).not.toMatch(`$(ref(1))`)
-    expect(content).not.toMatch(`$(shallowRef({`)
-    expect(content).toMatch(`let foo = (ref())`)
-    expect(content).toMatch(`let a = (ref(1))`)
-    expect(content).toMatch(`
-    let b = (shallowRef({
-      count: 0
-    }))
-    `)
-    // normal declarations left untouched
-    expect(content).toMatch(`let c = () => {}`)
-    expect(content).toMatch(`let d`)
-    expect(content).toMatch(
-      `return { foo, a, b, get c() { return c }, set c(v) { c = v }, ` +
-        `get d() { return d }, set d(v) { d = v }, ref, shallowRef }`
-    )
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_REF,
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_LET,
-      d: BindingTypes.SETUP_LET,
-      ref: BindingTypes.SETUP_CONST,
-      shallowRef: BindingTypes.SETUP_CONST
-    })
-  })
-
-  test('$ref & $shallowRef declarations', () => {
-    const { content, bindings } = compileWithReactivityTransform(`<script setup>
-    let foo = $ref()
-    let a = $ref(1)
-    let b = $shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    </script>`)
-    expect(content).toMatch(
-      `import { ref as _ref, shallowRef as _shallowRef } from 'vue'`
-    )
-    expect(content).not.toMatch(`$ref()`)
-    expect(content).not.toMatch(`$ref(1)`)
-    expect(content).not.toMatch(`$shallowRef({`)
-    expect(content).toMatch(`let foo = _ref()`)
-    expect(content).toMatch(`let a = _ref(1)`)
-    expect(content).toMatch(`
-    let b = _shallowRef({
-      count: 0
-    })
-    `)
-    // normal declarations left untouched
-    expect(content).toMatch(`let c = () => {}`)
-    expect(content).toMatch(`let d`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      foo: BindingTypes.SETUP_REF,
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_LET,
-      d: BindingTypes.SETUP_LET
-    })
-  })
-
-  test('usage in normal <script>', () => {
-    const { content } = compileWithReactivityTransform(`<script>
-    export default {
-      setup() {
-        let count = $ref(0)
-        const inc = () => count++
-        return $$({ count })
-      }
-    }
-    </script>`)
-    expect(content).not.toMatch(`$ref(0)`)
-    expect(content).toMatch(`import { ref as _ref } from 'vue'`)
-    expect(content).toMatch(`let count = _ref(0)`)
-    expect(content).toMatch(`count.value++`)
-    expect(content).toMatch(`return ({ count })`)
-    assertCode(content)
-  })
-
-  test('usage /w typescript', () => {
-    const { content } = compileWithReactivityTransform(`
-      <script setup lang="ts">
-        let msg = $ref<string | number>('foo');
-        let bar = $ref <string | number>('bar');
-      </script>
-    `)
-    expect(content).toMatch(`import { ref as _ref`)
-    expect(content).toMatch(`let msg = _ref<string | number>('foo')`)
-    expect(content).toMatch(`let bar = _ref <string | number>('bar')`)
-    assertCode(content)
-  })
-
-  test('usage with normal <script> + <script setup>', () => {
-    const { content, bindings } = compileWithReactivityTransform(`<script>
-    let a = $ref(0)
-    let c = $ref(0)
-    </script>
-    <script setup>
-    let b = $ref(0)
-    let c = 0
-    function change() {
-      a++
-      b++
-      c++
-    }
-    </script>`)
-    // should dedupe helper imports
-    expect(content).toMatch(`import { ref as _ref } from 'vue'`)
-
-    expect(content).toMatch(`let a = _ref(0)`)
-    expect(content).toMatch(`let b = _ref(0)`)
-
-    // root level ref binding declared in <script> should be inherited in <script setup>
-    expect(content).toMatch(`a.value++`)
-    expect(content).toMatch(`b.value++`)
-    // c shadowed
-    expect(content).toMatch(`c++`)
-    assertCode(content)
-    expect(bindings).toStrictEqual({
-      a: BindingTypes.SETUP_REF,
-      b: BindingTypes.SETUP_REF,
-      c: BindingTypes.SETUP_REF,
-      change: BindingTypes.SETUP_CONST
-    })
-  })
-
-  test('usage with normal <script> (has macro usage) + <script setup> (no macro usage)', () => {
-    const { content } = compileWithReactivityTransform(`
-    <script>
-    let data = $ref()
-    </script>
-    <script setup>
-    console.log(data)
-    </script>
-    `)
-    expect(content).toMatch(`console.log(data.value)`)
-    assertCode(content)
-  })
-
-  describe('errors', () => {
-    test('defineProps/Emit() referencing ref declarations', () => {
-      expect(() =>
-        compile(
-          `<script setup>
-        let bar = $ref(1)
-        defineProps({
-          bar
-        })
-      </script>`,
-          { reactivityTransform: true }
-        )
-      ).toThrow(`cannot reference locally declared variables`)
-
-      expect(() =>
-        compile(
-          `<script setup>
-        let bar = $ref(1)
-        defineEmits({
-          bar
-        })
-      </script>`,
-          { reactivityTransform: true }
-        )
-      ).toThrow(`cannot reference locally declared variables`)
-    })
-  })
-})
diff --git a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
index 607654a952b..0c5c95cd17f 100644
--- a/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts
@@ -1,12 +1,13 @@
-import { Identifier } from '@babel/types'
-import { SFCScriptCompileOptions, parse } from '../../src'
+import { normalize } from 'node:path'
+import type { Identifier } from '@babel/types'
+import { type SFCScriptCompileOptions, parse } from '../../src'
 import { ScriptCompileContext } from '../../src/script/context'
 import {
   inferRuntimeType,
   invalidateTypeCache,
   recordImports,
+  registerTS,
   resolveTypeElements,
-  registerTS
 } from '../../src/script/resolveType'
 
 import ts from 'typescript'
@@ -24,7 +25,7 @@ describe('resolveType', () => {
     expect(props).toStrictEqual({
       foo: ['Number'],
       bar: ['Function'],
-      baz: ['String']
+      baz: ['String'],
     })
     expect(calls?.length).toBe(2)
   })
@@ -34,9 +35,9 @@ describe('resolveType', () => {
       resolve(`
     type Aliased = { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -45,9 +46,9 @@ describe('resolveType', () => {
       resolve(`
     export type Aliased = { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -56,9 +57,9 @@ describe('resolveType', () => {
       resolve(`
     interface Aliased { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -67,9 +68,9 @@ describe('resolveType', () => {
       resolve(`
     export interface Aliased { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -81,12 +82,12 @@ describe('resolveType', () => {
     interface C { c: string }
     interface Aliased extends B, C { foo: number }
     defineProps<Aliased>()
-    `).props
+    `).props,
     ).toStrictEqual({
       a: ['Function'],
       b: ['Boolean'],
       c: ['String'],
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -95,9 +96,9 @@ describe('resolveType', () => {
       resolve(`
     class Foo {}
     defineProps<{ foo: Foo }>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Object']
+      foo: ['Object'],
     })
   })
 
@@ -105,7 +106,7 @@ describe('resolveType', () => {
     expect(
       resolve(`
     defineProps<(e: 'foo') => void>()
-    `).calls?.length
+    `).calls?.length,
     ).toBe(1)
   })
 
@@ -114,7 +115,7 @@ describe('resolveType', () => {
       resolve(`
     type Fn = (e: 'foo') => void
     defineProps<Fn>()
-    `).calls?.length
+    `).calls?.length,
     ).toBe(1)
   })
 
@@ -125,13 +126,13 @@ describe('resolveType', () => {
     type Bar = { bar: string }
     type Baz = { bar: string | boolean }
     defineProps<{ self: any } & Foo & Bar & Baz>()
-    `).props
+    `).props,
     ).toStrictEqual({
       self: ['Unknown'],
       foo: ['Number'],
       // both Bar & Baz has 'bar', but Baz['bar] is wider so it should be
       // preferred
-      bar: ['String', 'Boolean']
+      bar: ['String', 'Boolean'],
     })
   })
 
@@ -155,12 +156,12 @@ describe('resolveType', () => {
         }
 
     defineProps<CommonProps & ConditionalProps>()
-    `).props
+    `).props,
     ).toStrictEqual({
       size: ['String'],
       color: ['String', 'Number'],
       appearance: ['String'],
-      note: ['String']
+      note: ['String'],
     })
   })
 
@@ -172,12 +173,12 @@ describe('resolveType', () => {
     defineProps<{
       [\`_\${T}_\${S}_\`]: string
     }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       _foo_x_: ['String'],
       _foo_y_: ['String'],
       _bar_x_: ['String'],
-      _bar_y_: ['String']
+      _bar_y_: ['String'],
     })
   })
 
@@ -194,7 +195,7 @@ describe('resolveType', () => {
     } & {
       [K in \`x\${T}\`]: string
     }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String', 'Number'],
       bar: ['String', 'Number'],
@@ -203,7 +204,7 @@ describe('resolveType', () => {
       FOO: ['String'],
       xfoo: ['String'],
       xbar: ['String'],
-      optional: ['Boolean']
+      optional: ['Boolean'],
     })
   })
 
@@ -212,14 +213,14 @@ describe('resolveType', () => {
       resolve(`
     type T = { foo: number, bar: string }
     defineProps<Partial<T>>()
-    `).raw.props
+    `).raw.props,
     ).toMatchObject({
       foo: {
-        optional: true
+        optional: true,
       },
       bar: {
-        optional: true
-      }
+        optional: true,
+      },
     })
   })
 
@@ -228,14 +229,14 @@ describe('resolveType', () => {
       resolve(`
     type T = { foo?: number, bar?: string }
     defineProps<Required<T>>()
-    `).raw.props
+    `).raw.props,
     ).toMatchObject({
       foo: {
-        optional: false
+        optional: false,
       },
       bar: {
-        optional: false
-      }
+        optional: false,
+      },
     })
   })
 
@@ -245,10 +246,10 @@ describe('resolveType', () => {
     type T = { foo: number, bar: string, baz: boolean }
     type K = 'foo' | 'bar'
     defineProps<Pick<T, K>>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['Number'],
-      bar: ['String']
+      bar: ['String'],
     })
   })
 
@@ -258,9 +259,9 @@ describe('resolveType', () => {
     type T = { foo: number, bar: string, baz: boolean }
     type K = 'foo' | 'bar'
     defineProps<Omit<T, K>>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      baz: ['Boolean']
+      baz: ['Boolean'],
     })
   })
 
@@ -270,9 +271,9 @@ describe('resolveType', () => {
     type T = { bar: number }
     type S = { nested: { foo: T['bar'] }}
     defineProps<S['nested']>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -283,10 +284,10 @@ describe('resolveType', () => {
     type T = { foo: string, bar: number }
     type S = { foo: { foo: T[string] }, bar: { bar: string } }
     defineProps<S[K]>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String', 'Number'],
-      bar: ['String']
+      bar: ['String'],
     })
   })
 
@@ -298,12 +299,12 @@ describe('resolveType', () => {
     type T = [1, 'foo']
     type TT = [foo: 1, bar: 'foo']
     defineProps<{ foo: A[number], bar: AA[number], tuple: T[number], namedTuple: TT[number] }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String', 'Number'],
       bar: ['String'],
       tuple: ['Number', 'String'],
-      namedTuple: ['Number', 'String']
+      namedTuple: ['Number', 'String'],
     })
   })
 
@@ -320,9 +321,9 @@ describe('resolveType', () => {
         }
       }
       defineProps<Foo.Bar.A>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number']
+      foo: ['Number'],
     })
   })
 
@@ -339,10 +340,10 @@ describe('resolveType', () => {
         foo: Foo['a'],
         bar: Foo['b']
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String'],
-      bar: ['Number']
+      bar: ['Number'],
     })
   })
 
@@ -359,10 +360,10 @@ describe('resolveType', () => {
         foo: Foo.A,
         bar: Foo.B
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String'],
-      bar: ['Number']
+      bar: ['Number'],
     })
   })
 
@@ -379,10 +380,10 @@ describe('resolveType', () => {
         foo: Foo.A,
         bar: Foo['b']
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
       foo: ['String'],
-      bar: ['Number']
+      bar: ['Number'],
     })
   })
 
@@ -398,9 +399,9 @@ describe('resolveType', () => {
       defineProps<{
         foo: Foo
       }>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['Number', 'String']
+      foo: ['Number', 'String'],
     })
   })
 
@@ -409,9 +410,9 @@ describe('resolveType', () => {
       resolve(`
       declare const a: string
       defineProps<{ foo: typeof a }>()
-    `).props
+    `).props,
     ).toStrictEqual({
-      foo: ['String']
+      foo: ['String'],
     })
   })
 
@@ -428,11 +429,11 @@ describe('resolveType', () => {
       }
       type Props = ExtractPropTypes<typeof props>
       defineProps<Props>()
-    `
+    `,
     )
     expect(props).toStrictEqual({
       foo: ['String'],
-      bar: ['Boolean']
+      bar: ['Boolean'],
     })
     expect(raw.props.bar.optional).toBe(false)
   })
@@ -446,11 +447,93 @@ describe('resolveType', () => {
       }
       type Props = Partial<import('vue').ExtractPropTypes<ReturnType<typeof props>>>
       defineProps<Props>()
-    `
+    `,
     )
     expect(props).toStrictEqual({
       foo: ['String'],
-      bar: ['Boolean']
+      bar: ['Boolean'],
+    })
+  })
+
+  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'],
+      })
     })
   })
 
@@ -461,7 +544,7 @@ describe('resolveType', () => {
         '/bar.d.ts':
           'type X = { bar: string }; export { X as Y };' +
           // verify that we can parse syntax that is only valid in d.ts
-          'export const baz: boolean'
+          'export const baz: boolean',
       }
       const { props, deps } = resolve(
         `
@@ -469,29 +552,59 @@ describe('resolveType', () => {
         import { Y as PP } from './bar'
         defineProps<P & PP>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
 
+    test.runIf(process.platform === 'win32')('relative ts on Windows', () => {
+      const files = {
+        'C:\\Test\\FolderA\\foo.ts': 'export type P = { foo: number }',
+        'C:\\Test\\FolderA\\bar.d.ts':
+          'type X = { bar: string }; export { X as Y };' +
+          // verify that we can parse syntax that is only valid in d.ts
+          'export const baz: boolean',
+        'C:\\Test\\FolderB\\buz.ts': 'export type Z = { buz: string }',
+      }
+      const { props, deps } = resolve(
+        `
+      import { P } from './foo'
+      import { Y as PP } from './bar'
+      import { Z as PPP } from '../FolderB/buz'
+      defineProps<P & PP & PPP>()
+    `,
+        files,
+        {},
+        'C:\\Test\\FolderA\\Test.vue',
+      )
+      expect(props).toStrictEqual({
+        foo: ['Number'],
+        bar: ['String'],
+        buz: ['String'],
+      })
+      expect(deps && [...deps].map(normalize)).toStrictEqual(
+        Object.keys(files).map(normalize),
+      )
+    })
+
     // #8244
     test('utility type in external file', () => {
       const files = {
-        '/foo.ts': 'type A = { n?: number }; export type B = Required<A>'
+        '/foo.ts': 'type A = { n?: number }; export type B = Required<A>',
       }
       const { props } = resolve(
         `
         import { B } from './foo'
         defineProps<B>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        n: ['Number']
+        n: ['Number'],
       })
     })
 
@@ -500,7 +613,7 @@ describe('resolveType', () => {
         '/foo.vue':
           '<script lang="ts">export type P = { foo: number }</script>',
         '/bar.vue':
-          '<script setup lang="tsx">export type P = { bar: string }</script>'
+          '<script setup lang="tsx">export type P = { bar: string }</script>',
       }
       const { props, deps } = resolve(
         `
@@ -508,11 +621,11 @@ describe('resolveType', () => {
         import { P as PP } from './bar.vue'
         defineProps<P & PP>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -522,18 +635,18 @@ describe('resolveType', () => {
         '/foo.ts': `import type { P as PP } from './nested/bar.vue'
           export type P = { foo: number } & PP`,
         '/nested/bar.vue':
-          '<script setup lang="ts">export type P = { bar: string }</script>'
+          '<script setup lang="ts">export type P = { bar: string }</script>',
       }
       const { props, deps } = resolve(
         `
         import { P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -541,17 +654,17 @@ describe('resolveType', () => {
     test('relative (chained, re-export)', () => {
       const files = {
         '/foo.ts': `export { P as PP } from './bar'`,
-        '/bar.ts': 'export type P = { bar: string }'
+        '/bar.ts': 'export type P = { bar: string }',
       }
       const { props, deps } = resolve(
         `
         import { PP as P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -559,17 +672,17 @@ describe('resolveType', () => {
     test('relative (chained, export *)', () => {
       const files = {
         '/foo.ts': `export * from './bar'`,
-        '/bar.ts': 'export type P = { bar: string }'
+        '/bar.ts': 'export type P = { bar: string }',
       }
       const { props, deps } = resolve(
         `
         import { P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -577,7 +690,7 @@ describe('resolveType', () => {
     test('relative (default export)', () => {
       const files = {
         '/foo.ts': `export default interface P { foo: string }`,
-        '/bar.ts': `type X = { bar: string }; export default X`
+        '/bar.ts': `type X = { bar: string }; export default X`,
       }
       const { props, deps } = resolve(
         `
@@ -585,11 +698,11 @@ describe('resolveType', () => {
         import X from './bar'
         defineProps<P & X>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -598,7 +711,7 @@ describe('resolveType', () => {
       const files = {
         '/bar.ts': `export { default } from './foo'`,
         '/foo.ts': `export default interface P { foo: string }; export interface PP { bar: number }`,
-        '/baz.ts': `export { PP as default } from './foo'`
+        '/baz.ts': `export { PP as default } from './foo'`,
       }
       const { props, deps } = resolve(
         `
@@ -606,11 +719,11 @@ describe('resolveType', () => {
         import PP from './baz'
         defineProps<P & PP>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['Number']
+        bar: ['Number'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -619,17 +732,17 @@ describe('resolveType', () => {
       const files = {
         '/foo.ts': `export default interface P { foo: string }`,
         '/bar.ts': `export default interface PP { bar: number }`,
-        '/baz.ts': `export { default as X } from './foo'; export { default as XX } from './bar'; `
+        '/baz.ts': `export { default as X } from './foo'; export { default as XX } from './bar'; `,
       }
       const { props, deps } = resolve(
         `import { X, XX } from './baz'
         defineProps<X & XX>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['Number']
+        bar: ['Number'],
       })
       expect(deps && [...deps]).toStrictEqual(['/baz.ts', '/foo.ts', '/bar.ts'])
     })
@@ -637,17 +750,17 @@ describe('resolveType', () => {
     test('relative (dynamic import)', () => {
       const files = {
         '/foo.ts': `export type P = { foo: string, bar: import('./bar').N }`,
-        '/bar.ts': 'export type N = number'
+        '/bar.ts': 'export type N = number',
       }
       const { props, deps } = resolve(
         `
         defineProps<import('./foo').P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
         foo: ['String'],
-        bar: ['Number']
+        bar: ['Number'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -657,17 +770,17 @@ describe('resolveType', () => {
       const files = {
         '/foo.d.ts':
           'import { PP } from "./bar.js"; export type P = { foo: PP }',
-        '/bar.d.ts': 'export type PP = "foo" | "bar"'
+        '/bar.d.ts': 'export type PP = "foo" | "bar"',
       }
       const { props, deps } = resolve(
         `
         import { P } from './foo'
         defineProps<P>()
       `,
-        files
+        files,
       )
       expect(props).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -675,17 +788,17 @@ describe('resolveType', () => {
     test('ts module resolve', () => {
       const files = {
         '/node_modules/foo/package.json': JSON.stringify({
-          types: 'index.d.ts'
+          types: 'index.d.ts',
         }),
         '/node_modules/foo/index.d.ts': 'export type P = { foo: number }',
         '/tsconfig.json': JSON.stringify({
           compilerOptions: {
             paths: {
-              bar: ['./pp.ts']
-            }
-          }
+              bar: ['./pp.ts'],
+            },
+          },
         }),
-        '/pp.ts': 'export type PP = { bar: string }'
+        '/pp.ts': 'export type PP = { bar: string }',
       }
 
       const { props, deps } = resolve(
@@ -694,16 +807,16 @@ describe('resolveType', () => {
         import { PP } from 'bar'
         defineProps<P & PP>()
         `,
-        files
+        files,
       )
 
       expect(props).toStrictEqual({
         foo: ['Number'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual([
         '/node_modules/foo/index.d.ts',
-        '/pp.ts'
+        '/pp.ts',
       ])
     })
 
@@ -712,23 +825,23 @@ describe('resolveType', () => {
         '/tsconfig.json': JSON.stringify({
           references: [
             {
-              path: './tsconfig.app.json'
-            }
-          ]
+              path: './tsconfig.app.json',
+            },
+          ],
         }),
         '/tsconfig.app.json': JSON.stringify({
           include: ['**/*.ts', '**/*.vue'],
-          extends: './tsconfig.web.json'
+          extends: './tsconfig.web.json',
         }),
         '/tsconfig.web.json': JSON.stringify({
           compilerOptions: {
             composite: true,
             paths: {
-              bar: ['./user.ts']
-            }
-          }
+              bar: ['./user.ts'],
+            },
+          },
         }),
-        '/user.ts': 'export type User = { bar: string }'
+        '/user.ts': 'export type User = { bar: string }',
       }
 
       const { props, deps } = resolve(
@@ -736,11 +849,11 @@ describe('resolveType', () => {
         import { User } from 'bar'
         defineProps<User>()
         `,
-        files
+        files,
       )
 
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(['/user.ts'])
     })
@@ -751,12 +864,12 @@ describe('resolveType', () => {
           compilerOptions: {
             include: ['**/*.ts', '**/*.vue'],
             paths: {
-              '@/*': ['./src/*']
-            }
-          }
+              '@/*': ['./src/*'],
+            },
+          },
         }),
         '/src/Foo.vue':
-          '<script lang="ts">export type P = { bar: string }</script>'
+          '<script lang="ts">export type P = { bar: string }</script>',
       }
 
       const { props, deps } = resolve(
@@ -764,11 +877,11 @@ describe('resolveType', () => {
         import { P } from '@/Foo.vue'
         defineProps<P>()
         `,
-        files
+        files,
       )
 
       expect(props).toStrictEqual({
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(['/src/Foo.vue'])
     })
@@ -785,16 +898,16 @@ describe('resolveType', () => {
             type PP = { bar: string }
           }
           export {}
-        `
+        `,
       }
 
       const { props, deps } = resolve(`defineProps<App.User & PP>()`, files, {
-        globalTypeFiles: Object.keys(files)
+        globalTypeFiles: Object.keys(files),
       })
 
       expect(props).toStrictEqual({
         name: ['String'],
-        bar: ['String']
+        bar: ['String'],
       })
       expect(deps && [...deps]).toStrictEqual(Object.keys(files))
     })
@@ -814,16 +927,44 @@ describe('resolveType', () => {
               id: string
             }
           }
-        `
+        `,
       }
 
       const { props } = resolve(`defineProps<App.Data.AircraftData>()`, files, {
-        globalTypeFiles: Object.keys(files)
+        globalTypeFiles: Object.keys(files),
       })
 
       expect(props).toStrictEqual({
         id: ['String'],
-        manufacturer: ['Object']
+        manufacturer: ['Object'],
+      })
+    })
+
+    // #9871
+    test('shared generics with different args', () => {
+      const files = {
+        '/foo.ts': `export interface Foo<T> { value: T }`,
+      }
+      const { props } = resolve(
+        `import type { Foo } from './foo'
+        defineProps<Foo<string>>()`,
+        files,
+        undefined,
+        `/One.vue`,
+      )
+      expect(props).toStrictEqual({
+        value: ['String'],
+      })
+      const { props: props2 } = resolve(
+        `import type { Foo } from './foo'
+        defineProps<Foo<number>>()`,
+        files,
+        undefined,
+        `/Two.vue`,
+        false /* do not invalidate cache */,
+      )
+      expect(props2).toStrictEqual({
+        value: ['Number'],
       })
     })
   })
@@ -831,25 +972,25 @@ describe('resolveType', () => {
   describe('errors', () => {
     test('failed type reference', () => {
       expect(() => resolve(`defineProps<X>()`)).toThrow(
-        `Unresolvable type reference`
+        `Unresolvable type reference`,
       )
     })
 
     test('unsupported computed keys', () => {
       expect(() => resolve(`defineProps<{ [Foo]: string }>()`)).toThrow(
-        `Unsupported computed key in type referenced by a macro`
+        `Unsupported computed key in type referenced by a macro`,
       )
     })
 
     test('unsupported index type', () => {
       expect(() => resolve(`defineProps<X[K]>()`)).toThrow(
-        `Unsupported type when resolving index type`
+        `Unsupported type when resolving index type`,
       )
     })
 
     test('failed import source resolve', () => {
       expect(() =>
-        resolve(`import { X } from './foo'; defineProps<X>()`)
+        resolve(`import { X } from './foo'; defineProps<X>()`),
       ).toThrow(`Failed to resolve import source "./foo"`)
     })
 
@@ -860,7 +1001,7 @@ describe('resolveType', () => {
         resolve(`
         import type P from 'unknown'
         defineProps<{ foo: P }>()
-      `)
+      `),
       ).not.toThrow()
     })
 
@@ -870,7 +1011,7 @@ describe('resolveType', () => {
         import type Base from 'unknown'
         interface Props extends Base {}
         defineProps<Props>()
-      `)
+      `),
       ).toThrow(`@vue-ignore`)
     })
 
@@ -885,11 +1026,11 @@ describe('resolveType', () => {
           foo: string
         }
         defineProps<Props>()
-      `))
+      `)),
       ).not.toThrow(`@vue-ignore`)
 
       expect(res.props).toStrictEqual({
-        foo: ['String']
+        foo: ['String'],
       })
     })
   })
@@ -898,26 +1039,30 @@ describe('resolveType', () => {
 function resolve(
   code: string,
   files: Record<string, string> = {},
-  options?: Partial<SFCScriptCompileOptions>
+  options?: Partial<SFCScriptCompileOptions>,
+  sourceFileName: string = '/Test.vue',
+  invalidateCache = true,
 ) {
   const { descriptor } = parse(`<script setup lang="ts">\n${code}\n</script>`, {
-    filename: '/Test.vue'
+    filename: sourceFileName,
   })
   const ctx = new ScriptCompileContext(descriptor, {
     id: 'test',
     fs: {
       fileExists(file) {
-        return !!files[file]
+        return !!(files[file] ?? files[normalize(file)])
       },
       readFile(file) {
-        return files[file]
-      }
+        return files[file] ?? files[normalize(file)]
+      },
     },
-    ...options
+    ...options,
   })
 
-  for (const file in files) {
-    invalidateTypeCache(file)
+  if (invalidateCache) {
+    for (const file in files) {
+      invalidateTypeCache(file)
+    }
   }
 
   // ctx.userImports is collected when calling compileScript(), but we are
@@ -943,6 +1088,6 @@ function resolve(
     props,
     calls: raw.calls,
     deps: ctx.deps,
-    raw
+    raw,
   }
 }
diff --git a/packages/compiler-sfc/__tests__/compileStyle.spec.ts b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
index b33dabfd2ce..1f9ae67225b 100644
--- a/packages/compiler-sfc/__tests__/compileStyle.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileStyle.spec.ts
@@ -1,20 +1,20 @@
 import {
+  type SFCStyleCompileOptions,
   compileStyle,
   compileStyleAsync,
-  SFCStyleCompileOptions
 } from '../src/compileStyle'
-import path from 'path'
+import path from 'node:path'
 
 export function compileScoped(
   source: string,
-  options?: Partial<SFCStyleCompileOptions>
+  options?: Partial<SFCStyleCompileOptions>,
 ): string {
   const res = compileStyle({
     source,
     filename: 'test.css',
     id: 'data-v-test',
     scoped: true,
-    ...options
+    ...options,
   })
   if (res.errors.length) {
     res.errors.forEach(err => {
@@ -28,34 +28,34 @@ export function compileScoped(
 describe('SFC scoped CSS', () => {
   test('simple selectors', () => {
     expect(compileScoped(`h1 { color: red; }`)).toMatch(
-      `h1[data-v-test] { color: red;`
+      `h1[data-v-test] { color: red;`,
     )
     expect(compileScoped(`.foo { color: red; }`)).toMatch(
-      `.foo[data-v-test] { color: red;`
+      `.foo[data-v-test] { color: red;`,
     )
   })
 
   test('descendent selector', () => {
     expect(compileScoped(`h1 .foo { color: red; }`)).toMatch(
-      `h1 .foo[data-v-test] { color: red;`
+      `h1 .foo[data-v-test] { color: red;`,
     )
   })
 
   test('multiple selectors', () => {
     expect(compileScoped(`h1 .foo, .bar, .baz { color: red; }`)).toMatch(
-      `h1 .foo[data-v-test], .bar[data-v-test], .baz[data-v-test] { color: red;`
+      `h1 .foo[data-v-test], .bar[data-v-test], .baz[data-v-test] { color: red;`,
     )
   })
 
   test('pseudo class', () => {
     expect(compileScoped(`.foo:after { color: red; }`)).toMatch(
-      `.foo[data-v-test]:after { color: red;`
+      `.foo[data-v-test]:after { color: red;`,
     )
   })
 
   test('pseudo element', () => {
     expect(compileScoped(`::selection { display: none; }`)).toMatch(
-      '[data-v-test]::selection {'
+      '[data-v-test]::selection {',
     )
   })
 
@@ -85,6 +85,16 @@ describe('SFC scoped CSS', () => {
       ".baz .qux[data-v-test] .foo .bar { color: red;
       }"
     `)
+    expect(compileScoped(`:is(.foo :deep(.bar)) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":is(.foo[data-v-test] .bar) { color: red;
+      }"
+    `)
+    expect(compileScoped(`:where(.foo :deep(.bar)) { color: red; }`))
+      .toMatchInlineSnapshot(`
+      ":where(.foo[data-v-test] .bar) { color: red;
+      }"
+    `)
   })
 
   test('::v-slotted', () => {
@@ -134,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(`
@@ -190,30 +217,30 @@ describe('SFC scoped CSS', () => {
   to { opacity: 1; }
 }
     `,
-      { id: 'data-v-test' }
+      { id: 'data-v-test' },
     )
 
     expect(style).toContain(
-      `.anim[data-v-test] {\n  animation: color-test 5s infinite, other 5s;`
+      `.anim[data-v-test] {\n  animation: color-test 5s infinite, other 5s;`,
     )
     expect(style).toContain(
-      `.anim-2[data-v-test] {\n  animation-name: color-test`
+      `.anim-2[data-v-test] {\n  animation-name: color-test`,
     )
     expect(style).toContain(
-      `.anim-3[data-v-test] {\n  animation: 5s color-test infinite, 5s other;`
+      `.anim-3[data-v-test] {\n  animation: 5s color-test infinite, 5s other;`,
     )
     expect(style).toContain(`@keyframes color-test {`)
     expect(style).toContain(`@-webkit-keyframes color-test {`)
 
     expect(style).toContain(
-      `.anim-multiple[data-v-test] {\n  animation: color-test 5s infinite,opacity-test 2s;`
+      `.anim-multiple[data-v-test] {\n  animation: color-test 5s infinite,opacity-test 2s;`,
     )
     expect(style).toContain(
-      `.anim-multiple-2[data-v-test] {\n  animation-name: color-test,opacity-test;`
+      `.anim-multiple-2[data-v-test] {\n  animation-name: color-test,opacity-test;`,
     )
     expect(style).toContain(`@keyframes opacity-test {\nfrom { opacity: 0;`)
     expect(style).toContain(
-      `@-webkit-keyframes opacity-test {\nfrom { opacity: 0;`
+      `@-webkit-keyframes opacity-test {\nfrom { opacity: 0;`,
     )
   })
 
@@ -238,7 +265,7 @@ describe('SFC scoped CSS', () => {
         }"
       `)
       expect(
-        `::v-deep usage as a combinator has been deprecated.`
+        `::v-deep usage as a combinator has been deprecated.`,
       ).toHaveBeenWarned()
     })
 
@@ -249,7 +276,7 @@ describe('SFC scoped CSS', () => {
         }"
       `)
       expect(
-        `the >>> and /deep/ combinators have been deprecated.`
+        `the >>> and /deep/ combinators have been deprecated.`,
       ).toHaveBeenWarned()
     })
 
@@ -260,7 +287,7 @@ describe('SFC scoped CSS', () => {
         }"
       `)
       expect(
-        `the >>> and /deep/ combinators have been deprecated.`
+        `the >>> and /deep/ combinators have been deprecated.`,
       ).toHaveBeenWarned()
     })
   })
@@ -272,7 +299,7 @@ describe('SFC CSS modules', () => {
       source: `.red { color: red }\n.green { color: green }\n:global(.blue) { color: blue }`,
       filename: `test.css`,
       id: 'test',
-      modules: true
+      modules: true,
     })
     expect(result.modules).toBeDefined()
     expect(result.modules!.red).toMatch('_red_')
@@ -289,8 +316,8 @@ describe('SFC CSS modules', () => {
       modulesOptions: {
         scopeBehaviour: 'global',
         generateScopedName: `[name]__[local]__[hash:base64:5]`,
-        localsConvention: 'camelCaseOnly'
-      }
+        localsConvention: 'camelCaseOnly',
+      },
     })
     expect(result.modules).toBeDefined()
     expect(result.modules!.fooBar).toMatch('__foo-bar__')
@@ -306,11 +333,11 @@ describe('SFC style preprocessors', () => {
       `,
       filename: path.resolve(__dirname, './fixture/test.scss'),
       id: '',
-      preprocessLang: 'scss'
+      preprocessLang: 'scss',
     })
 
     expect([...res.dependencies]).toStrictEqual([
-      path.join(__dirname, './fixture/import.scss')
+      path.join(__dirname, './fixture/import.scss'),
     ])
   })
 
@@ -321,7 +348,7 @@ describe('SFC style preprocessors', () => {
           @mixin square($size) {
             width: $size;
             height: $size;
-          }`
+          }`,
       },
       source: `
         .square {
@@ -330,7 +357,7 @@ describe('SFC style preprocessors', () => {
       `,
       filename: path.resolve(__dirname, './fixture/test.scss'),
       id: '',
-      preprocessLang: 'scss'
+      preprocessLang: 'scss',
     })
 
     expect(res.errors.length).toBe(0)
@@ -353,12 +380,12 @@ describe('SFC style preprocessors', () => {
             width: $size;
             height: $size;
           }`
-        }
+        },
       },
       source,
       filename,
       id: '',
-      preprocessLang: 'scss'
+      preprocessLang: 'scss',
     })
 
     expect(res.errors.length).toBe(0)
diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index b471b67c9ca..45dc54a69db 100644
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -1,13 +1,15 @@
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js'
 import {
+  type SFCTemplateCompileOptions,
   compileTemplate,
-  SFCTemplateCompileOptions
 } from '../src/compileTemplate'
-import { parse, SFCTemplateBlock } from '../src/parse'
+import { type SFCTemplateBlock, parse } from '../src/parse'
+import { compileScript } from '../src'
 
 function compile(opts: Omit<SFCTemplateCompileOptions, 'id'>) {
   return compileTemplate({
     ...opts,
-    id: ''
+    id: '',
   })
 }
 
@@ -48,28 +50,55 @@ body
     p Cool Pug example!
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
+    { filename: 'example.vue', sourceMap: true },
   ).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   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',
-    sourceMap: true
+    sourceMap: true,
   }).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   expect(result.errors.length).toBe(1)
@@ -81,8 +110,8 @@ test('transform asset url options', () => {
   const { code: code1 } = compile({
     ...input,
     transformAssetUrls: {
-      tags: { foo: ['bar'] }
-    }
+      tags: { foo: ['bar'] },
+    },
   })
   expect(code1).toMatch(`import _imports_0 from 'baz'\n`)
 
@@ -90,15 +119,15 @@ test('transform asset url options', () => {
   const { code: code2 } = compile({
     ...input,
     transformAssetUrls: {
-      foo: ['bar']
-    }
+      foo: ['bar'],
+    },
   })
   expect(code2).toMatch(`import _imports_0 from 'baz'\n`)
 
   // false option
   const { code: code3 } = compile({
     ...input,
-    transformAssetUrls: false
+    transformAssetUrls: false,
   })
   expect(code3).not.toMatch(`import _imports_0 from 'baz'\n`)
 })
@@ -107,25 +136,194 @@ test('source map', () => {
   const template = parse(
     `
 <template>
-  <div><p>{{ render }}</p></div>
+  <div><p>{{ foobar }}</p></div>
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
-  ).descriptor.template as SFCTemplateBlock
+    { filename: 'example.vue', sourceMap: true },
+  ).descriptor.template!
 
-  const result = compile({
+  const { code, map } = compile({
     filename: 'example.vue',
-    source: template.content
+    source: template.content,
   })
 
-  expect(result.map).toMatchSnapshot()
+  expect(map!.sources).toEqual([`example.vue`])
+  expect(map!.sourcesContent).toEqual([template.content])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  expect(
+    consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+  ).toMatchObject(getPositionInCode(template.content, `foobar`))
+})
+
+test('should work w/ AST from descriptor', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  expect(template.ast!.source).toBe(source)
+
+  const { code, map } = compile({
+    filename: 'example.vue',
+    source: template.content,
+    ast: template.ast,
+  })
+
+  expect(map!.sources).toEqual([`example.vue`])
+  // when reusing AST from SFC parse for template compile,
+  // the source corresponds to the entire SFC
+  expect(map!.sourcesContent).toEqual([source])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  expect(
+    consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+  ).toMatchObject(getPositionInCode(source, `foobar`))
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+    }).code,
+  )
+})
+
+test('should work w/ AST from descriptor in SSR mode', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  expect(template.ast!.source).toBe(source)
+
+  const { code, map } = compile({
+    filename: 'example.vue',
+    source: '', // make sure it's actually using the AST instead of source
+    ast: template.ast,
+    ssr: true,
+  })
+
+  expect(map!.sources).toEqual([`example.vue`])
+  // when reusing AST from SFC parse for template compile,
+  // the source corresponds to the entire SFC
+  expect(map!.sourcesContent).toEqual([source])
+
+  const consumer = new SourceMapConsumer(map as RawSourceMap)
+  expect(
+    consumer.originalPositionFor(getPositionInCode(code, 'foobar')),
+  ).toMatchObject(getPositionInCode(source, `foobar`))
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+      ssr: true,
+    }).code,
+  )
+})
+
+test('should not reuse AST if using custom compiler', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  const { code } = compile({
+    filename: 'example.vue',
+    source: template.content,
+    ast: template.ast,
+    compiler: {
+      parse: () => null as any,
+      // @ts-expect-error
+      compile: input => ({ code: input }),
+    },
+  })
+
+  // what we really want to assert is that the `input` received by the custom
+  // compiler is the source string, not the AST.
+  expect(code).toBe(template.content)
+})
+
+test('should force re-parse on already transformed AST', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  // force set to empty, if this is reused then it won't generate proper code
+  template.ast!.children = []
+  template.ast!.transformed = true
+
+  const { code } = compile({
+    filename: 'example.vue',
+    source: '',
+    ast: template.ast,
+  })
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+    }).code,
+  )
+})
+
+test('should force re-parse with correct compiler in SSR mode', () => {
+  const source = `
+  <template>
+    <div><p>{{ foobar }}</p></div>
+  </template>
+  `
+  const template = parse(source, {
+    filename: 'example.vue',
+    sourceMap: true,
+  }).descriptor.template!
+
+  // force set to empty, if this is reused then it won't generate proper code
+  template.ast!.children = []
+  template.ast!.transformed = true
+
+  const { code } = compile({
+    filename: 'example.vue',
+    source: '',
+    ast: template.ast,
+    ssr: true,
+  })
+
+  expect(code).toBe(
+    compile({
+      filename: 'example.vue',
+      source: template.content,
+      ssr: true,
+    }).code,
+  )
 })
 
 test('template errors', () => {
   const result = compile({
     filename: 'example.vue',
-    source: `<div :foo
-      :bar="a[" v-model="baz"/>`
+    source: `<div
+      :bar="a[" v-model="baz"/>`,
   })
   expect(result.errors).toMatchSnapshot()
 })
@@ -137,20 +335,20 @@ test('preprocessor errors', () => {
   div(class='class)
 </template>
 `,
-    { filename: 'example.vue', sourceMap: true }
+    { filename: 'example.vue', sourceMap: true },
   ).descriptor.template as SFCTemplateBlock
 
   const result = compile({
     filename: 'example.vue',
     source: template.content,
-    preprocessLang: template.lang
+    preprocessLang: template.lang,
   })
 
   expect(result.errors.length).toBe(1)
   const message = result.errors[0].toString()
   expect(message).toMatch(`Error: example.vue:3:1`)
   expect(message).toMatch(
-    `The end of the string reached with no closing bracket ) found.`
+    `The end of the string reached with no closing bracket ) found.`,
   )
 })
 
@@ -164,7 +362,7 @@ test('should generate the correct imports expression', () => {
         <img src="./bar.svg"/>
       </Comp>
     `,
-    ssr: true
+    ssr: true,
   })
   expect(code).toMatch(`_ssrRenderAttr(\"src\", _imports_1)`)
   expect(code).toMatch(`_createVNode(\"img\", { src: _imports_1 })`)
@@ -186,7 +384,7 @@ test('should not hoist srcset URLs in SSR mode', () => {
       </picture>
     </router-link>
     `,
-    ssr: true
+    ssr: true,
   })
   expect(code).toMatchSnapshot()
 })
@@ -199,3 +397,90 @@ test('dynamic v-on + static v-on should merged', () => {
 
   expect(result.code).toMatchSnapshot()
 })
+
+// #9853 regression found in Nuxt tests
+// walkIdentifiers can get called multiple times on the same node
+// due to #9729 calling it during SFC template usage check.
+// conditions needed:
+// 1. `<script setup lang="ts">`
+// 2. Has import
+// 3. inlineTemplate: false
+// 4. AST being reused
+test('prefixing edge case for reused AST', () => {
+  const src = `
+  <script setup lang="ts">
+    import { Foo } from './foo'
+  </script>
+  <template>
+    {{ list.map((t, index) => ({ t: t })) }}
+  </template>
+  `
+  const { descriptor } = parse(src)
+  // compileScript triggers importUsageCheck
+  compileScript(descriptor, { id: 'xxx' })
+  const { code } = compileTemplate({
+    id: 'xxx',
+    filename: 'test.vue',
+    ast: descriptor.template!.ast,
+    source: descriptor.template!.content,
+  })
+  expect(code).not.toMatch(`_ctx.t`)
+})
+
+test('prefixing edge case for reused AST ssr mode', () => {
+  const src = `
+  <script setup lang="ts">
+    import { Foo } from './foo'
+  </script>
+  <template>
+    <Bar>
+      <template #option="{ foo }"></template>
+    </Bar>
+  </template>
+  `
+  const { descriptor } = parse(src)
+  // compileScript triggers importUsageCheck
+  compileScript(descriptor, { id: 'xxx' })
+  expect(() =>
+    compileTemplate({
+      id: 'xxx',
+      filename: 'test.vue',
+      ast: descriptor.template!.ast,
+      source: descriptor.template!.content,
+      ssr: true,
+    }),
+  ).not.toThrowError()
+})
+
+interface Pos {
+  line: number
+  column: number
+  name?: string
+}
+
+function getPositionInCode(
+  code: string,
+  token: string,
+  expectName: string | boolean = false,
+): Pos {
+  const generatedOffset = code.indexOf(token)
+  let line = 1
+  let lastNewLinePos = -1
+  for (let i = 0; i < generatedOffset; i++) {
+    if (code.charCodeAt(i) === 10 /* newline char code */) {
+      line++
+      lastNewLinePos = i
+    }
+  }
+  const res: Pos = {
+    line,
+    column:
+      lastNewLinePos === -1
+        ? generatedOffset
+        : generatedOffset - lastNewLinePos - 1,
+  }
+  if (expectName) {
+    res.name = typeof expectName === 'string' ? expectName : token
+  }
+  return res
+}
diff --git a/packages/compiler-sfc/__tests__/cssVars.spec.ts b/packages/compiler-sfc/__tests__/cssVars.spec.ts
index 5b01d73d772..323c9c7a599 100644
--- a/packages/compiler-sfc/__tests__/cssVars.spec.ts
+++ b/packages/compiler-sfc/__tests__/cssVars.spec.ts
@@ -1,5 +1,5 @@
 import { compileStyle, parse } from '../src'
-import { mockId, compileSFCScript, assertCode } from './utils'
+import { assertCode, compileSFCScript, mockId } from './utils'
 
 describe('CSS vars injection', () => {
   test('generating correct code for nested paths', () => {
@@ -8,7 +8,7 @@ describe('CSS vars injection', () => {
         `<style>div{
           color: v-bind(color);
           font-size: v-bind('font.size');
-        }</style>`
+        }</style>`,
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-color": (_ctx.color),
@@ -32,7 +32,7 @@ describe('CSS vars injection', () => {
           div {
             font-size: v-bind(size);
           }
-        </style>`
+        </style>`,
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-size": (_ctx.size)
@@ -57,7 +57,7 @@ describe('CSS vars injection', () => {
             font-size: v-bind(size);
             border: v-bind(foo);
           }
-        </style>`
+        </style>`,
     )
     // should handle:
     // 1. local const bindings
@@ -69,7 +69,7 @@ describe('CSS vars injection', () => {
   "${mockId}-foo": (__props.foo)
 })`)
     expect(content).toMatch(
-      `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`
+      `import { useCssVars as _useCssVars, unref as _unref } from 'vue'`,
     )
     assertCode(content)
   })
@@ -85,12 +85,12 @@ describe('CSS vars injection', () => {
         font-family: v-bind(フォント);
       }`,
       filename: 'test.css',
-      id: 'data-v-test'
+      id: 'data-v-test',
     })
     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-字号);
@@ -106,7 +106,7 @@ describe('CSS vars injection', () => {
           color: v-bind(color);
           font-size: v-bind('font.size');
         }</style>`,
-      { isProd: true }
+      { isProd: true },
     )
     expect(content).toMatch(`_useCssVars(_ctx => ({
   "4003f1a6": (_ctx.color),
@@ -120,7 +120,7 @@ describe('CSS vars injection', () => {
       }`,
       filename: 'test.css',
       id: mockId,
-      isProd: true
+      isProd: true,
     })
     expect(code).toMatchInlineSnapshot(`
       ".foo {
@@ -135,8 +135,8 @@ describe('CSS vars injection', () => {
       assertCode(
         compileSFCScript(
           `<script>const a = 1</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
+            `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -144,8 +144,8 @@ describe('CSS vars injection', () => {
       assertCode(
         compileSFCScript(
           `<script>export default { setup() {} }</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
+            `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -155,8 +155,8 @@ describe('CSS vars injection', () => {
           `<script>
           // export default {}
           export default {}
-        </script>\n` + `<style>div{ color: v-bind(color); }</style>`
-        ).content
+        </script>\n` + `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -164,8 +164,8 @@ describe('CSS vars injection', () => {
       assertCode(
         compileSFCScript(
           `<script setup>const color = 'red'</script>\n` +
-            `<style>div{ color: v-bind(color); }</style>`
-        ).content
+            `<style>div{ color: v-bind(color); }</style>`,
+        ).content,
       )
     })
 
@@ -178,7 +178,7 @@ describe('CSS vars injection', () => {
             div{ /* color: v-bind(color); */ width:20; }
             div{ width: v-bind(width); }
             /* comment */
-          </style>`
+          </style>`,
       )
 
       expect(content).not.toMatch(`"${mockId}-color": (color)`)
@@ -198,7 +198,7 @@ describe('CSS vars injection', () => {
           p {
             color: v-bind(color);
           }
-        </style>`
+        </style>`,
       )
       // color should only be injected once, even if it is twice in style
       expect(content).toMatch(`_useCssVars(_ctx => ({
@@ -229,7 +229,7 @@ describe('CSS vars injection', () => {
           p {
             color: v-bind(((a + b)) / (2 * a));
           }
-        </style>`
+        </style>`,
       )
       expect(content).toMatch(`_useCssVars(_ctx => ({
   "${mockId}-foo": (_unref(foo)),
@@ -243,7 +243,7 @@ describe('CSS vars injection', () => {
     // #6022
     test('should be able to parse incomplete expressions', () => {
       const {
-        descriptor: { cssVars }
+        descriptor: { cssVars },
       } = parse(
         `<script setup>let xxx = 1</script>
         <style scoped>
@@ -251,7 +251,7 @@ describe('CSS vars injection', () => {
           font-weight: v-bind("count.toString(");
           font-weight: v-bind(xxx);
         }
-        </style>`
+        </style>`,
       )
       expect(cssVars).toMatchObject([`count.toString(`, `xxx`])
     })
@@ -266,11 +266,79 @@ describe('CSS vars injection', () => {
              label {
                background: v-bind(background);
              }
-             </style>`
+             </style>`,
       )
       expect(content).toMatch(
-        `export default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCssVars(_ctx => ({\n  "xxxxxxxx-background": (_unref(background))\n}))`
+        `export default {\n  setup(__props, { expose: __expose }) {\n  __expose();\n\n_useCssVars(_ctx => ({\n  "xxxxxxxx-background": (_unref(background))\n}))`,
       )
     })
+
+    describe('skip codegen in SSR', () => {
+      test('script setup, inline', () => {
+        const { content } = compileSFCScript(
+          `<script setup>
+          let size = 1
+          </script>\n` +
+            `<style>
+              div {
+                font-size: v-bind(size);
+              }
+            </style>`,
+          {
+            inlineTemplate: true,
+            templateOptions: {
+              ssr: true,
+            },
+          },
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+
+      // #6926
+      test('script, non-inline', () => {
+        const { content } = compileSFCScript(
+          `<script setup>
+          let size = 1
+          </script>\n` +
+            `<style>
+              div {
+                font-size: v-bind(size);
+              }
+            </style>`,
+          {
+            inlineTemplate: false,
+            templateOptions: {
+              ssr: true,
+            },
+          },
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+
+      test('normal script', () => {
+        const { content } = compileSFCScript(
+          `<script>
+          export default {
+            setup() {
+              return {
+                size: ref('100px')
+              }
+            }
+          }
+          </script>\n` +
+            `<style>
+              div {
+                font-size: v-bind(size);
+              }
+            </style>`,
+          {
+            templateOptions: {
+              ssr: true,
+            },
+          },
+        )
+        expect(content).not.toMatch(`_useCssVars`)
+      })
+    })
   })
 })
diff --git a/packages/compiler-sfc/__tests__/parse.spec.ts b/packages/compiler-sfc/__tests__/parse.spec.ts
index c7a17ab1739..048dab693aa 100644
--- a/packages/compiler-sfc/__tests__/parse.spec.ts
+++ b/packages/compiler-sfc/__tests__/parse.spec.ts
@@ -1,5 +1,10 @@
 import { parse } from '../src'
-import { baseParse, baseCompile } from '@vue/compiler-core'
+import {
+  ElementTypes,
+  NodeTypes,
+  baseCompile,
+  createRoot,
+} from '@vue/compiler-core'
 import { SourceMapConsumer } from 'source-map-js'
 
 describe('compiler:sfc', () => {
@@ -7,15 +12,61 @@ describe('compiler:sfc', () => {
     test('style block', () => {
       // Padding determines how many blank lines will there be before the style block
       const padding = Math.round(Math.random() * 10)
-      const style = parse(
-        `${'\n'.repeat(padding)}<style>\n.color {\n color: red;\n }\n</style>\n`
-      ).descriptor.styles[0]
+      const src =
+        `${'\n'.repeat(padding)}` +
+        `<style>
+.css {
+color: red;
+}
+</style>
 
-      expect(style.map).not.toBeUndefined()
+<style module>
+.css-module {
+color: red;
+}
+</style>
 
-      const consumer = new SourceMapConsumer(style.map!)
+<style scoped>
+.css-scoped {
+color: red;
+}
+</style>
+
+<style scoped>
+.css-scoped-nested {
+color: red;
+.dummy {
+color: green;
+}
+font-weight: bold;
+}
+</style>`
+      const {
+        descriptor: { styles },
+      } = parse(src)
+
+      expect(styles[0].map).not.toBeUndefined()
+      const consumer = new SourceMapConsumer(styles[0].map!)
+      const lineOffset =
+        src.slice(0, src.indexOf(`<style>`)).split('\n').length - 1
       consumer.eachMapping(mapping => {
-        expect(mapping.originalLine - mapping.generatedLine).toBe(padding)
+        expect(mapping.generatedLine + lineOffset).toBe(mapping.originalLine)
+      })
+
+      expect(styles[1].map).not.toBeUndefined()
+      const consumer1 = new SourceMapConsumer(styles[1].map!)
+      const lineOffset1 =
+        src.slice(0, src.indexOf(`<style module>`)).split('\n').length - 1
+      consumer1.eachMapping(mapping => {
+        expect(mapping.generatedLine + lineOffset1).toBe(mapping.originalLine)
+      })
+
+      expect(styles[2].map).not.toBeUndefined()
+      const consumer2 = new SourceMapConsumer(styles[2].map!)
+      const lineOffset2 =
+        src.slice(0, src.indexOf(`<style scoped>`)).split('\n').length - 1
+      consumer2.eachMapping(mapping => {
+        expect(mapping.generatedLine + lineOffset2).toBe(mapping.originalLine)
       })
     })
 
@@ -23,7 +74,7 @@ describe('compiler:sfc', () => {
       // Padding determines how many blank lines will there be before the style block
       const padding = Math.round(Math.random() * 10)
       const script = parse(
-        `${'\n'.repeat(padding)}<script>\nconsole.log(1)\n }\n</script>\n`
+        `${'\n'.repeat(padding)}<script>\nconsole.log(1)\n }\n</script>\n`,
       ).descriptor.script
 
       expect(script!.map).not.toBeUndefined()
@@ -34,10 +85,30 @@ 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(
-        `${'\n'.repeat(padding)}<i18n>\n{\n  "greeting": "hello"\n}\n</i18n>\n`
+        `${'\n'.repeat(padding)}<i18n>\n{\n  "greeting": "hello"\n}\n</i18n>\n`,
       ).descriptor.customBlocks[0]
 
       expect(custom!.map).not.toBeUndefined()
@@ -72,42 +143,42 @@ h1 { color: red }
 
     const padTrue = parse(content.trim(), { pad: true }).descriptor
     expect(padTrue.script!.content).toBe(
-      Array(3 + 1).join('//\n') + '\nexport default {}\n'
+      Array(3 + 1).join('//\n') + '\nexport default {}\n',
     )
     expect(padTrue.styles[0].content).toBe(
-      Array(6 + 1).join('\n') + '\nh1 { color: red }\n'
+      Array(6 + 1).join('\n') + '\nh1 { color: red }\n',
     )
     expect(padTrue.customBlocks[0].content).toBe(
-      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n'
+      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n',
     )
 
     const padLine = parse(content.trim(), { pad: 'line' }).descriptor
     expect(padLine.script!.content).toBe(
-      Array(3 + 1).join('//\n') + '\nexport default {}\n'
+      Array(3 + 1).join('//\n') + '\nexport default {}\n',
     )
     expect(padLine.styles[0].content).toBe(
-      Array(6 + 1).join('\n') + '\nh1 { color: red }\n'
+      Array(6 + 1).join('\n') + '\nh1 { color: red }\n',
     )
     expect(padLine.customBlocks[0].content).toBe(
-      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n'
+      Array(9 + 1).join('\n') + '\n{ "greeting": "hello" }\n',
     )
 
     const padSpace = parse(content.trim(), { pad: 'space' }).descriptor
     expect(padSpace.script!.content).toBe(
       `<template>\n<div></div>\n</template>\n<script>`.replace(/./g, ' ') +
-        '\nexport default {}\n'
+        '\nexport default {}\n',
     )
     expect(padSpace.styles[0].content).toBe(
       `<template>\n<div></div>\n</template>\n<script>\nexport default {}\n</script>\n<style>`.replace(
         /./g,
-        ' '
-      ) + '\nh1 { color: red }\n'
+        ' ',
+      ) + '\nh1 { color: red }\n',
     )
     expect(padSpace.customBlocks[0].content).toBe(
       `<template>\n<div></div>\n</template>\n<script>\nexport default {}\n</script>\n<style>\nh1 { color: red }\n</style>\n<i18n>`.replace(
         /./g,
-        ' '
-      ) + '\n{ "greeting": "hello" }\n'
+        ' ',
+      ) + '\n{ "greeting": "hello" }\n',
     )
   })
 
@@ -121,9 +192,8 @@ h1 { color: red }
       end: {
         line: 3,
         column: 1,
-        offset: 10 + content.length
+        offset: 10 + content.length,
       },
-      source: content
     })
   })
 
@@ -132,9 +202,8 @@ h1 { color: red }
     expect(descriptor.template).toBeTruthy()
     expect(descriptor.template!.content).toBeFalsy()
     expect(descriptor.template!.loc).toMatchObject({
-      start: { line: 1, column: 1, offset: 0 },
-      end: { line: 1, column: 1, offset: 0 },
-      source: ''
+      start: { line: 1, column: 12, offset: 11 },
+      end: { line: 1, column: 12, offset: 11 },
     })
   })
 
@@ -145,7 +214,6 @@ h1 { color: red }
     expect(descriptor.template!.loc).toMatchObject({
       start: { line: 1, column: 11, offset: 10 },
       end: { line: 1, column: 11, offset: 10 },
-      source: ''
     })
   })
 
@@ -156,7 +224,7 @@ h1 { color: red }
     expect(parse(`<style> \n\t </style>`).descriptor.styles.length).toBe(0)
     expect(parse(`<custom/>`).descriptor.customBlocks.length).toBe(0)
     expect(
-      parse(`<custom> \n\t </custom>`).descriptor.customBlocks.length
+      parse(`<custom> \n\t </custom>`).descriptor.customBlocks.length,
     ).toBe(0)
   })
 
@@ -167,25 +235,28 @@ h1 { color: red }
     expect(descriptor.script!.attrs['src']).toBe('com')
   })
 
+  test('should not expose ast on template node if has src import', () => {
+    const { descriptor } = parse(`<template src="./foo.html"/>`)
+    expect(descriptor.template!.ast).toBeUndefined()
+  })
+
   test('ignoreEmpty: false', () => {
     const { descriptor } = parse(
       `<script></script>\n<script setup>\n</script>`,
       {
-        ignoreEmpty: false
-      }
+        ignoreEmpty: false,
+      },
     )
     expect(descriptor.script).toBeTruthy()
     expect(descriptor.script!.loc).toMatchObject({
-      source: '',
       start: { line: 1, column: 9, offset: 8 },
-      end: { line: 1, column: 9, offset: 8 }
+      end: { line: 1, column: 9, offset: 8 },
     })
 
     expect(descriptor.scriptSetup).toBeTruthy()
     expect(descriptor.scriptSetup!.loc).toMatchObject({
-      source: '\n',
       start: { line: 2, column: 15, offset: 32 },
-      end: { line: 3, column: 1, offset: 33 }
+      end: { line: 3, column: 1, offset: 33 },
     })
   })
 
@@ -201,20 +272,22 @@ h1 { color: red }
   test('treat empty lang attribute as the html', () => {
     const content = `<div><template v-if="ok">ok</template></div>`
     const { descriptor, errors } = parse(
-      `<template lang="">${content}</template>`
+      `<template lang="">${content}</template>`,
     )
     expect(descriptor.template!.content).toBe(content)
     expect(errors.length).toBe(0)
   })
 
   // #1120
-  test('alternative template lang should be treated as plain text', () => {
-    const content = `p(v-if="1 < 2") test`
+  test('template with preprocessor lang should be treated as plain text', () => {
+    const content = `p(v-if="1 < 2") test <div/>`
     const { descriptor, errors } = parse(
-      `<template lang="pug">` + content + `</template>`
+      `<template lang="pug">` + content + `</template>`,
     )
     expect(errors.length).toBe(0)
     expect(descriptor.template!.content).toBe(content)
+    // should not attempt to parse the content
+    expect(descriptor.template!.ast!.children.length).toBe(1)
   })
 
   //#2566
@@ -233,17 +306,17 @@ h1 { color: red }
     expect(parse(`<template>hi</template>`).descriptor.slotted).toBe(false)
     expect(
       parse(`<template>hi</template><style>h1{color:red;}</style>`).descriptor
-        .slotted
+        .slotted,
     ).toBe(false)
     expect(
       parse(
-        `<template>hi</template><style scoped>:slotted(h1){color:red;}</style>`
-      ).descriptor.slotted
+        `<template>hi</template><style scoped>:slotted(h1){color:red;}</style>`,
+      ).descriptor.slotted,
     ).toBe(true)
     expect(
       parse(
-        `<template>hi</template><style scoped>::v-slotted(h1){color:red;}</style>`
-      ).descriptor.slotted
+        `<template>hi</template><style scoped>::v-slotted(h1){color:red;}</style>`,
+      ).descriptor.slotted,
     ).toBe(true)
   })
 
@@ -260,21 +333,54 @@ h1 { color: red }
   test('custom compiler', () => {
     const { errors } = parse(`<template><input></template>`, {
       compiler: {
-        parse: baseParse,
-        compile: baseCompile
-      }
+        parse: (_, options) => {
+          options.onError!(new Error('foo') as any)
+          return createRoot([])
+        },
+        compile: baseCompile,
+      },
     })
-    expect(errors.length).toBe(1)
+    expect(errors.length).toBe(2)
+    // error thrown by the custom parse
+    expect(errors[0].message).toBe('foo')
+    // error thrown based on the returned root
+    expect(errors[1].message).toMatch('At least one')
   })
 
   test('treat custom blocks as raw text', () => {
     const { errors, descriptor } = parse(
-      `<template><input></template><foo> <-& </foo>`
+      `<template><input></template><foo> <-& </foo>`,
     )
     expect(errors.length).toBe(0)
     expect(descriptor.customBlocks[0].content).toBe(` <-& `)
   })
 
+  test('should accept parser options', () => {
+    const { errors, descriptor } = parse(`<template><hello/></template>`, {
+      templateParseOptions: {
+        isCustomElement: t => t === 'hello',
+      },
+    })
+    expect(errors.length).toBe(0)
+    expect(descriptor.template!.ast!.children[0]).toMatchObject({
+      type: NodeTypes.ELEMENT,
+      tag: 'hello',
+      tagType: ElementTypes.ELEMENT,
+    })
+
+    // test cache invalidation on different options
+    const { descriptor: d2 } = parse(`<template><hello/></template>`, {
+      templateParseOptions: {
+        isCustomElement: t => t !== 'hello',
+      },
+    })
+    expect(d2.template!.ast!.children[0]).toMatchObject({
+      type: NodeTypes.ELEMENT,
+      tag: 'hello',
+      tagType: ElementTypes.COMPONENT,
+    })
+  })
+
   describe('warnings', () => {
     function assertWarning(errors: Error[], msg: string) {
       expect(errors.some(e => e.message.match(msg))).toBe(true)
@@ -283,7 +389,7 @@ h1 { color: red }
     test('should only allow single template element', () => {
       assertWarning(
         parse(`<template><div/></template><template><div/></template>`).errors,
-        `Single file component can contain only one <template> element`
+        `Single file component can contain only one <template> element`,
       )
     })
 
@@ -291,24 +397,24 @@ h1 { color: red }
       assertWarning(
         parse(`<script>console.log(1)</script><script>console.log(1)</script>`)
           .errors,
-        `Single file component can contain only one <script> element`
+        `Single file component can contain only one <script> element`,
       )
     })
 
     test('should only allow single script setup element', () => {
       assertWarning(
         parse(
-          `<script setup>console.log(1)</script><script setup>console.log(1)</script>`
+          `<script setup>console.log(1)</script><script setup>console.log(1)</script>`,
         ).errors,
-        `Single file component can contain only one <script setup> element`
+        `Single file component can contain only one <script setup> element`,
       )
     })
 
     test('should not warn script & script setup', () => {
       expect(
         parse(
-          `<script setup>console.log(1)</script><script>console.log(1)</script>`
-        ).errors.length
+          `<script setup>console.log(1)</script><script>console.log(1)</script>`,
+        ).errors.length,
       ).toBe(0)
     })
 
@@ -316,7 +422,7 @@ h1 { color: red }
     test('should throw error if no <template> or <script> is present', () => {
       assertWarning(
         parse(`import { ref } from 'vue'`).errors,
-        `At least one <template> or <script> is required in a single file component`
+        `At least one <template> or <script> is required in a single file component`,
       )
     })
   })
diff --git a/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts b/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts
index bed27e3ae81..5b30b2062ad 100644
--- a/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts
+++ b/packages/compiler-sfc/__tests__/rewriteDefault.spec.ts
@@ -11,7 +11,7 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test('rewrite export default', () => {
     expect(
-      rewriteDefault(`export  default {}`, 'script')
+      rewriteDefault(`export  default {}`, 'script'),
     ).toMatchInlineSnapshot(`"const script = {}"`)
   })
 
@@ -27,8 +27,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \n export { a as b, a as default, a as c}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export { a as b,  a as c}
@@ -38,8 +38,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \n export { a as b, a as default    , a as c}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export { a as b,  a as c}
@@ -49,8 +49,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \n export { a as b } \n export { a as default, a as c }`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export { a as b } 
@@ -69,7 +69,7 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test('export named default multiline', () => {
     expect(
-      rewriteDefault(`let App = {}\n export {\nApp as default\n}`, '_sfc_main')
+      rewriteDefault(`let App = {}\n export {\nApp as default\n}`, '_sfc_main'),
     ).toMatchInlineSnapshot(`
       "let App = {}
        export {
@@ -84,8 +84,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `const a = 1 \n export {\n a as b,\n a as default,\n a as c}\n` +
           `// export { myFunction as default }`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export {
@@ -100,8 +100,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `const a = 1 \n export {\n a as b,\n a as default      ,\n a as c}\n` +
           `// export { myFunction as default }`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const a = 1 
        export {
@@ -115,7 +115,7 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test(`export { default } from '...'`, async () => {
     expect(
-      rewriteDefault(`export { default, foo } from './index.js'`, 'script')
+      rewriteDefault(`export { default, foo } from './index.js'`, 'script'),
     ).toMatchInlineSnapshot(`
       "import { default as __VUE_DEFAULT__ } from './index.js'
       export {  foo } from './index.js'
@@ -123,7 +123,7 @@ describe('compiler sfc: rewriteDefault', () => {
     `)
 
     expect(
-      rewriteDefault(`export { default    , foo } from './index.js'`, 'script')
+      rewriteDefault(`export { default    , foo } from './index.js'`, 'script'),
     ).toMatchInlineSnapshot(`
       "import { default as __VUE_DEFAULT__ } from './index.js'
       export {  foo } from './index.js'
@@ -131,7 +131,7 @@ describe('compiler sfc: rewriteDefault', () => {
     `)
 
     expect(
-      rewriteDefault(`export { foo,   default } from './index.js'`, 'script')
+      rewriteDefault(`export { foo,   default } from './index.js'`, 'script'),
     ).toMatchInlineSnapshot(`
       "import { default as __VUE_DEFAULT__ } from './index.js'
       export { foo,    } from './index.js'
@@ -141,8 +141,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { foo as default, bar } from './index.js'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export {  bar } from './index.js'
@@ -152,8 +152,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { foo as default     , bar } from './index.js'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export {  bar } from './index.js'
@@ -163,8 +163,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { bar,   foo as default } from './index.js'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export { bar,    } from './index.js'
@@ -174,8 +174,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export { foo as default } from './index.js' \n const foo = 1`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { foo as __VUE_DEFAULT__ } from './index.js'
       export {  } from './index.js' 
@@ -186,8 +186,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `const a = 1 \nexport { a as default } from 'xxx'`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "import { a as __VUE_DEFAULT__ } from 'xxx'
       const a = 1 
@@ -206,7 +206,10 @@ describe('compiler sfc: rewriteDefault', () => {
 
   test('export default class w/ comments', async () => {
     expect(
-      rewriteDefault(`// export default\nexport default class Foo {}`, 'script')
+      rewriteDefault(
+        `// export default\nexport default class Foo {}`,
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "// export default
        class Foo {}
@@ -218,8 +221,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export default {}\n` + `// export default class Foo {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const script = {}
       // export default class Foo {}"
@@ -230,8 +233,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `/*\nexport default class Foo {}*/\n` + `export default class Bar {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "/*
       export default class Foo {}*/
@@ -243,8 +246,8 @@ describe('compiler sfc: rewriteDefault', () => {
   test('@Component\nexport default class', async () => {
     expect(
       rewriteDefault(`@Component\nexport default class Foo {}`, 'script', [
-        'decorators-legacy'
-      ])
+        'decorators-legacy',
+      ]),
     ).toMatchInlineSnapshot(`
       "@Component class Foo {}
       const script = Foo"
@@ -256,8 +259,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `// export default\n@Component\nexport default class Foo {}`,
         'script',
-        ['decorators-legacy']
-      )
+        ['decorators-legacy'],
+      ),
     ).toMatchInlineSnapshot(`
       "// export default
       @Component class Foo {}
@@ -269,8 +272,8 @@ describe('compiler sfc: rewriteDefault', () => {
     expect(
       rewriteDefault(
         `export default {}\n` + `// @Component\n// export default class Foo {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "const script = {}
       // @Component
@@ -283,8 +286,8 @@ describe('compiler sfc: rewriteDefault', () => {
       rewriteDefault(
         `/*\n@Component\nexport default class Foo {}*/\n` +
           `export default class Bar {}`,
-        'script'
-      )
+        'script',
+      ),
     ).toMatchInlineSnapshot(`
       "/*
       @Component
diff --git a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
index f267e73ede0..a1f62f43a3c 100644
--- a/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformAssetUrl.spec.ts
@@ -1,14 +1,14 @@
 import {
-  generate,
+  type TransformOptions,
   baseParse,
+  generate,
   transform,
-  TransformOptions
 } from '@vue/compiler-core'
 import {
-  transformAssetUrl,
+  type AssetURLOptions,
   createAssetUrlTransformWithOptions,
-  AssetURLOptions,
-  normalizeOptions
+  normalizeOptions,
+  transformAssetUrl,
 } from '../src/template/transformAssetUrl'
 import { transformElement } from '../../compiler-core/src/transforms/transformElement'
 import { transformBind } from '../../compiler-core/src/transforms/vBind'
@@ -17,7 +17,7 @@ import { stringifyStatic } from '../../compiler-dom/src/transforms/stringifyStat
 function compileWithAssetUrls(
   template: string,
   options?: AssetURLOptions,
-  transformOptions?: TransformOptions
+  transformOptions?: TransformOptions,
 ) {
   const ast = baseParse(template)
   const t = options
@@ -26,9 +26,9 @@ function compileWithAssetUrls(
   transform(ast, {
     nodeTransforms: [t, transformElement],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...transformOptions
+    ...transformOptions,
   })
   return generate(ast, { mode: 'module' })
 }
@@ -57,8 +57,8 @@ describe('compiler sfc: transform asset url', () => {
         '<use href="~@svg/file.svg#fragment"></use>',
       {},
       {
-        hoistStatic: true
-      }
+        hoistStatic: true,
+      },
     )
     expect(result.code).toMatchSnapshot()
   })
@@ -79,8 +79,8 @@ describe('compiler sfc: transform asset url', () => {
         `<img src="~bar.png"></img>` + // -> still converts to import
         `<img src="@theme/bar.png"></img>`, // -> still converts to import
       {
-        base: '/foo'
-      }
+        base: '/foo',
+      },
     )
     expect(code).toMatch(`import _imports_0 from 'bar.png'`)
     expect(code).toMatch(`import _imports_1 from '@theme/bar.png'`)
@@ -94,8 +94,8 @@ describe('compiler sfc: transform asset url', () => {
         `<img src="https://foo.bar/baz.png"/>` +
         `<img src="//foo.bar/baz.png"/>`,
       {
-        includeAbsolute: true
-      }
+        includeAbsolute: true,
+      },
     )
     expect(code).toMatchSnapshot()
   })
@@ -108,7 +108,7 @@ describe('compiler sfc: transform asset url', () => {
           <circle id="myCircle" cx="0" cy="0" r="5" />
         </defs>
         <use x="5" y="5" xlink:href="#myCircle" />
-      </svg>`
+      </svg>`,
     )
     // should not remove it
     expect(code).toMatch(`"xlink:href": "#myCircle"`)
@@ -116,7 +116,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, with paths', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: 'http://localhost:3000/src/'
+      base: 'http://localhost:3000/src/',
     })
 
     expect(code).toMatchSnapshot()
@@ -124,7 +124,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, without paths', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: 'http://localhost:3000'
+      base: 'http://localhost:3000',
     })
 
     expect(code).toMatchSnapshot()
@@ -132,7 +132,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, without port', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: 'http://localhost'
+      base: 'http://localhost',
     })
 
     expect(code).toMatchSnapshot()
@@ -140,7 +140,7 @@ describe('compiler sfc: transform asset url', () => {
 
   test('should allow for full base URLs, without protocol', () => {
     const { code } = compileWithAssetUrls(`<img src="./logo.png" />`, {
-      base: '//localhost'
+      base: '//localhost',
     })
 
     expect(code).toMatchSnapshot()
@@ -156,14 +156,44 @@ describe('compiler sfc: transform asset url', () => {
         `<img src="./bar.png"/>` +
         `</div>`,
       {
-        includeAbsolute: true
+        includeAbsolute: true,
       },
       {
         hoistStatic: true,
-        transformHoist: stringifyStatic
-      }
+        transformHoist: stringifyStatic,
+      },
     )
     expect(code).toMatch(`_createStaticVNode`)
     expect(code).toMatchSnapshot()
   })
+
+  test('transform with stringify with space in absolute filename', () => {
+    const { code } = compileWithAssetUrls(
+      `<div><img src="/foo bar.png"/></div>`,
+      {
+        includeAbsolute: true,
+      },
+      {
+        hoistStatic: true,
+        transformHoist: stringifyStatic,
+      },
+    )
+    expect(code).toMatch(`_createElementVNode`)
+    expect(code).toContain(`import _imports_0 from '/foo bar.png'`)
+  })
+
+  test('transform with stringify with space in relative filename', () => {
+    const { code } = compileWithAssetUrls(
+      `<div><img src="./foo bar.png"/></div>`,
+      {
+        includeAbsolute: true,
+      },
+      {
+        hoistStatic: true,
+        transformHoist: stringifyStatic,
+      },
+    )
+    expect(code).toMatch(`_createElementVNode`)
+    expect(code).toContain(`import _imports_0 from './foo bar.png'`)
+  })
 })
diff --git a/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts b/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
index 174e3ca9f79..491731f94e5 100644
--- a/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
@@ -1,25 +1,25 @@
 import {
-  generate,
+  type TransformOptions,
   baseParse,
+  generate,
   transform,
-  TransformOptions
 } from '@vue/compiler-core'
 import {
+  createSrcsetTransformWithOptions,
   transformSrcset,
-  createSrcsetTransformWithOptions
 } from '../src/template/transformSrcset'
 import { transformElement } from '../../compiler-core/src/transforms/transformElement'
 import { transformBind } from '../../compiler-core/src/transforms/vBind'
 import {
-  AssetURLOptions,
-  normalizeOptions
+  type AssetURLOptions,
+  normalizeOptions,
 } from '../src/template/transformAssetUrl'
 import { stringifyStatic } from '../../compiler-dom/src/transforms/stringifyStatic'
 
 function compileWithSrcset(
   template: string,
   options?: AssetURLOptions,
-  transformOptions?: TransformOptions
+  transformOptions?: TransformOptions,
 ) {
   const ast = baseParse(template)
   const srcsetTransform = options
@@ -29,9 +29,9 @@ function compileWithSrcset(
     hoistStatic: true,
     nodeTransforms: [srcsetTransform, transformElement],
     directiveTransforms: {
-      bind: transformBind
+      bind: transformBind,
     },
-    ...transformOptions
+    ...transformOptions,
   })
   return generate(ast, { mode: 'module' })
 }
@@ -59,16 +59,16 @@ describe('compiler sfc: transform srcset', () => {
   test('transform srcset w/ base', () => {
     expect(
       compileWithSrcset(src, {
-        base: '/foo'
-      }).code
+        base: '/foo',
+      }).code,
     ).toMatchSnapshot()
   })
 
   test('transform srcset w/ includeAbsolute: true', () => {
     expect(
       compileWithSrcset(src, {
-        includeAbsolute: true
-      }).code
+        includeAbsolute: true,
+      }).code,
     ).toMatchSnapshot()
   })
 
@@ -76,12 +76,12 @@ describe('compiler sfc: transform srcset', () => {
     const code = compileWithSrcset(
       `<div>${src}</div>`,
       {
-        includeAbsolute: true
+        includeAbsolute: true,
       },
       {
         hoistStatic: true,
-        transformHoist: stringifyStatic
-      }
+        transformHoist: stringifyStatic,
+      },
     ).code
     expect(code).toMatch(`_createStaticVNode`)
     expect(code).toMatchSnapshot()
@@ -94,7 +94,7 @@ describe('compiler sfc: transform srcset', () => {
       <img srcset="@/logo.png 1x, ./logo.png 2x"/>
     `,
       { base: '/foo/' },
-      { hoistStatic: true }
+      { hoistStatic: true },
     ).code
     expect(code).toMatchSnapshot()
   })
diff --git a/packages/compiler-sfc/__tests__/templateUtils.spec.ts b/packages/compiler-sfc/__tests__/templateUtils.spec.ts
index 7e20603848c..b2adbf36c95 100644
--- a/packages/compiler-sfc/__tests__/templateUtils.spec.ts
+++ b/packages/compiler-sfc/__tests__/templateUtils.spec.ts
@@ -1,7 +1,7 @@
 import {
-  isRelativeUrl,
+  isDataUrl,
   isExternalUrl,
-  isDataUrl
+  isRelativeUrl,
 } from '../src/template/templateUtils'
 
 describe('compiler sfc:templateUtils isRelativeUrl', () => {
diff --git a/packages/compiler-sfc/__tests__/utils.ts b/packages/compiler-sfc/__tests__/utils.ts
index ffa12652c83..5498ede2717 100644
--- a/packages/compiler-sfc/__tests__/utils.ts
+++ b/packages/compiler-sfc/__tests__/utils.ts
@@ -1,8 +1,8 @@
 import {
-  parse,
-  SFCScriptCompileOptions,
+  type SFCParseOptions,
+  type SFCScriptCompileOptions,
   compileScript,
-  SFCParseOptions
+  parse,
 } from '../src'
 import { parse as babelParse } from '@babel/parser'
 
@@ -11,12 +11,15 @@ export const mockId = 'xxxxxxxx'
 export function compileSFCScript(
   src: string,
   options?: Partial<SFCScriptCompileOptions>,
-  parseOptions?: SFCParseOptions
+  parseOptions?: SFCParseOptions,
 ) {
-  const { descriptor } = parse(src, parseOptions)
+  const { descriptor, errors } = parse(src, parseOptions)
+  if (errors.length) {
+    console.warn(errors[0])
+  }
   return compileScript(descriptor, {
     ...options,
-    id: mockId
+    id: mockId,
   })
 }
 
@@ -25,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/package.json b/packages/compiler-sfc/package.json
index 69749c8eb3e..71157d598a2 100644
--- a/packages/compiler-sfc/package.json
+++ b/packages/compiler-sfc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -8,6 +8,16 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/compiler-sfc.d.ts",
+      "node": "./dist/compiler-sfc.cjs.js",
+      "module": "./dist/compiler-sfc.esm-browser.js",
+      "import": "./dist/compiler-sfc.esm-browser.js",
+      "require": "./dist/compiler-sfc.cjs.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueCompilerSFC",
     "formats": [
@@ -32,28 +42,26 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.0",
-    "@vue/compiler-core": "3.3.5",
-    "@vue/compiler-dom": "3.3.5",
-    "@vue/compiler-ssr": "3.3.5",
-    "@vue/reactivity-transform": "3.3.5",
-    "@vue/shared": "3.3.5",
+    "@babel/parser": "^7.23.9",
+    "@vue/compiler-core": "workspace:*",
+    "@vue/compiler-dom": "workspace:*",
+    "@vue/compiler-ssr": "workspace:*",
+    "@vue/shared": "workspace:*",
     "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.5",
-    "postcss": "^8.4.31",
+    "magic-string": "^0.30.6",
+    "postcss": "^8.4.33",
     "source-map-js": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.0",
-    "@types/estree": "^0.0.52",
-    "@vue/consolidate": "^0.17.3",
+    "@babel/types": "^7.23.9",
+    "@vue/consolidate": "^1.0.0",
     "hash-sum": "^2.0.0",
-    "lru-cache": "^10.0.1",
+    "lru-cache": "10.1.0",
     "merge-source-map": "^1.1.0",
     "minimatch": "^9.0.3",
-    "postcss-modules": "^4.3.1",
-    "postcss-selector-parser": "^6.0.13",
+    "postcss-modules": "^6.0.0",
+    "postcss-selector-parser": "^6.0.15",
     "pug": "^3.0.2",
-    "sass": "^1.69.4"
+    "sass": "^1.70.0"
   }
 }
diff --git a/packages/compiler-sfc/src/cache.ts b/packages/compiler-sfc/src/cache.ts
index f04b231f6d9..38fedcaf85d 100644
--- a/packages/compiler-sfc/src/cache.ts
+++ b/packages/compiler-sfc/src/cache.ts
@@ -1,7 +1,7 @@
 import { LRUCache } from 'lru-cache'
 
 export function createCache<T extends {}>(
-  max = 500
+  max = 500,
 ): Map<string, T> | LRUCache<string, T> {
   if (__GLOBAL__ || __ESM_BROWSER__) {
     return new Map<string, T>()
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index cfcc607c72d..46fc65c0069 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -2,54 +2,56 @@ import {
   BindingTypes,
   UNREF,
   isFunctionType,
-  walkIdentifiers
+  unwrapTSNode,
+  walkIdentifiers,
 } from '@vue/compiler-dom'
-import { DEFAULT_FILENAME, SFCDescriptor, SFCScriptBlock } from './parse'
-import { ParserPlugin } from '@babel/parser'
-import { generateCodeFrame } from '@vue/shared'
 import {
-  Node,
-  Declaration,
-  ObjectPattern,
+  DEFAULT_FILENAME,
+  type SFCDescriptor,
+  type SFCScriptBlock,
+} from './parse'
+import type { ParserPlugin } from '@babel/parser'
+import { generateCodeFrame } from '@vue/shared'
+import type {
   ArrayPattern,
-  Identifier,
+  CallExpression,
+  Declaration,
   ExportSpecifier,
+  Identifier,
+  Node,
+  ObjectPattern,
   Statement,
-  CallExpression
 } from '@babel/types'
 import { walk } from 'estree-walker'
-import { RawSourceMap } from 'source-map-js'
+import type { RawSourceMap } from 'source-map-js'
 import {
+  normalScriptDefaultVar,
   processNormalScript,
-  normalScriptDefaultVar
 } from './script/normalScript'
 import { CSS_VARS_HELPER, genCssVarsCode } from './style/cssVars'
-import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
+import {
+  type SFCTemplateCompileOptions,
+  compileTemplate,
+} from './compileTemplate'
 import { warnOnce } from './warn'
-import { shouldTransform, transformAST } from '@vue/reactivity-transform'
 import { transformDestructuredProps } from './script/definePropsDestructure'
 import { ScriptCompileContext } from './script/context'
 import {
-  processDefineProps,
-  genRuntimeProps,
   DEFINE_PROPS,
-  WITH_DEFAULTS
+  WITH_DEFAULTS,
+  genRuntimeProps,
+  processDefineProps,
 } from './script/defineProps'
 import {
-  processDefineEmits,
+  DEFINE_EMITS,
   genRuntimeEmits,
-  DEFINE_EMITS
+  processDefineEmits,
 } from './script/defineEmits'
 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 { getImportedName, isCallOf, isLiteralNode } from './script/utils'
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
@@ -103,11 +105,6 @@ export interface SFCScriptCompileOptions {
    * @default true
    */
   hoistStatic?: boolean
-  /**
-   * (**Experimental**) Enable macro `defineModel`
-   * @default false
-   */
-  defineModel?: boolean
   /**
    * (**Experimental**) Enable reactive destructure for `defineProps`
    * @default false
@@ -121,15 +118,12 @@ export interface SFCScriptCompileOptions {
   fs?: {
     fileExists(file: string): boolean
     readFile(file: string): string | undefined
+    realpath?(file: string): string
   }
   /**
-   * (Experimental) Enable syntax transform for using refs without `.value` and
-   * using destructured props with reactivity
-   * @deprecated the Reactivity Transform proposal has been dropped. This
-   * feature will be removed from Vue core in 3.4. If you intend to continue
-   * using it, disable this and switch to the [Vue Macros implementation](https://vue-macros.sxzz.moe/features/reactivity-transform.html).
+   * Transform Vue SFCs into custom elements.
    */
-  reactivityTransform?: boolean
+  customElement?: boolean | ((filename: string) => boolean)
 }
 
 export interface ImportBinding {
@@ -148,13 +142,13 @@ export interface ImportBinding {
  */
 export function compileScript(
   sfc: SFCDescriptor,
-  options: SFCScriptCompileOptions
+  options: SFCScriptCompileOptions,
 ): SFCScriptBlock {
   if (!options.id) {
     warnOnce(
       `compileScript now requires passing the \`id\` option.\n` +
         `Upgrade your vite or vue-loader version for compatibility with ` +
-        `the latest experimental proposals.`
+        `the latest experimental proposals.`,
     )
   }
 
@@ -165,8 +159,6 @@ export function compileScript(
   const scriptLang = script && script.lang
   const scriptSetupLang = scriptSetup && scriptSetup.lang
 
-  // TODO remove in 3.4
-  const enableReactivityTransform = !!options.reactivityTransform
   let refBindings: string[] | undefined
 
   if (!scriptSetup) {
@@ -180,7 +172,7 @@ export function compileScript(
   if (script && scriptLang !== scriptSetupLang) {
     throw new Error(
       `[@vue/compiler-sfc] <script> and <script setup> must have the same ` +
-        `language type.`
+        `language type.`,
     )
   }
 
@@ -229,7 +221,7 @@ export function compileScript(
     imported: string,
     isType: boolean,
     isFromSetup: boolean,
-    needTemplateUsageCheck: boolean
+    needTemplateUsageCheck: boolean,
   ) {
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
@@ -250,7 +242,7 @@ export function compileScript(
       local,
       source,
       isFromSetup,
-      isUsedInTemplate
+      isUsedInTemplate,
     }
   }
 
@@ -265,7 +257,7 @@ export function compileScript(
             `setup() function. If your component options require initialization ` +
             `in the module scope, use a separate normal <script> to export ` +
             `the options instead.`,
-          id
+          id,
         )
       }
     })
@@ -289,7 +281,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             false,
-            !options.inlineTemplate
+            !options.inlineTemplate,
           )
         }
       }
@@ -315,7 +307,7 @@ export function compileScript(
             : current.start! + startOffset,
           next && !removeLeft
             ? next.start! + startOffset
-            : current.end! + startOffset
+            : current.end! + startOffset,
         )
       }
 
@@ -332,7 +324,7 @@ export function compileScript(
             imported === DEFINE_EXPOSE)
         ) {
           warnOnce(
-            `\`${imported}\` is a compiler macro and no longer needs to be imported.`
+            `\`${imported}\` is a compiler macro and no longer needs to be imported.`,
           )
           removeSpecifier(i)
         } else if (existing) {
@@ -342,7 +334,7 @@ export function compileScript(
           } else {
             ctx.error(
               `different imports aliased to same local name.`,
-              specifier
+              specifier,
             )
           }
         } else {
@@ -354,7 +346,7 @@ export function compileScript(
               (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind === 'type'),
             true,
-            !options.inlineTemplate
+            !options.inlineTemplate,
           )
         }
       }
@@ -419,7 +411,8 @@ export function compileScript(
         ctx.s.overwrite(start, end, `const ${normalScriptDefaultVar} = `)
       } else if (node.type === 'ExportNamedDeclaration') {
         const defaultSpecifier = node.specifiers.find(
-          s => s.exported.type === 'Identifier' && s.exported.name === 'default'
+          s =>
+            s.exported.type === 'Identifier' && s.exported.name === 'default',
         ) as ExportSpecifier
         if (defaultSpecifier) {
           defaultExport = node
@@ -427,12 +420,12 @@ export function compileScript(
           if (node.specifiers.length > 1) {
             ctx.s.remove(
               defaultSpecifier.start! + scriptStartOffset!,
-              defaultSpecifier.end! + scriptStartOffset!
+              defaultSpecifier.end! + scriptStartOffset!,
             )
           } else {
             ctx.s.remove(
               node.start! + scriptStartOffset!,
-              node.end! + scriptStartOffset!
+              node.end! + scriptStartOffset!,
             )
           }
           if (node.source) {
@@ -440,14 +433,14 @@ export function compileScript(
             // rewrite to `import { x as __default__ } from './x'` and
             // add to top
             ctx.s.prepend(
-              `import { ${defaultSpecifier.local.name} as ${normalScriptDefaultVar} } from '${node.source.value}'\n`
+              `import { ${defaultSpecifier.local.name} as ${normalScriptDefaultVar} } from '${node.source.value}'\n`,
             )
           } else {
             // export { x as default }
             // rewrite to `const __default__ = x` and move to end
             ctx.s.appendLeft(
               scriptEndOffset!,
-              `\nconst ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}\n`
+              `\nconst ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}\n`,
             )
           }
         }
@@ -457,7 +450,7 @@ export function compileScript(
             node.declaration,
             scriptBindings,
             vueImportAliases,
-            hoistStatic
+            hoistStatic,
           )
         }
       } else if (
@@ -472,25 +465,11 @@ export function compileScript(
           node,
           scriptBindings,
           vueImportAliases,
-          hoistStatic
+          hoistStatic,
         )
       }
     }
 
-    // apply reactivity transform
-    // TODO remove in 3.4
-    if (enableReactivityTransform && shouldTransform(script.content)) {
-      const { rootRefs, importedHelpers } = transformAST(
-        scriptAst,
-        ctx.s,
-        scriptStartOffset!
-      )
-      refBindings = rootRefs
-      for (const h of importedHelpers) {
-        ctx.helperImports.add(h)
-      }
-    }
-
     // <script> after <script setup>
     // we need to move the block up so that `const __default__` is
     // declared before being used in the actual component definition
@@ -521,7 +500,7 @@ export function compileScript(
         ctx.s.overwrite(
           callee.start! + startOffset,
           callee.end! + startOffset,
-          '__expose'
+          '__expose',
         )
       } else {
         processDefineModel(ctx, expr)
@@ -540,7 +519,7 @@ export function compileScript(
           if (processDefineOptions(ctx, init)) {
             ctx.error(
               `${DEFINE_OPTIONS}() has no returning value, it cannot be assigned.`,
-              node
+              node,
             )
           }
 
@@ -578,7 +557,7 @@ export function compileScript(
             ctx.s.overwrite(
               startOffset + init.start!,
               startOffset + init.end!,
-              '__emit'
+              '__emit',
             )
           } else {
             lastNonRemoved = i
@@ -601,7 +580,7 @@ export function compileScript(
         node,
         setupBindings,
         vueImportAliases,
-        hoistStatic
+        hoistStatic,
       )
     }
 
@@ -643,13 +622,13 @@ export function compileScript(
               ctx,
               child,
               needsSemi,
-              parent!.type === 'ExpressionStatement'
+              parent!.type === 'ExpressionStatement',
             )
           }
         },
         exit(node: Node) {
           if (node.type === 'BlockStatement') scope.pop()
-        }
+        },
       })
     }
 
@@ -662,7 +641,7 @@ export function compileScript(
         `<script setup> cannot contain ES module exports. ` +
           `If you are using a previous version of <script setup>, please ` +
           `consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.`,
-        node
+        node,
       )
     }
 
@@ -686,34 +665,20 @@ export function compileScript(
     transformDestructuredProps(ctx, vueImportAliases)
   }
 
-  // 4. Apply reactivity transform
-  // TODO remove in 3.4
-  if (
-    enableReactivityTransform &&
-    // normal <script> had ref bindings that maybe used in <script setup>
-    (refBindings || shouldTransform(scriptSetup.content))
-  ) {
-    const { rootRefs, importedHelpers } = transformAST(
-      scriptSetupAst,
-      ctx.s,
-      startOffset,
-      refBindings
-    )
-    refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs
-    for (const h of importedHelpers) {
-      ctx.helperImports.add(h)
-    }
-  }
-
-  // 5. check macro args to make sure it doesn't reference setup scope
+  // 4. check macro args to make sure it doesn't reference setup scope
   // variables
   checkInvalidScopeReference(ctx.propsRuntimeDecl, DEFINE_PROPS)
   checkInvalidScopeReference(ctx.propsRuntimeDefaults, DEFINE_PROPS)
   checkInvalidScopeReference(ctx.propsDestructureDecl, DEFINE_PROPS)
   checkInvalidScopeReference(ctx.emitsRuntimeDecl, DEFINE_EMITS)
   checkInvalidScopeReference(ctx.optionsRuntimeDecl, DEFINE_OPTIONS)
+  for (const { runtimeOptionNodes } of Object.values(ctx.modelDecls)) {
+    for (const node of runtimeOptionNodes) {
+      checkInvalidScopeReference(node, DEFINE_MODEL)
+    }
+  }
 
-  // 6. remove non-script content
+  // 5. remove non-script content
   if (script) {
     if (startOffset < scriptStartOffset!) {
       // <script setup> before <script>
@@ -732,13 +697,13 @@ export function compileScript(
     ctx.s.remove(endOffset, source.length)
   }
 
-  // 7. analyze binding metadata
+  // 6. analyze binding metadata
   // `defineProps` & `defineModel` also register props bindings
   if (scriptAst) {
     Object.assign(ctx.bindingMetadata, analyzeScriptBindings(scriptAst.body))
   }
   for (const [key, { isType, imported, source }] of Object.entries(
-    ctx.userImports
+    ctx.userImports,
   )) {
     if (isType) continue
     ctx.bindingMetadata[key] =
@@ -761,11 +726,11 @@ export function compileScript(
     }
   }
 
-  // 8. inject `useCssVars` calls
+  // 7. inject `useCssVars` calls
   if (
     sfc.cssVars.length &&
     // no need to do this when targeting SSR
-    !(options.inlineTemplate && options.templateOptions?.ssr)
+    !options.templateOptions?.ssr
   ) {
     ctx.helperImports.add(CSS_VARS_HELPER)
     ctx.helperImports.add('unref')
@@ -775,12 +740,12 @@ export function compileScript(
         sfc.cssVars,
         ctx.bindingMetadata,
         scopeId,
-        !!options.isProd
-      )}\n`
+        !!options.isProd,
+      )}\n`,
     )
   }
 
-  // 9. finalize setup() argument signature
+  // 8. finalize setup() argument signature
   let args = `__props`
   if (ctx.propsTypeDecl) {
     // mark as any and only cast on assignment
@@ -797,19 +762,19 @@ export function compileScript(
         startOffset + ctx.propsCall!.start!,
         startOffset + ctx.propsCall!.end!,
         `${ctx.helper(`createPropsRestProxy`)}(__props, ${JSON.stringify(
-          Object.keys(ctx.propsDestructuredBindings)
-        )})`
+          Object.keys(ctx.propsDestructuredBindings),
+        )})`,
       )
       ctx.s.overwrite(
         startOffset + ctx.propsDestructureDecl!.start!,
         startOffset + ctx.propsDestructureDecl!.end!,
-        ctx.propsDestructureRestId
+        ctx.propsDestructureRestId,
       )
     } else if (!ctx.propsDestructureDecl) {
       ctx.s.overwrite(
         startOffset + ctx.propsCall!.start!,
         startOffset + ctx.propsCall!.end!,
-        '__props'
+        '__props',
       )
     }
   }
@@ -831,7 +796,7 @@ export function compileScript(
     args += `, { ${destructureElements.join(', ')} }`
   }
 
-  // 10. generate return statement
+  // 9. generate return statement
   let returned
   if (
     !options.inlineTemplate ||
@@ -841,7 +806,7 @@ export function compileScript(
     // return bindings from script and script setup
     const allBindings: Record<string, any> = {
       ...scriptBindings,
-      ...setupBindings
+      ...setupBindings,
     }
     for (const key in ctx.userImports) {
       if (
@@ -882,6 +847,7 @@ export function compileScript(
       // inline it right here
       const { code, ast, preamble, tips, errors } = compileTemplate({
         filename,
+        ast: sfc.template.ast,
         source: sfc.template.content,
         inMap: sfc.template.map,
         ...options.templateOptions,
@@ -894,8 +860,8 @@ export function compileScript(
             options.templateOptions.compilerOptions),
           inline: true,
           isTS: ctx.isTS,
-          bindingMetadata: ctx.bindingMetadata
-        }
+          bindingMetadata: ctx.bindingMetadata,
+        },
       })
       if (tips.length) {
         tips.forEach(warnOnce)
@@ -912,7 +878,7 @@ export function compileScript(
             generateCodeFrame(
               source,
               err.loc.start.offset,
-              err.loc.end.offset
+              err.loc.end.offset,
             ) +
             `\n`
         }
@@ -941,13 +907,13 @@ export function compileScript(
       `\nconst __returned__ = ${returned}\n` +
         `Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })\n` +
         `return __returned__` +
-        `\n}\n\n`
+        `\n}\n\n`,
     )
   } else {
     ctx.s.appendRight(endOffset, `\nreturn ${returned}\n}\n\n`)
   }
 
-  // 11. finalize default export
+  // 10. finalize default export
   const genDefaultAs = options.genDefaultAs
     ? `const ${options.genDefaultAs} =`
     : `export default`
@@ -993,10 +959,10 @@ export function compileScript(
     ctx.s.prependLeft(
       startOffset,
       `\n${genDefaultAs} /*#__PURE__*/${ctx.helper(
-        `defineComponent`
+        `defineComponent`,
       )}({${def}${runtimeOptions}\n  ${
         hasAwait ? `async ` : ``
-      }setup(${args}) {\n${exposeCall}`
+      }setup(${args}) {\n${exposeCall}`,
     )
     ctx.s.appendRight(endOffset, `})`)
   } else {
@@ -1008,30 +974,28 @@ export function compileScript(
         `\n${genDefaultAs} /*#__PURE__*/Object.assign(${
           defaultExport ? `${normalScriptDefaultVar}, ` : ''
         }${definedOptions ? `${definedOptions}, ` : ''}{${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`,
       )
       ctx.s.appendRight(endOffset, `})`)
     } else {
       ctx.s.prependLeft(
         startOffset,
         `\n${genDefaultAs} {${runtimeOptions}\n  ` +
-          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`
+          `${hasAwait ? `async ` : ``}setup(${args}) {\n${exposeCall}`,
       )
       ctx.s.appendRight(endOffset, `}`)
     }
   }
 
-  // 12. finalize Vue helper imports
+  // 11. finalize Vue helper imports
   if (ctx.helperImports.size > 0) {
     ctx.s.prepend(
       `import { ${[...ctx.helperImports]
         .map(h => `${h} as _${h}`)
-        .join(', ')} } from 'vue'\n`
+        .join(', ')} } from 'vue'\n`,
     )
   }
 
-  ctx.s.trim()
-
   return {
     ...scriptSetup,
     bindings: ctx.bindingMetadata,
@@ -1042,19 +1006,19 @@ export function compileScript(
         ? (ctx.s.generateMap({
             source: filename,
             hires: true,
-            includeContent: true
+            includeContent: true,
           }) as unknown as RawSourceMap)
         : undefined,
     scriptAst: scriptAst?.body,
     scriptSetupAst: scriptSetupAst?.body,
-    deps: ctx.deps ? [...ctx.deps] : undefined
+    deps: ctx.deps ? [...ctx.deps] : undefined,
   }
 }
 
 function registerBinding(
   bindings: Record<string, BindingTypes>,
   node: Identifier,
-  type: BindingTypes
+  type: BindingTypes,
 ) {
   bindings[node.name] = type
 }
@@ -1064,7 +1028,7 @@ function walkDeclaration(
   node: Declaration,
   bindings: Record<string, BindingTypes>,
   userImportAliases: Record<string, string>,
-  hoistStatic: boolean
+  hoistStatic: boolean,
 ): boolean {
   let isAllLiteral = false
 
@@ -1073,7 +1037,7 @@ function walkDeclaration(
     isAllLiteral =
       isConst &&
       node.declarations.every(
-        decl => decl.id.type === 'Identifier' && isStaticNode(decl.init!)
+        decl => decl.id.type === 'Identifier' && isStaticNode(decl.init!),
       )
 
     // export const foo = ...
@@ -1083,7 +1047,7 @@ function walkDeclaration(
         isConst &&
         isCallOf(
           init,
-          c => c === DEFINE_PROPS || c === DEFINE_EMITS || c === WITH_DEFAULTS
+          c => c === DEFINE_PROPS || c === DEFINE_EMITS || c === WITH_DEFAULTS,
         )
       )
       if (id.type === 'Identifier') {
@@ -1118,7 +1082,7 @@ function walkDeclaration(
                 m === userImportAliases['shallowRef'] ||
                 m === userImportAliases['customRef'] ||
                 m === userImportAliases['toRef'] ||
-                m === DEFINE_MODEL
+                m === DEFINE_MODEL,
             )
           ) {
             bindingType = BindingTypes.SETUP_REF
@@ -1142,7 +1106,7 @@ function walkDeclaration(
     }
   } else if (node.type === 'TSEnumDeclaration') {
     isAllLiteral = node.members.every(
-      member => !member.initializer || isStaticNode(member.initializer)
+      member => !member.initializer || isStaticNode(member.initializer),
     )
     bindings[node.id!.name] = isAllLiteral
       ? BindingTypes.LITERAL_CONST
@@ -1163,7 +1127,7 @@ function walkObjectPattern(
   node: ObjectPattern,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isDefineCall = false
+  isDefineCall = false,
 ) {
   for (const p of node.properties) {
     if (p.type === 'ObjectProperty') {
@@ -1172,8 +1136,8 @@ function walkObjectPattern(
         const type = isDefineCall
           ? BindingTypes.SETUP_CONST
           : isConst
-          ? BindingTypes.SETUP_MAYBE_REF
-          : BindingTypes.SETUP_LET
+            ? BindingTypes.SETUP_MAYBE_REF
+            : BindingTypes.SETUP_LET
         registerBinding(bindings, p.key, type)
       } else {
         walkPattern(p.value, bindings, isConst, isDefineCall)
@@ -1191,7 +1155,7 @@ function walkArrayPattern(
   node: ArrayPattern,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isDefineCall = false
+  isDefineCall = false,
 ) {
   for (const e of node.elements) {
     e && walkPattern(e, bindings, isConst, isDefineCall)
@@ -1202,14 +1166,14 @@ function walkPattern(
   node: Node,
   bindings: Record<string, BindingTypes>,
   isConst: boolean,
-  isDefineCall = false
+  isDefineCall = false,
 ) {
   if (node.type === 'Identifier') {
     const type = isDefineCall
       ? BindingTypes.SETUP_CONST
       : isConst
-      ? BindingTypes.SETUP_MAYBE_REF
-      : BindingTypes.SETUP_LET
+        ? BindingTypes.SETUP_MAYBE_REF
+        : BindingTypes.SETUP_LET
     registerBinding(bindings, node, type)
   } else if (node.type === 'RestElement') {
     // argument can only be identifier when destructuring
@@ -1224,8 +1188,8 @@ function walkPattern(
       const type = isDefineCall
         ? BindingTypes.SETUP_CONST
         : isConst
-        ? BindingTypes.SETUP_MAYBE_REF
-        : BindingTypes.SETUP_LET
+          ? BindingTypes.SETUP_MAYBE_REF
+          : BindingTypes.SETUP_LET
       registerBinding(bindings, node.left, type)
     } else {
       walkPattern(node.left, bindings, isConst)
@@ -1251,7 +1215,7 @@ function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
     case 'SequenceExpression':
       return canNeverBeRef(
         node.expressions[node.expressions.length - 1],
-        userReactiveImport
+        userReactiveImport,
       )
     default:
       if (isLiteralNode(node)) {
diff --git a/packages/compiler-sfc/src/compileStyle.ts b/packages/compiler-sfc/src/compileStyle.ts
index 47f90e824d6..4390014e89e 100644
--- a/packages/compiler-sfc/src/compileStyle.ts
+++ b/packages/compiler-sfc/src/compileStyle.ts
@@ -1,19 +1,19 @@
 import postcss, {
-  ProcessOptions,
-  Result,
-  SourceMap,
-  Message,
-  LazyResult
+  type LazyResult,
+  type Message,
+  type ProcessOptions,
+  type Result,
+  type SourceMap,
 } from 'postcss'
 import trimPlugin from './style/pluginTrim'
 import scopedPlugin from './style/pluginScoped'
 import {
+  type PreprocessLang,
+  type StylePreprocessor,
+  type StylePreprocessorResults,
   processors,
-  StylePreprocessor,
-  StylePreprocessorResults,
-  PreprocessLang
 } from './style/preprocessors'
-import { RawSourceMap } from 'source-map-js'
+import type { RawSourceMap } from 'source-map-js'
 import { cssVarsPlugin } from './style/cssVars'
 import postcssModules from 'postcss-modules'
 
@@ -69,25 +69,25 @@ export interface SFCStyleCompileResults {
 }
 
 export function compileStyle(
-  options: SFCStyleCompileOptions
+  options: SFCStyleCompileOptions,
 ): SFCStyleCompileResults {
   return doCompileStyle({
     ...options,
-    isAsync: false
+    isAsync: false,
   }) as SFCStyleCompileResults
 }
 
 export function compileStyleAsync(
-  options: SFCAsyncStyleCompileOptions
+  options: SFCAsyncStyleCompileOptions,
 ): Promise<SFCStyleCompileResults> {
   return doCompileStyle({
     ...options,
-    isAsync: true
+    isAsync: true,
   }) as Promise<SFCStyleCompileResults>
 }
 
 export function doCompileStyle(
-  options: SFCAsyncStyleCompileOptions
+  options: SFCAsyncStyleCompileOptions,
 ): SFCStyleCompileResults | Promise<SFCStyleCompileResults> {
   const {
     filename,
@@ -99,7 +99,7 @@ export function doCompileStyle(
     modulesOptions = {},
     preprocessLang,
     postcssOptions,
-    postcssPlugins
+    postcssPlugins,
   } = options
   const preprocessor = preprocessLang && processors[preprocessLang]
   const preProcessedSource = preprocessor && preprocess(options, preprocessor)
@@ -123,12 +123,12 @@ export function doCompileStyle(
   if (modules) {
     if (__GLOBAL__ || __ESM_BROWSER__) {
       throw new Error(
-        '[@vue/compiler-sfc] `modules` option is not supported in the browser build.'
+        '[@vue/compiler-sfc] `modules` option is not supported in the browser build.',
       )
     }
     if (!options.isAsync) {
       throw new Error(
-        '[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().'
+        '[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().',
       )
     }
     plugins.push(
@@ -136,21 +136,21 @@ export function doCompileStyle(
         ...modulesOptions,
         getJSON: (_cssFileName: string, json: Record<string, string>) => {
           cssModules = json
-        }
-      })
+        },
+      }),
     )
   }
 
   const postCSSOptions: ProcessOptions = {
     ...postcssOptions,
     to: filename,
-    from: filename
+    from: filename,
   }
   if (map) {
     postCSSOptions.map = {
       inline: false,
       annotation: false,
-      prev: map
+      prev: map,
     }
   }
 
@@ -159,7 +159,7 @@ export function doCompileStyle(
   let outMap: SourceMap | undefined
   // stylus output include plain css. so need remove the repeat item
   const dependencies = new Set(
-    preProcessedSource ? preProcessedSource.dependencies : []
+    preProcessedSource ? preProcessedSource.dependencies : [],
   )
   // sass has filename self when provided filename option
   dependencies.delete(filename)
@@ -191,14 +191,14 @@ export function doCompileStyle(
           errors,
           modules: cssModules,
           rawResult: result,
-          dependencies: recordPlainCssDependencies(result.messages)
+          dependencies: recordPlainCssDependencies(result.messages),
         }))
         .catch(error => ({
           code: '',
           map: undefined,
           errors: [...errors, error],
           rawResult: undefined,
-          dependencies
+          dependencies,
         }))
     }
 
@@ -215,19 +215,19 @@ export function doCompileStyle(
     map: outMap && outMap.toJSON(),
     errors,
     rawResult: result,
-    dependencies
+    dependencies,
   }
 }
 
 function preprocess(
   options: SFCStyleCompileOptions,
-  preprocessor: StylePreprocessor
+  preprocessor: StylePreprocessor,
 ): StylePreprocessorResults {
   if ((__ESM_BROWSER__ || __GLOBAL__) && !options.preprocessCustomRequire) {
     throw new Error(
       `[@vue/compiler-sfc] Style preprocessing in the browser build must ` +
         `provide the \`preprocessCustomRequire\` option to return the in-browser ` +
-        `version of the preprocessor.`
+        `version of the preprocessor.`,
     )
   }
 
@@ -236,8 +236,8 @@ function preprocess(
     options.inMap || options.map,
     {
       filename: options.filename,
-      ...options.preprocessOptions
+      ...options.preprocessOptions,
     },
-    options.preprocessCustomRequire
+    options.preprocessCustomRequire,
   )
 }
diff --git a/packages/compiler-sfc/src/compileTemplate.ts b/packages/compiler-sfc/src/compileTemplate.ts
index fbd100c9784..2d5ffdad7d8 100644
--- a/packages/compiler-sfc/src/compileTemplate.ts
+++ b/packages/compiler-sfc/src/compileTemplate.ts
@@ -1,26 +1,29 @@
 import {
-  CompilerOptions,
-  CodegenResult,
-  CompilerError,
-  NodeTransform,
-  ParserOptions,
-  RootNode
+  type CodegenResult,
+  type CompilerError,
+  type CompilerOptions,
+  type ElementNode,
+  type NodeTransform,
+  NodeTypes,
+  type ParserOptions,
+  type RootNode,
+  createRoot,
 } from '@vue/compiler-core'
 import {
+  type RawSourceMap,
   SourceMapConsumer,
   SourceMapGenerator,
-  RawSourceMap
 } from 'source-map-js'
 import {
-  transformAssetUrl,
-  AssetURLOptions,
+  type AssetURLOptions,
+  type AssetURLTagConfig,
   createAssetUrlTransformWithOptions,
-  AssetURLTagConfig,
-  normalizeOptions
+  normalizeOptions,
+  transformAssetUrl,
 } from './template/transformAssetUrl'
 import {
+  createSrcsetTransformWithOptions,
   transformSrcset,
-  createSrcsetTransformWithOptions
 } from './template/transformSrcset'
 import { generateCodeFrame, isObject } from '@vue/shared'
 import * as CompilerDOM from '@vue/compiler-dom'
@@ -30,7 +33,7 @@ import { warnOnce } from './warn'
 import { genCssVarsFromList } from './style/cssVars'
 
 export interface TemplateCompiler {
-  compile(template: string, options: CompilerOptions): CodegenResult
+  compile(source: string | RootNode, options: CompilerOptions): CodegenResult
   parse(template: string, options: ParserOptions): RootNode
 }
 
@@ -46,6 +49,7 @@ export interface SFCTemplateCompileResults {
 
 export interface SFCTemplateCompileOptions {
   source: string
+  ast?: RootNode
   filename: string
   id: string
   scoped?: boolean
@@ -75,13 +79,13 @@ interface PreProcessor {
   render(
     source: string,
     options: any,
-    cb: (err: Error | null, res: string) => void
+    cb: (err: Error | null, res: string) => void,
   ): void
 }
 
 function preprocess(
   { source, filename, preprocessOptions }: SFCTemplateCompileOptions,
-  preprocessor: PreProcessor
+  preprocessor: PreProcessor,
 ): string {
   // Consolidate exposes a callback based API, but the callback is in fact
   // called synchronously for most templating engines. In our case, we have to
@@ -96,7 +100,7 @@ function preprocess(
     (_err, _res) => {
       if (_err) err = _err
       res = _res
-    }
+    },
   )
 
   if (err) throw err
@@ -104,7 +108,7 @@ function preprocess(
 }
 
 export function compileTemplate(
-  options: SFCTemplateCompileOptions
+  options: SFCTemplateCompileOptions,
 ): SFCTemplateCompileResults {
   const { preprocessLang, preprocessCustomRequire } = options
 
@@ -116,7 +120,7 @@ export function compileTemplate(
     throw new Error(
       `[@vue/compiler-sfc] Template preprocessing in the browser build must ` +
         `provide the \`preprocessCustomRequire\` option to return the in-browser ` +
-        `version of the preprocessor in the shape of { render(): string }.`
+        `version of the preprocessor in the shape of { render(): string }.`,
     )
   }
 
@@ -124,21 +128,22 @@ export function compileTemplate(
     ? preprocessCustomRequire
       ? preprocessCustomRequire(preprocessLang)
       : __ESM_BROWSER__
-      ? undefined
-      : consolidate[preprocessLang as keyof typeof consolidate]
+        ? undefined
+        : consolidate[preprocessLang as keyof typeof consolidate]
     : false
   if (preprocessor) {
     try {
       return doCompileTemplate({
         ...options,
-        source: preprocess(options, preprocessor)
+        source: preprocess(options, preprocessor),
+        ast: undefined, // invalidate AST if template goes through preprocessor
       })
     } catch (e: any) {
       return {
         code: `export default function render() {}`,
         source: options.source,
         tips: [],
-        errors: [e]
+        errors: [e],
       }
     }
   } else if (preprocessLang) {
@@ -146,11 +151,11 @@ export function compileTemplate(
       code: `export default function render() {}`,
       source: options.source,
       tips: [
-        `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`
+        `Component ${options.filename} uses lang ${preprocessLang} for template. Please install the language preprocessor.`,
       ],
       errors: [
-        `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`
-      ]
+        `Component ${options.filename} uses lang ${preprocessLang} for template, however it is not installed.`,
+      ],
     }
   } else {
     return doCompileTemplate(options)
@@ -164,12 +169,13 @@ function doCompileTemplate({
   slotted,
   inMap,
   source,
+  ast: inAST,
   ssr = false,
   ssrCssVars,
   isProd = false,
-  compiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM,
+  compiler,
   compilerOptions = {},
-  transformAssetUrls
+  transformAssetUrls,
 }: SFCTemplateCompileOptions): SFCTemplateCompileResults {
   const errors: CompilerError[] = []
   const warnings: CompilerError[] = []
@@ -179,7 +185,7 @@ function doCompileTemplate({
     const assetOptions = normalizeOptions(transformAssetUrls)
     nodeTransforms = [
       createAssetUrlTransformWithOptions(assetOptions),
-      createSrcsetTransformWithOptions(assetOptions)
+      createSrcsetTransformWithOptions(assetOptions),
     ]
   } else if (transformAssetUrls !== false) {
     nodeTransforms = [transformAssetUrl, transformSrcset]
@@ -188,7 +194,7 @@ function doCompileTemplate({
   if (ssr && !ssrCssVars) {
     warnOnce(
       `compileTemplate is called with \`ssr: true\` but no ` +
-        `corresponding \`cssVars\` option.\`.`
+        `corresponding \`cssVars\` option.\`.`,
     )
   }
   if (!id) {
@@ -199,7 +205,32 @@ function doCompileTemplate({
   const shortId = id.replace(/^data-v-/, '')
   const longId = `data-v-${shortId}`
 
-  let { code, ast, preamble, map } = compiler.compile(source, {
+  const defaultCompiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM
+  compiler = compiler || defaultCompiler
+
+  if (compiler !== defaultCompiler) {
+    // user using custom compiler, this means we cannot reuse the AST from
+    // the descriptor as they might be different.
+    inAST = undefined
+  }
+
+  if (inAST?.transformed) {
+    // If input AST has already been transformed, then it cannot be reused.
+    // We need to parse a fresh one. Can't just use `source` here since we need
+    // the AST location info to be relative to the entire SFC.
+    const newAST = (ssr ? CompilerDOM : compiler).parse(inAST.source, {
+      prefixIdentifiers: true,
+      ...compilerOptions,
+      parseMode: 'sfc',
+      onError: e => errors.push(e),
+    })
+    const template = newAST.children.find(
+      node => node.type === NodeTypes.ELEMENT && node.tag === 'template',
+    ) as ElementNode
+    inAST = createRoot(template.children, inAST.source)
+  }
+
+  let { code, ast, preamble, map } = compiler.compile(inAST || source, {
     mode: 'module',
     prefixIdentifiers: true,
     hoistStatic: true,
@@ -212,16 +243,17 @@ function doCompileTemplate({
     slotted,
     sourceMap: true,
     ...compilerOptions,
+    hmr: !isProd,
     nodeTransforms: nodeTransforms.concat(compilerOptions.nodeTransforms || []),
     filename,
     onError: e => errors.push(e),
-    onWarn: w => warnings.push(w)
+    onWarn: w => warnings.push(w),
   })
 
   // inMap should be the map produced by ./parse.ts which is a simple line-only
   // mapping. If it is present, we need to adjust the final map and errors to
   // reflect the original line numbers.
-  if (inMap) {
+  if (inMap && !inAST) {
     if (map) {
       map = mapLines(inMap, map)
     }
@@ -234,9 +266,9 @@ function doCompileTemplate({
     let msg = w.message
     if (w.loc) {
       msg += `\n${generateCodeFrame(
-        source,
+        inAST?.source || source,
         w.loc.start.offset,
-        w.loc.end.offset
+        w.loc.end.offset,
       )}`
     }
     return msg
@@ -260,7 +292,7 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
 
     const origPosInOldMap = oldMapConsumer.originalPositionFor({
       line: m.originalLine,
-      column: m.originalColumn
+      column: m.originalColumn,
     })
 
     if (origPosInOldMap.source == null) {
@@ -270,16 +302,16 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
     mergedMapGenerator.addMapping({
       generated: {
         line: m.generatedLine,
-        column: m.generatedColumn
+        column: m.generatedColumn,
       },
       original: {
         line: origPosInOldMap.line, // map line
         // use current column, since the oldMap produced by @vue/compiler-sfc
         // does not
-        column: m.originalColumn
+        column: m.originalColumn,
       },
       source: origPosInOldMap.source,
-      name: origPosInOldMap.name
+      name: origPosInOldMap.name,
     })
   })
 
@@ -301,7 +333,7 @@ function mapLines(oldMap: RawSourceMap, newMap: RawSourceMap): RawSourceMap {
 function patchErrors(
   errors: CompilerError[],
   source: string,
-  inMap: RawSourceMap
+  inMap: RawSourceMap,
 ) {
   const originalSource = inMap.sourcesContent![0]
   const offset = originalSource.indexOf(source)
diff --git a/packages/compiler-sfc/src/index.ts b/packages/compiler-sfc/src/index.ts
index 76b4900d46d..9661b7f7963 100644
--- a/packages/compiler-sfc/src/index.ts
+++ b/packages/compiler-sfc/src/index.ts
@@ -1,19 +1,27 @@
 export const version = __VERSION__
 
 // API
-export { parse, parseCache } from './parse'
+export { parse } from './parse'
 export { compileTemplate } from './compileTemplate'
 export { compileStyle, compileStyleAsync } from './compileStyle'
 export { compileScript } from './compileScript'
 export { rewriteDefault, rewriteDefaultAST } from './rewriteDefault'
 export { resolveTypeElements, inferRuntimeType } from './script/resolveType'
 
-// TODO remove in 3.4
-export {
-  shouldTransform as shouldTransformRef,
-  transform as transformRef,
-  transformAST as transformRefAST
-} from '@vue/reactivity-transform'
+import { type SFCParseResult, parseCache as _parseCache } from './parse'
+// #9521 export parseCache as a simple map to avoid exposing LRU types
+export const parseCache = _parseCache as Map<string, SFCParseResult>
+
+// error messages
+import {
+  DOMErrorMessages,
+  errorMessages as coreErrorMessages,
+} from '@vue/compiler-dom'
+
+export const errorMessages = {
+  ...coreErrorMessages,
+  ...DOMErrorMessages,
+}
 
 // Utilities
 export { parse as babelParse } from '@babel/parser'
@@ -28,11 +36,13 @@ export {
   walkIdentifiers,
   extractIdentifiers,
   isInDestructureAssignment,
-  isStaticProperty
+  isStaticProperty,
 } from '@vue/compiler-core'
 
 // Internals for type resolution
 export { invalidateTypeCache, registerTS } from './script/resolveType'
+export { extractRuntimeProps } from './script/defineProps'
+export { extractRuntimeEmits } from './script/defineEmits'
 
 // Types
 export type {
@@ -42,30 +52,38 @@ export type {
   SFCBlock,
   SFCTemplateBlock,
   SFCScriptBlock,
-  SFCStyleBlock
+  SFCStyleBlock,
 } from './parse'
 export type {
   TemplateCompiler,
   SFCTemplateCompileOptions,
-  SFCTemplateCompileResults
+  SFCTemplateCompileResults,
 } from './compileTemplate'
 export type {
   SFCStyleCompileOptions,
   SFCAsyncStyleCompileOptions,
-  SFCStyleCompileResults
+  SFCStyleCompileResults,
 } from './compileStyle'
 export type { SFCScriptCompileOptions } from './compileScript'
 export type { ScriptCompileContext } from './script/context'
 export type {
   TypeResolveContext,
-  SimpleTypeResolveContext
+  SimpleTypeResolveOptions,
+  SimpleTypeResolveContext,
 } from './script/resolveType'
 export type {
   AssetURLOptions,
-  AssetURLTagConfig
+  AssetURLTagConfig,
 } from './template/transformAssetUrl'
 export type {
   CompilerOptions,
   CompilerError,
-  BindingMetadata
+  BindingMetadata,
 } from '@vue/compiler-core'
+
+/**
+ * @deprecated this is preserved to avoid breaking vite-plugin-vue < 5.0
+ * with reactivityTransform: true. The desired behavior should be silently
+ * ignoring the option instead of breaking.
+ */
+export const shouldTransformRef = () => false
diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts
index da8cf6d8669..00c97867cd0 100644
--- a/packages/compiler-sfc/src/parse.ts
+++ b/packages/compiler-sfc/src/parse.ts
@@ -1,17 +1,19 @@
 import {
+  type BindingMetadata,
+  type CompilerError,
+  type ElementNode,
   NodeTypes,
-  ElementNode,
-  SourceLocation,
-  CompilerError,
-  TextModes,
-  BindingMetadata
+  type ParserOptions,
+  type RootNode,
+  type SourceLocation,
+  createRoot,
 } from '@vue/compiler-core'
 import * as CompilerDOM from '@vue/compiler-dom'
-import { RawSourceMap, SourceMapGenerator } from 'source-map-js'
-import { TemplateCompiler } from './compileTemplate'
+import { type RawSourceMap, SourceMapGenerator } from 'source-map-js'
+import type { TemplateCompiler } from './compileTemplate'
 import { parseCssVars } from './style/cssVars'
 import { createCache } from './cache'
-import { ImportBinding } from './compileScript'
+import type { ImportBinding } from './compileScript'
 import { isImportUsed } from './script/importUsageCheck'
 
 export const DEFAULT_FILENAME = 'anonymous.vue'
@@ -23,6 +25,12 @@ export interface SFCParseOptions {
   pad?: boolean | 'line' | 'space'
   ignoreEmpty?: boolean
   compiler?: TemplateCompiler
+  templateParseOptions?: ParserOptions
+  /**
+   * TODO remove in 3.5
+   * @deprecated use `templateParseOptions: { prefixIdentifiers: false }` instead
+   */
+  parseExpressions?: boolean
 }
 
 export interface SFCBlock {
@@ -37,7 +45,7 @@ export interface SFCBlock {
 
 export interface SFCTemplateBlock extends SFCBlock {
   type: 'template'
-  ast: ElementNode
+  ast?: RootNode
 }
 
 export interface SFCScriptBlock extends SFCBlock {
@@ -95,24 +103,40 @@ export interface SFCParseResult {
 
 export const parseCache = createCache<SFCParseResult>()
 
+function genCacheKey(source: string, options: SFCParseOptions): string {
+  return (
+    source +
+    JSON.stringify(
+      {
+        ...options,
+        compiler: { parse: options.compiler?.parse },
+      },
+      (_, val) => (typeof val === 'function' ? val.toString() : val),
+    )
+  )
+}
+
 export function parse(
   source: string,
-  {
-    sourceMap = true,
-    filename = DEFAULT_FILENAME,
-    sourceRoot = '',
-    pad = false,
-    ignoreEmpty = true,
-    compiler = CompilerDOM
-  }: SFCParseOptions = {}
+  options: SFCParseOptions = {},
 ): SFCParseResult {
-  const sourceKey =
-    source + sourceMap + filename + sourceRoot + pad + compiler.parse
+  const sourceKey = genCacheKey(source, options)
   const cache = parseCache.get(sourceKey)
   if (cache) {
     return cache
   }
 
+  const {
+    sourceMap = true,
+    filename = DEFAULT_FILENAME,
+    sourceRoot = '',
+    pad = false,
+    ignoreEmpty = true,
+    compiler = CompilerDOM,
+    templateParseOptions = {},
+    parseExpressions = true,
+  } = options
+
   const descriptor: SFCDescriptor = {
     filename,
     source,
@@ -123,45 +147,24 @@ export function parse(
     customBlocks: [],
     cssVars: [],
     slotted: false,
-    shouldForceReload: prevImports => hmrShouldReload(prevImports, descriptor)
+    shouldForceReload: prevImports => hmrShouldReload(prevImports, descriptor),
   }
 
   const errors: (CompilerError | SyntaxError)[] = []
   const ast = compiler.parse(source, {
-    // there are no components at SFC parsing level
-    isNativeTag: () => true,
-    // preserve all whitespaces
-    isPreTag: () => true,
-    getTextMode: ({ tag, props }, parent) => {
-      // all top level elements except <template> are parsed as raw text
-      // containers
-      if (
-        (!parent && tag !== 'template') ||
-        // <template lang="xxx"> should also be treated as raw text
-        (tag === 'template' &&
-          props.some(
-            p =>
-              p.type === NodeTypes.ATTRIBUTE &&
-              p.name === 'lang' &&
-              p.value &&
-              p.value.content &&
-              p.value.content !== 'html'
-          ))
-      ) {
-        return TextModes.RAWTEXT
-      } else {
-        return TextModes.DATA
-      }
-    },
+    parseMode: 'sfc',
+    prefixIdentifiers: parseExpressions,
+    ...templateParseOptions,
     onError: e => {
       errors.push(e)
-    }
+    },
   })
   ast.children.forEach(node => {
     if (node.type !== NodeTypes.ELEMENT) {
       return
     }
-    // we only want to keep the nodes that are not empty (when the tag is not a template)
+    // we only want to keep the nodes that are not empty
+    // (when the tag is not a template)
     if (
       ignoreEmpty &&
       node.tag !== 'template' &&
@@ -176,9 +179,12 @@ export function parse(
           const templateBlock = (descriptor.template = createBlock(
             node,
             source,
-            false
+            false,
           ) as SFCTemplateBlock)
-          templateBlock.ast = node
+
+          if (!templateBlock.attrs.src) {
+            templateBlock.ast = createRoot(node.children, source)
+          }
 
           // warn against 2.x <template functional>
           if (templateBlock.attrs.functional) {
@@ -186,9 +192,11 @@ export function parse(
               `<template functional> is no longer supported in Vue 3, since ` +
                 `functional components no longer have significant performance ` +
                 `difference from stateful ones. Just use a normal <template> ` +
-                `instead.`
+                `instead.`,
             ) as CompilerError
-            err.loc = node.props.find(p => p.name === 'functional')!.loc
+            err.loc = node.props.find(
+              p => p.type === NodeTypes.ATTRIBUTE && p.name === 'functional',
+            )!.loc
             errors.push(err)
           }
         } else {
@@ -214,8 +222,8 @@ export function parse(
           errors.push(
             new SyntaxError(
               `<style vars> has been replaced by a new proposal: ` +
-                `https://github.com/vuejs/rfcs/pull/231`
-            )
+                `https://github.com/vuejs/rfcs/pull/231`,
+            ),
           )
         }
         descriptor.styles.push(styleBlock)
@@ -228,8 +236,8 @@ export function parse(
   if (!descriptor.template && !descriptor.script && !descriptor.scriptSetup) {
     errors.push(
       new SyntaxError(
-        `At least one <template> or <script> is required in a single file component.`
-      )
+        `At least one <template> or <script> is required in a single file component.`,
+      ),
     )
   }
   if (descriptor.scriptSetup) {
@@ -237,8 +245,8 @@ export function parse(
       errors.push(
         new SyntaxError(
           `<script setup> cannot use the "src" attribute because ` +
-            `its syntax will be ambiguous outside of the component.`
-        )
+            `its syntax will be ambiguous outside of the component.`,
+        ),
       )
       descriptor.scriptSetup = null
     }
@@ -246,29 +254,41 @@ export function parse(
       errors.push(
         new SyntaxError(
           `<script> cannot use the "src" attribute when <script setup> is ` +
-            `also present because they must be processed together.`
-        )
+            `also present because they must be processed together.`,
+        ),
       )
       descriptor.script = null
     }
   }
 
+  // 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)
+    descriptor.styles.forEach(s => genMap(s))
+    descriptor.customBlocks.forEach(s => genMap(s))
   }
 
   // parse CSS vars
@@ -277,12 +297,12 @@ export function parse(
   // check if the SFC uses :slotted
   const slottedRE = /(?:::v-|:)slotted\(/
   descriptor.slotted = descriptor.styles.some(
-    s => s.scoped && slottedRE.test(s.content)
+    s => s.scoped && slottedRE.test(s.content),
   )
 
   const result = {
     descriptor,
-    errors
+    errors,
   }
   parseCache.set(sourceKey, result)
   return result
@@ -290,12 +310,12 @@ export function parse(
 
 function createDuplicateBlockError(
   node: ElementNode,
-  isScriptSetup = false
+  isScriptSetup = false,
 ): CompilerError {
   const err = new SyntaxError(
     `Single file component can contain only one <${node.tag}${
       isScriptSetup ? ` setup` : ``
-    }> element`
+    }> element`,
   ) as CompilerError
   err.loc = node.loc
   return err
@@ -304,55 +324,35 @@ function createDuplicateBlockError(
 function createBlock(
   node: ElementNode,
   source: string,
-  pad: SFCParseOptions['pad']
+  pad: SFCParseOptions['pad'],
 ): SFCBlock {
   const type = node.tag
-  let { start, end } = node.loc
-  let content = ''
-  if (node.children.length) {
-    start = node.children[0].loc.start
-    end = node.children[node.children.length - 1].loc.end
-    content = source.slice(start.offset, end.offset)
-  } else {
-    const offset = node.loc.source.indexOf(`</`)
-    if (offset > -1) {
-      start = {
-        line: start.line,
-        column: start.column + offset,
-        offset: start.offset + offset
-      }
-    }
-    end = { ...start }
-  }
-  const loc = {
-    source: content,
-    start,
-    end
-  }
+  const loc = node.innerLoc!
   const attrs: Record<string, string | true> = {}
   const block: SFCBlock = {
     type,
-    content,
+    content: source.slice(loc.start.offset, loc.end.offset),
     loc,
-    attrs
+    attrs,
   }
   if (pad) {
     block.content = padContent(source, block, pad) + block.content
   }
   node.props.forEach(p => {
     if (p.type === NodeTypes.ATTRIBUTE) {
-      attrs[p.name] = p.value ? p.value.content || true : true
-      if (p.name === 'lang') {
+      const name = p.name
+      attrs[name] = p.value ? p.value.content || true : true
+      if (name === 'lang') {
         block.lang = p.value && p.value.content
-      } else if (p.name === 'src') {
+      } else if (name === 'src') {
         block.src = p.value && p.value.content
       } else if (type === 'style') {
-        if (p.name === 'scoped') {
+        if (name === 'scoped') {
           ;(block as SFCStyleBlock).scoped = true
-        } else if (p.name === 'module') {
-          ;(block as SFCStyleBlock).module = attrs[p.name]
+        } else if (name === 'module') {
+          ;(block as SFCStyleBlock).module = attrs[name]
         }
-      } else if (type === 'script' && p.name === 'setup') {
+      } else if (type === 'script' && name === 'setup') {
         ;(block as SFCScriptBlock).setup = attrs.setup
       }
     }
@@ -369,41 +369,41 @@ function generateSourceMap(
   source: string,
   generated: string,
   sourceRoot: string,
-  lineOffset: number
+  lineOffset: number,
+  columnOffset: number,
 ): RawSourceMap {
   const map = new SourceMapGenerator({
     file: filename.replace(/\\/g, '/'),
-    sourceRoot: sourceRoot.replace(/\\/g, '/')
+    sourceRoot: sourceRoot.replace(/\\/g, '/'),
   })
   map.setSourceContent(filename, source)
+  map._sources.add(filename)
   generated.split(splitRE).forEach((line, index) => {
     if (!emptyRE.test(line)) {
       const originalLine = index + 1 + lineOffset
       const generatedLine = index + 1
       for (let i = 0; i < line.length; i++) {
         if (!/\s/.test(line[i])) {
-          map.addMapping({
+          map._mappings.add({
+            originalLine,
+            originalColumn: i + columnOffset,
+            generatedLine,
+            generatedColumn: i,
             source: filename,
-            original: {
-              line: originalLine,
-              column: i
-            },
-            generated: {
-              line: generatedLine,
-              column: i
-            }
+            // @ts-expect-error
+            name: null,
           })
         }
       }
     }
   })
-  return JSON.parse(map.toString())
+  return map.toJSON()
 }
 
 function padContent(
   content: string,
   block: SFCBlock,
-  pad: SFCParseOptions['pad']
+  pad: SFCParseOptions['pad'],
 ): string {
   content = content.slice(0, block.loc.start.offset)
   if (pad === 'space') {
@@ -445,7 +445,7 @@ function isEmpty(node: ElementNode) {
  */
 export function hmrShouldReload(
   prevImports: Record<string, ImportBinding>,
-  next: SFCDescriptor
+  next: SFCDescriptor,
 ): boolean {
   if (
     !next.scriptSetup ||
@@ -466,3 +466,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,
+  ]
+}
diff --git a/packages/compiler-sfc/src/rewriteDefault.ts b/packages/compiler-sfc/src/rewriteDefault.ts
index 277eedce011..e6714c9906d 100644
--- a/packages/compiler-sfc/src/rewriteDefault.ts
+++ b/packages/compiler-sfc/src/rewriteDefault.ts
@@ -2,15 +2,16 @@ 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,
   as: string,
-  parserPlugins?: ParserPlugin[]
+  parserPlugins?: ParserPlugin[],
 ): string {
   const ast = parse(input, {
     sourceType: 'module',
-    plugins: parserPlugins
+    plugins: resolveParserPlugins('js', parserPlugins),
   }).program.body
   const s = new MagicString(input)
 
@@ -26,7 +27,7 @@ export function rewriteDefault(
 export function rewriteDefaultAST(
   ast: Statement[],
   s: MagicString,
-  as: string
+  as: string,
 ): void {
   if (!hasDefaultExport(ast)) {
     s.append(`\nconst ${as} = {}`)
@@ -59,7 +60,7 @@ export function rewriteDefaultAST(
           if (node.source) {
             if (specifier.local.name === 'default') {
               s.prepend(
-                `import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`
+                `import { default as __VUE_DEFAULT__ } from '${node.source.value}'\n`,
               )
               const end = specifierEnd(s, specifier.local.end!, node.end!)
               s.remove(specifier.start!, end)
@@ -69,8 +70,8 @@ export function rewriteDefaultAST(
               s.prepend(
                 `import { ${s.slice(
                   specifier.local.start!,
-                  specifier.local.end!
-                )} as __VUE_DEFAULT__ } from '${node.source.value}'\n`
+                  specifier.local.end!,
+                )} as __VUE_DEFAULT__ } from '${node.source.value}'\n`,
               )
               const end = specifierEnd(s, specifier.exported.end!, node.end!)
               s.remove(specifier.start!, end)
@@ -95,7 +96,7 @@ export function hasDefaultExport(ast: Statement[]): boolean {
     } else if (
       stmt.type === 'ExportNamedDeclaration' &&
       stmt.specifiers.some(
-        spec => (spec.exported as Identifier).name === 'default'
+        spec => (spec.exported as Identifier).name === 'default',
       )
     ) {
       return true
diff --git a/packages/compiler-sfc/src/script/analyzeScriptBindings.ts b/packages/compiler-sfc/src/script/analyzeScriptBindings.ts
index 5adbb1b4336..ae544f640e0 100644
--- a/packages/compiler-sfc/src/script/analyzeScriptBindings.ts
+++ b/packages/compiler-sfc/src/script/analyzeScriptBindings.ts
@@ -1,10 +1,10 @@
-import {
+import type {
   ArrayExpression,
   Node,
   ObjectExpression,
-  Statement
+  Statement,
 } from '@babel/types'
-import { BindingMetadata, BindingTypes } from '@vue/compiler-dom'
+import { type BindingMetadata, BindingTypes } from '@vue/compiler-dom'
 import { resolveObjectKey } from './utils'
 
 /**
@@ -30,7 +30,7 @@ function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
   // mark non-script-setup so we don't resolve components/directives from these
   Object.defineProperty(bindings, '__isScriptSetup', {
     enumerable: false,
-    value: false
+    value: false,
   })
   for (const property of node.properties) {
     if (
diff --git a/packages/compiler-sfc/src/script/context.ts b/packages/compiler-sfc/src/script/context.ts
index 5fe09d28a42..f74adee603b 100644
--- a/packages/compiler-sfc/src/script/context.ts
+++ b/packages/compiler-sfc/src/script/context.ts
@@ -1,17 +1,18 @@
-import { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
-import { SFCDescriptor } from '../parse'
-import { generateCodeFrame } from '@vue/shared'
-import { parse as babelParse, ParserPlugin } from '@babel/parser'
-import { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
-import { PropsDestructureBindings } from './defineProps'
-import { ModelDecl } from './defineModel'
-import { BindingMetadata } from '../../../compiler-core/src'
+import type { CallExpression, Node, ObjectPattern, Program } from '@babel/types'
+import type { SFCDescriptor } from '../parse'
+import { generateCodeFrame, isArray } from '@vue/shared'
+import { type ParserPlugin, parse as babelParse } from '@babel/parser'
+import type { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
+import type { PropsDestructureBindings } from './defineProps'
+import type { ModelDecl } from './defineModel'
+import type { BindingMetadata } from '../../../compiler-core/src'
 import MagicString from 'magic-string'
-import { TypeScope } from './resolveType'
+import type { TypeScope } from './resolveType'
 
 export class ScriptCompileContext {
   isJS: boolean
   isTS: boolean
+  isCE = false
 
   scriptAst: Program | null
   scriptSetupAst: Program | null
@@ -53,7 +54,7 @@ export class ScriptCompileContext {
   emitDecl: Node | undefined
 
   // defineModel
-  modelDecls: Record<string, ModelDecl> = {}
+  modelDecls: Record<string, ModelDecl> = Object.create(null)
 
   // defineOptions
   optionsRuntimeDecl: Node | undefined
@@ -78,7 +79,7 @@ export class ScriptCompileContext {
 
   constructor(
     public descriptor: SFCDescriptor,
-    public options: Partial<SFCScriptCompileOptions>
+    public options: Partial<SFCScriptCompileOptions>,
   ) {
     const { script, scriptSetup } = descriptor
     const scriptLang = script && script.lang
@@ -95,17 +96,25 @@ export class ScriptCompileContext {
       scriptSetupLang === 'ts' ||
       scriptSetupLang === 'tsx'
 
+    const customElement = options.customElement
+    const filename = this.descriptor.filename
+    if (customElement) {
+      this.isCE =
+        typeof customElement === 'boolean'
+          ? customElement
+          : customElement(filename)
+    }
     // resolve parser plugins
     const plugins: ParserPlugin[] = resolveParserPlugins(
       (scriptLang || scriptSetupLang)!,
-      options.babelParserPlugins
+      options.babelParserPlugins,
     )
 
     function parse(input: string, offset: number): Program {
       try {
         return babelParse(input, {
           plugins,
-          sourceType: 'module'
+          sourceType: 'module',
         }).program
       } catch (e: any) {
         e.message = `[vue/compiler-sfc] ${e.message}\n\n${
@@ -113,7 +122,7 @@ export class ScriptCompileContext {
         }\n${generateCodeFrame(
           descriptor.source,
           e.pos + offset,
-          e.pos + offset + 1
+          e.pos + offset + 1,
         )}`
         throw e
       }
@@ -143,8 +152,8 @@ export class ScriptCompileContext {
       }\n${generateCodeFrame(
         (scope || this.descriptor).source,
         node.start! + offset,
-        node.end! + offset
-      )}`
+        node.end! + offset,
+      )}`,
     )
   }
 }
@@ -152,9 +161,20 @@ export class ScriptCompileContext {
 export function resolveParserPlugins(
   lang: string,
   userPlugins?: ParserPlugin[],
-  dts = false
+  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,8 +183,8 @@ export function resolveParserPlugins(
     userPlugins = userPlugins.filter(p => p !== 'jsx')
   }
   if (lang === 'ts' || lang === 'tsx') {
-    plugins.push(['typescript', { dts }])
-    if (!plugins.includes('decorators')) {
+    plugins.push(['typescript', { dts }], 'explicitResourceManagement')
+    if (!userPlugins || !userPlugins.includes('decorators')) {
       plugins.push('decorators-legacy')
     }
   }
diff --git a/packages/compiler-sfc/src/script/defineEmits.ts b/packages/compiler-sfc/src/script/defineEmits.ts
index 8bd4cdfe543..526a55dc8a1 100644
--- a/packages/compiler-sfc/src/script/defineEmits.ts
+++ b/packages/compiler-sfc/src/script/defineEmits.ts
@@ -1,21 +1,25 @@
-import {
+import type {
   ArrayPattern,
   Identifier,
   LVal,
   Node,
   ObjectPattern,
-  RestElement
+  RestElement,
 } from '@babel/types'
 import { isCallOf } from './utils'
-import { ScriptCompileContext } from './context'
-import { resolveTypeElements, resolveUnionType } from './resolveType'
+import type { ScriptCompileContext } from './context'
+import {
+  type TypeResolveContext,
+  resolveTypeElements,
+  resolveUnionType,
+} from './resolveType'
 
 export const DEFINE_EMITS = 'defineEmits'
 
 export function processDefineEmits(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, DEFINE_EMITS)) {
     return false
@@ -30,7 +34,7 @@ export function processDefineEmits(
       ctx.error(
         `${DEFINE_EMITS}() cannot accept both type and non-type arguments ` +
           `at the same time. Use one or the other.`,
-        node
+        node,
       )
     }
     ctx.emitsTypeDecl = node.typeParameters.params[0]
@@ -58,13 +62,15 @@ 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
 }
 
-function extractRuntimeEmits(ctx: ScriptCompileContext): Set<string> {
+export function extractRuntimeEmits(ctx: TypeResolveContext): Set<string> {
   const emits = new Set<string>()
   const node = ctx.emitsTypeDecl!
 
@@ -85,7 +91,7 @@ function extractRuntimeEmits(ctx: ScriptCompileContext): Set<string> {
     if (hasProperty) {
       ctx.error(
         `defineEmits() type cannot mixed call signature and property syntax.`,
-        node
+        node,
       )
     }
     for (const call of calls) {
@@ -97,9 +103,9 @@ function extractRuntimeEmits(ctx: ScriptCompileContext): Set<string> {
 }
 
 function extractEventNames(
-  ctx: ScriptCompileContext,
+  ctx: TypeResolveContext,
   eventName: ArrayPattern | Identifier | ObjectPattern | RestElement,
-  emits: Set<string>
+  emits: Set<string>,
 ) {
   if (
     eventName.type === 'Identifier' &&
diff --git a/packages/compiler-sfc/src/script/defineExpose.ts b/packages/compiler-sfc/src/script/defineExpose.ts
index 636fdba8d08..ba13e26c1e5 100644
--- a/packages/compiler-sfc/src/script/defineExpose.ts
+++ b/packages/compiler-sfc/src/script/defineExpose.ts
@@ -1,12 +1,12 @@
-import { Node } from '@babel/types'
+import type { Node } from '@babel/types'
 import { isCallOf } from './utils'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 
 export const DEFINE_EXPOSE = 'defineExpose'
 
 export function processDefineExpose(
   ctx: ScriptCompileContext,
-  node: Node
+  node: Node,
 ): boolean {
   if (isCallOf(node, DEFINE_EXPOSE)) {
     if (ctx.hasDefineExposeCall) {
diff --git a/packages/compiler-sfc/src/script/defineModel.ts b/packages/compiler-sfc/src/script/defineModel.ts
index 432b8676fbd..24fd0780eaa 100644
--- a/packages/compiler-sfc/src/script/defineModel.ts
+++ b/packages/compiler-sfc/src/script/defineModel.ts
@@ -1,15 +1,13 @@
-import { LVal, Node, ObjectProperty, TSType } from '@babel/types'
-import { ScriptCompileContext } from './context'
+import type { LVal, Node, TSType } from '@babel/types'
+import type { ScriptCompileContext } from './context'
 import { inferRuntimeType } from './resolveType'
 import {
   UNKNOWN_TYPE,
   concatStrings,
   isCallOf,
   toRuntimeTypeString,
-  unwrapTSNode
 } from './utils'
-import { BindingTypes } from '@vue/compiler-dom'
-import { warnOnce } from '../warn'
+import { BindingTypes, unwrapTSNode } from '@vue/compiler-dom'
 
 export const DEFINE_MODEL = 'defineModel'
 
@@ -17,32 +15,18 @@ export interface ModelDecl {
   type: TSType | undefined
   options: string | undefined
   identifier: string | undefined
+  runtimeOptionNodes: Node[]
 }
 
 export function processDefineModel(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, DEFINE_MODEL)) {
     return false
   }
 
-  if (!ctx.options.defineModel) {
-    warnOnce(
-      `defineModel() is an experimental feature and disabled by default.\n` +
-        `To enable it, follow the RFC at https://github.com/vuejs/rfcs/discussions/503.`
-    )
-    return false
-  }
-
-  warnOnce(
-    `This project is using defineModel(), which is an experimental ` +
-      `feature. It may receive breaking changes or be removed in the future, so ` +
-      `use at your own risk.\n` +
-      `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503.`
-  )
-
   ctx.hasDefineModelCall = true
 
   const type =
@@ -50,7 +34,8 @@ export function processDefineModel(
   let modelName: string
   let options: Node | undefined
   const arg0 = node.arguments[0] && unwrapTSNode(node.arguments[0])
-  if (arg0 && arg0.type === 'StringLiteral') {
+  const hasName = arg0 && arg0.type === 'StringLiteral'
+  if (hasName) {
     modelName = arg0.value
     options = node.arguments[1]
   } else {
@@ -62,47 +47,73 @@ export function processDefineModel(
     ctx.error(`duplicate model name ${JSON.stringify(modelName)}`, node)
   }
 
-  const optionsString = options && ctx.getString(options)
+  let optionsString = options && ctx.getString(options)
+  let optionsRemoved = !options
+  const runtimeOptionNodes: Node[] = []
+
+  if (
+    options &&
+    options.type === 'ObjectExpression' &&
+    !options.properties.some(p => p.type === 'SpreadElement' || p.computed)
+  ) {
+    let removed = 0
+    for (let i = options.properties.length - 1; i >= 0; i--) {
+      const p = options.properties[i]
+      const next = options.properties[i + 1]
+      const start = p.start!
+      const end = next ? next.start! : options.end! - 1
+      if (
+        (p.type === 'ObjectProperty' || p.type === 'ObjectMethod') &&
+        ((p.key.type === 'Identifier' &&
+          (p.key.name === 'get' || p.key.name === 'set')) ||
+          (p.key.type === 'StringLiteral' &&
+            (p.key.value === 'get' || p.key.value === 'set')))
+      ) {
+        // remove runtime-only options from prop options to avoid duplicates
+        optionsString =
+          optionsString.slice(0, start - options.start!) +
+          optionsString.slice(end - options.start!)
+      } else {
+        // remove prop options from runtime options
+        removed++
+        ctx.s.remove(ctx.startOffset! + start, ctx.startOffset! + end)
+        // record prop options for invalid scope var reference check
+        runtimeOptionNodes.push(p)
+      }
+    }
+    if (removed === options.properties.length) {
+      optionsRemoved = true
+      ctx.s.remove(
+        ctx.startOffset! + (hasName ? arg0.end! : options.start!),
+        ctx.startOffset! + options.end!,
+      )
+    }
+  }
 
   ctx.modelDecls[modelName] = {
     type,
     options: optionsString,
-    identifier: declId && declId.type === 'Identifier' ? declId.name : undefined
+    runtimeOptionNodes,
+    identifier:
+      declId && declId.type === 'Identifier' ? declId.name : undefined,
   }
   // register binding type
   ctx.bindingMetadata[modelName] = BindingTypes.PROPS
 
-  let runtimeOptions = ''
-  if (options) {
-    if (options.type === 'ObjectExpression') {
-      const local = options.properties.find(
-        p =>
-          p.type === 'ObjectProperty' &&
-          ((p.key.type === 'Identifier' && p.key.name === 'local') ||
-            (p.key.type === 'StringLiteral' && p.key.value === 'local'))
-      ) as ObjectProperty
-
-      if (local) {
-        runtimeOptions = `{ ${ctx.getString(local)} }`
-      } else {
-        for (const p of options.properties) {
-          if (p.type === 'SpreadElement' || p.computed) {
-            runtimeOptions = optionsString!
-            break
-          }
-        }
-      }
-    } else {
-      runtimeOptions = optionsString!
-    }
-  }
-
+  // defineModel -> useModel
   ctx.s.overwrite(
-    ctx.startOffset! + node.start!,
-    ctx.startOffset! + node.end!,
-    `${ctx.helper('useModel')}(__props, ${JSON.stringify(modelName)}${
-      runtimeOptions ? `, ${runtimeOptions}` : ``
-    })`
+    ctx.startOffset! + node.callee.start!,
+    ctx.startOffset! + node.callee.end!,
+    ctx.helper('useModel'),
+  )
+  // inject arguments
+  ctx.s.appendLeft(
+    ctx.startOffset! +
+      (node.arguments.length ? node.arguments[0].start! : node.end! - 1),
+    `__props, ` +
+      (hasName
+        ? ``
+        : `${JSON.stringify(modelName)}${optionsRemoved ? `` : `, `}`),
   )
 
   return true
@@ -137,7 +148,7 @@ export function genModelProps(ctx: ScriptCompileContext) {
 
     const codegenOptions = concatStrings([
       runtimeType && `type: ${runtimeType}`,
-      skipCheck && 'skipCheck: true'
+      skipCheck && 'skipCheck: true',
     ])
 
     let decl: string
@@ -149,6 +160,12 @@ export function genModelProps(ctx: ScriptCompileContext) {
       decl = options || (runtimeType ? `{ ${codegenOptions} }` : '{}')
     }
     modelPropsDecl += `\n    ${JSON.stringify(name)}: ${decl},`
+
+    // also generate modifiers prop
+    const modifierPropName = JSON.stringify(
+      name === 'modelValue' ? `modelModifiers` : `${name}Modifiers`,
+    )
+    modelPropsDecl += `\n    ${modifierPropName}: {},`
   }
   return `{${modelPropsDecl}\n  }`
 }
diff --git a/packages/compiler-sfc/src/script/defineOptions.ts b/packages/compiler-sfc/src/script/defineOptions.ts
index 8da3dbc0b4d..8e32e0fba82 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 { ScriptCompileContext } from './context'
-import { isCallOf, unwrapTSNode } from './utils'
+import type { Node } from '@babel/types'
+import { unwrapTSNode } from '@vue/compiler-dom'
+import type { ScriptCompileContext } from './context'
+import { isCallOf } from './utils'
 import { DEFINE_PROPS } from './defineProps'
 import { DEFINE_EMITS } from './defineEmits'
 import { DEFINE_EXPOSE } from './defineExpose'
@@ -10,7 +11,7 @@ export const DEFINE_OPTIONS = 'defineOptions'
 
 export function processDefineOptions(
   ctx: ScriptCompileContext,
-  node: Node
+  node: Node,
 ): boolean {
   if (!isCallOf(node, DEFINE_OPTIONS)) {
     return false
@@ -47,25 +48,25 @@ export function processDefineOptions(
   if (propsOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare props. Use ${DEFINE_PROPS}() instead.`,
-      propsOption
+      propsOption,
     )
   }
   if (emitsOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare emits. Use ${DEFINE_EMITS}() instead.`,
-      emitsOption
+      emitsOption,
     )
   }
   if (exposeOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare expose. Use ${DEFINE_EXPOSE}() instead.`,
-      exposeOption
+      exposeOption,
     )
   }
   if (slotsOption) {
     ctx.error(
       `${DEFINE_OPTIONS}() cannot be used to declare slots. Use ${DEFINE_SLOTS}() instead.`,
-      slotsOption
+      slotsOption,
     )
   }
 
diff --git a/packages/compiler-sfc/src/script/defineProps.ts b/packages/compiler-sfc/src/script/defineProps.ts
index 5004e314da1..4c8a34aa616 100644
--- a/packages/compiler-sfc/src/script/defineProps.ts
+++ b/packages/compiler-sfc/src/script/defineProps.ts
@@ -1,23 +1,26 @@
-import {
-  Node,
+import type {
+  Expression,
   LVal,
-  ObjectProperty,
-  ObjectMethod,
+  Node,
   ObjectExpression,
-  Expression
+  ObjectMethod,
+  ObjectProperty,
 } from '@babel/types'
-import { BindingTypes, isFunctionType } from '@vue/compiler-dom'
-import { ScriptCompileContext } from './context'
-import { inferRuntimeType, resolveTypeElements } from './resolveType'
+import { BindingTypes, isFunctionType, unwrapTSNode } from '@vue/compiler-dom'
+import type { ScriptCompileContext } from './context'
+import {
+  type TypeResolveContext,
+  inferRuntimeType,
+  resolveTypeElements,
+} from './resolveType'
 import {
-  resolveObjectKey,
   UNKNOWN_TYPE,
   concatStrings,
-  isLiteralNode,
+  getEscapedPropName,
   isCallOf,
-  unwrapTSNode,
+  isLiteralNode,
+  resolveObjectKey,
   toRuntimeTypeString,
-  getEscapedKey
 } from './utils'
 import { genModelProps } from './defineModel'
 import { getObjectOrArrayExpressionKeys } from './analyzeScriptBindings'
@@ -44,7 +47,7 @@ export type PropsDestructureBindings = Record<
 export function processDefineProps(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ) {
   if (!isCallOf(node, DEFINE_PROPS)) {
     return processWithDefaults(ctx, node, declId)
@@ -71,7 +74,7 @@ export function processDefineProps(
       ctx.error(
         `${DEFINE_PROPS}() cannot accept both type and non-type arguments ` +
           `at the same time. Use one or the other.`,
-        node
+        node,
       )
     }
     ctx.propsTypeDecl = node.typeParameters.params[0]
@@ -91,7 +94,7 @@ export function processDefineProps(
 function processWithDefaults(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, WITH_DEFAULTS)) {
     return false
@@ -99,7 +102,7 @@ function processWithDefaults(
   if (!processDefineProps(ctx, node.arguments[0], declId)) {
     ctx.error(
       `${WITH_DEFAULTS}' first argument must be a ${DEFINE_PROPS} call.`,
-      node.arguments[0] || node
+      node.arguments[0] || node,
     )
   }
 
@@ -107,14 +110,14 @@ function processWithDefaults(
     ctx.error(
       `${WITH_DEFAULTS} can only be used with type-based ` +
         `${DEFINE_PROPS} declaration.`,
-      node
+      node,
     )
   }
   if (ctx.propsDestructureDecl) {
     ctx.error(
       `${WITH_DEFAULTS}() is unnecessary when using destructure with ${DEFINE_PROPS}().\n` +
         `Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(...).`,
-      node.callee
+      node.callee,
     )
   }
   ctx.propsRuntimeDefaults = node.arguments[1]
@@ -135,34 +138,38 @@ export function genRuntimeProps(ctx: ScriptCompileContext): string | undefined {
       const defaults: string[] = []
       for (const key in ctx.propsDestructuredBindings) {
         const d = genDestructuredDefaultValue(ctx, key)
-        const finalKey = getEscapedKey(key)
+        const finalKey = getEscapedPropName(key)
         if (d)
           defaults.push(
             `${finalKey}: ${d.valueString}${
               d.needSkipFactory ? `, __skip_${finalKey}: true` : ``
-            }`
+            }`,
           )
       }
       if (defaults.length) {
-        propsDecls = `${ctx.helper(
-          `mergeDefaults`
+        propsDecls = `/*#__PURE__*/${ctx.helper(
+          `mergeDefaults`,
         )}(${propsDecls}, {\n  ${defaults.join(',\n  ')}\n})`
       }
     }
   } else if (ctx.propsTypeDecl) {
-    propsDecls = genRuntimePropsFromTypes(ctx)
+    propsDecls = extractRuntimeProps(ctx)
   }
 
   const modelsDecls = genModelProps(ctx)
 
   if (propsDecls && modelsDecls) {
-    return `${ctx.helper('mergeModels')}(${propsDecls}, ${modelsDecls})`
+    return `/*#__PURE__*/${ctx.helper(
+      'mergeModels',
+    )}(${propsDecls}, ${modelsDecls})`
   } else {
     return modelsDecls || propsDecls
   }
 }
 
-function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
+export function extractRuntimeProps(
+  ctx: TypeResolveContext,
+): string | undefined {
   // this is only called if propsTypeDecl exists
   const props = resolveRuntimePropsFromType(ctx, ctx.propsTypeDecl!)
   if (!props.length) {
@@ -175,7 +182,7 @@ function genRuntimePropsFromTypes(ctx: ScriptCompileContext) {
   for (const prop of props) {
     propStrings.push(genRuntimePropFromType(ctx, prop, hasStaticDefaults))
     // register bindings
-    if (!(prop.key in ctx.bindingMetadata)) {
+    if ('bindingMetadata' in ctx && !(prop.key in ctx.bindingMetadata)) {
       ctx.bindingMetadata[prop.key] = BindingTypes.PROPS
     }
   }
@@ -184,17 +191,17 @@ 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
 }
 
 function resolveRuntimePropsFromType(
-  ctx: ScriptCompileContext,
-  node: Node
+  ctx: TypeResolveContext,
+  node: Node,
 ): PropTypeData[] {
   const props: PropTypeData[] = []
   const elements = resolveTypeElements(ctx, node)
@@ -215,16 +222,16 @@ function resolveRuntimePropsFromType(
       key,
       required: !e.optional,
       type: type || [`null`],
-      skipCheck
+      skipCheck,
     })
   }
   return props
 }
 
 function genRuntimePropFromType(
-  ctx: ScriptCompileContext,
+  ctx: TypeResolveContext,
   { key, required, type, skipCheck }: PropTypeData,
-  hasStaticDefaults: boolean
+  hasStaticDefaults: boolean,
 ): string {
   let defaultString: string | undefined
   const destructured = genDestructuredDefaultValue(ctx, key, type)
@@ -237,7 +244,7 @@ function genRuntimePropFromType(
       node => {
         if (node.type === 'SpreadElement') return false
         return resolveObjectKey(node.key, node.computed) === key
-      }
+      },
     ) as ObjectProperty | ObjectMethod
     if (prop) {
       if (prop.type === 'ObjectProperty') {
@@ -251,19 +258,19 @@ function genRuntimePropFromType(
     }
   }
 
-  const finalKey = getEscapedKey(key)
+  const finalKey = getEscapedPropName(key)
   if (!ctx.options.isProd) {
     return `${finalKey}: { ${concatStrings([
       `type: ${toRuntimeTypeString(type)}`,
       `required: ${required}`,
       skipCheck && 'skipCheck: true',
-      defaultString
+      defaultString,
     ])} }`
   } else if (
     type.some(
       el =>
         el === 'Boolean' ||
-        ((!hasStaticDefaults || defaultString) && el === 'Function')
+        ((!hasStaticDefaults || defaultString) && el === 'Function'),
     )
   ) {
     // #4783 for boolean, should keep the type
@@ -271,9 +278,20 @@ function genRuntimePropFromType(
     // in production
     return `${finalKey}: { ${concatStrings([
       `type: ${toRuntimeTypeString(type)}`,
-      defaultString
+      defaultString,
     ])} }`
   } else {
+    // #8989 for custom element, should keep the type
+    if (ctx.isCE) {
+      if (defaultString) {
+        return `${finalKey}: ${`{ ${defaultString}, type: ${toRuntimeTypeString(
+          type,
+        )} }`}`
+      } else {
+        return `${finalKey}: {type: ${toRuntimeTypeString(type)}}`
+      }
+    }
+
     // production: checks are useless
     return `${finalKey}: ${defaultString ? `{ ${defaultString} }` : `{}`}`
   }
@@ -284,22 +302,22 @@ function genRuntimePropFromType(
  * static properties, we can directly generate more optimized default
  * declarations. Otherwise we will have to fallback to runtime merging.
  */
-function hasStaticWithDefaults(ctx: ScriptCompileContext) {
+function hasStaticWithDefaults(ctx: TypeResolveContext) {
   return !!(
     ctx.propsRuntimeDefaults &&
     ctx.propsRuntimeDefaults.type === 'ObjectExpression' &&
     ctx.propsRuntimeDefaults.properties.every(
       node =>
         node.type !== 'SpreadElement' &&
-        (!node.computed || node.key.type.endsWith('Literal'))
+        (!node.computed || node.key.type.endsWith('Literal')),
     )
   )
 }
 
 function genDestructuredDefaultValue(
-  ctx: ScriptCompileContext,
+  ctx: TypeResolveContext,
   key: string,
-  inferredType?: string[]
+  inferredType?: string[],
 ):
   | {
       valueString: string
@@ -317,7 +335,7 @@ function genDestructuredDefaultValue(
       if (valueType && !inferredType.includes(valueType)) {
         ctx.error(
           `Default value of prop "${key}" does not match declared type.`,
-          unwrapped
+          unwrapped,
         )
       }
     }
@@ -337,7 +355,7 @@ function genDestructuredDefaultValue(
 
     return {
       valueString: needFactoryWrap ? `() => (${value})` : value,
-      needSkipFactory
+      needSkipFactory,
     }
   }
 }
diff --git a/packages/compiler-sfc/src/script/definePropsDestructure.ts b/packages/compiler-sfc/src/script/definePropsDestructure.ts
index 5aa895bc7fe..e4a59aca7d5 100644
--- a/packages/compiler-sfc/src/script/definePropsDestructure.ts
+++ b/packages/compiler-sfc/src/script/definePropsDestructure.ts
@@ -1,11 +1,11 @@
-import {
-  Node,
-  Identifier,
+import type {
   BlockStatement,
+  Expression,
+  Identifier,
+  Node,
+  ObjectPattern,
   Program,
   VariableDeclaration,
-  ObjectPattern,
-  Expression
 } from '@babel/types'
 import { walk } from 'estree-walker'
 import {
@@ -15,19 +15,20 @@ import {
   isInDestructureAssignment,
   isReferencedIdentifier,
   isStaticProperty,
-  walkFunctionParams
+  unwrapTSNode,
+  walkFunctionParams,
 } from '@vue/compiler-dom'
 import { genPropsAccessExp } from '@vue/shared'
-import { isCallOf, resolveObjectKey, unwrapTSNode } from './utils'
-import { ScriptCompileContext } from './context'
+import { isCallOf, resolveObjectKey } from './utils'
+import type { ScriptCompileContext } from './context'
 import { DEFINE_PROPS } from './defineProps'
 import { warnOnce } from '../warn'
 
 export function processPropsDestructure(
   ctx: ScriptCompileContext,
-  declId: ObjectPattern
+  declId: ObjectPattern,
 ) {
-  if (!ctx.options.propsDestructure && !ctx.options.reactivityTransform) {
+  if (!ctx.options.propsDestructure) {
     return
   }
 
@@ -35,7 +36,7 @@ export function processPropsDestructure(
     `This project is using reactive props destructure, which is an experimental ` +
       `feature. It may receive breaking changes or be removed in the future, so ` +
       `use at your own risk.\n` +
-      `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502.`
+      `To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/502.`,
   )
 
   ctx.propsDestructureDecl = declId
@@ -43,7 +44,7 @@ export function processPropsDestructure(
   const registerBinding = (
     key: string,
     local: string,
-    defaultValue?: Expression
+    defaultValue?: Expression,
   ) => {
     ctx.propsDestructuredBindings[key] = { local, default: defaultValue }
     if (local !== key) {
@@ -60,7 +61,7 @@ export function processPropsDestructure(
       if (!propKey) {
         ctx.error(
           `${DEFINE_PROPS}() destructure cannot use computed key.`,
-          prop.key
+          prop.key,
         )
       }
 
@@ -70,7 +71,7 @@ export function processPropsDestructure(
         if (left.type !== 'Identifier') {
           ctx.error(
             `${DEFINE_PROPS}() destructure does not support nested patterns.`,
-            left
+            left,
           )
         }
         registerBinding(propKey, left.name, right)
@@ -80,7 +81,7 @@ export function processPropsDestructure(
       } else {
         ctx.error(
           `${DEFINE_PROPS}() destructure does not support nested patterns.`,
-          prop.value
+          prop.value,
         )
       }
     } else {
@@ -101,9 +102,9 @@ type Scope = Record<string, boolean>
 
 export function transformDestructuredProps(
   ctx: ScriptCompileContext,
-  vueImportAliases: Record<string, string>
+  vueImportAliases: Record<string, string>,
 ) {
-  if (!ctx.options.propsDestructure && !ctx.options.reactivityTransform) {
+  if (!ctx.options.propsDestructure) {
     return
   }
 
@@ -136,7 +137,7 @@ export function transformDestructuredProps(
     } else {
       ctx.error(
         'registerBinding called without active scope, something is wrong.',
-        id
+        id,
       )
     }
   }
@@ -208,7 +209,7 @@ export function transformDestructuredProps(
         // { prop } -> { prop: __props.prop }
         ctx.s.appendLeft(
           id.end! + ctx.startOffset!,
-          `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`
+          `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`,
         )
       }
     } else {
@@ -216,7 +217,7 @@ export function transformDestructuredProps(
       ctx.s.overwrite(
         id.start! + ctx.startOffset!,
         id.end! + ctx.startOffset!,
-        genPropsAccessExp(propsLocalToPublicMap[id.name])
+        genPropsAccessExp(propsLocalToPublicMap[id.name]),
       )
     }
   }
@@ -228,7 +229,7 @@ export function transformDestructuredProps(
         ctx.error(
           `"${arg.name}" is a destructured prop and should not be passed directly to ${method}(). ` +
             `Pass a getter () => ${arg.name} instead.`,
-          arg
+          arg,
         )
       }
     }
@@ -301,6 +302,6 @@ export function transformDestructuredProps(
       ) {
         popScope()
       }
-    }
+    },
   })
 }
diff --git a/packages/compiler-sfc/src/script/defineSlots.ts b/packages/compiler-sfc/src/script/defineSlots.ts
index cd7dc2e4897..d8f66d757a6 100644
--- a/packages/compiler-sfc/src/script/defineSlots.ts
+++ b/packages/compiler-sfc/src/script/defineSlots.ts
@@ -1,13 +1,13 @@
-import { LVal, Node } from '@babel/types'
+import type { LVal, Node } from '@babel/types'
 import { isCallOf } from './utils'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 
 export const DEFINE_SLOTS = 'defineSlots'
 
 export function processDefineSlots(
   ctx: ScriptCompileContext,
   node: Node,
-  declId?: LVal
+  declId?: LVal,
 ): boolean {
   if (!isCallOf(node, DEFINE_SLOTS)) {
     return false
@@ -25,7 +25,7 @@ export function processDefineSlots(
     ctx.s.overwrite(
       ctx.startOffset! + node.start!,
       ctx.startOffset! + node.end!,
-      `${ctx.helper('useSlots')}()`
+      `${ctx.helper('useSlots')}()`,
     )
   }
 
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index f3c3932d829..211efc49089 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -1,12 +1,11 @@
-import { parseExpression } from '@babel/parser'
-import { SFCDescriptor } from '../parse'
+import type { SFCDescriptor } from '../parse'
 import {
+  type ExpressionNode,
   NodeTypes,
-  SimpleExpressionNode,
-  createRoot,
+  type SimpleExpressionNode,
+  type TemplateChildNode,
   parserOptions,
-  transform,
-  walkIdentifiers
+  walkIdentifiers,
 } from '@vue/compiler-dom'
 import { createCache } from '../cache'
 import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
@@ -17,112 +16,76 @@ import { camelize, capitalize, isBuiltInDirective } from '@vue/shared'
  * when not using inline mode.
  */
 export function isImportUsed(local: string, sfc: SFCDescriptor): boolean {
-  return new RegExp(
-    // #4274 escape $ since it's a special char in regex
-    // (and is the only regex special char that is valid in identifiers)
-    `[^\\w$_]${local.replace(/\$/g, '\\$')}[^\\w$_]`
-  ).test(resolveTemplateUsageCheckString(sfc))
+  return resolveTemplateUsedIdentifiers(sfc).has(local)
 }
 
-const templateUsageCheckCache = createCache<string>()
+const templateUsageCheckCache = createCache<Set<string>>()
 
-function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
+function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
   const { content, ast } = sfc.template!
   const cached = templateUsageCheckCache.get(content)
   if (cached) {
     return cached
   }
 
-  let code = ''
-  transform(createRoot([ast]), {
-    nodeTransforms: [
-      node => {
-        if (node.type === NodeTypes.ELEMENT) {
-          if (
-            !parserOptions.isNativeTag!(node.tag) &&
-            !parserOptions.isBuiltInComponent!(node.tag)
-          ) {
-            code += `,${camelize(node.tag)},${capitalize(camelize(node.tag))}`
-          }
-          for (let i = 0; i < node.props.length; i++) {
-            const prop = node.props[i]
-            if (prop.type === NodeTypes.DIRECTIVE) {
-              if (!isBuiltInDirective(prop.name)) {
-                code += `,v${capitalize(camelize(prop.name))}`
-              }
-              if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
-                code += `,${processExp(
-                  (prop.arg as SimpleExpressionNode).content,
-                  prop.name
-                )}`
-              }
-              if (prop.exp) {
-                code += `,${processExp(
-                  (prop.exp as SimpleExpressionNode).content,
-                  prop.name
-                )}`
-              }
+  const ids = new Set<string>()
+
+  ast!.children.forEach(walk)
+
+  function walk(node: TemplateChildNode) {
+    switch (node.type) {
+      case NodeTypes.ELEMENT:
+        let tag = node.tag
+        if (tag.includes('.')) tag = tag.split('.')[0].trim()
+        if (
+          !parserOptions.isNativeTag!(tag) &&
+          !parserOptions.isBuiltInComponent!(tag)
+        ) {
+          ids.add(camelize(tag))
+          ids.add(capitalize(camelize(tag)))
+        }
+        for (let i = 0; i < node.props.length; i++) {
+          const prop = node.props[i]
+          if (prop.type === NodeTypes.DIRECTIVE) {
+            if (!isBuiltInDirective(prop.name)) {
+              ids.add(`v${capitalize(camelize(prop.name))}`)
+            }
+
+            // process dynamic directive arguments
+            if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
+              extractIdentifiers(ids, prop.arg)
             }
-            if (
-              prop.type === NodeTypes.ATTRIBUTE &&
-              prop.name === 'ref' &&
-              prop.value?.content
-            ) {
-              code += `,${prop.value.content}`
+
+            if (prop.name === 'for') {
+              extractIdentifiers(ids, prop.forParseResult!.source)
+            } else if (prop.exp) {
+              extractIdentifiers(ids, prop.exp)
             }
           }
-        } else if (node.type === NodeTypes.INTERPOLATION) {
-          code += `,${processExp(
-            (node.content as SimpleExpressionNode).content
-          )}`
+          if (
+            prop.type === NodeTypes.ATTRIBUTE &&
+            prop.name === 'ref' &&
+            prop.value?.content
+          ) {
+            ids.add(prop.value.content)
+          }
         }
-      }
-    ]
-  })
-
-  code += ';'
-  templateUsageCheckCache.set(content, code)
-  return code
-}
-
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
-
-function processExp(exp: string, dir?: string): string {
-  if (/ as\s+\w|<.*>|:/.test(exp)) {
-    if (dir === 'slot') {
-      exp = `(${exp})=>{}`
-    } else if (dir === 'on') {
-      exp = `()=>{return ${exp}}`
-    } else if (dir === 'for') {
-      const inMatch = exp.match(forAliasRE)
-      if (inMatch) {
-        let [, LHS, RHS] = inMatch
-        // #6088
-        LHS = LHS.trim().replace(/^\(|\)$/g, '')
-        return processExp(`(${LHS})=>{}`) + processExp(RHS)
-      }
+        node.children.forEach(walk)
+        break
+      case NodeTypes.INTERPOLATION:
+        extractIdentifiers(ids, node.content)
+        break
     }
-    let ret = ''
-    // has potential type cast or generic arguments that uses types
-    const ast = parseExpression(exp, { plugins: ['typescript'] })
-    walkIdentifiers(ast, node => {
-      ret += `,` + node.name
-    })
-    return ret
   }
-  return stripStrings(exp)
-}
 
-function stripStrings(exp: string) {
-  return exp
-    .replace(/'[^']*'|"[^"]*"/g, '')
-    .replace(/`[^`]+`/g, stripTemplateString)
+  templateUsageCheckCache.set(content, ids)
+  return ids
 }
 
-function stripTemplateString(str: string): string {
-  const interpMatch = str.match(/\${[^}]+}/g)
-  if (interpMatch) {
-    return interpMatch.map(m => m.slice(2, -1)).join(',')
+function extractIdentifiers(ids: Set<string>, node: ExpressionNode) {
+  if (node.ast) {
+    walkIdentifiers(node.ast, n => ids.add(n.name))
+  } else if (node.ast === null) {
+    ids.add((node as SimpleExpressionNode).content)
   }
-  return ''
 }
diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
index 76b25c66350..3b2f21d4863 100644
--- a/packages/compiler-sfc/src/script/normalScript.ts
+++ b/packages/compiler-sfc/src/script/normalScript.ts
@@ -1,8 +1,6 @@
-import { shouldTransform, transformAST } from '@vue/reactivity-transform'
 import { analyzeScriptBindings } from './analyzeScriptBindings'
-import { ScriptCompileContext } from './context'
+import type { ScriptCompileContext } from './context'
 import MagicString from 'magic-string'
-import { RawSourceMap } from 'source-map-js'
 import { rewriteDefaultAST } from '../rewriteDefault'
 import { genNormalScriptCssVarsCode } from '../style/cssVars'
 
@@ -10,7 +8,7 @@ export const normalScriptDefaultVar = `__default__`
 
 export function processNormalScript(
   ctx: ScriptCompileContext,
-  scopeId: string
+  scopeId: string,
 ) {
   const script = ctx.descriptor.script!
   if (script.lang && !ctx.isJS && !ctx.isTS) {
@@ -22,46 +20,21 @@ export function processNormalScript(
     let map = script.map
     const scriptAst = ctx.scriptAst!
     const bindings = analyzeScriptBindings(scriptAst.body)
-    const { source, filename, cssVars } = ctx.descriptor
-    const { sourceMap, genDefaultAs, isProd } = ctx.options
-
-    // TODO remove in 3.4
-    if (ctx.options.reactivityTransform && shouldTransform(content)) {
-      const s = new MagicString(source)
-      const startOffset = script.loc.start.offset
-      const endOffset = script.loc.end.offset
-      const { importedHelpers } = transformAST(scriptAst, s, startOffset)
-      if (importedHelpers.length) {
-        s.prepend(
-          `import { ${importedHelpers
-            .map(h => `${h} as _${h}`)
-            .join(', ')} } from 'vue'\n`
-        )
-      }
-      s.remove(0, startOffset)
-      s.remove(endOffset, source.length)
-      content = s.toString()
-      if (sourceMap !== false) {
-        map = s.generateMap({
-          source: filename,
-          hires: true,
-          includeContent: true
-        }) as unknown as RawSourceMap
-      }
-    }
+    const { cssVars } = ctx.descriptor
+    const { genDefaultAs, isProd } = ctx.options
 
     if (cssVars.length || genDefaultAs) {
       const defaultVar = genDefaultAs || normalScriptDefaultVar
       const s = new MagicString(content)
       rewriteDefaultAST(scriptAst.body, s, defaultVar)
       content = s.toString()
-      if (cssVars.length) {
+      if (cssVars.length && !ctx.options.templateOptions?.ssr) {
         content += genNormalScriptCssVarsCode(
           cssVars,
           bindings,
           scopeId,
           !!isProd,
-          defaultVar
+          defaultVar,
         )
       }
       if (!genDefaultAs) {
@@ -73,7 +46,7 @@ export function processNormalScript(
       content,
       map,
       bindings,
-      scriptAst: scriptAst.body
+      scriptAst: scriptAst.body,
     }
   } catch (e: any) {
     // silently fallback if parse fails since user may be using custom
diff --git a/packages/compiler-sfc/src/script/resolveType.ts b/packages/compiler-sfc/src/script/resolveType.ts
index 78581432366..968c168ddb9 100644
--- a/packages/compiler-sfc/src/script/resolveType.ts
+++ b/packages/compiler-sfc/src/script/resolveType.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   Expression,
   Identifier,
   Node,
@@ -22,25 +22,33 @@ import {
   TSTypeLiteral,
   TSTypeQuery,
   TSTypeReference,
-  TemplateLiteral
+  TemplateLiteral,
 } from '@babel/types'
 import {
   UNKNOWN_TYPE,
   createGetCanonicalFileName,
   getId,
   getImportedName,
+  joinPaths,
   normalizePath,
-  joinPaths
 } from './utils'
-import { ScriptCompileContext, resolveParserPlugins } from './context'
-import { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
+import { type ScriptCompileContext, resolveParserPlugins } from './context'
+import type { ImportBinding, SFCScriptCompileOptions } from '../compileScript'
 import { capitalize, hasOwn } from '@vue/shared'
 import { parse as babelParse } from '@babel/parser'
 import { parse } from '../parse'
 import { createCache } from '../cache'
 import type TS from 'typescript'
-import { extname, dirname } from 'path'
+import { dirname, extname, join } from 'path'
 import { minimatch as isMatch } from 'minimatch'
+import * as process from 'process'
+
+export type SimpleTypeResolveOptions = Partial<
+  Pick<
+    SFCScriptCompileOptions,
+    'globalTypeFiles' | 'fs' | 'babelParserPlugins' | 'isProd'
+  >
+>
 
 /**
  * TypeResolveContext is compatible with ScriptCompileContext
@@ -59,13 +67,31 @@ import { minimatch as isMatch } from 'minimatch'
  */
 export type SimpleTypeResolveContext = Pick<
   ScriptCompileContext,
-  // required
-  'source' | 'filename' | 'error' | 'options'
+  // file
+  | 'source'
+  | 'filename'
+
+  // utils
+  | 'error'
+  | 'helper'
+  | 'getString'
+
+  // props
+  | 'propsTypeDecl'
+  | 'propsRuntimeDefaults'
+  | 'propsDestructuredBindings'
+
+  // emits
+  | 'emitsTypeDecl'
+
+  // customElement
+  | 'isCE'
 > &
   Partial<
     Pick<ScriptCompileContext, 'scope' | 'globalScopes' | 'deps' | 'fs'>
   > & {
     ast: Statement[]
+    options: SimpleTypeResolveOptions
   }
 
 export type TypeResolveContext = ScriptCompileContext | SimpleTypeResolveContext
@@ -87,9 +113,9 @@ export class TypeScope {
     public offset: number = 0,
     public imports: Record<string, Import> = Object.create(null),
     public types: Record<string, ScopeTypeNode> = Object.create(null),
-    public declares: Record<string, ScopeTypeNode> = Object.create(null)
+    public declares: Record<string, ScopeTypeNode> = Object.create(null),
   ) {}
-
+  isGenericScope = false
   resolvedImportSources: Record<string, string> = Object.create(null)
   exportedTypes: Record<string, ScopeTypeNode> = Object.create(null)
   exportedDeclares: Record<string, ScopeTypeNode> = Object.create(null)
@@ -117,39 +143,49 @@ interface ResolvedElements {
 export function resolveTypeElements(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
-  scope?: TypeScope
+  scope?: TypeScope,
+  typeParameters?: Record<string, Node>,
 ): ResolvedElements {
-  if (node._resolvedElements) {
+  const canCache = !typeParameters
+  if (canCache && node._resolvedElements) {
     return node._resolvedElements
   }
-  return (node._resolvedElements = innerResolveTypeElements(
+  const resolved = innerResolveTypeElements(
     ctx,
     node,
-    node._ownerScope || scope || ctxToScope(ctx)
-  ))
+    node._ownerScope || scope || ctxToScope(ctx),
+    typeParameters,
+  )
+  return canCache ? (node._resolvedElements = resolved) : resolved
 }
 
 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.type
+        node.types.map(t => resolveTypeElements(ctx, t, scope, typeParameters)),
+        node.type,
       )
     case 'TSMappedType':
       return resolveMappedType(ctx, node, scope)
@@ -157,7 +193,7 @@ function innerResolveTypeElements(
       const types = resolveIndexType(ctx, node, scope)
       return mergeElements(
         types.map(t => resolveTypeElements(ctx, t, t._ownerScope)),
-        'TSUnionType'
+        'TSUnionType',
       )
     }
     case 'TSExpressionWithTypeArguments': // referenced by interface extends
@@ -170,26 +206,64 @@ function innerResolveTypeElements(
         scope.imports[typeName]?.source === 'vue'
       ) {
         return resolveExtractPropTypes(
-          resolveTypeElements(ctx, node.typeParameters.params[0], scope),
-          scope
+          resolveTypeElements(
+            ctx,
+            node.typeParameters.params[0],
+            scope,
+            typeParameters,
+          ),
+          scope,
         )
       }
       const resolved = resolveTypeReference(ctx, node, scope)
       if (resolved) {
-        return resolveTypeElements(ctx, resolved, resolved._ownerScope)
+        let typeParams: Record<string, Node> | undefined
+        if (
+          (resolved.type === 'TSTypeAliasDeclaration' ||
+            resolved.type === 'TSInterfaceDeclaration') &&
+          resolved.typeParameters &&
+          node.typeParameters
+        ) {
+          typeParams = Object.create(null)
+          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
+            // @ts-expect-error
             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(
               ctx,
               node.typeParameters.params[0],
-              scope
+              scope,
             )
             if (ret) {
               return resolveTypeElements(ctx, ret, scope)
@@ -199,7 +273,7 @@ function innerResolveTypeElements(
         return ctx.error(
           `Unresolvable type reference or unsupported built-in utility type`,
           node,
-          scope
+          scope,
         )
       }
     }
@@ -212,14 +286,14 @@ function innerResolveTypeElements(
       ) {
         return resolveExtractPropTypes(
           resolveTypeElements(ctx, node.typeParameters.params[0], scope),
-          scope
+          scope,
         )
       }
       const sourceScope = importSourceToScope(
         ctx,
         node.argument,
         scope,
-        node.argument.value
+        node.argument.value,
       )
       const resolved = resolveTypeReference(ctx, node, sourceScope)
       if (resolved) {
@@ -242,11 +316,18 @@ 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)
+        scope.isGenericScope = true
+        Object.assign(scope.types, typeParameters)
+      }
       ;(e as MaybeWithScope)._ownerScope = scope
       const name = getId(e.key)
       if (name && !e.computed) {
@@ -259,7 +340,7 @@ function typeElementsToMap(
         ctx.error(
           `Unsupported computed key in type referenced by a macro`,
           e.key,
-          scope
+          scope,
         )
       }
     } else if (e.type === 'TSCallSignatureDeclaration') {
@@ -271,7 +352,7 @@ function typeElementsToMap(
 
 function mergeElements(
   maps: ResolvedElements[],
-  type: 'TSUnionType' | 'TSIntersectionType'
+  type: 'TSUnionType' | 'TSIntersectionType',
 ): ResolvedElements {
   if (maps.length === 1) return maps[0]
   const res: ResolvedElements = { props: {} }
@@ -285,11 +366,11 @@ function mergeElements(
           baseProps[key].key,
           {
             type,
-            // @ts-ignore
-            types: [baseProps[key], props[key]]
+            // @ts-expect-error
+            types: [baseProps[key], props[key]],
           },
           baseProps[key]._ownerScope,
-          baseProps[key].optional || props[key].optional
+          baseProps[key].optional || props[key].optional,
         )
       }
     }
@@ -304,7 +385,7 @@ function createProperty(
   key: Expression,
   typeAnnotation: TSType,
   scope: TypeScope,
-  optional: boolean
+  optional: boolean,
 ): TSPropertySignature & WithScope {
   return {
     type: 'TSPropertySignature',
@@ -313,18 +394,24 @@ function createProperty(
     optional,
     typeAnnotation: {
       type: 'TSTypeAnnotation',
-      typeAnnotation
+      typeAnnotation,
     },
-    _ownerScope: scope
+    _ownerScope: scope,
   }
 }
 
 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 (
@@ -334,12 +421,15 @@ function resolveInterfaceMembers(
         continue
       }
       try {
-        const { props } = resolveTypeElements(ctx, ext, scope)
+        const { props, calls } = resolveTypeElements(ctx, ext, scope)
         for (const key in props) {
           if (!hasOwn(base.props, key)) {
             base.props[key] = props[key]
           }
         }
+        if (calls) {
+          ;(base.calls || (base.calls = [])).push(...calls)
+        }
       } catch (e) {
         ctx.error(
           `Failed to resolve extends base type.\nIf this previously worked in 3.2, ` +
@@ -348,7 +438,7 @@ function resolveInterfaceMembers(
             `interface Props extends /* @vue-ignore */ Base {}\n\n` +
             `Note: both in 3.2 or with the ignore, the properties in the base ` +
             `type are treated as fallthrough attrs at runtime.`,
-          ext
+          ext,
         )
       }
     }
@@ -359,7 +449,7 @@ function resolveInterfaceMembers(
 function resolveMappedType(
   ctx: TypeResolveContext,
   node: TSMappedType,
-  scope: TypeScope
+  scope: TypeScope,
 ): ResolvedElements {
   const res: ResolvedElements = { props: {} }
   const keys = resolveStringType(ctx, node.typeParameter.constraint!, scope)
@@ -367,11 +457,11 @@ function resolveMappedType(
     res.props[key] = createProperty(
       {
         type: 'Identifier',
-        name: key
+        name: key,
       },
       node.typeAnnotation!,
       scope,
-      !!node.optional
+      !!node.optional,
     )
   }
   return res
@@ -380,7 +470,7 @@ function resolveMappedType(
 function resolveIndexType(
   ctx: TypeResolveContext,
   node: TSIndexedAccessType,
-  scope: TypeScope
+  scope: TypeScope,
 ): (TSType & MaybeWithScope)[] {
   if (node.indexType.type === 'TSNumberKeyword') {
     return resolveArrayElementType(ctx, node.objectType, scope)
@@ -411,7 +501,7 @@ function resolveIndexType(
 function resolveArrayElementType(
   ctx: TypeResolveContext,
   node: Node,
-  scope: TypeScope
+  scope: TypeScope,
 ): TSType[] {
   // type[]
   if (node.type === 'TSArrayType') {
@@ -420,7 +510,7 @@ function resolveArrayElementType(
   // tuple
   if (node.type === 'TSTupleType') {
     return node.elementTypes.map(t =>
-      t.type === 'TSNamedTupleMember' ? t.elementType : t
+      t.type === 'TSNamedTupleMember' ? t.elementType : t,
     )
   }
   if (node.type === 'TSTypeReference') {
@@ -437,14 +527,14 @@ function resolveArrayElementType(
   return ctx.error(
     'Failed to resolve element type from target type',
     node,
-    scope
+    scope,
   )
 }
 
 function resolveStringType(
   ctx: TypeResolveContext,
   node: Node,
-  scope: TypeScope
+  scope: TypeScope,
 ): string[] {
   switch (node.type) {
     case 'StringLiteral':
@@ -483,7 +573,7 @@ function resolveStringType(
             ctx.error(
               'Unsupported type when resolving index type',
               node.typeName,
-              scope
+              scope,
             )
         }
       }
@@ -495,7 +585,7 @@ function resolveStringType(
 function resolveTemplateKeys(
   ctx: TypeResolveContext,
   node: TemplateLiteral,
-  scope: TypeScope
+  scope: TypeScope,
 ): string[] {
   if (!node.expressions.length) {
     return [node.quasis[0].value.raw]
@@ -511,9 +601,9 @@ function resolveTemplateKeys(
     {
       ...node,
       expressions: node.expressions.slice(1),
-      quasis: q ? node.quasis.slice(1) : node.quasis
+      quasis: q ? node.quasis.slice(1) : node.quasis,
     },
-    scope
+    scope,
   )
 
   for (const r of resolved) {
@@ -530,7 +620,7 @@ const SupportedBuiltinsSet = new Set([
   'Required',
   'Readonly',
   'Pick',
-  'Omit'
+  'Omit',
 ] as const)
 
 type GetSetType<T> = T extends Set<infer V> ? V : never
@@ -539,9 +629,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 }
@@ -563,7 +659,7 @@ function resolveBuiltin(
       const picked = resolveStringType(
         ctx,
         node.typeParameters!.params[1],
-        scope
+        scope,
       )
       const res: ResolvedElements = { props: {}, calls: t.calls }
       for (const key of picked) {
@@ -575,7 +671,7 @@ function resolveBuiltin(
       const omitted = resolveStringType(
         ctx,
         node.typeParameters!.params[1],
-        scope
+        scope,
       )
       const res: ResolvedElements = { props: {}, calls: t.calls }
       for (const key in t.props) {
@@ -600,18 +696,20 @@ function resolveTypeReference(
   },
   scope?: TypeScope,
   name?: string,
-  onlyExported = false
+  onlyExported = false,
 ): ScopeTypeNode | undefined {
-  if (node._resolvedReference) {
+  const canCache = !scope?.isGenericScope
+  if (canCache && node._resolvedReference) {
     return node._resolvedReference
   }
-  return (node._resolvedReference = innerResolveTypeReference(
+  const resolved = innerResolveTypeReference(
     ctx,
     scope || ctxToScope(ctx),
     name || getReferenceName(node),
     node,
-    onlyExported
-  ))
+    onlyExported,
+  )
+  return canCache ? (node._resolvedReference = resolved) : resolved
 }
 
 function innerResolveTypeReference(
@@ -619,7 +717,7 @@ function innerResolveTypeReference(
   scope: TypeScope,
   name: string | string[],
   node: ReferenceTypes,
-  onlyExported: boolean
+  onlyExported: boolean,
 ): ScopeTypeNode | undefined {
   if (typeof name === 'string') {
     if (scope.imports[name]) {
@@ -631,8 +729,8 @@ function innerResolveTypeReference(
             ? scope.exportedDeclares
             : scope.declares
           : onlyExported
-          ? scope.exportedTypes
-          : scope.types
+            ? scope.exportedTypes
+            : scope.types
       if (lookupSource[name]) {
         return lookupSource[name]
       } else {
@@ -663,7 +761,7 @@ function innerResolveTypeReference(
           childScope,
           name.length > 2 ? name.slice(1) : name[name.length - 1],
           node,
-          !ns.declare
+          !ns.declare,
         )
       }
     }
@@ -675,10 +773,10 @@ function getReferenceName(node: ReferenceTypes): string | string[] {
     node.type === 'TSTypeReference'
       ? node.typeName
       : node.type === 'TSExpressionWithTypeArguments'
-      ? node.expression
-      : node.type === 'TSImportType'
-      ? node.qualifier
-      : node.exprName
+        ? node.expression
+        : node.type === 'TSImportType'
+          ? node.qualifier
+          : node.exprName
   if (ref?.type === 'Identifier') {
     return ref.name
   } else if (ref?.type === 'TSQualifiedName') {
@@ -703,7 +801,7 @@ function resolveGlobalScope(ctx: TypeResolveContext): TypeScope[] | undefined {
       throw new Error('[vue/compiler-sfc] globalTypeFiles requires fs access.')
     }
     return ctx.options.globalTypeFiles.map(file =>
-      fileToScope(ctx, normalizePath(file), true)
+      fileToScope(ctx, normalizePath(file), true),
     )
   }
 }
@@ -715,7 +813,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']>
@@ -743,7 +859,8 @@ function resolveFS(ctx: TypeResolveContext): FS | undefined {
         file = file.replace(/\.ts$/, '')
       }
       return fs.readFile(file)
-    }
+    },
+    realpath: fs.realpath,
   })
 }
 
@@ -751,7 +868,7 @@ function resolveTypeFromImport(
   ctx: TypeResolveContext,
   node: ReferenceTypes,
   name: string,
-  scope: TypeScope
+  scope: TypeScope,
 ): ScopeTypeNode | undefined {
   const { source, imported } = scope.imports[name]
   const sourceScope = importSourceToScope(ctx, node, scope, source)
@@ -762,31 +879,41 @@ function importSourceToScope(
   ctx: TypeResolveContext,
   node: Node,
   scope: TypeScope,
-  source: string
+  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. ` +
         `File system access is required for resolving imported types.`,
       node,
-      scope
+      scope,
     )
   }
 
   let resolved: string | undefined = scope.resolvedImportSources[source]
   if (!resolved) {
-    if (source.startsWith('.')) {
+    if (source.startsWith('..')) {
+      const osSpecificJoinFn = process.platform === 'win32' ? join : joinPaths
+
+      const filename = osSpecificJoinFn(dirname(scope.filename), source)
+      resolved = resolveExt(filename, fs)
+    } else if (source.startsWith('.')) {
       // relative import - fast path
-      const filename = joinPaths(scope.filename, '..', source)
+      const filename = joinPaths(dirname(scope.filename), source)
       resolved = resolveExt(filename, fs)
     } else {
       // module or aliased import - use full TS resolution, only supported in Node
-      if (!__NODE_JS__) {
+      if (!__CJS__) {
         return ctx.error(
           `Type import from non-relative sources is not supported in the browser build.`,
           node,
-          scope
+          scope,
         )
       }
       if (!ts) {
@@ -797,7 +924,7 @@ function importSourceToScope(
               `typescript is required as a peer dep for vue in order ` +
               `to support resolving types from module imports.`,
             node,
-            scope
+            scope,
           )
         }
       }
@@ -815,7 +942,7 @@ function importSourceToScope(
     return ctx.error(
       `Failed to resolve import source ${JSON.stringify(source)}.`,
       node,
-      scope
+      scope,
     )
   }
 }
@@ -847,9 +974,9 @@ function resolveWithTS(
   containingFile: string,
   source: string,
   ts: typeof TS,
-  fs: FS
+  fs: FS,
 ): string | undefined {
-  if (!__NODE_JS__) return
+  if (!__CJS__) return
 
   // 1. resolve tsconfig.json
   const configPath = ts.findConfigFile(containingFile, fs.fileExists)
@@ -874,7 +1001,7 @@ function resolveWithTS(
       for (const c of configs) {
         const base = normalizePath(
           (c.config.options.pathsBasePath as string) ||
-            dirname(c.config.options.configFilePath as string)
+            dirname(c.config.options.configFilePath as string),
         )
         const included: string[] = c.config.raw?.include
         const excluded: string[] = c.config.raw?.exclude
@@ -902,7 +1029,7 @@ function resolveWithTS(
       (matchedConfig.cache = ts.createModuleResolutionCache(
         process.cwd(),
         createGetCanonicalFileName(ts.sys.useCaseSensitiveFileNames),
-        tsCompilerOptions
+        tsCompilerOptions,
       ))
   } else {
     tsCompilerOptions = {}
@@ -914,7 +1041,7 @@ function resolveWithTS(
     containingFile,
     tsCompilerOptions,
     fs,
-    tsResolveCache
+    tsResolveCache,
   )
 
   if (res.resolvedModule) {
@@ -922,14 +1049,14 @@ function resolveWithTS(
     if (filename.endsWith('.vue.ts')) {
       filename = filename.replace(/\.ts$/, '')
     }
-    return filename
+    return fs.realpath ? fs.realpath(filename) : filename
   }
 }
 
 function loadTSConfig(
   configPath: string,
   ts: typeof TS,
-  fs: FS
+  fs: FS,
 ): TS.ParsedCommandLine[] {
   // The only case where `fs` is NOT `ts.sys` is during tests.
   // parse config host requires an extra `readDirectory` method
@@ -938,7 +1065,7 @@ function loadTSConfig(
     ? {
         ...fs,
         useCaseSensitiveFileNames: true,
-        readDirectory: () => []
+        readDirectory: () => [],
       }
     : ts.sys
   const config = ts.parseJsonConfigFileContent(
@@ -946,7 +1073,7 @@ function loadTSConfig(
     parseConfigHost,
     dirname(configPath),
     undefined,
-    configPath
+    configPath,
   )
   const res = [config]
   if (config.projectReferences) {
@@ -974,7 +1101,7 @@ export function invalidateTypeCache(filename: string) {
 export function fileToScope(
   ctx: TypeResolveContext,
   filename: string,
-  asGlobal = false
+  asGlobal = false,
 ): TypeScope {
   const cached = fileToScopeCache.get(filename)
   if (cached) {
@@ -993,7 +1120,7 @@ export function fileToScope(
 function parseFile(
   filename: string,
   content: string,
-  parserPlugins?: SFCScriptCompileOptions['babelParserPlugins']
+  parserPlugins?: SFCScriptCompileOptions['babelParserPlugins'],
 ): Statement[] {
   const ext = extname(filename)
   if (ext === '.ts' || ext === '.tsx') {
@@ -1001,13 +1128,13 @@ function parseFile(
       plugins: resolveParserPlugins(
         ext.slice(1),
         parserPlugins,
-        filename.endsWith('.d.ts')
+        filename.endsWith('.d.ts'),
       ),
-      sourceType: 'module'
+      sourceType: 'module',
     }).program.body
   } else if (ext === '.vue') {
     const {
-      descriptor: { script, scriptSetup }
+      descriptor: { script, scriptSetup },
     } = parse(content)
     if (!script && !scriptSetup) {
       return []
@@ -1032,7 +1159,7 @@ function parseFile(
     const lang = script?.lang || scriptSetup?.lang
     return babelParse(scriptContent, {
       plugins: resolveParserPlugins(lang!, parserPlugins),
-      sourceType: 'module'
+      sourceType: 'module',
     }).program.body
   }
   return []
@@ -1047,14 +1174,14 @@ function ctxToScope(ctx: TypeResolveContext): TypeScope {
     'ast' in ctx
       ? ctx.ast
       : ctx.scriptAst
-      ? [...ctx.scriptAst.body, ...ctx.scriptSetupAst!.body]
-      : ctx.scriptSetupAst!.body
+        ? [...ctx.scriptAst.body, ...ctx.scriptSetupAst!.body]
+        : ctx.scriptSetupAst!.body
 
   const scope = new TypeScope(
     ctx.filename,
     ctx.source,
     'startOffset' in ctx ? ctx.startOffset! : 0,
-    'userImports' in ctx ? Object.create(ctx.userImports) : recordImports(body)
+    'userImports' in ctx ? Object.create(ctx.userImports) : recordImports(body),
   )
 
   recordTypes(ctx, body, scope)
@@ -1065,20 +1192,13 @@ function ctxToScope(ctx: TypeResolveContext): TypeScope {
 function moduleDeclToScope(
   ctx: TypeResolveContext,
   node: TSModuleDeclaration & { _resolvedChildScope?: TypeScope },
-  parentScope: TypeScope
+  parentScope: TypeScope,
 ): TypeScope {
   if (node._resolvedChildScope) {
     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
@@ -1092,13 +1212,24 @@ 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(
   ctx: TypeResolveContext,
   body: Statement[],
   scope: TypeScope,
-  asGlobal = false
+  asGlobal = false,
 ) {
   const { types, declares, exportedTypes, exportedDeclares, imports } = scope
   const isAmbient = asGlobal
@@ -1134,15 +1265,15 @@ function recordTypes(
                 // re-export, register an import + export as a type reference
                 imports[exported] = {
                   source: stmt.source.value,
-                  imported: local
+                  imported: local,
                 }
                 exportedTypes[exported] = {
                   type: 'TSTypeReference',
                   typeName: {
                     type: 'Identifier',
-                    name: local
+                    name: local,
                   },
-                  _ownerScope: scope
+                  _ownerScope: scope,
                 }
               } else if (types[local]) {
                 // exporting local defined type
@@ -1156,7 +1287,7 @@ function recordTypes(
           ctx,
           stmt.source,
           scope,
-          stmt.source.value
+          stmt.source.value,
         )
         Object.assign(scope.exportedTypes, sourceScope.exportedTypes)
       } else if (stmt.type === 'ExportDefaultDeclaration' && stmt.declaration) {
@@ -1166,7 +1297,7 @@ function recordTypes(
             stmt.declaration,
             exportedTypes,
             exportedDeclares,
-            'default'
+            'default',
           )
         } else if (types[stmt.declaration.name]) {
           exportedTypes['default'] = types[stmt.declaration.name]
@@ -1188,7 +1319,7 @@ function recordType(
   node: Node,
   types: Record<string, Node>,
   declares: Record<string, Node>,
-  overwriteId?: string
+  overwriteId?: string,
 ) {
   switch (node.type) {
     case 'TSInterfaceDeclaration':
@@ -1230,7 +1361,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
@@ -1263,7 +1394,7 @@ function mergeNamespaces(to: TSModuleDeclaration, from: TSModuleDeclaration) {
         type: 'ExportNamedDeclaration',
         declaration: toBody,
         exportKind: 'type',
-        specifiers: []
+        specifiers: [],
       })
     }
   } else if (fromBody.type === 'TSModuleDeclaration') {
@@ -1272,7 +1403,7 @@ function mergeNamespaces(to: TSModuleDeclaration, from: TSModuleDeclaration) {
       type: 'ExportNamedDeclaration',
       declaration: fromBody,
       exportKind: 'type',
-      specifiers: []
+      specifiers: [],
     })
   } else {
     // both block
@@ -1282,7 +1413,7 @@ function mergeNamespaces(to: TSModuleDeclaration, from: TSModuleDeclaration) {
 
 function attachNamespace(
   to: Node & { _ns?: TSModuleDeclaration },
-  ns: TSModuleDeclaration
+  ns: TSModuleDeclaration,
 ) {
   if (!to._ns) {
     to._ns = ns
@@ -1306,7 +1437,7 @@ function recordImport(node: Node, imports: TypeScope['imports']) {
   for (const s of node.specifiers) {
     imports[s.local.name] = {
       imported: getImportedName(s),
-      source: node.source.value
+      source: node.source.value,
     }
   }
 }
@@ -1314,7 +1445,7 @@ function recordImport(node: Node, imports: TypeScope['imports']) {
 export function inferRuntimeType(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope,
-  scope = node._ownerScope || ctxToScope(ctx)
+  scope = node._ownerScope || ctxToScope(ctx),
 ): string[] {
   try {
     switch (node.type) {
@@ -1351,9 +1482,10 @@ export function inferRuntimeType(
           return inferRuntimeType(
             ctx,
             node.typeAnnotation.typeAnnotation,
-            scope
+            scope,
           )
         }
+        break
       case 'TSMethodSignature':
       case 'TSFunctionType':
         return ['Function']
@@ -1391,6 +1523,7 @@ export function inferRuntimeType(
             case 'WeakMap':
             case 'Date':
             case 'Promise':
+            case 'Error':
               return [node.typeName.name]
 
             // TS built-in utility types
@@ -1419,7 +1552,7 @@ export function inferRuntimeType(
                 return inferRuntimeType(
                   ctx,
                   node.typeParameters.params[0],
-                  scope
+                  scope,
                 ).filter(t => t !== 'null')
               }
               break
@@ -1428,7 +1561,7 @@ export function inferRuntimeType(
                 return inferRuntimeType(
                   ctx,
                   node.typeParameters.params[1],
-                  scope
+                  scope,
                 )
               }
               break
@@ -1438,7 +1571,7 @@ export function inferRuntimeType(
                 return inferRuntimeType(
                   ctx,
                   node.typeParameters.params[0],
-                  scope
+                  scope,
                 )
               }
               break
@@ -1455,7 +1588,7 @@ export function inferRuntimeType(
         return flattenTypes(ctx, node.types, scope)
       case 'TSIntersectionType': {
         return flattenTypes(ctx, node.types, scope).filter(
-          t => t !== UNKNOWN_TYPE
+          t => t !== UNKNOWN_TYPE,
         )
       }
 
@@ -1478,7 +1611,7 @@ export function inferRuntimeType(
           ctx,
           node.argument,
           scope,
-          node.argument.value
+          node.argument.value,
         )
         const resolved = resolveTypeReference(ctx, node, sourceScope)
         if (resolved) {
@@ -1508,7 +1641,7 @@ export function inferRuntimeType(
 function flattenTypes(
   ctx: TypeResolveContext,
   types: TSType[],
-  scope: TypeScope
+  scope: TypeScope,
 ): string[] {
   if (types.length === 1) {
     return inferRuntimeType(ctx, types[0], scope)
@@ -1516,9 +1649,9 @@ function flattenTypes(
   return [
     ...new Set(
       ([] as string[]).concat(
-        ...types.map(t => inferRuntimeType(ctx, t, scope))
-      )
-    )
+        ...types.map(t => inferRuntimeType(ctx, t, scope)),
+      ),
+    ),
   ]
 }
 
@@ -1545,7 +1678,7 @@ function inferEnumType(node: TSEnumDeclaration): string[] {
  */
 function resolveExtractPropTypes(
   { props }: ResolvedElements,
-  scope: TypeScope
+  scope: TypeScope,
 ): ResolvedElements {
   const res: ResolvedElements = { props: {} }
   for (const key in props) {
@@ -1553,7 +1686,7 @@ function resolveExtractPropTypes(
     res.props[key] = reverseInferType(
       raw.key,
       raw.typeAnnotation!.typeAnnotation,
-      scope
+      scope,
     )
   }
   return res
@@ -1564,7 +1697,7 @@ function reverseInferType(
   node: TSType,
   scope: TypeScope,
   optional = true,
-  checkObjectSyntax = true
+  checkObjectSyntax = true,
 ): TSPropertySignature & WithScope {
   if (checkObjectSyntax && node.type === 'TSTypeLiteral') {
     // check { type: xxx }
@@ -1588,7 +1721,7 @@ function reverseInferType(
         key,
         ctorToType(node.typeName.name),
         scope,
-        optional
+        optional,
       )
     } else if (node.typeName.name === 'PropType' && node.typeParameters) {
       // PropType<{}>
@@ -1626,7 +1759,7 @@ function ctorToType(ctorType: string): TSType {
     case 'Promise':
       return {
         type: 'TSTypeReference',
-        typeName: { type: 'Identifier', name: ctor }
+        typeName: { type: 'Identifier', name: ctor },
       }
   }
   // fallback to null
@@ -1639,7 +1772,7 @@ function findStaticPropertyType(node: TSTypeLiteral, key: string) {
       m.type === 'TSPropertySignature' &&
       !m.computed &&
       getId(m.key) === key &&
-      m.typeAnnotation
+      m.typeAnnotation,
   )
   return prop && prop.typeAnnotation!.typeAnnotation
 }
@@ -1647,7 +1780,7 @@ function findStaticPropertyType(node: TSTypeLiteral, key: string) {
 function resolveReturnType(
   ctx: TypeResolveContext,
   arg: Node,
-  scope: TypeScope
+  scope: TypeScope,
 ) {
   let resolved: Node | undefined = arg
   if (
@@ -1669,7 +1802,7 @@ function resolveReturnType(
 export function resolveUnionType(
   ctx: TypeResolveContext,
   node: Node & MaybeWithScope & { _resolvedElements?: ResolvedElements },
-  scope?: TypeScope
+  scope?: TypeScope,
 ): Node[] {
   if (node.type === 'TSTypeReference') {
     const resolved = resolveTypeReference(ctx, node, scope)
diff --git a/packages/compiler-sfc/src/script/topLevelAwait.ts b/packages/compiler-sfc/src/script/topLevelAwait.ts
index 26534ee9576..09955ac54e4 100644
--- a/packages/compiler-sfc/src/script/topLevelAwait.ts
+++ b/packages/compiler-sfc/src/script/topLevelAwait.ts
@@ -1,5 +1,5 @@
-import { AwaitExpression } from '@babel/types'
-import { ScriptCompileContext } from './context'
+import type { AwaitExpression } from '@babel/types'
+import type { ScriptCompileContext } from './context'
 
 /**
  * Support context-persistence between top-level await expressions:
@@ -38,7 +38,7 @@ export function processAwait(
   ctx: ScriptCompileContext,
   node: AwaitExpression,
   needSemi: boolean,
-  isStatement: boolean
+  isStatement: boolean,
 ) {
   const argumentStart =
     node.argument.extra && node.argument.extra.parenthesized
@@ -48,7 +48,7 @@ export function processAwait(
   const startOffset = ctx.startOffset!
   const argumentStr = ctx.descriptor.source.slice(
     argumentStart + startOffset,
-    node.argument.end! + startOffset
+    node.argument.end! + startOffset,
   )
 
   const containsNestedAwait = /\bawait\b/.test(argumentStr)
@@ -57,13 +57,13 @@ export function processAwait(
     node.start! + startOffset,
     argumentStart + startOffset,
     `${needSemi ? `;` : ``}(\n  ([__temp,__restore] = ${ctx.helper(
-      `withAsyncContext`
-    )}(${containsNestedAwait ? `async ` : ``}() => `
+      `withAsyncContext`,
+    )}(${containsNestedAwait ? `async ` : ``}() => `,
   )
   ctx.s.appendLeft(
     node.end! + startOffset,
     `)),\n  ${isStatement ? `` : `__temp = `}await __temp,\n  __restore()${
       isStatement ? `` : `,\n  __temp`
-    }\n)`
+    }\n)`,
   )
 }
diff --git a/packages/compiler-sfc/src/script/utils.ts b/packages/compiler-sfc/src/script/utils.ts
index 42c4718e3a8..38e6bf93750 100644
--- a/packages/compiler-sfc/src/script/utils.ts
+++ b/packages/compiler-sfc/src/script/utils.ts
@@ -1,4 +1,4 @@
-import {
+import type {
   CallExpression,
   Expression,
   Identifier,
@@ -6,10 +6,9 @@ import {
   ImportNamespaceSpecifier,
   ImportSpecifier,
   Node,
-  StringLiteral
+  StringLiteral,
 } from '@babel/types'
 import path from 'path'
-import { TS_NODE_TYPES } from '@vue/compiler-dom'
 
 export const UNKNOWN_TYPE = 'Unknown'
 
@@ -32,17 +31,9 @@ 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
+  test: string | ((id: string) => boolean) | null | undefined,
 ): node is CallExpression {
   return !!(
     node &&
@@ -60,7 +51,10 @@ export function toRuntimeTypeString(types: string[]) {
 }
 
 export function getImportedName(
-  specifier: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier
+  specifier:
+    | ImportSpecifier
+    | ImportDefaultSpecifier
+    | ImportNamespaceSpecifier,
 ) {
   if (specifier.type === 'ImportSpecifier')
     return specifier.imported.type === 'Identifier'
@@ -76,8 +70,8 @@ export function getId(node: Expression) {
   return node.type === 'Identifier'
     ? node.name
     : node.type === 'StringLiteral'
-    ? node.value
-    : null
+      ? node.value
+      : null
 }
 
 const identity = (str: string) => str
@@ -113,8 +107,16 @@ export const joinPaths = (path.posix || path).join
  * key may contain symbols
  * e.g. onUpdate:modelValue -> "onUpdate:modelValue"
  */
-export const escapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+export const propNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~\-]/
 
-export function getEscapedKey(key: string) {
-  return escapeSymbolsRE.test(key) ? JSON.stringify(key) : key
+export function getEscapedPropName(key: string) {
+  return propNameEscapeSymbolsRE.test(key) ? JSON.stringify(key) : key
+}
+
+export const cssVarNameEscapeSymbolsRE = /[ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g
+
+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 2380959b819..47bb7c083bb 100644
--- a/packages/compiler-sfc/src/style/cssVars.ts
+++ b/packages/compiler-sfc/src/style/cssVars.ts
@@ -1,15 +1,15 @@
 import {
-  processExpression,
-  createTransformContext,
-  createSimpleExpression,
-  createRoot,
+  type BindingMetadata,
   NodeTypes,
-  SimpleExpressionNode,
-  BindingMetadata
+  type SimpleExpressionNode,
+  createRoot,
+  createSimpleExpression,
+  createTransformContext,
+  processExpression,
 } from '@vue/compiler-dom'
-import { SFCDescriptor } from '../parse'
-import { escapeSymbolsRE } from '../script/utils'
-import { PluginCreator } from 'postcss'
+import type { SFCDescriptor } from '../parse'
+import { getEscapedCssVarName } from '../script/utils'
+import type { PluginCreator } from 'postcss'
 import hash from 'hash-sum'
 
 export const CSS_VARS_HELPER = `useCssVars`
@@ -18,21 +18,29 @@ export function genCssVarsFromList(
   vars: string[],
   id: string,
   isProd: boolean,
-  isSSR = false
+  isSSR = false,
 ): 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}-${raw.replace(escapeSymbolsRE, s => `\\${s}`)}`
+    // #7823 need to double-escape in SSR because the attributes are rendered
+    // into an HTML string
+    return `${id}-${getEscapedCssVarName(raw, isSSR)}`
   }
 }
 
@@ -70,10 +78,10 @@ export function parseCssVars(sfc: SFCDescriptor): string[] {
   return vars
 }
 
-const enum LexerState {
+enum LexerState {
   inParens,
   inSingleQuoteString,
-  inDoubleQuoteString
+  inDoubleQuoteString,
 }
 
 function lexBinding(content: string, start: number): number | null {
@@ -144,7 +152,7 @@ export const cssVarsPlugin: PluginCreator<CssVarsPluginOptions> = opts => {
         }
         decl.value = transformed + value.slice(lastIndex)
       }
-    }
+    },
   }
 }
 cssVarsPlugin.postcss = true
@@ -153,14 +161,14 @@ export function genCssVarsCode(
   vars: string[],
   bindings: BindingMetadata,
   id: string,
-  isProd: boolean
+  isProd: boolean,
 ) {
   const varsExp = genCssVarsFromList(vars, id, isProd)
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {
     prefixIdentifiers: true,
     inline: true,
-    bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings
+    bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings,
   })
   const transformed = processExpression(exp, context)
   const transformedString =
@@ -184,7 +192,7 @@ export function genNormalScriptCssVarsCode(
   bindings: BindingMetadata,
   id: string,
   isProd: boolean,
-  defaultVar: string
+  defaultVar: string,
 ): string {
   return (
     `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
@@ -192,7 +200,7 @@ export function genNormalScriptCssVarsCode(
       cssVars,
       bindings,
       id,
-      isProd
+      isProd,
     )}}\n` +
     `const __setup__ = ${defaultVar}.setup\n` +
     `${defaultVar}.setup = __setup__\n` +
diff --git a/packages/compiler-sfc/src/style/pluginScoped.ts b/packages/compiler-sfc/src/style/pluginScoped.ts
index f6e9be2fde7..c5e01896130 100644
--- a/packages/compiler-sfc/src/style/pluginScoped.ts
+++ b/packages/compiler-sfc/src/style/pluginScoped.ts
@@ -1,4 +1,4 @@
-import { PluginCreator, Rule, AtRule } from 'postcss'
+import type { AtRule, PluginCreator, Rule } from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { warn } from '../warn'
 
@@ -55,7 +55,7 @@ const scopedPlugin: PluginCreator<string> = (id = '') => {
           }
         })
       }
-    }
+    },
   }
 }
 
@@ -82,7 +82,7 @@ function rewriteSelector(
   id: string,
   selector: selectorParser.Selector,
   selectorRoot: selectorParser.Root,
-  slotted = false
+  slotted = false,
 ) {
   let node: selectorParser.Node | null = null
   let shouldInject = true
@@ -97,7 +97,7 @@ function rewriteSelector(
       n.spaces.before = n.spaces.after = ''
       warn(
         `the >>> and /deep/ combinators have been deprecated. ` +
-          `Use :deep() instead.`
+          `Use :deep() instead.`,
       )
       return false
     }
@@ -121,8 +121,8 @@ function rewriteSelector(
             selector.insertAfter(
               n,
               selectorParser.combinator({
-                value: ' '
-              })
+                value: ' ',
+              }),
             )
           }
           selector.removeChild(n)
@@ -131,7 +131,7 @@ function rewriteSelector(
           // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
           warn(
             `${value} usage as a combinator has been deprecated. ` +
-              `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.`
+              `Use :deep(<inner-selector>) instead of ${value} <inner-selector>.`,
           )
 
           const prev = selector.at(selector.index(n) - 1)
@@ -170,11 +170,24 @@ 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 (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 = ''
   } else {
@@ -194,8 +207,8 @@ function rewriteSelector(
         attribute: idToAdd,
         value: idToAdd,
         raws: {},
-        quoteMark: `"`
-      })
+        quoteMark: `"`,
+      }),
     )
   }
 }
diff --git a/packages/compiler-sfc/src/style/pluginTrim.ts b/packages/compiler-sfc/src/style/pluginTrim.ts
index 67c4a3f0f35..ab5283438a6 100644
--- a/packages/compiler-sfc/src/style/pluginTrim.ts
+++ b/packages/compiler-sfc/src/style/pluginTrim.ts
@@ -1,4 +1,4 @@
-import { PluginCreator } from 'postcss'
+import type { PluginCreator } from 'postcss'
 
 const trimPlugin: PluginCreator<{}> = () => {
   return {
@@ -10,7 +10,7 @@ const trimPlugin: PluginCreator<{}> = () => {
           if ('after' in raws && raws.after) raws.after = '\n'
         }
       })
-    }
+    },
   }
 }
 
diff --git a/packages/compiler-sfc/src/style/preprocessors.ts b/packages/compiler-sfc/src/style/preprocessors.ts
index 9b3610501c7..7915d1d1406 100644
--- a/packages/compiler-sfc/src/style/preprocessors.ts
+++ b/packages/compiler-sfc/src/style/preprocessors.ts
@@ -1,6 +1,6 @@
 import merge from 'merge-source-map'
-import { RawSourceMap } from 'source-map-js'
-import { SFCStyleCompileOptions } from '../compileStyle'
+import type { RawSourceMap } from 'source-map-js'
+import type { SFCStyleCompileOptions } from '../compileStyle'
 import { isFunction } from '@vue/shared'
 
 export type StylePreprocessor = (
@@ -11,7 +11,7 @@ export type StylePreprocessor = (
     additionalData?: string | ((source: string, filename: string) => string)
     filename: string
   },
-  customRequire: SFCStyleCompileOptions['preprocessCustomRequire']
+  customRequire: SFCStyleCompileOptions['preprocessCustomRequire'],
 ) => StylePreprocessorResults
 
 export interface StylePreprocessorResults {
@@ -29,7 +29,7 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
     data: getSource(source, options.filename, options.additionalData),
     file: options.filename,
     outFile: options.filename,
-    sourceMap: !!map
+    sourceMap: !!map,
   }
 
   try {
@@ -40,7 +40,7 @@ const scss: StylePreprocessor = (source, map, options, load = require) => {
         code: result.css.toString(),
         map: merge(map, JSON.parse(result.map.toString())),
         errors: [],
-        dependencies
+        dependencies,
       }
     }
 
@@ -56,9 +56,9 @@ const sass: StylePreprocessor = (source, map, options, load) =>
     map,
     {
       ...options,
-      indentedSyntax: true
+      indentedSyntax: true,
     },
-    load
+    load,
   )
 
 // .less
@@ -73,7 +73,7 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
     (err: Error | null, output: any) => {
       error = err
       result = output
-    }
+    },
   )
 
   if (error) return { code: '', errors: [error], dependencies: [] }
@@ -83,14 +83,14 @@ const less: StylePreprocessor = (source, map, options, load = require) => {
       code: result.css.toString(),
       map: merge(map, result.map),
       errors: [],
-      dependencies: dependencies
+      dependencies: dependencies,
     }
   }
 
   return {
     code: result.css.toString(),
     errors: [],
-    dependencies: dependencies
+    dependencies: dependencies,
   }
 }
 
@@ -108,7 +108,7 @@ const styl: StylePreprocessor = (source, map, options, load = require) => {
         code: result,
         map: merge(map, ref.sourcemap),
         errors: [],
-        dependencies
+        dependencies,
       }
     }
 
@@ -121,7 +121,7 @@ const styl: StylePreprocessor = (source, map, options, load = require) => {
 function getSource(
   source: string,
   filename: string,
-  additionalData?: string | ((source: string, filename: string) => string)
+  additionalData?: string | ((source: string, filename: string) => string),
 ) {
   if (!additionalData) return source
   if (isFunction(additionalData)) {
@@ -137,5 +137,5 @@ export const processors: Record<PreprocessLang, StylePreprocessor> = {
   sass,
   scss,
   styl,
-  stylus: styl
+  stylus: styl,
 }
diff --git a/packages/compiler-sfc/src/template/templateUtils.ts b/packages/compiler-sfc/src/template/templateUtils.ts
index 0966945a5ee..c1414d1ecbd 100644
--- a/packages/compiler-sfc/src/template/templateUtils.ts
+++ b/packages/compiler-sfc/src/template/templateUtils.ts
@@ -1,4 +1,4 @@
-import { UrlWithStringQuery, parse as uriParse } from 'url'
+import { type UrlWithStringQuery, parse as uriParse } from 'url'
 import { isString } from '@vue/shared'
 
 export function isRelativeUrl(url: string): boolean {
diff --git a/packages/compiler-sfc/src/template/transformAssetUrl.ts b/packages/compiler-sfc/src/template/transformAssetUrl.ts
index 32bf33bcea1..6291e21bbba 100644
--- a/packages/compiler-sfc/src/template/transformAssetUrl.ts
+++ b/packages/compiler-sfc/src/template/transformAssetUrl.ts
@@ -1,19 +1,19 @@
 import path from 'path'
 import {
   ConstantTypes,
-  createSimpleExpression,
-  ExpressionNode,
-  NodeTransform,
+  type ExpressionNode,
+  type NodeTransform,
   NodeTypes,
-  SimpleExpressionNode,
-  SourceLocation,
-  TransformContext
+  type SimpleExpressionNode,
+  type SourceLocation,
+  type TransformContext,
+  createSimpleExpression,
 } from '@vue/compiler-core'
 import {
+  isDataUrl,
+  isExternalUrl,
   isRelativeUrl,
   parseUrl,
-  isExternalUrl,
-  isDataUrl
 } from './templateUtils'
 import { isArray } from '@vue/shared'
 
@@ -42,28 +42,28 @@ export const defaultAssetUrlOptions: Required<AssetURLOptions> = {
     source: ['src'],
     img: ['src'],
     image: ['xlink:href', 'href'],
-    use: ['xlink:href', 'href']
-  }
+    use: ['xlink:href', 'href'],
+  },
 }
 
 export const normalizeOptions = (
-  options: AssetURLOptions | AssetURLTagConfig
+  options: AssetURLOptions | AssetURLTagConfig,
 ): Required<AssetURLOptions> => {
   if (Object.keys(options).some(key => isArray((options as any)[key]))) {
     // legacy option format which directly passes in tags config
     return {
       ...defaultAssetUrlOptions,
-      tags: options as any
+      tags: options as any,
     }
   }
   return {
     ...defaultAssetUrlOptions,
-    ...options
+    ...options,
   }
 }
 
 export const createAssetUrlTransformWithOptions = (
-  options: Required<AssetURLOptions>
+  options: Required<AssetURLOptions>,
 ): NodeTransform => {
   return (node, context) =>
     (transformAssetUrl as Function)(node, context, options)
@@ -85,7 +85,7 @@ export const createAssetUrlTransformWithOptions = (
 export const transformAssetUrl: NodeTransform = (
   node,
   context,
-  options: AssetURLOptions = defaultAssetUrlOptions
+  options: AssetURLOptions = defaultAssetUrlOptions,
 ) => {
   if (node.type === NodeTypes.ELEMENT) {
     if (!node.props.length) {
@@ -141,7 +141,7 @@ export const transformAssetUrl: NodeTransform = (
         arg: createSimpleExpression(attr.name, true, attr.loc),
         exp,
         modifiers: [],
-        loc: attr.loc
+        loc: attr.loc,
       }
     })
   }
@@ -151,7 +151,7 @@ function getImportsExpressionExp(
   path: string | null,
   hash: string | null,
   loc: SourceLocation,
-  context: TransformContext
+  context: TransformContext,
 ): ExpressionNode {
   if (path) {
     let name: string
@@ -166,9 +166,15 @@ function getImportsExpressionExp(
         name,
         false,
         loc,
-        ConstantTypes.CAN_STRINGIFY
+        ConstantTypes.CAN_STRINGIFY,
       )
-      context.imports.push({ exp, path })
+
+      // We need to ensure the path is not encoded (to %2F),
+      // so we decode it back in case it is encoded
+      context.imports.push({
+        exp,
+        path: decodeURIComponent(path),
+      })
     }
 
     if (!hash) {
@@ -180,7 +186,7 @@ function getImportsExpressionExp(
       hashExp,
       false,
       loc,
-      ConstantTypes.CAN_STRINGIFY
+      ConstantTypes.CAN_STRINGIFY,
     )
 
     if (!context.hoistStatic) {
@@ -200,7 +206,7 @@ function getImportsExpressionExp(
         `_hoisted_${existingHoistIndex + 1}`,
         false,
         loc,
-        ConstantTypes.CAN_STRINGIFY
+        ConstantTypes.CAN_STRINGIFY,
       )
     }
     return context.hoist(finalExp)
diff --git a/packages/compiler-sfc/src/template/transformSrcset.ts b/packages/compiler-sfc/src/template/transformSrcset.ts
index 18b9d0b0b3b..8f00f86e3c3 100644
--- a/packages/compiler-sfc/src/template/transformSrcset.ts
+++ b/packages/compiler-sfc/src/template/transformSrcset.ts
@@ -1,20 +1,23 @@
 import path from 'path'
 import {
   ConstantTypes,
+  type ExpressionNode,
+  type NodeTransform,
+  NodeTypes,
+  type SimpleExpressionNode,
   createCompoundExpression,
   createSimpleExpression,
-  ExpressionNode,
-  NodeTransform,
-  NodeTypes,
-  SimpleExpressionNode
 } from '@vue/compiler-core'
 import {
+  isDataUrl,
+  isExternalUrl,
   isRelativeUrl,
   parseUrl,
-  isExternalUrl,
-  isDataUrl
 } from './templateUtils'
-import { AssetURLOptions, defaultAssetUrlOptions } from './transformAssetUrl'
+import {
+  type AssetURLOptions,
+  defaultAssetUrlOptions,
+} from './transformAssetUrl'
 
 const srcsetTags = ['img', 'source']
 
@@ -27,7 +30,7 @@ interface ImageCandidate {
 const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g
 
 export const createSrcsetTransformWithOptions = (
-  options: Required<AssetURLOptions>
+  options: Required<AssetURLOptions>,
 ): NodeTransform => {
   return (node, context) =>
     (transformSrcset as Function)(node, context, options)
@@ -36,7 +39,7 @@ export const createSrcsetTransformWithOptions = (
 export const transformSrcset: NodeTransform = (
   node,
   context,
-  options: Required<AssetURLOptions> = defaultAssetUrlOptions
+  options: Required<AssetURLOptions> = defaultAssetUrlOptions,
 ) => {
   if (node.type === NodeTypes.ELEMENT) {
     if (srcsetTags.includes(node.tag) && node.props.length) {
@@ -109,21 +112,21 @@ export const transformSrcset: NodeTransform = (
               let exp: SimpleExpressionNode
               if (path) {
                 const existingImportsIndex = context.imports.findIndex(
-                  i => i.path === path
+                  i => i.path === path,
                 )
                 if (existingImportsIndex > -1) {
                   exp = createSimpleExpression(
                     `_imports_${existingImportsIndex}`,
                     false,
                     attr.loc,
-                    ConstantTypes.CAN_STRINGIFY
+                    ConstantTypes.CAN_STRINGIFY,
                   )
                 } else {
                   exp = createSimpleExpression(
                     `_imports_${context.imports.length}`,
                     false,
                     attr.loc,
-                    ConstantTypes.CAN_STRINGIFY
+                    ConstantTypes.CAN_STRINGIFY,
                   )
                   context.imports.push({ exp, path })
                 }
@@ -134,7 +137,7 @@ export const transformSrcset: NodeTransform = (
                 `"${url}"`,
                 false,
                 attr.loc,
-                ConstantTypes.CAN_STRINGIFY
+                ConstantTypes.CAN_STRINGIFY,
               )
               compoundExpression.children.push(exp)
             }
@@ -160,7 +163,7 @@ export const transformSrcset: NodeTransform = (
             arg: createSimpleExpression('srcset', true, attr.loc),
             exp,
             modifiers: [],
-            loc: attr.loc
+            loc: attr.loc,
           }
         }
       })
diff --git a/packages/compiler-sfc/src/warn.ts b/packages/compiler-sfc/src/warn.ts
index 13cfa4da727..29bed4dc509 100644
--- a/packages/compiler-sfc/src/warn.ts
+++ b/packages/compiler-sfc/src/warn.ts
@@ -11,6 +11,6 @@ export function warnOnce(msg: string) {
 
 export function warn(msg: string) {
   console.warn(
-    `\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`
+    `\x1b[1m\x1b[33m[@vue/compiler-sfc]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`,
   )
 }
diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index 9391c01e37e..2fde4560ec4 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) => {
@@ -114,13 +114,13 @@ describe('ssr: components', () => {
         compile(`<foo>
         <template v-slot>foo</template>
         <template v-slot:named>bar</template>
-      </foo>`).code
+      </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")
                 ]
               }
             }),
@@ -151,28 +151,28 @@ describe('ssr: components', () => {
       expect(
         compile(`<foo>
         <template v-slot:named v-if="ok">foo</template>
-      </foo>`).code
+      </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))
@@ -181,27 +181,30 @@ describe('ssr: components', () => {
     })
 
     test('v-for slot', () => {
-      expect(
-        compile(`<foo>
-        <template v-for="key in names" v-slot:[key]="{ msg }">{{ msg + key + bar }}</template>
-      </foo>`).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 { code } = compile(`<foo>
+      <template v-for="(key, index) in names" v-slot:[key]="{ msg }">{{ msg + key + index + bar }}</template>
+    </foo>`)
+      expect(code).not.toMatch(`_ctx.msg`)
+      expect(code).not.toMatch(`_ctx.key`)
+      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")
 
         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) => {
+            _renderList(_ctx.names, (key, index) => {
               return {
                 name: key,
                 fn: _withCtx(({ msg }, _push, _parent, _scopeId) => {
                   if (_push) {
-                    _push(\`\${_ssrInterpolate(msg + key + _ctx.bar)}\`)
+                    _push(\`\${_ssrInterpolate(msg + key + index + _ctx.bar)}\`)
                   } else {
                     return [
-                      _createTextVNode(_toDisplayString(msg + _ctx.key + _ctx.bar), 1 /* TEXT */)
+                      _createTextVNode(_toDisplayString(msg + key + index + _ctx.bar), 1 /* TEXT */)
                     ]
                   }
                 })
@@ -225,13 +228,13 @@ describe('ssr: components', () => {
             <span v-for="i in list"></span>
           </div>
         </template>
-      </foo>`).code
+      </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) => {
@@ -248,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)
                 ]
               }
             }),
@@ -271,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)
                 ]
               }
             }),
@@ -291,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) => {
@@ -318,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>\`)
@@ -329,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))
             }"
@@ -344,13 +347,13 @@ describe('ssr: components', () => {
       test('should push marker string if is slot root', () => {
         expect(
           compile(`<foo><transition><div v-if="false"/></transition></foo>`)
-            .code
+            .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) => {
@@ -366,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 */
                     })
@@ -385,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..8f0e28f4e14 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -4,16 +4,16 @@ import { compile } from '../src'
 describe('ssr: element', () => {
   test('basic elements', () => {
     expect(getCompiledString(`<div></div>`)).toMatchInlineSnapshot(
-      `"\`<div></div>\`"`
+      `"\`<div></div>\`"`,
     )
     expect(getCompiledString(`<div/>`)).toMatchInlineSnapshot(
-      `"\`<div></div>\`"`
+      `"\`<div></div>\`"`,
     )
   })
 
   test('nested elements', () => {
     expect(
-      getCompiledString(`<div><span></span><span></span></div>`)
+      getCompiledString(`<div><span></span><span></span></div>`),
     ).toMatchInlineSnapshot(`"\`<div><span></span><span></span></div>\`"`)
   })
 
@@ -49,23 +49,23 @@ describe('ssr: element', () => {
 
     test('<textarea> with static value', () => {
       expect(
-        getCompiledString(`<textarea value="fo&gt;o"/>`)
+        getCompiledString(`<textarea value="fo&gt;o"/>`),
       ).toMatchInlineSnapshot(`"\`<textarea>fo&gt;o</textarea>\`"`)
     })
 
     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>\`)
           }"
         `)
@@ -73,9 +73,9 @@ describe('ssr: element', () => {
 
     test('multiple _ssrInterpolate at parent and child import dependency once', () => {
       expect(
-        compile(`<div>{{ hello }}<textarea v-bind="a"></textarea></div>`).code
+        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>\`)
         }"
       `)
@@ -96,14 +96,14 @@ describe('ssr: element', () => {
     test('should pass tag to custom elements w/ dynamic v-bind', () => {
       expect(
         compile(`<my-foo v-bind="obj"></my-foo>`, {
-          isCustomElement: () => true
-        }).code
+          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>\`)
         }"
       `)
     })
@@ -112,72 +112,72 @@ describe('ssr: element', () => {
   describe('attrs', () => {
     test('static attrs', () => {
       expect(
-        getCompiledString(`<div id="foo" class="bar"></div>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\" class=\\"bar\\"></div>`"')
+        getCompiledString(`<div id="foo" class="bar"></div>`),
+      ).toMatchInlineSnapshot(`"\`<div id="foo" class="bar"></div>\`"`)
     })
 
     test('ignore static key/ref', () => {
       expect(
-        getCompiledString(`<div key="1" ref="el"></div>`)
+        getCompiledString(`<div key="1" ref="el"></div>`),
       ).toMatchInlineSnapshot(`"\`<div></div>\`"`)
     })
 
     test('ignore v-bind key/ref', () => {
       expect(
-        getCompiledString(`<div :key="1" :ref="el"></div>`)
+        getCompiledString(`<div :key="1" :ref="el"></div>`),
       ).toMatchInlineSnapshot(`"\`<div></div>\`"`)
     })
 
     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>\`"
         `)
@@ -263,12 +263,12 @@ describe('ssr: element', () => {
       // should merge style and :style
       expect(
         getCompiledString(
-          `<div style="color:red;" :style="b" v-bind="obj"></div>`
-        )
+          `<div style="color:red;" :style="b" v-bind="obj"></div>`,
+        ),
       ).toMatchInlineSnapshot(`
         "\`<div\${
             _ssrRenderAttrs(_mergeProps({
-              style: [{\\"color\\":\\"red\\"}, _ctx.b]
+              style: [{"color":"red"}, _ctx.b]
             }, _ctx.obj))
           }></div>\`"
       `)
@@ -276,11 +276,11 @@ describe('ssr: element', () => {
 
     test('should ignore v-on', () => {
       expect(
-        getCompiledString(`<div id="foo" @click="bar"/>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
+        getCompiledString(`<div id="foo" @click="bar"/>`),
+      ).toMatchInlineSnapshot(`"\`<div id="foo"></div>\`"`)
       expect(
-        getCompiledString(`<div id="foo" v-on="bar"/>`)
-      ).toMatchInlineSnapshot('"`<div id=\\"foo\\"></div>`"')
+        getCompiledString(`<div id="foo" v-on="bar"/>`),
+      ).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>\`"
         `)
     })
@@ -329,12 +329,12 @@ describe('ssr: element', () => {
 
     test('custom dir with object v-bind + normal bindings', () => {
       expect(
-        getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`)
+        getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`),
       ).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..9e70dac0bdc 100644
--- a/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrInjectCssVars.spec.ts
@@ -5,11 +5,11 @@ describe('ssr: inject <style vars>', () => {
   test('basic', () => {
     expect(
       compile(`<div/>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        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 }}
@@ -21,10 +21,10 @@ describe('ssr: inject <style vars>', () => {
   test('fragment', () => {
     expect(
       compile(`<div/><div/>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        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 }}
@@ -40,14 +40,14 @@ describe('ssr: inject <style vars>', () => {
   test('passing on to components', () => {
     expect(
       compile(`<div/><foo/>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        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>\`)
@@ -60,11 +60,11 @@ describe('ssr: inject <style vars>', () => {
   test('v-if branches', () => {
     expect(
       compile(`<div v-if="ok"/><template v-else><div/><div/></template>`, {
-        ssrCssVars: `{ color }`
-      }).code
+        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 }}
@@ -91,12 +91,12 @@ describe('ssr: inject <style vars>', () => {
           </template>
         </Suspense>`,
         {
-          ssrCssVars: `{ color }`
-        }
-      ).code
+          ssrCssVars: `{ color }`,
+        },
+      ).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 }}
@@ -117,12 +117,12 @@ describe('ssr: inject <style vars>', () => {
     const result = compile(`<div/>`, {
       inline: true,
       bindingMetadata: { dynamic: BindingTypes.SETUP_MAYBE_REF },
-      ssrCssVars: '{ "--hash": (dynamic) }'
+      ssrCssVars: '{ "--hash": (dynamic) }',
     })
 
     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..bb262fad0fd 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) => {
@@ -27,9 +27,9 @@ describe('ssr compile: teleport', () => {
       `)
 
     expect(
-      compile(`<teleport :to="target" :disabled="foo"><div/></teleport>`).code
+      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 3445a84fda9..c3bfd7d8f6e 100644
--- a/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrScopeId.spec.ts
@@ -7,10 +7,10 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<div><span>hello</span></div>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        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>\`)
@@ -23,14 +23,14 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<foo>foo</foo>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        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")
               ]
             }
           }),
@@ -52,14 +52,14 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<foo><span>hello</span></foo>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        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")
               ]
             }
           }),
@@ -81,15 +81,15 @@ describe('ssr: scopeId', () => {
     expect(
       compile(`<foo><span>hello</span><bar><span/></bar></foo>`, {
         scopeId,
-        mode: 'module'
-      }).code
+        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 */
                 })
@@ -124,4 +124,48 @@ describe('ssr: scopeId', () => {
       }"
     `)
   })
+
+  // #7554
+  test('scopeId is correctly transform to scope attribute of transition-group ', () => {
+    expect(
+      compile(
+        `<transition-group tag="div" class="red"><span>hello</span></transition-group>`,
+        {
+          scopeId,
+          mode: 'module',
+        },
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "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>\`)
+      }"
+    `)
+
+    // with dynamic tag
+    expect(
+      compile(
+        `<transition-group :tag="someTag" class="red"><span>hello</span></transition-group>`,
+        {
+          scopeId,
+          mode: 'module',
+        },
+      ).code,
+    ).toMatchInlineSnapshot(`
+      "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))
+        } 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..655d68efbbc 100644
--- a/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrSlotOutlet.spec.ts
@@ -1,30 +1,30 @@
 import { compile } from '../src'
-import { ssrHelpers, SSR_RENDER_SLOT_INNER } from '../src/runtimeHelpers'
+import { SSR_RENDER_SLOT_INNER, ssrHelpers } 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)
         }"
@@ -62,13 +62,13 @@ describe('ssr: <slot>', () => {
   test('with scopeId', async () => {
     expect(
       compile(`<slot/>`, {
-        scopeId: 'hello'
-      }).code
+        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")
       }"
     `)
   })
@@ -77,13 +77,13 @@ describe('ssr: <slot>', () => {
     expect(
       compile(`<slot/>`, {
         scopeId: 'hello',
-        slotted: false
-      }).code
+        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)
       }"
     `)
   })
@@ -91,22 +91,22 @@ describe('ssr: <slot>', () => {
   test('with forwarded scopeId', async () => {
     expect(
       compile(`<Comp><slot/></Comp>`, {
-        scopeId: 'hello'
-      }).code
+        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,26 @@ 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)
+      }"
+    `)
+  })
+
+  test('inside transition-group', () => {
+    const { code } = compile(
+      `<TransitionGroup tag="div"><slot/></TransitionGroup>`,
+    )
+    expect(code).toMatch(ssrHelpers[SSR_RENDER_SLOT_INNER])
+    expect(code).toMatchInlineSnapshot(`
+      "const { ssrRenderSlotInner: _ssrRenderSlotInner, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _ssrRenderSlotInner(_ctx.$slots, \\"default\\", {}, null, _push, _parent, null, true)
+        _push(\`<div\${_ssrRenderAttrs(_attrs)}>\`)
+        _ssrRenderSlotInner(_ctx.$slots, "default", {}, null, _push, _parent, null, true)
+        _push(\`</div>\`)
       }"
     `)
   })
diff --git a/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts b/packages/compiler-ssr/__tests__/ssrSuspense.spec.ts
index a4d34801956..dd8853c8daf 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: () => {
@@ -28,13 +28,13 @@ describe('ssr compile: suspense', () => {
       <template #fallback>
         loading...
       </template>
-    </suspense>`).code
+    </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..1aa391e6a5f 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,33 +17,33 @@ 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\`"`,
     )
   })
 
   test('comments', () => {
     expect(getCompiledString(`<!--bar-->`)).toMatchInlineSnapshot(
-      `"\`<!--bar-->\`"`
+      `"\`<!--bar-->\`"`,
     )
   })
 
   test('static text escape', () => {
     expect(getCompiledString(`&lt;foo&gt;`)).toMatchInlineSnapshot(
-      `"\`&lt;foo&gt;\`"`
+      `"\`&lt;foo&gt;\`"`,
     )
   })
 
   test('nested elements with static text', () => {
     expect(
-      getCompiledString(`<div><span>hello</span><span>bye</span></div>`)
+      getCompiledString(`<div><span>hello</span><span>bye</span></div>`),
     ).toMatchInlineSnapshot(
-      `"\`<div><span>hello</span><span>bye</span></div>\`"`
+      `"\`<div><span>hello</span><span>bye</span></div>\`"`,
     )
   })
 
   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\`)
@@ -54,9 +54,9 @@ describe('ssr: text', () => {
   test('nested elements with interpolation', () => {
     expect(
       compile(`<div><span>{{ foo }} bar</span><span>baz {{ qux }}</span></div>`)
-        .code
+        .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
new file mode 100644
index 00000000000..760393f169c
--- /dev/null
+++ b/packages/compiler-ssr/__tests__/ssrTransition.spec.ts
@@ -0,0 +1,25 @@
+import { compile } from '../src'
+
+describe('transition', () => {
+  test('basic', () => {
+    expect(compile(`<transition><div>foo</div></transition>`).code)
+      .toMatchInlineSnapshot(`
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        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")
+
+        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..d2a576fd02a 100644
--- a/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
@@ -6,9 +6,9 @@ describe('transition-group', () => {
   test('basic', () => {
     expect(
       compile(`<transition-group><div v-for="i in list"/></transition-group>`)
-        .code
+        .code,
     ).toMatchInlineSnapshot(`
-      "const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
+      "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
         _push(\`<!--[-->\`)
@@ -23,10 +23,10 @@ describe('transition-group', () => {
   test('with static tag', () => {
     expect(
       compile(
-        `<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
-      ).code
+        `<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)}>\`)
@@ -41,10 +41,10 @@ describe('transition-group', () => {
   test('with dynamic tag', () => {
     expect(
       compile(
-        `<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
-      ).code
+        `<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(\`<\${
@@ -67,10 +67,10 @@ describe('transition-group', () => {
               <div v-for="i in 10"/>
               <div v-for="i in 10"/>
               <template v-if="ok"><div>ok</div></template>
-            </transition-group>`
-      ).code
+            </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(\`<!--[-->\`)
@@ -94,16 +94,16 @@ describe('transition-group', () => {
     expect(
       compile(
         `<transition-group tag="ul" class="red" id="ok">
-        </transition-group>`
-      ).code
+        </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..0d957265120 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(\`<!--[-->\`)
@@ -35,10 +35,10 @@ describe('ssr: v-for', () => {
       compile(
         `<div v-for="row, i in list">` +
           `<div v-for="j in row">{{ i }},{{ j }}</div>` +
-          `</div>`
-      ).code
+          `</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(\`<!--[-->\`)
@@ -76,9 +76,9 @@ describe('ssr: v-for', () => {
   test('template v-for (single element)', () => {
     expect(
       compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
-        .code
+        .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(\`<!--[-->\`)
@@ -93,10 +93,10 @@ describe('ssr: v-for', () => {
   test('template v-for (multi element)', () => {
     expect(
       compile(
-        `<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
-      ).code
+        `<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(\`<!--[-->\`)
@@ -114,13 +114,13 @@ describe('ssr: v-for', () => {
 
   test('render loop args should not be prefixed', () => {
     const { code } = compile(
-      `<div v-for="{ foo }, index in list">{{ foo + bar + index }}</div>`
+      `<div v-for="{ foo }, index in list">{{ foo + bar + index }}</div>`,
     )
     expect(code).toMatch(`_ctx.bar`)
     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..b544adadcf3 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) {
@@ -111,7 +111,8 @@ describe('ssr: v-if', () => {
 
   test('<template v-if> (multiple element)', () => {
     expect(
-      compile(`<template v-if="foo"><div>hi</div><div>ho</div></template>`).code
+      compile(`<template v-if="foo"><div>hi</div><div>ho</div></template>`)
+        .code,
     ).toMatchInlineSnapshot(`
       "
       return function ssrRender(_ctx, _push, _parent, _attrs) {
@@ -126,9 +127,9 @@ describe('ssr: v-if', () => {
 
   test('<template v-if> (with v-for inside)', () => {
     expect(
-      compile(`<template v-if="foo"><div v-for="i in list"/></template>`).code
+      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) {
@@ -147,10 +148,10 @@ describe('ssr: v-if', () => {
   test('<template v-if> + normal v-else', () => {
     expect(
       compile(
-        `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
-      ).code
+        `<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 5bccbcb788c..f2c04f0a5e8 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>\`)
         }"
       `)
@@ -36,52 +36,103 @@ describe('ssr: v-model', () => {
   test('<select v-model>', () => {
     expect(
       compileWithWrapper(
-        `<select v-model="model"><option value="1"></option></select>`
-      ).code
+        `<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>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(
-        `<select multiple v-model="model"><option value="1" selected></option><option value="2"></option></select>`
-      ).code
+        `<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>\`)
       }"
     `)
+
+    expect(
+      compileWithWrapper(`<select multiple v-model="model"><slot/></select>`)
+        .code,
+    ).toMatchInlineSnapshot(`
+      "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)
+        _push(\`</select></div>\`)
+      }"
+    `)
+
+    expect(
+      compileWithWrapper(`
+        <select multiple v-model="model">
+          <optgroup label="foo">
+            <option value="bar">bar</option>
+          </optgroup>
+        </select>`).code,
+    ).toMatchInlineSnapshot(`
+      "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"\${
+          (_ssrIncludeBooleanAttr((Array.isArray(_ctx.model))
+            ? _ssrLooseContain(_ctx.model, "bar")
+            : _ssrLooseEqual(_ctx.model, "bar"))) ? " selected" : ""
+        }>bar</option></optgroup></select></div>\`)
+      }"
+    `)
+
+    expect(
+      compileWithWrapper(`
+        <select multiple v-model="model">
+          <optgroup label="foo">
+            <slot/>
+          </optgroup>
+        </select>`).code,
+    ).toMatchInlineSnapshot(`
+      "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(\`</optgroup></select></div>\`)
+      }"
+    `)
   })
 
   test('<input type="radio">', () => {
     expect(
-      compileWithWrapper(`<input type="radio" value="foo" v-model="bar">`).code
+      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>\`)
       }"
     `)
@@ -90,64 +141,64 @@ 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>\`)
         }"
       `)
 
     expect(
       compileWithWrapper(`<input type="checkbox" value="foo" v-model="bar">`)
-        .code
+        .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>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(
-        `<input type="checkbox" :true-value="foo" :false-value="bar" v-model="baz">`
-      ).code
+        `<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>\`)
       }"
     `)
 
     expect(
       compileWithWrapper(
-        `<input type="checkbox" true-value="foo" false-value="bar" v-model="baz">`
-      ).code
+        `<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>\`)
       }"
     `)
@@ -156,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\${
@@ -171,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>\`)
@@ -185,35 +236,35 @@ describe('ssr: v-model', () => {
       `)
 
     expect(
-      compileWithWrapper(`<input :type="x" v-model="foo" value="bar">`).code
+      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
+      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>\`)
       }"
     `)
@@ -222,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
@@ -238,10 +289,10 @@ describe('ssr: v-model', () => {
 
     expect(
       compileWithWrapper(`<input id="x" v-bind="obj" v-model="foo" class="y">`)
-        .code
+        .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
@@ -249,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..d0f3ec93036 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,36 +36,36 @@ 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>\`)
         }"
       `)
   })
 
   test('with dynamic style', () => {
     expect(
-      compileWithWrapper(`<div :style="{ color: 'red' }" v-show="foo"/>`).code
+      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>\`)
       }"
     `)
   })
@@ -73,21 +73,21 @@ describe('ssr: v-show', () => {
   test('with static + dynamic style', () => {
     expect(
       compileWithWrapper(
-        `<div style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
-      ).code
+        `<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>\`)
       }"
     `)
   })
@@ -95,11 +95,11 @@ describe('ssr: v-show', () => {
   test('with v-bind', () => {
     expect(
       compileWithWrapper(
-        `<div v-bind="baz" style="color:red" :style="{ fontSize: 14 }" v-show="foo"/>`
-      ).code
+        `<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/compiler-ssr/__tests__/utils.ts b/packages/compiler-ssr/__tests__/utils.ts
index 08dec4debec..c656517cdb8 100644
--- a/packages/compiler-ssr/__tests__/utils.ts
+++ b/packages/compiler-ssr/__tests__/utils.ts
@@ -6,7 +6,7 @@ export function getCompiledString(src: string): string {
   // but also means this util can only be used for non-root cases.
   const { code } = compile(`<div>${src}</div>`)
   const match = code.match(
-    /_push\(\`<div\${\s*_ssrRenderAttrs\(_attrs\)\s*}>([^]*)<\/div>\`\)/
+    /_push\(\`<div\${\s*_ssrRenderAttrs\(_attrs\)\s*}>([^]*)<\/div>\`\)/,
   )
 
   if (!match) {
diff --git a/packages/compiler-ssr/package.json b/packages/compiler-ssr/package.json
index 66d69523ed7..f1c97ddcc53 100644
--- a/packages/compiler-ssr/package.json
+++ b/packages/compiler-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/compiler-ssr",
   "main": "dist/compiler-ssr.cjs.js",
   "types": "dist/compiler-ssr.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-ssr#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/compiler-dom": "3.3.5"
+    "@vue/shared": "workspace:*",
+    "@vue/compiler-dom": "workspace:*"
   }
 }
diff --git a/packages/compiler-ssr/src/errors.ts b/packages/compiler-ssr/src/errors.ts
index e8e5a3a541d..e4fd505d282 100644
--- a/packages/compiler-ssr/src/errors.ts
+++ b/packages/compiler-ssr/src/errors.ts
@@ -1,8 +1,8 @@
 import {
-  SourceLocation,
-  CompilerError,
+  type CompilerError,
+  DOMErrorCodes,
+  type SourceLocation,
   createCompilerError,
-  DOMErrorCodes
 } from '@vue/compiler-dom'
 
 export interface SSRCompilerError extends CompilerError {
@@ -11,26 +11,26 @@ export interface SSRCompilerError extends CompilerError {
 
 export function createSSRCompilerError(
   code: SSRErrorCodes,
-  loc?: SourceLocation
+  loc?: SourceLocation,
 ) {
   return createCompilerError(code, loc, SSRErrorMessages) as SSRCompilerError
 }
 
-export const enum SSRErrorCodes {
+export enum SSRErrorCodes {
   X_SSR_UNSAFE_ATTR_NAME = 65 /* DOMErrorCodes.__EXTEND_POINT__ */,
   X_SSR_NO_TELEPORT_TARGET,
-  X_SSR_INVALID_AST_NODE
+  X_SSR_INVALID_AST_NODE,
 }
 
 if (__TEST__) {
-  // esbuild cannot infer const enum increments if first value is from another
+  // esbuild cannot infer enum increments if first value is from another
   // file, so we have to manually keep them in sync. this check ensures it
   // errors out if there are collisions.
   if (SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME < DOMErrorCodes.__EXTEND_POINT__) {
     throw new Error(
       `SSRErrorCodes need to be updated to ${
         DOMErrorCodes.__EXTEND_POINT__ + 1
-      } to match extension point from core DOMErrorCodes.`
+      } to match extension point from core DOMErrorCodes.`,
     )
   }
 }
@@ -38,5 +38,5 @@ if (__TEST__) {
 export const SSRErrorMessages: { [code: number]: string } = {
   [SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME]: `Unsafe attribute name for SSR.`,
   [SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET]: `Missing the 'to' prop on teleport element.`,
-  [SSRErrorCodes.X_SSR_INVALID_AST_NODE]: `Invalid AST node during SSR transform.`
+  [SSRErrorCodes.X_SSR_INVALID_AST_NODE]: `Invalid AST node during SSR transform.`,
 }
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 1775af52bfc..f8a686555e8 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -1,23 +1,24 @@
 import {
-  CodegenResult,
+  type CodegenResult,
+  type CompilerOptions,
+  type RootNode,
   baseParse,
-  parserOptions,
-  transform,
   generate,
-  CompilerOptions,
-  transformExpression,
-  trackVForSlotScopes,
-  trackSlotScopes,
   noopDirectiveTransform,
+  parserOptions,
+  trackSlotScopes,
+  trackVForSlotScopes,
+  transform,
   transformBind,
+  transformExpression,
+  transformOn,
   transformStyle,
-  transformOn
 } from '@vue/compiler-dom'
 import { ssrCodegenTransform } from './ssrCodegenTransform'
 import { ssrTransformElement } from './transforms/ssrTransformElement'
 import {
+  rawOptionsMap,
   ssrTransformComponent,
-  rawOptionsMap
 } from './transforms/ssrTransformComponent'
 import { ssrTransformSlotOutlet } from './transforms/ssrTransformSlotOutlet'
 import { ssrTransformIf } from './transforms/ssrVIf'
@@ -28,12 +29,11 @@ import { ssrInjectFallthroughAttrs } from './transforms/ssrInjectFallthroughAttr
 import { ssrInjectCssVars } from './transforms/ssrInjectCssVars'
 
 export function compile(
-  template: string,
-  options: CompilerOptions = {}
+  source: string | RootNode,
+  options: CompilerOptions = {},
 ): CodegenResult {
   options = {
     ...options,
-    // apply DOM-specific parsing options
     ...parserOptions,
     ssr: true,
     inSSR: true,
@@ -42,10 +42,10 @@ export function compile(
     prefixIdentifiers: true,
     // disable optimizations that are unnecessary for ssr
     cacheHandlers: false,
-    hoistStatic: false
+    hoistStatic: false,
   }
 
-  const ast = baseParse(template, options)
+  const ast = typeof source === 'string' ? baseParse(source, options) : source
 
   // Save raw options for AST. This is needed when performing sub-transforms
   // on slot vnode branches.
@@ -66,13 +66,13 @@ export function compile(
       ssrTransformComponent,
       trackSlotScopes,
       transformStyle,
-      ...(options.nodeTransforms || []) // user transforms
+      ...(options.nodeTransforms || []), // user transforms
     ],
     directiveTransforms: {
       // reusing core v-bind
       bind: transformBind,
       on: transformOn,
-      // model and show has dedicated SSR handling
+      // model and show have dedicated SSR handling
       model: ssrTransformModel,
       show: ssrTransformShow,
       // the following are ignored during SSR
@@ -80,8 +80,8 @@ export function compile(
       cloak: noopDirectiveTransform,
       once: noopDirectiveTransform,
       memo: noopDirectiveTransform,
-      ...(options.directiveTransforms || {}) // user transforms
-    }
+      ...(options.directiveTransforms || {}), // user transforms
+    },
   })
 
   // traverse the template AST and convert into SSR codegen AST
diff --git a/packages/compiler-ssr/src/runtimeHelpers.ts b/packages/compiler-ssr/src/runtimeHelpers.ts
index 220af4854f6..1420ef64fbe 100644
--- a/packages/compiler-ssr/src/runtimeHelpers.ts
+++ b/packages/compiler-ssr/src/runtimeHelpers.ts
@@ -39,7 +39,7 @@ export const ssrHelpers = {
   [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
   [SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
   [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
-  [SSR_GET_DIRECTIVE_PROPS]: `ssrGetDirectiveProps`
+  [SSR_GET_DIRECTIVE_PROPS]: `ssrGetDirectiveProps`,
 }
 
 // Note: these are helpers imported from @vue/server-renderer
diff --git a/packages/compiler-ssr/src/ssrCodegenTransform.ts b/packages/compiler-ssr/src/ssrCodegenTransform.ts
index 954863b5393..1755be3a3b0 100644
--- a/packages/compiler-ssr/src/ssrCodegenTransform.ts
+++ b/packages/compiler-ssr/src/ssrCodegenTransform.ts
@@ -1,31 +1,31 @@
 import {
-  RootNode,
-  BlockStatement,
-  TemplateLiteral,
-  createCallExpression,
-  createTemplateLiteral,
-  NodeTypes,
-  TemplateChildNode,
+  type BlockStatement,
+  type CallExpression,
+  type CompilerOptions,
   ElementTypes,
+  type IfStatement,
+  NodeTypes,
+  type RootNode,
+  type TemplateChildNode,
+  type TemplateLiteral,
   createBlockStatement,
-  CompilerOptions,
-  IfStatement,
-  CallExpression,
-  isText,
-  processExpression,
-  createSimpleExpression,
+  createCallExpression,
   createCompoundExpression,
+  createRoot,
+  createSimpleExpression,
+  createTemplateLiteral,
   createTransformContext,
-  createRoot
+  isText,
+  processExpression,
 } from '@vue/compiler-dom'
-import { isString, escapeHtml } from '@vue/shared'
+import { escapeHtml, isString } from '@vue/shared'
 import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
 import { ssrProcessIf } from './transforms/ssrVIf'
 import { ssrProcessFor } from './transforms/ssrVFor'
 import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
 import { ssrProcessComponent } from './transforms/ssrTransformComponent'
 import { ssrProcessElement } from './transforms/ssrTransformElement'
-import { createSSRCompilerError, SSRErrorCodes } from './errors'
+import { SSRErrorCodes, createSSRCompilerError } from './errors'
 
 // Because SSR codegen output is completely different from client-side output
 // (e.g. multiple elements can be concatenated into a single template literal
@@ -43,10 +43,10 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
     const cssContext = createTransformContext(createRoot([]), options)
     const varsExp = processExpression(
       createSimpleExpression(options.ssrCssVars, false),
-      cssContext
+      cssContext,
     )
     context.body.push(
-      createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
+      createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`]),
     )
     Array.from(cssContext.helpers.keys()).forEach(helper => {
       ast.helpers.add(helper)
@@ -63,8 +63,8 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
   ast.ssrHelpers = Array.from(
     new Set([
       ...Array.from(ast.helpers).filter(h => h in ssrHelpers),
-      ...context.helpers
-    ])
+      ...context.helpers,
+    ]),
   )
 
   ast.helpers = new Set(Array.from(ast.helpers).filter(h => !(h in ssrHelpers)))
@@ -76,7 +76,7 @@ function createSSRTransformContext(
   root: RootNode,
   options: CompilerOptions,
   helpers: Set<symbol> = new Set(),
-  withSlotScopeId = false
+  withSlotScopeId = false,
 ) {
   const body: BlockStatement['body'] = []
   let currentString: TemplateLiteral | null = null
@@ -115,20 +115,20 @@ function createSSRTransformContext(
       // close current string
       currentString = null
       body.push(statement)
-    }
+    },
   }
 }
 
 function createChildContext(
   parent: SSRTransformContext,
-  withSlotScopeId = parent.withSlotScopeId
+  withSlotScopeId = parent.withSlotScopeId,
 ): SSRTransformContext {
   // ensure child inherits parent helpers
   return createSSRTransformContext(
     parent.root,
     parent.options,
     parent.helpers,
-    withSlotScopeId
+    withSlotScopeId,
   )
 }
 
@@ -140,7 +140,7 @@ export function processChildren(
   parent: Container,
   context: SSRTransformContext,
   asFragment = false,
-  disableNestedFragments = false
+  disableNestedFragments = false,
 ) {
   if (asFragment) {
     context.pushStringPart(`<!--[-->`)
@@ -167,8 +167,8 @@ export function processChildren(
             context.onError(
               createSSRCompilerError(
                 SSRErrorCodes.X_SSR_INVALID_AST_NODE,
-                (child as any).loc
-              )
+                (child as any).loc,
+              ),
             )
             // make sure we exhaust all possible types
             const exhaustiveCheck: never = child
@@ -185,7 +185,9 @@ export function processChildren(
         break
       case NodeTypes.INTERPOLATION:
         context.pushStringPart(
-          createCallExpression(context.helper(SSR_INTERPOLATE), [child.content])
+          createCallExpression(context.helper(SSR_INTERPOLATE), [
+            child.content,
+          ]),
         )
         break
       case NodeTypes.IF:
@@ -206,8 +208,8 @@ export function processChildren(
         context.onError(
           createSSRCompilerError(
             SSRErrorCodes.X_SSR_INVALID_AST_NODE,
-            (child as any).loc
-          )
+            (child as any).loc,
+          ),
         )
         // make sure we exhaust all possible types
         const exhaustiveCheck: never = child
@@ -223,7 +225,7 @@ export function processChildrenAsStatement(
   parent: Container,
   parentContext: SSRTransformContext,
   asFragment = false,
-  withSlotScopeId = parentContext.withSlotScopeId
+  withSlotScopeId = parentContext.withSlotScopeId,
 ): BlockStatement {
   const childContext = createChildContext(parentContext, withSlotScopeId)
   processChildren(parent, childContext, asFragment)
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts b/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
index d5c0daee7cf..7a69414ce40 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectCssVars.ts
@@ -1,13 +1,12 @@
 import {
-  NodeTransform,
-  NodeTypes,
   ElementTypes,
-  locStub,
+  type NodeTransform,
+  NodeTypes,
+  type RootNode,
+  type TemplateChildNode,
   createSimpleExpression,
-  RootNode,
-  TemplateChildNode,
   findDir,
-  isBuiltInType
+  locStub,
 } from '@vue/compiler-dom'
 
 export const ssrInjectCssVars: NodeTransform = (node, context) => {
@@ -43,7 +42,7 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
       node.tagType === ElementTypes.COMPONENT) &&
     !findDir(node, 'for')
   ) {
-    if (isBuiltInType(node.tag, 'Suspense')) {
+    if (node.tag === 'suspense' || node.tag === 'Suspense') {
       for (const child of node.children) {
         if (
           child.type === NodeTypes.ELEMENT &&
@@ -62,7 +61,7 @@ function injectCssVars(node: RootNode | TemplateChildNode) {
         arg: undefined,
         exp: createSimpleExpression(`_cssVars`, false),
         modifiers: [],
-        loc: locStub
+        loc: locStub,
       })
     }
   }
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index 2b5c350a557..b1aac0d74c2 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -1,14 +1,13 @@
 import {
-  NodeTransform,
-  NodeTypes,
   ElementTypes,
-  locStub,
+  type NodeTransform,
+  NodeTypes,
+  type ParentNode,
+  type RootNode,
+  type TemplateChildNode,
   createSimpleExpression,
-  RootNode,
-  TemplateChildNode,
-  ParentNode,
   findDir,
-  isBuiltInType
+  locStub,
 } from '@vue/compiler-dom'
 
 const filterChild = (node: ParentNode) =>
@@ -28,8 +27,10 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
   if (
     node.type === NodeTypes.ELEMENT &&
     node.tagType === ElementTypes.COMPONENT &&
-    (isBuiltInType(node.tag, 'Transition') ||
-      isBuiltInType(node.tag, 'KeepAlive'))
+    (node.tag === 'transition' ||
+      node.tag === 'Transition' ||
+      node.tag === 'KeepAlive' ||
+      node.tag === 'keep-alive')
   ) {
     const rootChildren = filterChild(context.root)
     if (rootChildren.length === 1 && rootChildren[0] === node) {
@@ -84,7 +85,7 @@ function injectFallthroughAttrs(node: RootNode | TemplateChildNode) {
       arg: undefined,
       exp: createSimpleExpression(`_attrs`, false),
       modifiers: [],
-      loc: locStub
+      loc: locStub,
     })
   }
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
index dc8c6a4ae4f..962faddab38 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformComponent.ts
@@ -1,61 +1,66 @@
 import {
-  NodeTransform,
-  NodeTypes,
+  CREATE_VNODE,
+  type CallExpression,
+  type CompilerOptions,
+  type ComponentNode,
+  DOMDirectiveTransforms,
+  DOMNodeTransforms,
+  type DirectiveNode,
   ElementTypes,
-  createCallExpression,
-  resolveComponentType,
+  type ExpressionNode,
+  type FunctionExpression,
+  type JSChildNode,
+  Namespaces,
+  type NodeTransform,
+  NodeTypes,
+  RESOLVE_DYNAMIC_COMPONENT,
+  type ReturnStatement,
+  type RootNode,
+  SUSPENSE,
+  type SlotFnBuilder,
+  TELEPORT,
+  TRANSITION,
+  TRANSITION_GROUP,
+  type TemplateChildNode,
+  type TemplateNode,
+  type TransformContext,
+  type TransformOptions,
   buildProps,
-  ComponentNode,
-  SlotFnBuilder,
-  createFunctionExpression,
   buildSlots,
-  FunctionExpression,
-  TemplateChildNode,
+  createCallExpression,
+  createFunctionExpression,
   createIfStatement,
-  createSimpleExpression,
-  getBaseTransformPreset,
-  DOMNodeTransforms,
-  DOMDirectiveTransforms,
   createReturnStatement,
-  ReturnStatement,
-  Namespaces,
-  locStub,
-  RootNode,
-  TransformContext,
-  CompilerOptions,
-  TransformOptions,
   createRoot,
+  createSimpleExpression,
   createTransformContext,
+  getBaseTransformPreset,
+  locStub,
+  resolveComponentType,
+  stringifyExpression,
   traverseNode,
-  ExpressionNode,
-  TemplateNode,
-  SUSPENSE,
-  TELEPORT,
-  TRANSITION_GROUP,
-  CREATE_VNODE,
-  CallExpression,
-  JSChildNode,
-  RESOLVE_DYNAMIC_COMPONENT,
-  TRANSITION,
-  stringifyExpression
 } from '@vue/compiler-dom'
 import { SSR_RENDER_COMPONENT, SSR_RENDER_VNODE } from '../runtimeHelpers'
 import {
-  SSRTransformContext,
+  type SSRTransformContext,
   processChildren,
-  processChildrenAsStatement
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 import { ssrProcessTeleport } from './ssrTransformTeleport'
 import {
   ssrProcessSuspense,
-  ssrTransformSuspense
+  ssrTransformSuspense,
 } from './ssrTransformSuspense'
 import {
   ssrProcessTransitionGroup,
-  ssrTransformTransitionGroup
+  ssrTransformTransitionGroup,
 } from './ssrTransformTransitionGroup'
-import { isSymbol, isObject, isArray } from '@vue/shared'
+import { extend, isArray, isObject, isPlainObject, isSymbol } from '@vue/shared'
 import { buildSSRProps } from './ssrTransformElement'
+import {
+  ssrProcessTransition,
+  ssrTransformTransition,
+} from './ssrTransformTransition'
 
 // We need to construct the slot functions in the 1st pass to ensure proper
 // scope tracking, but the children of each slot cannot be processed until
@@ -99,9 +104,10 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
   if (isSymbol(component)) {
     if (component === SUSPENSE) {
       return ssrTransformSuspense(node, context)
-    }
-    if (component === TRANSITION_GROUP) {
+    } else if (component === TRANSITION_GROUP) {
       return ssrTransformTransitionGroup(node, context)
+    } else if (component === TRANSITION) {
+      return ssrTransformTransition(node, context)
     }
     return // other built-in components: fallthrough
   }
@@ -120,8 +126,10 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     // fallback in case the child is render-fn based). Store them in an array
     // for later use.
     if (clonedNode.children.length) {
-      buildSlots(clonedNode, context, (props, children) => {
-        vnodeBranches.push(createVNodeSlotBranch(props, children, context))
+      buildSlots(clonedNode, context, (props, vFor, children) => {
+        vnodeBranches.push(
+          createVNodeSlotBranch(props, vFor, children, context),
+        )
         return createFunctionExpression(undefined)
       })
     }
@@ -135,7 +143,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
         context,
         undefined,
         true,
-        isDynamicComponent
+        isDynamicComponent,
       )
       if (props || directives.length) {
         propsExp = buildSSRProps(props, directives, context)
@@ -145,21 +153,21 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
     const wipEntries: WIPSlotEntry[] = []
     wipMap.set(node, wipEntries)
 
-    const buildSSRSlotFn: SlotFnBuilder = (props, children, loc) => {
+    const buildSSRSlotFn: SlotFnBuilder = (props, _vForExp, children, loc) => {
       const param0 = (props && stringifyExpression(props)) || `_`
       const fn = createFunctionExpression(
         [param0, `_push`, `_parent`, `_scopeId`],
         undefined, // no return, assign body later
         true, // newline
         true, // isSlot
-        loc
+        loc,
       )
       wipEntries.push({
         type: WIP_SLOT,
         fn,
         children,
         // also collect the corresponding vnode branch built earlier
-        vnodeBranch: vnodeBranches[wipEntries.length]
+        vnodeBranch: vnodeBranches[wipEntries.length],
       })
       return fn
     }
@@ -179,15 +187,15 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
           createCallExpression(context.helper(CREATE_VNODE), [
             component,
             propsExp,
-            slots
+            slots,
           ]),
-          `_parent`
-        ]
+          `_parent`,
+        ],
       )
     } else {
       node.ssrCodegenNode = createCallExpression(
         context.helper(SSR_RENDER_COMPONENT),
-        [component, propsExp, slots, `_parent`]
+        [component, propsExp, slots, `_parent`],
       )
     }
   }
@@ -196,7 +204,7 @@ export const ssrTransformComponent: NodeTransform = (node, context) => {
 export function ssrProcessComponent(
   node: ComponentNode,
   context: SSRTransformContext,
-  parent: { children: TemplateChildNode[] }
+  parent: { children: TemplateChildNode[] },
 ) {
   const component = componentTypeMap.get(node)!
   if (!node.ssrCodegenNode) {
@@ -216,9 +224,8 @@ export function ssrProcessComponent(
       if ((parent as WIPSlotEntry).type === WIP_SLOT) {
         context.pushStringPart(``)
       }
-      // #5351: filter out comment children inside transition
       if (component === TRANSITION) {
-        node.children = node.children.filter(c => c.type !== NodeTypes.COMMENT)
+        return ssrProcessTransition(node, context)
       }
       processChildren(node, context)
     }
@@ -237,9 +244,9 @@ export function ssrProcessComponent(
           wipEntries[i],
           context,
           false,
-          true /* withSlotScopeId */
+          true /* withSlotScopeId */,
         ),
-        vnodeBranch
+        vnodeBranch,
       )
     }
 
@@ -251,7 +258,7 @@ export function ssrProcessComponent(
     if (typeof component === 'string') {
       // static component
       context.pushStatement(
-        createCallExpression(`_push`, [node.ssrCodegenNode])
+        createCallExpression(`_push`, [node.ssrCodegenNode]),
       )
     } else {
       // dynamic component (`resolveDynamicComponent` call)
@@ -268,13 +275,14 @@ const [baseNodeTransforms, baseDirectiveTransforms] =
 const vnodeNodeTransforms = [...baseNodeTransforms, ...DOMNodeTransforms]
 const vnodeDirectiveTransforms = {
   ...baseDirectiveTransforms,
-  ...DOMDirectiveTransforms
+  ...DOMDirectiveTransforms,
 }
 
 function createVNodeSlotBranch(
-  props: ExpressionNode | undefined,
+  slotProps: ExpressionNode | undefined,
+  vFor: DirectiveNode | undefined,
   children: TemplateChildNode[],
-  parentContext: TransformContext
+  parentContext: TransformContext,
 ): ReturnStatement {
   // apply a sub-transform using vnode-based transforms.
   const rawOptions = rawOptionsMap.get(parentContext.root)!
@@ -284,36 +292,40 @@ function createVNodeSlotBranch(
     // overwrite with vnode-based transforms
     nodeTransforms: [
       ...vnodeNodeTransforms,
-      ...(rawOptions.nodeTransforms || [])
+      ...(rawOptions.nodeTransforms || []),
     ],
     directiveTransforms: {
       ...vnodeDirectiveTransforms,
-      ...(rawOptions.directiveTransforms || {})
-    }
+      ...(rawOptions.directiveTransforms || {}),
+    },
   }
 
   // wrap the children with a wrapper template for proper children treatment.
+  // important: provide v-slot="props" and v-for="exp" on the wrapper for
+  // proper scope analysis
+  const wrapperProps: TemplateNode['props'] = []
+  if (slotProps) {
+    wrapperProps.push({
+      type: NodeTypes.DIRECTIVE,
+      name: 'slot',
+      exp: slotProps,
+      arg: undefined,
+      modifiers: [],
+      loc: locStub,
+    })
+  }
+  if (vFor) {
+    wrapperProps.push(extend({}, vFor))
+  }
   const wrapperNode: TemplateNode = {
     type: NodeTypes.ELEMENT,
     ns: Namespaces.HTML,
     tag: 'template',
     tagType: ElementTypes.TEMPLATE,
-    isSelfClosing: false,
-    // important: provide v-slot="props" on the wrapper for proper
-    // scope analysis
-    props: [
-      {
-        type: NodeTypes.DIRECTIVE,
-        name: 'slot',
-        exp: props,
-        arg: undefined,
-        modifiers: [],
-        loc: locStub
-      }
-    ],
+    props: wrapperProps,
     children,
     loc: locStub,
-    codegenNode: undefined
+    codegenNode: undefined,
   }
   subTransform(wrapperNode, subOptions, parentContext)
   return createReturnStatement(children)
@@ -322,7 +334,7 @@ function createVNodeSlotBranch(
 function subTransform(
   node: TemplateChildNode,
   options: TransformOptions,
-  parentContext: TransformContext
+  parentContext: TransformContext,
 ) {
   const childRoot = createRoot([node])
   const childContext = createTransformContext(childRoot, options)
@@ -359,10 +371,10 @@ function subTransform(
 function clone(v: any): any {
   if (isArray(v)) {
     return v.map(clone)
-  } else if (isObject(v)) {
+  } else if (isPlainObject(v)) {
     const res: any = {}
     for (const key in v) {
-      res[key] = clone(v[key])
+      res[key] = clone(v[key as keyof typeof v])
     }
     return res
   } else {
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 2c42a83ba37..050528f5870 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -1,57 +1,60 @@
 import {
-  NodeTransform,
-  NodeTypes,
+  type ArrayExpression,
+  type AttributeNode,
+  type CallExpression,
+  type DirectiveNode,
   ElementTypes,
-  TemplateLiteral,
-  createTemplateLiteral,
-  createInterpolation,
-  createCallExpression,
-  createConditionalExpression,
-  createSimpleExpression,
-  buildProps,
-  DirectiveNode,
-  PlainElementNode,
-  createCompilerError,
   ErrorCodes,
-  CallExpression,
+  type ExpressionNode,
+  type InterpolationNode,
+  type JSChildNode,
+  MERGE_PROPS,
+  type NodeTransform,
+  NodeTypes,
+  type PlainElementNode,
+  type PropsExpression,
+  type TemplateLiteral,
+  type TextNode,
+  type TransformContext,
+  buildDirectiveArgs,
+  buildProps,
   createArrayExpression,
-  ExpressionNode,
-  JSChildNode,
-  ArrayExpression,
   createAssignmentExpression,
-  TextNode,
+  createCallExpression,
+  createCompilerError,
+  createConditionalExpression,
+  createInterpolation,
+  createSequenceExpression,
+  createSimpleExpression,
+  createTemplateLiteral,
   hasDynamicKeyVBind,
-  MERGE_PROPS,
   isStaticArgOf,
-  createSequenceExpression,
-  InterpolationNode,
   isStaticExp,
-  AttributeNode,
-  buildDirectiveArgs,
-  TransformContext,
-  PropsExpression
 } from '@vue/compiler-dom'
 import {
+  NO,
   escapeHtml,
   isBooleanAttr,
   isBuiltInDirective,
   isSSRSafeAttrName,
-  NO,
-  propsToAttrMap
+  propsToAttrMap,
 } from '@vue/shared'
-import { createSSRCompilerError, SSRErrorCodes } from '../errors'
+import { SSRErrorCodes, createSSRCompilerError } from '../errors'
 import {
+  SSR_GET_DIRECTIVE_PROPS,
+  SSR_GET_DYNAMIC_MODEL_PROPS,
+  SSR_INCLUDE_BOOLEAN_ATTR,
+  SSR_INTERPOLATE,
   SSR_RENDER_ATTR,
+  SSR_RENDER_ATTRS,
   SSR_RENDER_CLASS,
-  SSR_RENDER_STYLE,
   SSR_RENDER_DYNAMIC_ATTR,
-  SSR_RENDER_ATTRS,
-  SSR_INTERPOLATE,
-  SSR_GET_DYNAMIC_MODEL_PROPS,
-  SSR_INCLUDE_BOOLEAN_ATTR,
-  SSR_GET_DIRECTIVE_PROPS
+  SSR_RENDER_STYLE,
 } from '../runtimeHelpers'
-import { SSRTransformContext, processChildren } from '../ssrCodegenTransform'
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform'
 
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
@@ -81,7 +84,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
     // so when they are present we need to bail out to full `renderAttrs`
     const hasDynamicVBind = hasDynamicKeyVBind(node)
     const hasCustomDir = node.props.some(
-      p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name)
+      p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name),
     )
     const needMergeProps = hasDynamicVBind || hasCustomDir
     if (needMergeProps) {
@@ -91,13 +94,13 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
         node.props,
         false /* isComponent */,
         false /* isDynamicComponent */,
-        true /* ssr */
+        true /* ssr */,
       )
       if (props || directives.length) {
         const mergedProps = buildSSRProps(props, directives, context)
         const propsExp = createCallExpression(
           context.helper(SSR_RENDER_ATTRS),
-          [mergedProps]
+          [mergedProps],
         )
 
         if (node.tag === 'textarea') {
@@ -116,8 +119,8 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
             propsExp.arguments = [
               createAssignmentExpression(
                 createSimpleExpression(tempId, false),
-                mergedProps
-              )
+                mergedProps,
+              ),
             ]
             rawChildrenMap.set(
               node,
@@ -127,11 +130,11 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                   createSimpleExpression(`${tempId}.value`, false),
                   createSimpleExpression(
                     existingText ? existingText.content : ``,
-                    true
+                    true,
                   ),
-                  false
-                )
-              ])
+                  false,
+                ),
+              ]),
             )
           }
         } else if (node.tag === 'input') {
@@ -152,11 +155,11 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                     context.helper(SSR_GET_DYNAMIC_MODEL_PROPS),
                     [
                       tempExp, // existing props
-                      vModel.exp! // model
-                    ]
-                  )
-                ])
-              ])
+                      vModel.exp!, // model
+                    ],
+                  ),
+                ]),
+              ]),
             ]
           }
         }
@@ -190,7 +193,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
           node.children = [createInterpolation(prop.exp, prop.loc)]
         } else if (prop.name === 'slot') {
           context.onError(
-            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, prop.loc)
+            createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, prop.loc),
           )
         } else if (isTextareaWithValue(node, prop) && prop.exp) {
           if (!needMergeProps) {
@@ -203,7 +206,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
             const { props, ssrTagParts } = directiveTransform(
               prop,
               node,
-              context
+              context,
             )
             if (ssrTagParts) {
               openTag.push(...ssrTagParts)
@@ -221,9 +224,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                     ` class="`,
                     (dynamicClassBinding = createCallExpression(
                       context.helper(SSR_RENDER_CLASS),
-                      [value]
+                      [value],
                     )),
-                    `"`
+                    `"`,
                   )
                 } else if (attrName === 'style') {
                   if (dynamicStyleBinding) {
@@ -234,9 +237,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                       ` style="`,
                       (dynamicStyleBinding = createCallExpression(
                         context.helper(SSR_RENDER_STYLE),
-                        [value]
+                        [value],
                       )),
-                      `"`
+                      `"`,
                     )
                   }
                 } else {
@@ -249,26 +252,26 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                       createConditionalExpression(
                         createCallExpression(
                           context.helper(SSR_INCLUDE_BOOLEAN_ATTR),
-                          [value]
+                          [value],
                         ),
                         createSimpleExpression(' ' + attrName, true),
                         createSimpleExpression('', true),
-                        false /* no newline */
-                      )
+                        false /* no newline */,
+                      ),
                     )
                   } else if (isSSRSafeAttrName(attrName)) {
                     openTag.push(
                       createCallExpression(context.helper(SSR_RENDER_ATTR), [
                         key,
-                        value
-                      ])
+                        value,
+                      ]),
                     )
                   } else {
                     context.onError(
                       createSSRCompilerError(
                         SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME,
-                        key.loc
-                      )
+                        key.loc,
+                      ),
                     )
                   }
                 }
@@ -283,8 +286,8 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
                 openTag.push(
                   createCallExpression(
                     context.helper(SSR_RENDER_DYNAMIC_ATTR),
-                    args
-                  )
+                    args,
+                  ),
                 )
               }
             }
@@ -292,19 +295,20 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
         }
       } else {
         // special case: value on <textarea>
-        if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
+        const name = prop.name
+        if (node.tag === 'textarea' && name === 'value' && prop.value) {
           rawChildrenMap.set(node, escapeHtml(prop.value.content))
         } else if (!needMergeProps) {
-          if (prop.name === 'key' || prop.name === 'ref') {
+          if (name === 'key' || name === 'ref') {
             continue
           }
           // static prop
-          if (prop.name === 'class' && prop.value) {
+          if (name === 'class' && prop.value) {
             staticClassBinding = JSON.stringify(prop.value.content)
           }
           openTag.push(
             ` ${prop.name}` +
-              (prop.value ? `="${escapeHtml(prop.value.content)}"` : ``)
+              (prop.value ? `="${escapeHtml(prop.value.content)}"` : ``),
           )
         }
       }
@@ -327,7 +331,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
 export function buildSSRProps(
   props: PropsExpression | undefined,
   directives: DirectiveNode[],
-  context: TransformContext
+  context: TransformContext,
 ): JSChildNode {
   let mergePropsArgs: JSChildNode[] = []
   if (props) {
@@ -343,8 +347,8 @@ export function buildSSRProps(
       mergePropsArgs.push(
         createCallExpression(context.helper(SSR_GET_DIRECTIVE_PROPS), [
           `_ctx`,
-          ...buildDirectiveArgs(dir, context).elements
-        ] as JSChildNode[])
+          ...buildDirectiveArgs(dir, context).elements,
+        ] as JSChildNode[]),
       )
     }
   }
@@ -369,7 +373,7 @@ function isTrueFalseValue(prop: DirectiveNode | AttributeNode) {
 
 function isTextareaWithValue(
   node: PlainElementNode,
-  prop: DirectiveNode
+  prop: DirectiveNode,
 ): boolean {
   return !!(
     node.tag === 'textarea' &&
@@ -389,7 +393,7 @@ function mergeCall(call: CallExpression, arg: string | JSChildNode) {
 
 function removeStaticBinding(
   tag: TemplateLiteral['elements'],
-  binding: string
+  binding: string,
 ) {
   const regExp = new RegExp(`^ ${binding}=".+"$`)
 
@@ -402,13 +406,13 @@ function removeStaticBinding(
 
 function findVModel(node: PlainElementNode): DirectiveNode | undefined {
   return node.props.find(
-    p => p.type === NodeTypes.DIRECTIVE && p.name === 'model' && p.exp
+    p => p.type === NodeTypes.DIRECTIVE && p.name === 'model' && p.exp,
   ) as DirectiveNode | undefined
 }
 
 export function ssrProcessElement(
   node: PlainElementNode,
-  context: SSRTransformContext
+  context: SSRTransformContext,
 ) {
   const isVoidTag = context.options.isVoidTag || NO
   const elementsToAdd = node.ssrCodegenNode!.elements
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
index c4bbb6ff620..ad08a23a445 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSlotOutlet.ts
@@ -1,19 +1,20 @@
 import {
-  NodeTransform,
-  isSlotOutlet,
-  processSlotOutlet,
+  ElementTypes,
+  type NodeTransform,
+  NodeTypes,
+  type SlotOutletNode,
+  TRANSITION,
+  TRANSITION_GROUP,
   createCallExpression,
-  SlotOutletNode,
   createFunctionExpression,
-  NodeTypes,
-  ElementTypes,
+  isSlotOutlet,
+  processSlotOutlet,
   resolveComponentType,
-  TRANSITION
 } from '@vue/compiler-dom'
 import { SSR_RENDER_SLOT, SSR_RENDER_SLOT_INNER } from '../runtimeHelpers'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 
 export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
@@ -27,7 +28,7 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
       // fallback content placeholder. will be replaced in the process phase
       `null`,
       `_push`,
-      `_parent`
+      `_parent`,
     ]
 
     // inject slot scope id if current template uses :slotted
@@ -37,16 +38,19 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
 
     let method = SSR_RENDER_SLOT
 
-    // #3989
+    // #3989, #9933
     // check if this is a single slot inside a transition wrapper - since
-    // transition will unwrap the slot fragment into a single vnode at runtime,
+    // transition/transition-group will unwrap the slot fragment into vnode(s) at runtime,
     // we need to avoid rendering the slot as a fragment.
     const parent = context.parent
+    let componentType
     if (
       parent &&
       parent.type === NodeTypes.ELEMENT &&
       parent.tagType === ElementTypes.COMPONENT &&
-      resolveComponentType(parent, context, true) === TRANSITION &&
+      ((componentType = resolveComponentType(parent, context, true)) ===
+        TRANSITION ||
+        componentType === TRANSITION_GROUP) &&
       parent.children.filter(c => c.type === NodeTypes.ELEMENT).length === 1
     ) {
       method = SSR_RENDER_SLOT_INNER
@@ -62,7 +66,7 @@ export const ssrTransformSlotOutlet: NodeTransform = (node, context) => {
 
 export function ssrProcessSlotOutlet(
   node: SlotOutletNode,
-  context: SSRTransformContext
+  context: SSRTransformContext,
 ) {
   const renderCall = node.ssrCodegenNode!
 
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
index 207e9348eef..47a35aac179 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformSuspense.ts
@@ -1,16 +1,16 @@
 import {
-  ComponentNode,
-  TransformContext,
+  type ComponentNode,
+  type FunctionExpression,
+  type SlotsExpression,
+  type TemplateChildNode,
+  type TransformContext,
   buildSlots,
-  createFunctionExpression,
-  FunctionExpression,
-  TemplateChildNode,
   createCallExpression,
-  SlotsExpression
+  createFunctionExpression,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 import { SSR_RENDER_SUSPENSE } from '../runtimeHelpers'
 
@@ -27,29 +27,33 @@ interface WIPEntry {
 // phase 1
 export function ssrTransformSuspense(
   node: ComponentNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
   return () => {
     if (node.children.length) {
       const wipEntry: WIPEntry = {
         slotsExp: null!, // to be immediately set
-        wipSlots: []
+        wipSlots: [],
       }
       wipMap.set(node, wipEntry)
-      wipEntry.slotsExp = buildSlots(node, context, (_props, children, loc) => {
-        const fn = createFunctionExpression(
-          [],
-          undefined, // no return, assign body later
-          true, // newline
-          false, // suspense slots are not treated as normal slots
-          loc
-        )
-        wipEntry.wipSlots.push({
-          fn,
-          children
-        })
-        return fn
-      }).slots
+      wipEntry.slotsExp = buildSlots(
+        node,
+        context,
+        (_props, _vForExp, children, loc) => {
+          const fn = createFunctionExpression(
+            [],
+            undefined, // no return, assign body later
+            true, // newline
+            false, // suspense slots are not treated as normal slots
+            loc,
+          )
+          wipEntry.wipSlots.push({
+            fn,
+            children,
+          })
+          return fn
+        },
+      ).slots
     }
   }
 }
@@ -57,7 +61,7 @@ export function ssrTransformSuspense(
 // phase 2
 export function ssrProcessSuspense(
   node: ComponentNode,
-  context: SSRTransformContext
+  context: SSRTransformContext,
 ) {
   // complete wip slots with ssr code
   const wipEntry = wipMap.get(node)
@@ -73,7 +77,7 @@ export function ssrProcessSuspense(
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_SUSPENSE), [
       `_push`,
-      slotsExp
-    ])
+      slotsExp,
+    ]),
   )
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
index f470ca711d4..96f84241a92 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTeleport.ts
@@ -1,28 +1,28 @@
 import {
-  ComponentNode,
-  findProp,
+  type ComponentNode,
+  type ExpressionNode,
   NodeTypes,
-  createSimpleExpression,
-  createFunctionExpression,
   createCallExpression,
-  ExpressionNode
+  createFunctionExpression,
+  createSimpleExpression,
+  findProp,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
-import { createSSRCompilerError, SSRErrorCodes } from '../errors'
+import { SSRErrorCodes, createSSRCompilerError } from '../errors'
 import { SSR_RENDER_TELEPORT } from '../runtimeHelpers'
 
 // Note: this is a 2nd-pass codegen transform.
 export function ssrProcessTeleport(
   node: ComponentNode,
-  context: SSRTransformContext
+  context: SSRTransformContext,
 ) {
   const targetProp = findProp(node, 'to')
   if (!targetProp) {
     context.onError(
-      createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc)
+      createSSRCompilerError(SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET, node.loc),
     )
     return
   }
@@ -38,8 +38,8 @@ export function ssrProcessTeleport(
     context.onError(
       createSSRCompilerError(
         SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET,
-        targetProp.loc
-      )
+        targetProp.loc,
+      ),
     )
     return
   }
@@ -56,7 +56,7 @@ export function ssrProcessTeleport(
     undefined, // Body is added later
     true, // newline
     false, // isSlot
-    node.loc
+    node.loc,
   )
   contentRenderFn.body = processChildrenAsStatement(node, context)
   context.pushStatement(
@@ -65,7 +65,7 @@ export function ssrProcessTeleport(
       contentRenderFn,
       target,
       disabled,
-      `_parent`
-    ])
+      `_parent`,
+    ]),
   )
 }
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
new file mode 100644
index 00000000000..400028d1820
--- /dev/null
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransition.ts
@@ -0,0 +1,39 @@
+import {
+  type ComponentNode,
+  NodeTypes,
+  type TransformContext,
+  findProp,
+} from '@vue/compiler-dom'
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform'
+
+const wipMap = new WeakMap<ComponentNode, Boolean>()
+
+export function ssrTransformTransition(
+  node: ComponentNode,
+  context: TransformContext,
+) {
+  return () => {
+    const appear = findProp(node, 'appear', false, true)
+    wipMap.set(node, !!appear)
+  }
+}
+
+export function ssrProcessTransition(
+  node: ComponentNode,
+  context: SSRTransformContext,
+) {
+  // #5351: filter out comment children inside transition
+  node.children = node.children.filter(c => c.type !== NodeTypes.COMMENT)
+
+  const appear = wipMap.get(node)
+  if (appear) {
+    context.pushStringPart(`<template>`)
+    processChildren(node, context, false, true)
+    context.pushStringPart(`</template>`)
+  } else {
+    processChildren(node, context, false, true)
+  }
+}
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
index 00b0d9dd45a..2d434010e2a 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts
@@ -1,16 +1,19 @@
 import {
-  AttributeNode,
+  type AttributeNode,
+  type ComponentNode,
+  type DirectiveNode,
+  type JSChildNode,
+  NodeTypes,
+  type TransformContext,
   buildProps,
-  ComponentNode,
   createCallExpression,
-  DirectiveNode,
   findProp,
-  JSChildNode,
-  NodeTypes,
-  TransformContext
 } from '@vue/compiler-dom'
 import { SSR_RENDER_ATTRS } from '../runtimeHelpers'
-import { processChildren, SSRTransformContext } from '../ssrCodegenTransform'
+import {
+  type SSRTransformContext,
+  processChildren,
+} from '../ssrCodegenTransform'
 import { buildSSRProps } from './ssrTransformElement'
 
 const wipMap = new WeakMap<ComponentNode, WIPEntry>()
@@ -18,12 +21,13 @@ const wipMap = new WeakMap<ComponentNode, WIPEntry>()
 interface WIPEntry {
   tag: AttributeNode | DirectiveNode
   propsExp: string | JSChildNode | null
+  scopeId: string | null
 }
 
 // phase 1: build props
 export function ssrTransformTransitionGroup(
   node: ComponentNode,
-  context: TransformContext
+  context: TransformContext,
 ) {
   return () => {
     const tag = findProp(node, 'tag')
@@ -35,17 +39,18 @@ export function ssrTransformTransitionGroup(
         otherProps,
         true /* isComponent */,
         false /* isDynamicComponent */,
-        true /* ssr (skip event listeners) */
+        true /* ssr (skip event listeners) */,
       )
       let propsExp = null
       if (props || directives.length) {
         propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [
-          buildSSRProps(props, directives, context)
+          buildSSRProps(props, directives, context),
         ])
       }
       wipMap.set(node, {
         tag,
-        propsExp
+        propsExp,
+        scopeId: context.scopeId || null,
       })
     }
   }
@@ -54,11 +59,11 @@ export function ssrTransformTransitionGroup(
 // phase 2: process children
 export function ssrProcessTransitionGroup(
   node: ComponentNode,
-  context: SSRTransformContext
+  context: SSRTransformContext,
 ) {
   const entry = wipMap.get(node)
   if (entry) {
-    const { tag, propsExp } = entry
+    const { tag, propsExp, scopeId } = entry
     if (tag.type === NodeTypes.DIRECTIVE) {
       // dynamic :tag
       context.pushStringPart(`<`)
@@ -66,6 +71,9 @@ export function ssrProcessTransitionGroup(
       if (propsExp) {
         context.pushStringPart(propsExp)
       }
+      if (scopeId) {
+        context.pushStringPart(` ${scopeId}`)
+      }
       context.pushStringPart(`>`)
 
       processChildren(
@@ -78,7 +86,7 @@ export function ssrProcessTransitionGroup(
          * be patched using the same key map) so we need to account for that here
          * by disabling nested fragment wrappers from being generated.
          */
-        true
+        true,
       )
       context.pushStringPart(`</`)
       context.pushStringPart(tag.exp!)
@@ -89,6 +97,9 @@ export function ssrProcessTransitionGroup(
       if (propsExp) {
         context.pushStringPart(propsExp)
       }
+      if (scopeId) {
+        context.pushStringPart(` ${scopeId}`)
+      }
       context.pushStringPart(`>`)
       processChildren(node, context, false, true)
       context.pushStringPart(`</${tag.value!.content}>`)
diff --git a/packages/compiler-ssr/src/transforms/ssrVFor.ts b/packages/compiler-ssr/src/transforms/ssrVFor.ts
index 0515993d475..d1899708821 100644
--- a/packages/compiler-ssr/src/transforms/ssrVFor.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVFor.ts
@@ -1,22 +1,22 @@
 import {
-  createStructuralDirectiveTransform,
-  ForNode,
-  processFor,
+  type ForNode,
+  NodeTypes,
   createCallExpression,
-  createFunctionExpression,
   createForLoopParams,
-  NodeTypes
+  createFunctionExpression,
+  createStructuralDirectiveTransform,
+  processFor,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 import { SSR_RENDER_LIST } from '../runtimeHelpers'
 
 // Plugin for the first transform pass, which simply constructs the AST node
 export const ssrTransformFor = createStructuralDirectiveTransform(
   'for',
-  processFor
+  processFor,
 )
 
 // This is called during the 2nd transform pass to construct the SSR-specific
@@ -24,18 +24,18 @@ export const ssrTransformFor = createStructuralDirectiveTransform(
 export function ssrProcessFor(
   node: ForNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
+  disableNestedFragments = false,
 ) {
   const needFragmentWrapper =
     !disableNestedFragments &&
     (node.children.length !== 1 || node.children[0].type !== NodeTypes.ELEMENT)
   const renderLoop = createFunctionExpression(
-    createForLoopParams(node.parseResult)
+    createForLoopParams(node.parseResult),
   )
   renderLoop.body = processChildrenAsStatement(
     node,
     context,
-    needFragmentWrapper
+    needFragmentWrapper,
   )
   // v-for always renders a fragment unless explicitly disabled
   if (!disableNestedFragments) {
@@ -44,8 +44,8 @@ export function ssrProcessFor(
   context.pushStatement(
     createCallExpression(context.helper(SSR_RENDER_LIST), [
       node.source,
-      renderLoop
-    ])
+      renderLoop,
+    ]),
   )
   if (!disableNestedFragments) {
     context.pushStringPart(`<!--]-->`)
diff --git a/packages/compiler-ssr/src/transforms/ssrVIf.ts b/packages/compiler-ssr/src/transforms/ssrVIf.ts
index 9de1d0e9a2d..32a5a7c00f1 100644
--- a/packages/compiler-ssr/src/transforms/ssrVIf.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVIf.ts
@@ -1,23 +1,23 @@
 import {
-  createStructuralDirectiveTransform,
-  processIf,
-  IfNode,
-  createIfStatement,
+  type BlockStatement,
+  type IfBranchNode,
+  type IfNode,
+  NodeTypes,
   createBlockStatement,
   createCallExpression,
-  IfBranchNode,
-  BlockStatement,
-  NodeTypes
+  createIfStatement,
+  createStructuralDirectiveTransform,
+  processIf,
 } from '@vue/compiler-dom'
 import {
-  SSRTransformContext,
-  processChildrenAsStatement
+  type SSRTransformContext,
+  processChildrenAsStatement,
 } from '../ssrCodegenTransform'
 
 // Plugin for the first transform pass, which simply constructs the AST node
 export const ssrTransformIf = createStructuralDirectiveTransform(
   /^(if|else|else-if)$/,
-  processIf
+  processIf,
 )
 
 // This is called during the 2nd transform pass to construct the SSR-specific
@@ -25,12 +25,12 @@ export const ssrTransformIf = createStructuralDirectiveTransform(
 export function ssrProcessIf(
   node: IfNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
+  disableNestedFragments = false,
 ) {
   const [rootBranch] = node.branches
   const ifStatement = createIfStatement(
     rootBranch.condition!,
-    processIfBranch(rootBranch, context, disableNestedFragments)
+    processIfBranch(rootBranch, context, disableNestedFragments),
   )
   context.pushStatement(ifStatement)
 
@@ -40,13 +40,13 @@ export function ssrProcessIf(
     const branchBlockStatement = processIfBranch(
       branch,
       context,
-      disableNestedFragments
+      disableNestedFragments,
     )
     if (branch.condition) {
       // else-if
       currentIf = currentIf.alternate = createIfStatement(
         branch.condition,
-        branchBlockStatement
+        branchBlockStatement,
       )
     } else {
       // else
@@ -56,7 +56,7 @@ export function ssrProcessIf(
 
   if (!currentIf.alternate) {
     currentIf.alternate = createBlockStatement([
-      createCallExpression(`_push`, ['`<!---->`'])
+      createCallExpression(`_push`, ['`<!---->`']),
     ])
   }
 }
@@ -64,7 +64,7 @@ export function ssrProcessIf(
 function processIfBranch(
   branch: IfBranchNode,
   context: SSRTransformContext,
-  disableNestedFragments = false
+  disableNestedFragments = false,
 ): BlockStatement {
   const { children } = branch
   const needFragmentWrapper =
diff --git a/packages/compiler-ssr/src/transforms/ssrVModel.ts b/packages/compiler-ssr/src/transforms/ssrVModel.ts
index bd587edcb9c..9a645397e1a 100644
--- a/packages/compiler-ssr/src/transforms/ssrVModel.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVModel.ts
@@ -1,27 +1,27 @@
 import {
-  DirectiveTransform,
+  DOMErrorCodes,
+  type DirectiveTransform,
   ElementTypes,
-  transformModel,
-  findProp,
+  type ExpressionNode,
   NodeTypes,
-  createDOMCompilerError,
-  DOMErrorCodes,
-  createObjectProperty,
-  createSimpleExpression,
+  type PlainElementNode,
   createCallExpression,
-  PlainElementNode,
-  ExpressionNode,
   createConditionalExpression,
+  createDOMCompilerError,
   createInterpolation,
-  hasDynamicKeyVBind
+  createObjectProperty,
+  createSimpleExpression,
+  findProp,
+  hasDynamicKeyVBind,
+  transformModel,
 } from '@vue/compiler-dom'
 import {
-  SSR_LOOSE_EQUAL,
+  SSR_INCLUDE_BOOLEAN_ATTR,
   SSR_LOOSE_CONTAIN,
+  SSR_LOOSE_EQUAL,
   SSR_RENDER_DYNAMIC_MODEL,
-  SSR_INCLUDE_BOOLEAN_ATTR
 } from '../runtimeHelpers'
-import { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
+import type { DirectiveTransformResult } from 'packages/compiler-core/src/transform'
 
 export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
   const model = dir.exp!
@@ -32,8 +32,40 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE,
-          value.loc
+          value.loc,
+        ),
+      )
+    }
+  }
+
+  function processOption(plainNode: PlainElementNode) {
+    if (plainNode.tag === 'option') {
+      if (plainNode.props.findIndex(p => p.name === 'selected') === -1) {
+        const value = findValueBinding(plainNode)
+        plainNode.ssrCodegenNode!.elements.push(
+          createConditionalExpression(
+            createCallExpression(context.helper(SSR_INCLUDE_BOOLEAN_ATTR), [
+              createConditionalExpression(
+                createCallExpression(`Array.isArray`, [model]),
+                createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
+                  model,
+                  value,
+                ]),
+                createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
+                  model,
+                  value,
+                ]),
+              ),
+            ]),
+            createSimpleExpression(' selected', true),
+            createSimpleExpression('', true),
+            false /* no newline */,
+          ),
         )
+      }
+    } else if (plainNode.tag === 'optgroup') {
+      plainNode.children.forEach(option =>
+        processOption(option as PlainElementNode),
       )
     }
   }
@@ -42,7 +74,7 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
     const res: DirectiveTransformResult = { props: [] }
     const defaultProps = [
       // default value binding for text type inputs
-      createObjectProperty(`value`, model)
+      createObjectProperty(`value`, model),
     ]
     if (node.tag === 'input') {
       const type = findProp(node, 'type')
@@ -54,8 +86,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
             createCallExpression(context.helper(SSR_RENDER_DYNAMIC_MODEL), [
               type.exp!,
               model,
-              value
-            ])
+              value,
+            ]),
           ]
         } else if (type.value) {
           // static type
@@ -66,9 +98,9 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                   `checked`,
                   createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
                     model,
-                    value
-                  ])
-                )
+                    value,
+                  ]),
+                ),
               ]
               break
             case 'checkbox':
@@ -83,9 +115,9 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                     `checked`,
                     createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
                       model,
-                      trueValue
-                    ])
-                  )
+                      trueValue,
+                    ]),
+                  ),
                 ]
               } else {
                 res.props = [
@@ -95,11 +127,11 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
                       createCallExpression(`Array.isArray`, [model]),
                       createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
                         model,
-                        value
+                        value,
                       ]),
-                      model
-                    )
-                  )
+                      model,
+                    ),
+                  ),
                 ]
               }
               break
@@ -107,8 +139,8 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
               context.onError(
                 createDOMCompilerError(
                   DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT,
-                  dir.loc
-                )
+                  dir.loc,
+                ),
               )
               break
             default:
@@ -130,40 +162,17 @@ export const ssrTransformModel: DirectiveTransform = (dir, node, context) => {
       checkDuplicatedValue()
       node.children = [createInterpolation(model, model.loc)]
     } else if (node.tag === 'select') {
-      node.children.forEach(option => {
-        if (option.type === NodeTypes.ELEMENT) {
-          const plainNode = option as PlainElementNode
-          if (plainNode.props.findIndex(p => p.name === 'selected') === -1) {
-            const value = findValueBinding(plainNode)
-            plainNode.ssrCodegenNode!.elements.push(
-              createConditionalExpression(
-                createCallExpression(context.helper(SSR_INCLUDE_BOOLEAN_ATTR), [
-                  createConditionalExpression(
-                    createCallExpression(`Array.isArray`, [model]),
-                    createCallExpression(context.helper(SSR_LOOSE_CONTAIN), [
-                      model,
-                      value
-                    ]),
-                    createCallExpression(context.helper(SSR_LOOSE_EQUAL), [
-                      model,
-                      value
-                    ])
-                  )
-                ]),
-                createSimpleExpression(' selected', true),
-                createSimpleExpression('', true),
-                false /* no newline */
-              )
-            )
-          }
+      node.children.forEach(child => {
+        if (child.type === NodeTypes.ELEMENT) {
+          processOption(child as PlainElementNode)
         }
       })
     } else {
       context.onError(
         createDOMCompilerError(
           DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT,
-          dir.loc
-        )
+          dir.loc,
+        ),
       )
     }
 
diff --git a/packages/compiler-ssr/src/transforms/ssrVShow.ts b/packages/compiler-ssr/src/transforms/ssrVShow.ts
index ecd1c0d60b6..3e3be434200 100644
--- a/packages/compiler-ssr/src/transforms/ssrVShow.ts
+++ b/packages/compiler-ssr/src/transforms/ssrVShow.ts
@@ -1,17 +1,17 @@
 import {
-  DirectiveTransform,
   DOMErrorCodes,
-  createObjectProperty,
-  createSimpleExpression,
+  type DirectiveTransform,
   createConditionalExpression,
+  createDOMCompilerError,
   createObjectExpression,
-  createDOMCompilerError
+  createObjectProperty,
+  createSimpleExpression,
 } from '@vue/compiler-dom'
 
 export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
   if (!dir.exp) {
     context.onError(
-      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION)
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION),
     )
   }
   return {
@@ -24,12 +24,12 @@ export const ssrTransformShow: DirectiveTransform = (dir, node, context) => {
           createObjectExpression([
             createObjectProperty(
               `display`,
-              createSimpleExpression(`none`, true)
-            )
+              createSimpleExpression(`none`, true),
+            ),
           ]),
-          false /* no newline */
-        )
-      )
-    ]
+          false /* no newline */,
+        ),
+      ),
+    ],
   }
 }
diff --git a/packages/dts-built-test/README.md b/packages/dts-built-test/README.md
new file mode 100644
index 00000000000..8191d66e32e
--- /dev/null
+++ b/packages/dts-built-test/README.md
@@ -0,0 +1,5 @@
+# dts built-package test
+
+This package is private and for testing only. It is used to verify edge cases for external libraries that build their types using Vue core types - e.g. Vuetify as in [#8376](https://github.com/vuejs/core/issues/8376).
+
+When running the `build-dts` task, this package's types are built alongside other packages. Then, during `test-dts-only` it is imported and used in [`packages/dts-test/built.test-d.ts`](https://github.com/vuejs/core/blob/main/packages/dts-test/built.test-d.ts) to verify that the built types work correctly.
diff --git a/packages/dts-built-test/package.json b/packages/dts-built-test/package.json
new file mode 100644
index 00000000000..dca0f80fae8
--- /dev/null
+++ b/packages/dts-built-test/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@vue/dts-built-test",
+  "private": true,
+  "version": "0.0.0",
+  "types": "dist/dts-built-test.d.ts",
+  "dependencies": {
+    "@vue/shared": "workspace:*",
+    "@vue/reactivity": "workspace:*",
+    "vue": "workspace:*"
+  }
+}
diff --git a/packages/dts-built-test/src/index.ts b/packages/dts-built-test/src/index.ts
new file mode 100644
index 00000000000..1cdf6de7214
--- /dev/null
+++ b/packages/dts-built-test/src/index.ts
@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+const _CustomPropsNotErased = defineComponent({
+  props: {},
+  setup() {},
+})
+
+// #8376
+export const CustomPropsNotErased =
+  _CustomPropsNotErased as typeof _CustomPropsNotErased & {
+    foo: string
+  }
diff --git a/packages/dts-test/appDirective.test-d.ts b/packages/dts-test/appDirective.test-d.ts
new file mode 100644
index 00000000000..1ac5f64d19a
--- /dev/null
+++ b/packages/dts-test/appDirective.test-d.ts
@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import { expectType } from './utils'
+
+const app = createApp({})
+
+app.directive<HTMLElement, string>('custom', {
+  mounted(el, binding) {
+    expectType<HTMLElement>(el)
+    expectType<string>(binding.value)
+
+    // @ts-expect-error not any
+    expectType<number>(binding.value)
+  },
+})
diff --git a/packages/dts-test/appUse.test-d.ts b/packages/dts-test/appUse.test-d.ts
index c1bebcd53e3..065f6956865 100644
--- a/packages/dts-test/appUse.test-d.ts
+++ b/packages/dts-test/appUse.test-d.ts
@@ -1,10 +1,10 @@
-import { createApp, App, Plugin } from 'vue'
+import { type App, type Plugin, createApp, defineComponent } from 'vue'
 
 const app = createApp({})
 
 // Plugin without types accept anything
 const PluginWithoutType: Plugin = {
-  install(app: App) {}
+  install(app: App) {},
 }
 
 app.use(PluginWithoutType)
@@ -22,12 +22,12 @@ const PluginWithObjectOptions = {
     options.option1
     options.option2
     options.option3
-  }
+  },
 }
 
 for (const Plugin of [
   PluginWithObjectOptions,
-  PluginWithObjectOptions.install
+  PluginWithObjectOptions.install,
 ]) {
   // @ts-expect-error: no params
   app.use(Plugin)
@@ -42,7 +42,7 @@ for (const Plugin of [
 }
 
 const PluginNoOptions = {
-  install(app: App) {}
+  install(app: App) {},
 }
 
 for (const Plugin of [PluginNoOptions, PluginNoOptions.install]) {
@@ -55,7 +55,7 @@ for (const Plugin of [PluginNoOptions, PluginNoOptions.install]) {
 }
 
 const PluginMultipleArgs = {
-  install: (app: App, a: string, b: number) => {}
+  install: (app: App, a: string, b: number) => {},
 }
 
 for (const Plugin of [PluginMultipleArgs, PluginMultipleArgs.install]) {
@@ -67,12 +67,12 @@ for (const Plugin of [PluginMultipleArgs, PluginMultipleArgs.install]) {
 const PluginOptionalOptions = {
   install(
     app: App,
-    options: PluginOptions = { option2: 2, option3: true, option1: 'foo' }
+    options: PluginOptions = { option2: 2, option3: true, option1: 'foo' },
   ) {
     options.option1
     options.option2
     options.option3
-  }
+  },
 }
 
 for (const Plugin of [PluginOptionalOptions, PluginOptionalOptions.install]) {
@@ -93,3 +93,15 @@ const PluginTyped: Plugin<PluginOptions> = (app, options) => {}
 // @ts-expect-error: needs options
 app.use(PluginTyped)
 app.use(PluginTyped, { option2: 2, option3: true })
+
+// vuetify usage
+const key: string = ''
+const aliases: Record<string, any> = {}
+app.component(
+  key,
+  defineComponent({
+    ...aliases[key],
+    name: key,
+    aliasName: aliases[key].name,
+  }),
+)
diff --git a/packages/dts-test/built.test-d.ts b/packages/dts-test/built.test-d.ts
new file mode 100644
index 00000000000..ebff2955cfb
--- /dev/null
+++ b/packages/dts-test/built.test-d.ts
@@ -0,0 +1,13 @@
+import { CustomPropsNotErased } from '@vue/dts-built-test'
+import { describe, expectType } from './utils'
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    custom?: number
+  }
+}
+
+// #8376 - custom props should not be erased
+describe('Custom Props not erased', () => {
+  expectType<number | undefined>(new CustomPropsNotErased().$props.custom)
+})
diff --git a/packages/dts-test/compiler.test-d.ts b/packages/dts-test/compiler.test-d.ts
index c6282373983..2729a3cc4b0 100644
--- a/packages/dts-test/compiler.test-d.ts
+++ b/packages/dts-test/compiler.test-d.ts
@@ -1,13 +1,13 @@
 import {
-  createBlock,
-  VNode,
-  Teleport,
-  Text,
-  Static,
   Comment,
   Fragment,
+  Static,
   Suspense,
-  defineComponent
+  Teleport,
+  Text,
+  type VNode,
+  createBlock,
+  defineComponent,
 } from 'vue'
 import { expectType } from './utils'
 
diff --git a/packages/dts-test/component.test-d.ts b/packages/dts-test/component.test-d.ts
index 5535419f198..d08eca12a6c 100644
--- a/packages/dts-test/component.test-d.ts
+++ b/packages/dts-test/component.test-d.ts
@@ -1,21 +1,29 @@
 import {
-  Component,
+  type Component,
+  type ComponentPublicInstance,
+  type EmitsOptions,
+  type FunctionalComponent,
+  type PropType,
+  type Ref,
+  type SetupContext,
+  type ShallowUnwrapRef,
   defineComponent,
-  PropType,
   ref,
-  Ref,
-  ShallowUnwrapRef,
-  FunctionalComponent,
-  ComponentPublicInstance,
   toRefs,
-  SetupContext
 } from 'vue'
-import { describe, expectAssignable, expectType, IsAny } from './utils'
-
-declare function extractComponentOptions<Props, RawBindings>(
-  obj: Component<Props, RawBindings>
+import { type IsAny, describe, expectAssignable, expectType } from './utils'
+
+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>
 }
@@ -71,24 +79,24 @@ describe('object props', () => {
         // required should make property non-void
         b: {
           type: String,
-          required: true
+          required: true,
         },
         e: Function,
         // default value should infer type and make it non-void
         bb: {
-          default: 'hello'
+          default: 'hello',
         },
         bbb: {
           // Note: default function value requires arrow syntax + explicit
           // annotation
-          default: (props: any) => (props.bb as string) || 'foo'
+          default: (props: any) => (props.bb as string) || 'foo',
         },
         // explicit type casting
         cc: Array as PropType<string[]>,
         // required + type casting
         dd: {
           type: Object as PropType<{ n: 1 }>,
-          required: true
+          required: true,
         },
         // return type
         ee: Function as PropType<() => string>,
@@ -99,39 +107,39 @@ describe('object props', () => {
         // required + constructor type casting
         ddd: {
           type: Array as () => string[],
-          required: true
+          required: true,
         },
         // required + object return
         eee: {
           type: Function as PropType<() => { a: string }>,
-          required: true
+          required: true,
         },
         // required + arguments + object return
         fff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          required: true
+          required: true,
         },
         hhh: {
           type: Boolean,
-          required: true
+          required: true,
         },
         // default + type casting
         ggg: {
           type: String as PropType<'foo' | 'bar'>,
-          default: 'foo'
+          default: 'foo',
         },
         // default + function
         ffff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          default: (_a: number, _b: string) => ({ a: true })
+          default: (_a: number, _b: string) => ({ a: true }),
         },
         validated: {
           type: String,
           // validator requires explicit annotation
-          validator: (val: unknown) => val !== ''
+          validator: (val: unknown) => val !== '',
         },
         object: Object as PropType<object>,
-        zzz: Object as PropType<any>
+        zzz: Object as PropType<any>,
       },
       setup(props) {
         const refs = toRefs(props)
@@ -159,12 +167,12 @@ describe('object props', () => {
           setupA: 1,
           setupB: ref(1),
           setupC: {
-            a: ref(2)
+            a: ref(2),
           },
           setupD: undefined as Ref<number> | undefined,
-          setupProps: props
+          setupProps: props,
         }
-      }
+      },
     })
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -254,24 +262,24 @@ describe('object props', () => {
         // required should make property non-void
         b: {
           type: String,
-          required: true
+          required: true,
         },
         e: Function,
         // default value should infer type and make it non-void
         bb: {
-          default: 'hello'
+          default: 'hello',
         },
         bbb: {
           // Note: default function value requires arrow syntax + explicit
           // annotation
-          default: (props: any) => (props.bb as string) || 'foo'
+          default: (props: any) => (props.bb as string) || 'foo',
         },
         // explicit type casting
         cc: Array as PropType<string[]>,
         // required + type casting
         dd: {
           type: Object as PropType<{ n: 1 }>,
-          required: true
+          required: true,
         },
         // return type
         ee: Function as PropType<() => string>,
@@ -282,45 +290,45 @@ describe('object props', () => {
         // required + constructor type casting
         ddd: {
           type: Array as () => string[],
-          required: true
+          required: true,
         },
         // required + object return
         eee: {
           type: Function as PropType<() => { a: string }>,
-          required: true
+          required: true,
         },
         // required + arguments + object return
         fff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          required: true
+          required: true,
         },
         hhh: {
           type: Boolean,
-          required: true
+          required: true,
         },
         // default + type casting
         ggg: {
           type: String as PropType<'foo' | 'bar'>,
-          default: 'foo'
+          default: 'foo',
         },
         // default + function
         ffff: {
           type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-          default: (_a: number, _b: string) => ({ a: true })
+          default: (_a: number, _b: string) => ({ a: true }),
         },
         validated: {
           type: String,
           // validator requires explicit annotation
-          validator: (val: unknown) => val !== ''
+          validator: (val: unknown) => val !== '',
         },
-        object: Object as PropType<object>
+        object: Object as PropType<object>,
       },
 
       setup() {
         return {
-          setupA: 1
+          setupA: 1,
         }
-      }
+      },
     } as const
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -359,9 +367,9 @@ describe('array props', () => {
       props: ['a', 'b'],
       setup() {
         return {
-          c: 1
+          c: 1,
         }
-      }
+      },
     })
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -380,9 +388,9 @@ describe('array props', () => {
       props: ['a', 'b'] as const,
       setup() {
         return {
-          c: 1
+          c: 1,
         }
-      }
+      },
     }
 
     const { props, rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -404,9 +412,9 @@ describe('no props', () => {
     const MyComponent = defineComponent({
       setup() {
         return {
-          setupA: 1
+          setupA: 1,
         }
-      }
+      },
     })
 
     const { rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -425,9 +433,9 @@ describe('no props', () => {
     const MyComponent = {
       setup() {
         return {
-          setupA: 1
+          setupA: 1,
         }
-      }
+      },
     }
 
     const { rawBindings, setup } = extractComponentOptions(MyComponent)
@@ -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/dts-test/componentInstance.test-d.tsx b/packages/dts-test/componentInstance.test-d.tsx
new file mode 100644
index 00000000000..a804bb10d5d
--- /dev/null
+++ b/packages/dts-test/componentInstance.test-d.tsx
@@ -0,0 +1,139 @@
+import {
+  type ComponentInstance,
+  type ComponentPublicInstance,
+  type FunctionalComponent,
+  defineComponent,
+  ref,
+} from 'vue'
+import { describe, expectType } 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/dts-test/componentTypeExtensions.test-d.tsx b/packages/dts-test/componentTypeExtensions.test-d.tsx
index 4b3c5d7d195..68364191945 100644
--- a/packages/dts-test/componentTypeExtensions.test-d.tsx
+++ b/packages/dts-test/componentTypeExtensions.test-d.tsx
@@ -20,8 +20,8 @@ export const Custom = defineComponent({
     bar: String,
     baz: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
 
   data: () => ({ counter: 0 }),
@@ -42,8 +42,8 @@ export const Custom = defineComponent({
       this.state = 'not valid'
       // @ts-expect-error
       this.$.appContext.config.globalProperties.state = 'not valid'
-    }
-  }
+    },
+  },
 })
 
 expectType<JSX.Element>(<Custom baz={1} />)
diff --git a/packages/dts-test/defineComponent.test-d.tsx b/packages/dts-test/defineComponent.test-d.tsx
index 7466249e10f..41646751b8b 100644
--- a/packages/dts-test/defineComponent.test-d.tsx
+++ b/packages/dts-test/defineComponent.test-d.tsx
@@ -1,19 +1,21 @@
 import {
-  Component,
-  defineComponent,
-  PropType,
-  ref,
-  reactive,
+  type Component,
+  type ComponentOptions,
+  type ComponentPublicInstance,
+  type PropType,
+  type SetupContext,
+  type Slots,
+  type SlotsType,
+  type VNode,
   createApp,
-  ComponentPublicInstance,
-  ComponentOptions,
-  SetupContext,
+  defineComponent,
   h,
-  SlotsType,
-  Slots,
-  VNode
+  reactive,
+  ref,
+  withKeys,
+  withModifiers,
 } from 'vue'
-import { describe, expectType, IsUnion } from './utils'
+import { type IsUnion, describe, expectType } from './utils'
 
 describe('with object props', () => {
   interface ExpectedProps {
@@ -54,34 +56,34 @@ describe('with object props', () => {
     // required should make property non-void
     b: {
       type: String,
-      required: true as true
+      required: true as true,
     },
     e: Function,
     h: Boolean,
     j: Function as PropType<undefined | (() => string | undefined)>,
     // default value should infer type and make it non-void
     bb: {
-      default: 'hello'
+      default: 'hello',
     },
     bbb: {
       // Note: default function value requires arrow syntax + explicit
       // annotation
-      default: (props: any) => (props.bb as string) || 'foo'
+      default: (props: any) => (props.bb as string) || 'foo',
     },
     bbbb: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     bbbbb: {
       type: String,
-      default: () => undefined
+      default: () => undefined,
     },
     // explicit type casting
     cc: Array as PropType<string[]>,
     // required + type casting
     dd: {
       type: Object as PropType<{ n: 1 }>,
-      required: true as true
+      required: true as true,
     },
     // return type
     ee: Function as PropType<() => string>,
@@ -92,31 +94,31 @@ describe('with object props', () => {
     // required + constructor type casting
     ddd: {
       type: Array as () => string[],
-      required: true as true
+      required: true as true,
     },
     // required + object return
     eee: {
       type: Function as PropType<() => { a: string }>,
-      required: true as true
+      required: true as true,
     },
     // required + arguments + object return
     fff: {
       type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-      required: true as true
+      required: true as true,
     },
     hhh: {
       type: Boolean,
-      required: true as true
+      required: true as true,
     },
     // default + type casting
     ggg: {
       type: String as PropType<'foo' | 'bar'>,
-      default: 'foo'
+      default: 'foo',
     },
     // default + function
     ffff: {
       type: Function as PropType<(a: number, b: string) => { a: boolean }>,
-      default: (a: number, b: string) => ({ a: a > +b })
+      default: (a: number, b: string) => ({ a: a > +b }),
     },
     // union + function with different return types
     iii: Function as PropType<(() => string) | (() => number)>,
@@ -125,18 +127,18 @@ describe('with object props', () => {
       type: Function as PropType<
         ((arg1: string) => string) | ((arg1: string, arg2: string) => string)
       >,
-      required: true as true
+      required: true as true,
     },
     kkk: null,
     validated: {
       type: String,
       // validator requires explicit annotation
-      validator: (val: unknown) => val !== ''
+      validator: (val: unknown) => val !== '',
     },
     date: Date,
     l: [Date],
     ll: [Date, Number],
-    lll: [String, Number]
+    lll: [String, Number],
   }
 
   const MyComponent = defineComponent({
@@ -183,11 +185,11 @@ describe('with object props', () => {
       return {
         c: ref(1),
         d: {
-          e: ref('hi')
+          e: ref('hi'),
         },
         f: reactive({
-          g: ref('hello' as GT)
-        })
+          g: ref('hello' as GT),
+        }),
       }
     },
     provide() {
@@ -258,7 +260,7 @@ describe('with object props', () => {
       this.c = 2
 
       return null
-    }
+    },
   })
 
   expectType<Component>(MyComponent)
@@ -288,7 +290,7 @@ describe('with object props', () => {
       // should allow ref
       ref={'foo'}
       ref_for={true}
-    />
+    />,
   )
 
   expectType<Component>(
@@ -300,7 +302,7 @@ describe('with object props', () => {
       fff={(a, b) => ({ a: a > +b })}
       hhh={false}
       jjj={() => ''}
-    />
+    />,
   )
 
   // @ts-expect-error missing required props
@@ -325,13 +327,13 @@ describe('with object props', () => {
         default(): number {
           // @ts-expect-error
           return this.otherProp + 1
-        }
+        },
       },
       otherProp: {
         type: Number,
-        required: true
-      }
-    }
+        required: true,
+      },
+    },
   })
 })
 
@@ -341,9 +343,9 @@ describe('type inference w/ optional props declaration', () => {
       expectType<string>(props.msg)
       expectType<string[]>(props.a)
       return {
-        b: 1
+        b: 1,
       }
-    }
+    },
   })
 
   expectType<JSX.Element>(<MyComponent msg="1" a={['1']} />)
@@ -371,7 +373,7 @@ describe('type inference w/ array props declaration', () => {
       expectType<any>(props.a)
       expectType<any>(props.b)
       return {
-        c: 1
+        c: 1,
       }
     },
     render() {
@@ -382,7 +384,7 @@ describe('type inference w/ array props declaration', () => {
       expectType<any>(this.a)
       expectType<any>(this.b)
       expectType<number>(this.c)
-    }
+    },
   })
   expectType<JSX.Element>(<MyComponent a={[1, 2]} b="b" />)
   // @ts-expect-error
@@ -394,7 +396,7 @@ describe('type inference w/ options API', () => {
     props: { a: Number },
     setup() {
       return {
-        b: 123
+        b: 123,
       }
     },
     data() {
@@ -403,7 +405,7 @@ describe('type inference w/ options API', () => {
       expectType<number | undefined>(this.a)
       return {
         c: this.a || 123,
-        someRef: ref(0)
+        someRef: ref(0),
       }
     },
     computed: {
@@ -422,14 +424,14 @@ describe('type inference w/ options API', () => {
           expectType<number>(this.b)
           expectType<number>(this.d)
           expectType<number>(v)
-        }
-      }
+        },
+      },
     },
     watch: {
       a() {
         expectType<number>(this.b)
         this.b + 1
-      }
+      },
     },
     created() {
       // props
@@ -459,7 +461,7 @@ describe('type inference w/ options API', () => {
       },
       returnSomething() {
         return this.a
-      }
+      },
     },
     render() {
       // props
@@ -474,7 +476,7 @@ describe('type inference w/ options API', () => {
       expectType<number>(this.e)
       // method
       expectType<() => number | undefined>(this.returnSomething)
-    }
+    },
   })
 })
 
@@ -484,30 +486,30 @@ describe('with mixins', () => {
     props: {
       aP1: {
         type: String,
-        default: 'aP1'
+        default: 'aP1',
       },
-      aP2: Boolean
+      aP2: Boolean,
     },
     data() {
       return {
-        a: 1
+        a: 1,
       }
-    }
+    },
   })
   const MixinB = defineComponent({
     props: ['bP1', 'bP2'],
     data() {
       return {
-        b: 2
+        b: 2,
       }
-    }
+    },
   })
   const MixinC = defineComponent({
     data() {
       return {
-        c: 3
+        c: 3,
       }
-    }
+    },
   })
   const MixinD = defineComponent({
     mixins: [MixinA],
@@ -518,7 +520,7 @@ describe('with mixins', () => {
       expectError<string>(this.dC2)
 
       return {
-        d: 4
+        d: 4,
       }
     },
     setup(props) {
@@ -530,8 +532,8 @@ describe('with mixins', () => {
       },
       dC2() {
         return this.aP1 + 'dC2'
-      }
-    }
+      },
+    },
   })
   const MyComponent = defineComponent({
     mixins: [MixinA, MixinB, MixinC, MixinD],
@@ -540,8 +542,8 @@ describe('with mixins', () => {
       // required should make property non-void
       z: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
 
     data(vm) {
@@ -621,12 +623,12 @@ describe('with mixins', () => {
       this.d = 5
 
       return null
-    }
+    },
   })
 
   // Test TSX
   expectType<JSX.Element>(
-    <MyComponent aP1={'aP'} aP2 bP1={1} bP2={[1, 2]} z={'z'} />
+    <MyComponent aP1={'aP'} aP2 bP1={1} bP2={[1, 2]} z={'z'} />,
   )
 
   // missing required props
@@ -646,19 +648,19 @@ describe('with extends', () => {
       aP1: Boolean,
       aP2: {
         type: Number,
-        default: 2
-      }
+        default: 2,
+      },
     },
     data() {
       return {
-        a: 1
+        a: 1,
       }
     },
     computed: {
       c(): number {
         return this.aP2 + this.a
-      }
-    }
+      },
+    },
   })
   const MyComponent = defineComponent({
     extends: Base,
@@ -666,8 +668,8 @@ describe('with extends', () => {
       // required should make property non-void
       z: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
     render() {
       const props = this.$props
@@ -688,7 +690,7 @@ describe('with extends', () => {
       this.a = 5
 
       return null
-    }
+    },
   })
 
   // Test TSX
@@ -711,19 +713,19 @@ describe('extends with mixins', () => {
     props: {
       mP1: {
         type: String,
-        default: 'mP1'
+        default: 'mP1',
       },
       mP2: Boolean,
       mP3: {
         type: Boolean,
-        required: true
-      }
+        required: true,
+      },
     },
     data() {
       return {
-        a: 1
+        a: 1,
       }
-    }
+    },
   })
   const Base = defineComponent({
     emits: ['foo'],
@@ -731,23 +733,23 @@ describe('extends with mixins', () => {
       p1: Boolean,
       p2: {
         type: Number,
-        default: 2
+        default: 2,
       },
       p3: {
         type: Boolean,
-        required: true
-      }
+        required: true,
+      },
     },
     data() {
       return {
-        b: 2
+        b: 2,
       }
     },
     computed: {
       c(): number {
         return this.p2 + this.b
-      }
-    }
+      },
+    },
   })
   const MyComponent = defineComponent({
     extends: Base,
@@ -757,8 +759,8 @@ describe('extends with mixins', () => {
       // required should make property non-void
       z: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
     render() {
       const props = this.$props
@@ -790,7 +792,7 @@ describe('extends with mixins', () => {
       this.a = 5
 
       return null
-    }
+    },
   })
 
   // Test TSX
@@ -819,14 +821,14 @@ describe('extends with mixins', () => {
   const CompWithD = defineComponent({
     data() {
       return { foo: 1 }
-    }
+    },
   })
   const CompWithC = defineComponent({
     computed: {
       foo() {
         return 1
-      }
-    }
+      },
+    },
   })
   const CompWithM = defineComponent({ methods: { foo() {} } })
   const CompEmpty = defineComponent({})
@@ -835,19 +837,19 @@ describe('extends with mixins', () => {
     mixins: [CompWithD, CompEmpty],
     mounted() {
       expectType<number>(this.foo)
-    }
+    },
   })
   defineComponent({
     mixins: [CompWithC, CompEmpty],
     mounted() {
       expectType<number>(this.foo)
-    }
+    },
   })
   defineComponent({
     mixins: [CompWithM, CompEmpty],
     mounted() {
       expectType<() => void>(this.foo)
-    }
+    },
   })
 })
 
@@ -856,16 +858,16 @@ describe('compatibility w/ createApp', () => {
   createApp(comp).mount('#hello')
 
   const comp2 = defineComponent({
-    props: { foo: String }
+    props: { foo: String },
   })
   createApp(comp2).mount('#hello')
 
   const comp3 = defineComponent({
     setup() {
       return {
-        a: 1
+        a: 1,
       }
-    }
+    },
   })
   createApp(comp3).mount('#hello')
 })
@@ -874,7 +876,7 @@ describe('defineComponent', () => {
   describe('should accept components defined with defineComponent', () => {
     const comp = defineComponent({})
     defineComponent({
-      components: { comp }
+      components: { comp },
     })
   })
 
@@ -884,7 +886,7 @@ describe('defineComponent', () => {
       constructor(_props: { foo: string }) {}
     }
     defineComponent({
-      components: { Comp }
+      components: { Comp },
     })
   })
 })
@@ -903,7 +905,7 @@ describe('emits', () => {
   defineComponent({
     emits: {
       click: (n: number) => typeof n === 'number',
-      input: (b: string) => b.length > 1
+      input: (b: string) => b.length > 1,
     },
     setup(props, { emit }) {
       expectType<((n: number) => boolean) | undefined>(props.onClick)
@@ -953,7 +955,7 @@ describe('emits', () => {
         //  @ts-expect-error
         this.$emit('input', 1)
       })
-    }
+    },
   })
 
   // with array emits
@@ -974,13 +976,13 @@ describe('emits', () => {
       this.$emit('bar')
       //  @ts-expect-error
       this.$emit('nope')
-    }
+    },
   })
 
   // with tsx
   const Component = defineComponent({
     emits: {
-      click: (n: number) => typeof n === 'number'
+      click: (n: number) => typeof n === 'number',
     },
     setup(props, { emit }) {
       expectType<((n: number) => any) | undefined>(props.onClick)
@@ -989,7 +991,7 @@ describe('emits', () => {
       emit('click')
       //  @ts-expect-error
       emit('click', 'foo')
-    }
+    },
   })
 
   defineComponent({
@@ -1001,7 +1003,7 @@ describe('emits', () => {
           }}
         />
       )
-    }
+    },
   })
 
   // without emits
@@ -1009,7 +1011,7 @@ describe('emits', () => {
     setup(props, { emit }) {
       emit('test', 1)
       emit('test')
-    }
+    },
   })
 
   // emit should be valid when ComponentPublicInstance is used.
@@ -1024,8 +1026,8 @@ describe('emits', () => {
       foo(): boolean {
         // @ts-expect-error
         return this.bar === 3
-      }
-    }
+      },
+    },
   })
 })
 
@@ -1033,18 +1035,18 @@ describe('inject', () => {
   // with object inject
   defineComponent({
     props: {
-      a: String
+      a: String,
     },
     inject: {
       foo: 'foo',
-      bar: 'bar'
+      bar: 'bar',
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // with array inject
@@ -1056,7 +1058,7 @@ describe('inject', () => {
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // with no props
@@ -1064,19 +1066,19 @@ describe('inject', () => {
     inject: {
       foo: {
         from: 'pfoo',
-        default: 'foo'
+        default: 'foo',
       },
       bar: {
         from: 'pbar',
-        default: 'bar'
-      }
+        default: 'bar',
+      },
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // without inject
@@ -1087,13 +1089,13 @@ describe('inject', () => {
       this.foo = 1
       //  @ts-expect-error
       this.bar = 1
-    }
+    },
   })
 })
 
 describe('componentOptions setup should be `SetupContext`', () => {
   expectType<ComponentOptions['setup']>(
-    {} as (props: Record<string, any>, ctx: SetupContext) => any
+    {} as (props: Record<string, any>, ctx: SetupContext) => any,
   )
 })
 
@@ -1102,17 +1104,17 @@ describe('extract instance type', () => {
     props: {
       baseA: {
         type: Number,
-        default: 1
-      }
-    }
+        default: 1,
+      },
+    },
   })
   const MixinA = defineComponent({
     props: {
       mA: {
         type: String,
-        default: ''
-      }
-    }
+        default: '',
+      },
+    },
   })
   const CompA = defineComponent({
     extends: Base,
@@ -1120,14 +1122,14 @@ describe('extract instance type', () => {
     props: {
       a: {
         type: Boolean,
-        default: false
+        default: false,
       },
       b: {
         type: String,
-        required: true
+        required: true,
       },
-      c: Number
-    }
+      c: Number,
+    },
   })
 
   const compA = {} as InstanceType<typeof CompA>
@@ -1160,11 +1162,11 @@ describe('async setup', () => {
       return {
         a: ref(1),
         b: {
-          c: ref('hi')
+          c: ref('hi'),
         },
         d: reactive({
-          e: ref('hello' as GT)
-        })
+          e: ref('hello' as GT),
+        }),
       }
     },
     render() {
@@ -1175,7 +1177,7 @@ describe('async setup', () => {
 
       // setup context properties should be mutable
       this.a = 2
-    }
+    },
   })
 
   const vm = {} as InstanceType<typeof Comp>
@@ -1197,7 +1199,7 @@ describe('DefineComponent should infer correct types when assigning to Component
       expectType<[]>(attrs)
       // @ts-expect-error should not be any
       expectType<[]>(slots)
-    }
+    },
   })
   expectType<Component>(component)
 })
@@ -1206,15 +1208,15 @@ describe('DefineComponent should infer correct types when assigning to Component
 describe('should allow to assign props', () => {
   const Child = defineComponent({
     props: {
-      bar: String
-    }
+      bar: String,
+    },
   })
 
   const Parent = defineComponent({
     props: {
       ...Child.props,
-      foo: String
-    }
+      foo: String,
+    },
   })
 
   const child = new Child()
@@ -1227,29 +1229,29 @@ describe('prop starting with `on*` is broken', () => {
     props: {
       onX: {
         type: Function as PropType<(a: 1) => void>,
-        required: true
-      }
+        required: true,
+      },
     },
     setup(props) {
       expectType<(a: 1) => void>(props.onX)
       props.onX(1)
-    }
+    },
   })
 
   defineComponent({
     props: {
       onX: {
         type: Function as PropType<(a: 1) => void>,
-        required: true
-      }
+        required: true,
+      },
     },
     emits: {
-      test: (a: 1) => true
+      test: (a: 1) => true,
     },
     setup(props) {
       expectType<(a: 1) => void>(props.onX)
       expectType<undefined | ((a: 1) => any)>(props.onTest)
-    }
+    },
   })
 })
 
@@ -1267,7 +1269,7 @@ describe('function syntax w/ generics', () => {
           {props.msg} {count.value}
         </div>
       )
-    }
+    },
   )
 
   expectType<JSX.Element>(<Comp msg="fse" list={['foo']} />)
@@ -1275,16 +1277,16 @@ describe('function syntax w/ generics', () => {
 
   expectType<JSX.Element>(
     // @ts-expect-error missing prop
-    <Comp msg={123} />
+    <Comp msg={123} />,
   )
 
   expectType<JSX.Element>(
     // @ts-expect-error generics don't match
-    <Comp msg="fse" list={[123]} />
+    <Comp msg="fse" list={[123]} />,
   )
   expectType<JSX.Element>(
     // @ts-expect-error generics don't match
-    <Comp msg={123} list={['123']} />
+    <Comp msg={123} list={['123']} />,
   )
 })
 
@@ -1297,8 +1299,8 @@ describe('function syntax w/ emits', () => {
       return () => {}
     },
     {
-      emits: ['foo']
-    }
+      emits: ['foo'],
+    },
   )
   expectType<JSX.Element>(<Foo msg="hi" onFoo={() => {}} />)
   // @ts-expect-error
@@ -1315,9 +1317,9 @@ describe('function syntax w/ emits', () => {
     },
     {
       emits: {
-        foo: (a: string) => true
-      }
-    }
+        foo: (a: string) => true,
+      },
+    },
   )
 })
 
@@ -1329,8 +1331,8 @@ describe('function syntax w/ runtime props', () => {
       return () => {}
     },
     {
-      props: ['msg']
-    }
+      props: ['msg'],
+    },
   )
 
   defineComponent(
@@ -1338,8 +1340,8 @@ describe('function syntax w/ runtime props', () => {
       return () => {}
     },
     {
-      props: ['msg']
-    }
+      props: ['msg'],
+    },
   )
 
   defineComponent(
@@ -1348,9 +1350,9 @@ describe('function syntax w/ runtime props', () => {
     },
     {
       props: {
-        msg: String
-      }
-    }
+        msg: String,
+      },
+    },
   )
 
   // @ts-expect-error string prop names don't match
@@ -1359,8 +1361,8 @@ describe('function syntax w/ runtime props', () => {
       return () => {}
     },
     {
-      props: ['bar']
-    }
+      props: ['bar'],
+    },
   )
 
   defineComponent(
@@ -1370,9 +1372,9 @@ describe('function syntax w/ runtime props', () => {
     {
       props: {
         // @ts-expect-error prop type mismatch
-        msg: Number
-      }
-    }
+        msg: Number,
+      },
+    },
   )
 
   // @ts-expect-error prop keys don't match
@@ -1383,9 +1385,9 @@ describe('function syntax w/ runtime props', () => {
     {
       props: {
         msg: String,
-        bar: String
-      }
-    }
+        bar: String,
+      },
+    },
   )
 })
 
@@ -1397,16 +1399,16 @@ export default {
   b: defineComponent({
     data() {
       return {}
-    }
+    },
   }),
   c: defineComponent({
-    props: ['a']
+    props: ['a'],
   }),
   d: defineComponent({
     props: {
-      a: Number
-    }
-  })
+      a: Number,
+    },
+  }),
 }
 
 describe('slots', () => {
@@ -1419,10 +1421,10 @@ describe('slots', () => {
     }>,
     setup(props, { slots }) {
       expectType<(scope: { foo: string; bar: number }) => VNode[]>(
-        slots.default
+        slots.default,
       )
       expectType<((scope: { data: string }) => VNode[]) | undefined>(
-        slots.optional
+        slots.optional,
       )
 
       slots.default({ foo: 'foo', bar: 1 })
@@ -1459,7 +1461,7 @@ describe('slots', () => {
       slots.optionalUndefinedScope?.('foo')
 
       expectType<typeof slots | undefined>(new comp1().$slots)
-    }
+    },
   })
 
   const comp2 = defineComponent({
@@ -1467,19 +1469,50 @@ describe('slots', () => {
       // unknown slots
       expectType<Slots>(slots)
       expectType<((...args: any[]) => VNode[]) | undefined>(slots.default)
-    }
+    },
   })
   expectType<Slots | undefined>(new comp2().$slots)
 })
 
-import {
-  DefineComponent,
+// #5885
+describe('should work when props type is incompatible with setup returned type ', () => {
+  type SizeType = 'small' | 'big'
+  const Comp = defineComponent({
+    props: {
+      size: {
+        type: String as PropType<SizeType>,
+        required: true,
+      },
+    },
+    setup(props) {
+      expectType<SizeType>(props.size)
+      return {
+        size: 1,
+      }
+    },
+  })
+  type CompInstance = InstanceType<typeof Comp>
+
+  const CompA = {} as CompInstance
+  expectType<ComponentPublicInstance>(CompA)
+  expectType<number>(CompA.size)
+  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 type {
+  AllowedComponentProps,
+  ComponentCustomProps,
   ComponentOptionsMixin,
+  DefineComponent,
   EmitsOptions,
+  ExtractPropTypes,
   VNodeProps,
-  AllowedComponentProps,
-  ComponentCustomProps,
-  ExtractPropTypes
 } from 'vue'
 
 // code generated by tsc / vue-tsc, make sure this continues to work
diff --git a/packages/dts-test/defineCustomElement.test-d.ts b/packages/dts-test/defineCustomElement.test-d.ts
index 4e7cf228372..2d48dbc1bc9 100644
--- a/packages/dts-test/defineCustomElement.test-d.ts
+++ b/packages/dts-test/defineCustomElement.test-d.ts
@@ -1,22 +1,26 @@
-import { defineCustomElement } from 'vue'
-import { expectType, describe } from './utils'
+import {
+  type VueElementConstructor,
+  defineComponent,
+  defineCustomElement,
+} from 'vue'
+import { describe, expectType, test } from './utils'
 
 describe('inject', () => {
   // with object inject
   defineCustomElement({
     props: {
-      a: String
+      a: String,
     },
     inject: {
       foo: 'foo',
-      bar: 'bar'
+      bar: 'bar',
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // with array inject
@@ -28,7 +32,7 @@ describe('inject', () => {
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // with no props
@@ -36,19 +40,19 @@ describe('inject', () => {
     inject: {
       foo: {
         from: 'pbar',
-        default: 'foo'
+        default: 'foo',
       },
       bar: {
         from: 'pfoo',
-        default: 'bar'
-      }
+        default: 'bar',
+      },
     },
     created() {
       expectType<unknown>(this.foo)
       expectType<unknown>(this.bar)
       //  @ts-expect-error
       this.foobar = 1
-    }
+    },
   })
 
   // without inject
@@ -59,6 +63,23 @@ describe('inject', () => {
       this.foo = 1
       //  @ts-expect-error
       this.bar = 1
-    }
+    },
+  })
+})
+
+describe('defineCustomElement using defineComponent return type', () => {
+  test('with emits', () => {
+    const Comp1Vue = defineComponent({
+      props: {
+        a: String,
+      },
+      emits: {
+        click: () => true,
+      },
+    })
+    const Comp = defineCustomElement(Comp1Vue)
+    expectType<VueElementConstructor>(Comp)
+
+    expectType<string | undefined>(new Comp().a)
   })
 })
diff --git a/packages/dts-test/extractProps.test-d.ts b/packages/dts-test/extractProps.test-d.ts
index a40a15ef383..3a5acc66ee9 100644
--- a/packages/dts-test/extractProps.test-d.ts
+++ b/packages/dts-test/extractProps.test-d.ts
@@ -1,16 +1,16 @@
-import { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
-import { expectType, Prettify } from './utils'
+import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import { type Prettify, expectType } from './utils'
 
 const propsOptions = {
   foo: {
-    default: 1
+    default: 1,
   },
   bar: {
     type: String,
-    required: true
+    required: true,
   },
   baz: Boolean,
-  qux: Array
+  qux: Array,
 } as const
 
 // internal facing props
diff --git a/packages/dts-test/functionalComponent.test-d.tsx b/packages/dts-test/functionalComponent.test-d.tsx
index 827e8d63fe7..04eda68b50a 100644
--- a/packages/dts-test/functionalComponent.test-d.tsx
+++ b/packages/dts-test/functionalComponent.test-d.tsx
@@ -1,4 +1,10 @@
-import { h, Text, FunctionalComponent, Component, VNode } from 'vue'
+import {
+  type Component,
+  type FunctionalComponent,
+  Text,
+  type VNode,
+  h,
+} from 'vue'
 import { expectType } from './utils'
 
 // simple function signature
@@ -33,19 +39,19 @@ const Bar: FunctionalComponent<
 
 // assigning runtime options
 Bar.props = {
-  foo: Number
+  foo: Number,
 }
 //  @ts-expect-error
 Bar.props = { foo: String }
 
 Bar.emits = {
-  update: value => value > 1
+  update: value => value > 1,
 }
 //  @ts-expect-error
 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/dts-test/h.test-d.ts b/packages/dts-test/h.test-d.ts
index 5c700800e94..a199e14ced9 100644
--- a/packages/dts-test/h.test-d.ts
+++ b/packages/dts-test/h.test-d.ts
@@ -1,14 +1,17 @@
 import {
-  h,
-  defineComponent,
-  ref,
+  type Component,
+  type DefineComponent,
   Fragment,
-  Teleport,
+  type FunctionalComponent,
   Suspense,
-  Component,
-  resolveComponent
+  Teleport,
+  type VNode,
+  defineComponent,
+  h,
+  ref,
+  resolveComponent,
 } from 'vue'
-import { describe, expectAssignable } from './utils'
+import { describe, expectAssignable, expectType } from './utils'
 
 describe('h inference w/ element', () => {
   // key
@@ -31,6 +34,17 @@ describe('h inference w/ element', () => {
   // slots
   const slots = { default: () => {} } // RawSlots
   h('div', {}, slots)
+  // events
+  h('div', {
+    onClick: e => {
+      expectType<MouseEvent>(e)
+    },
+  })
+  h('input', {
+    onFocus(e) {
+      expectType<FocusEvent>(e)
+    },
+  })
 })
 
 describe('h inference w/ Fragment', () => {
@@ -59,12 +73,25 @@ describe('h inference w/ Suspense', () => {
   h(Suspense, 'foo')
   h(Suspense, () => 'foo')
   h(Suspense, null, {
-    default: () => 'foo'
+    default: () => 'foo',
   })
   //  @ts-expect-error
   h(Suspense, { onResolve: 1 })
 })
 
+declare const fc: FunctionalComponent<
+  {
+    foo: string
+    bar?: number
+    onClick: (evt: MouseEvent) => void
+  },
+  ['click'],
+  {
+    default: () => VNode
+    title: (scope: { id: number }) => VNode
+  }
+>
+declare const vnode: VNode
 describe('h inference w/ functional component', () => {
   const Func = (_props: { foo: string; bar?: number }) => ''
   h(Func, { foo: 'hello' })
@@ -75,13 +102,22 @@ describe('h inference w/ functional component', () => {
   h(Func, {})
   //  @ts-expect-error
   h(Func, { bar: 123 })
+
+  h(
+    fc,
+    { foo: 'hello', onClick: () => {} },
+    {
+      default: () => vnode,
+      title: ({ id }: { id: number }) => vnode,
+    },
+  )
 })
 
 describe('h support w/ plain object component', () => {
   const Foo = {
     props: {
-      foo: String
-    }
+      foo: String,
+    },
   }
   h(Foo, { foo: 'ok' })
   h(Foo, { foo: 'ok', class: 'extra' })
@@ -94,9 +130,9 @@ describe('h inference w/ defineComponent', () => {
       foo: String,
       bar: {
         type: Number,
-        required: true
-      }
-    }
+        required: true,
+      },
+    },
   })
 
   h(Foo, { bar: 1 })
@@ -157,7 +193,7 @@ describe('h support for generic component type', () => {
 describe('describeComponent extends Component', () => {
   // functional
   expectAssignable<Component>(
-    defineComponent((_props: { foo?: string; bar: number }) => () => {})
+    defineComponent((_props: { foo?: string; bar: number }) => () => {}),
   )
 
   // typed props
@@ -166,8 +202,8 @@ describe('describeComponent extends Component', () => {
   // prop arrays
   expectAssignable<Component>(
     defineComponent({
-      props: ['a', 'b']
-    })
+      props: ['a', 'b'],
+    }),
   )
 
   // prop object
@@ -177,10 +213,10 @@ describe('describeComponent extends Component', () => {
         foo: String,
         bar: {
           type: Number,
-          required: true
-        }
-      }
-    })
+          required: true,
+        },
+      },
+    }),
   )
 })
 
@@ -190,9 +226,9 @@ describe('component w/ props w/ default value', () => {
     props: {
       message: {
         type: String,
-        default: 'hello'
-      }
-    }
+        default: 'hello',
+      },
+    },
   })
 
   h(MyComponent, {})
@@ -202,8 +238,8 @@ describe('component w/ props w/ default value', () => {
 describe('Boolean prop implicit false', () => {
   const MyComponent = defineComponent({
     props: {
-      visible: Boolean
-    }
+      visible: Boolean,
+    },
   })
 
   h(MyComponent, {})
@@ -212,13 +248,13 @@ describe('Boolean prop implicit false', () => {
     props: {
       visible: {
         type: Boolean,
-        required: true
-      }
-    }
+        required: true,
+      },
+    },
   })
 
   h(RequiredComponent, {
-    visible: true
+    visible: true,
   })
   // @ts-expect-error
   h(RequiredComponent, {})
@@ -228,6 +264,21 @@ describe('Boolean prop implicit false', () => {
 describe('resolveComponent should work', () => {
   h(resolveComponent('test'))
   h(resolveComponent('test'), {
-    message: '1'
+    message: '1',
   })
 })
+
+// #5431
+describe('h should work with multiple types', () => {
+  const serializers = {
+    Paragraph: 'p',
+    Component: {} as Component,
+    DefineComponent: {} as DefineComponent,
+  }
+
+  const sampleComponent = serializers['' as keyof typeof serializers]
+
+  h(sampleComponent)
+  h(sampleComponent, {})
+  h(sampleComponent, {}, [])
+})
diff --git a/packages/dts-test/inject.test-d.ts b/packages/dts-test/inject.test-d.ts
index e611f900de5..55116f5692e 100644
--- a/packages/dts-test/inject.test-d.ts
+++ b/packages/dts-test/inject.test-d.ts
@@ -1,4 +1,4 @@
-import { provide, inject, ref, Ref, InjectionKey } from 'vue'
+import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
 import { expectType } from './utils'
 
 // non-symbol keys
diff --git a/packages/dts-test/package.json b/packages/dts-test/package.json
index a6933d2dca7..a6ea96bfa86 100644
--- a/packages/dts-test/package.json
+++ b/packages/dts-test/package.json
@@ -1,8 +1,9 @@
 {
   "name": "dts-test",
   "private": true,
+  "version": "0.0.0",
   "dependencies": {
-    "vue": "workspace:*"
-  },
-  "version": "3.3.5"
+    "vue": "workspace:*",
+    "@vue/dts-built-test": "workspace:*"
+  }
 }
diff --git a/packages/dts-test/reactivity.test-d.ts b/packages/dts-test/reactivity.test-d.ts
index 4504f9e352d..ec220f68198 100644
--- a/packages/dts-test/reactivity.test-d.ts
+++ b/packages/dts-test/reactivity.test-d.ts
@@ -1,4 +1,11 @@
-import { ref, readonly, shallowReadonly, Ref, reactive, markRaw } from 'vue'
+import {
+  type Ref,
+  markRaw,
+  reactive,
+  readonly,
+  ref,
+  shallowReadonly,
+} from 'vue'
 import { describe, expectType } from './utils'
 
 describe('should support DeepReadonly', () => {
@@ -21,18 +28,18 @@ describe('should support markRaw', () => {
   }
   const test = new Test<number>()
   const plain = {
-    ref: ref(1)
+    ref: ref(1),
   }
 
   const r = reactive({
     class: {
       raw: markRaw(test),
-      reactive: test
+      reactive: test,
     },
     plain: {
       raw: markRaw(plain),
-      reactive: plain
-    }
+      reactive: plain,
+    },
   })
 
   expectType<Test<number>>(r.class.raw)
@@ -62,3 +69,54 @@ 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 extended Map correctly', () => {
+  class ExtendendMap1 extends Map<string, { wrap: Ref<number> }> {
+    foo = ref('foo')
+    bar = 1
+  }
+
+  const emap1 = reactive(new ExtendendMap1())
+  expectType<string>(emap1.foo)
+  expectType<number>(emap1.bar)
+  expectType<number>(emap1.get('a')!.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)
+})
+
+describe('should unwrap extended Set correctly', () => {
+  class ExtendendSet1 extends Set<{ wrap: Ref<number> }> {
+    foo = ref('foo')
+    bar = 1
+  }
+
+  const eset1 = reactive(new ExtendendSet1())
+  expectType<string>(eset1.foo)
+  expectType<number>(eset1.bar)
+})
diff --git a/packages/dts-test/reactivityMacros.test-d.ts b/packages/dts-test/reactivityMacros.test-d.ts
deleted file mode 100644
index 9f9b5faed7d..00000000000
--- a/packages/dts-test/reactivityMacros.test-d.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { ref, computed, Ref, ComputedRef, WritableComputedRef } from 'vue'
-import 'vue/macros-global'
-import { RefType, RefTypes } from 'vue/macros'
-import { expectType } from './utils'
-
-// wrapping refs
-
-// normal
-let n = $(ref(1))
-n = 2
-// @ts-expect-error
-n = 'foo'
-
-// #4499 nullable
-let msg = $(ref<string | null>(null))
-msg = 'hello world'
-msg = null
-expectType<RefTypes.Ref | undefined>(msg![RefType])
-
-// computed
-let m = $(computed(() => n + 1))
-m * 1
-// @ts-expect-error
-m.slice()
-expectType<RefTypes.ComputedRef | undefined>(m[RefType])
-
-// writable computed
-let wc = $(
-  computed({
-    get: () => n + 1,
-    set: v => (n = v - 1)
-  })
-)
-wc = 2
-// @ts-expect-error
-wc = 'foo'
-expectType<RefTypes.WritableComputedRef | undefined>(wc[RefType])
-
-// destructure
-function useFoo() {
-  let x = $ref(1)
-  let y = $computed(() => 'hi')
-
-  return $$({
-    x,
-    y,
-    z: 123
-  })
-}
-
-const fooRes = useFoo()
-const { x, y, z } = $(fooRes)
-expectType<number>(x)
-expectType<string>(y)
-expectType<number>(z)
-
-// $ref
-expectType<number>($ref(1))
-expectType<number>($ref(ref(1)))
-expectType<{ foo: number }>($ref({ foo: ref(1) }))
-
-// $shallowRef
-expectType<number>($shallowRef(1))
-expectType<{ foo: Ref<number> }>($shallowRef({ foo: ref(1) }))
-
-// $computed
-expectType<number>($computed(() => 1))
-let b = $ref(1)
-expectType<number>(
-  $computed(() => b, {
-    onTrack() {}
-  })
-)
-
-// writable computed
-expectType<number>(
-  $computed({
-    get: () => 1,
-    set: () => {}
-  })
-)
-
-// $$
-const xRef = $$(x)
-expectType<Ref<number>>(xRef)
-
-const yRef = $$(y)
-expectType<ComputedRef<string>>(yRef)
-
-const c = $computed(() => 1)
-const cRef = $$(c)
-expectType<ComputedRef<number>>(cRef)
-
-const c2 = $computed({
-  get: () => 1,
-  set: () => {}
-})
-const c2Ref = $$(c2)
-expectType<WritableComputedRef<number>>(c2Ref)
-
-// $$ on object
-const obj = $$({
-  n,
-  m,
-  wc
-})
-
-expectType<Ref<number>>(obj.n)
-expectType<ComputedRef<number>>(obj.m)
-expectType<WritableComputedRef<number>>(obj.wc)
diff --git a/packages/dts-test/ref.test-d.ts b/packages/dts-test/ref.test-d.ts
index bbcde45ddda..5d4c9d95dab 100644
--- a/packages/dts-test/ref.test-d.ts
+++ b/packages/dts-test/ref.test-d.ts
@@ -1,23 +1,24 @@
 import {
-  Ref,
-  ref,
-  shallowRef,
+  type ComputedRef,
+  type MaybeRef,
+  type MaybeRefOrGetter,
+  type Ref,
+  type ShallowRef,
+  type ToRefs,
+  computed,
   isRef,
-  unref,
-  reactive,
   proxyRefs,
+  reactive,
+  readonly,
+  ref,
+  shallowReactive,
+  shallowRef,
   toRef,
-  toValue,
   toRefs,
-  ToRefs,
-  shallowReactive,
-  readonly,
-  MaybeRef,
-  MaybeRefOrGetter,
-  ComputedRef,
-  computed
+  toValue,
+  unref,
 } from 'vue'
-import { expectType, describe } from './utils'
+import { type IsAny, type IsUnion, describe, expectType } from './utils'
 
 function plainType(arg: number | Ref<number>) {
   // ref coercing
@@ -36,7 +37,7 @@ function plainType(arg: number | Ref<number>) {
 
   // ref inner type should be unwrapped
   const nestedRef = ref({
-    foo: ref(1)
+    foo: ref(1),
   })
   expectType<{ foo: number }>(nestedRef.value)
 
@@ -59,7 +60,7 @@ function plainType(arg: number | Ref<number>) {
 
   // with symbol
   expectType<Ref<IteratorFoo | null | undefined>>(
-    ref<IteratorFoo | null | undefined>()
+    ref<IteratorFoo | null | undefined>(),
   )
 
   // should not unwrap ref inside arrays
@@ -78,6 +79,10 @@ function plainType(arg: number | Ref<number>) {
   // should still unwrap in objects nested in arrays
   const arr2 = ref([{ a: ref(1) }]).value
   expectType<number>(arr2[0].a)
+
+  // any value should return Ref<any>, not any
+  const a = ref(1 as any)
+  expectType<IsAny<typeof a>>(false)
 }
 
 plainType(1)
@@ -96,13 +101,11 @@ function bailType(arg: HTMLElement | Ref<HTMLElement>) {
   expectType<HTMLElement>(unref(arg))
 
   // ref inner type should be unwrapped
-  // eslint-disable-next-line no-restricted-globals
   const nestedRef = ref({ foo: ref(document.createElement('DIV')) })
 
   expectType<Ref<{ foo: HTMLElement }>>(nestedRef)
   expectType<{ foo: HTMLElement }>(nestedRef.value)
 }
-// eslint-disable-next-line no-restricted-globals
 const el = document.createElement('DIV')
 bailType(el)
 
@@ -122,7 +125,7 @@ function withSymbol() {
     [Symbol.toPrimitive]: new WeakMap<Ref<boolean>, string>(),
     [Symbol.toStringTag]: { weakSet: new WeakSet<Ref<boolean>>() },
     [Symbol.unscopables]: { weakMap: new WeakMap<Ref<boolean>, string>() },
-    [customSymbol]: { arr: [ref(1)] }
+    [customSymbol]: { arr: [ref(1)] },
   }
 
   const objRef = ref(obj)
@@ -139,10 +142,10 @@ function withSymbol() {
   expectType<WeakSet<Ref<boolean>>>(objRef.value[Symbol.split])
   expectType<WeakMap<Ref<boolean>, string>>(objRef.value[Symbol.toPrimitive])
   expectType<{ weakSet: WeakSet<Ref<boolean>> }>(
-    objRef.value[Symbol.toStringTag]
+    objRef.value[Symbol.toStringTag],
   )
   expectType<{ weakMap: WeakMap<Ref<boolean>, string> }>(
-    objRef.value[Symbol.unscopables]
+    objRef.value[Symbol.unscopables],
   )
   expectType<{ arr: Ref<number>[] }>(objRef.value[customSymbol])
 }
@@ -152,12 +155,23 @@ withSymbol()
 const state = reactive({
   foo: {
     value: 1,
-    label: 'bar'
-  }
+    label: 'bar',
+  },
 })
 
 expectType<string>(state.foo.label)
 
+describe('ref with generic', <T extends { name: string }>() => {
+  const r = {} as T
+  const s = ref(r)
+  expectType<string>(s.value.name)
+
+  const rr = {} as MaybeRef<T>
+  // should at least allow casting
+  const ss = ref(rr) as Ref<T>
+  expectType<string>(ss.value.name)
+})
+
 // shallowRef
 type Status = 'initial' | 'ready' | 'invalidating'
 const shallowStatus = shallowRef<Status>('initial')
@@ -174,9 +188,53 @@ if (refStatus.value === 'initial') {
   refStatus.value = 'invalidating'
 }
 
+{
+  const shallow = shallowRef(1)
+  expectType<Ref<number>>(shallow)
+  expectType<ShallowRef<number>>(shallow)
+}
+
+{
+  //#7852
+  type Steps = { step: '1' } | { step: '2' }
+  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
+  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+  expectType<IsUnion<typeof shallowUnionGenParam>>(false)
+  expectType<IsUnion<typeof shallowUnionAsCast>>(false)
+}
+
+{
+  // any value should return Ref<any>, not any
+  const a = shallowRef(1 as any)
+  expectType<IsAny<typeof a>>(false)
+}
+
+describe('shallowRef with generic', <T extends { name: string }>() => {
+  const r = {} as T
+  const s = shallowRef(r)
+  expectType<string>(s.value.name)
+  expectType<ShallowRef<T>>(shallowRef(r))
+
+  const rr = {} as MaybeRef<T>
+  // should at least allow casting
+  const ss = shallowRef(rr) as Ref<T> | ShallowRef<T>
+  expectType<string>(ss.value.name)
+})
+
+{
+  // should return ShallowRef<T> | Ref<T>, not ShallowRef<T | Ref<T>>
+  expectType<ShallowRef<{ name: string }> | Ref<{ name: string }>>(
+    shallowRef({} as MaybeRef<{ name: string }>),
+  )
+  expectType<ShallowRef<number> | Ref<string[]> | ShallowRef<string>>(
+    shallowRef('' as Ref<string[]> | string | number),
+  )
+}
+
 // proxyRefs: should return `reactive` directly
 const r1 = reactive({
-  k: 'v'
+  k: 'v',
 })
 const p1 = proxyRefs(r1)
 expectType<typeof r1>(p1)
@@ -184,13 +242,19 @@ expectType<typeof r1>(p1)
 // proxyRefs: `ShallowUnwrapRef`
 const r2 = {
   a: ref(1),
+  c: computed(() => 1),
+  u: undefined,
   obj: {
-    k: ref('foo')
-  }
+    k: ref('foo'),
+  },
+  union: Math.random() > 0 - 5 ? ref({ name: 'yo' }) : null,
 }
 const p2 = proxyRefs(r2)
 expectType<number>(p2.a)
+expectType<number>(p2.c)
+expectType<undefined>(p2.u)
 expectType<Ref<string>>(p2.obj.k)
+expectType<{ name: string } | null>(p2.union)
 
 // toRef and toRefs
 {
@@ -201,7 +265,7 @@ expectType<Ref<string>>(p2.obj.k)
   } = {
     a: 1,
     b: ref(1),
-    c: 1
+    c: 1,
   }
 
   // toRef
@@ -228,8 +292,8 @@ expectType<Ref<string>>(p2.obj.k)
   // Both should not do any unwrapping
   const someReactive = shallowReactive({
     a: {
-      b: ref(42)
-    }
+      b: ref(42),
+    },
   })
 
   const toRefResult = toRef(someReactive, 'a')
@@ -261,8 +325,8 @@ interface AppData {
 
 const data: ToRefs<AppData> = toRefs(
   reactive({
-    state: 'state1'
-  })
+    state: 'state1',
+  }),
 )
 
 switch (data.state.value) {
@@ -289,9 +353,9 @@ describe('shallow reactive in reactive', () => {
   const baz = reactive({
     foo: shallowReactive({
       a: {
-        b: ref(42)
-      }
-    })
+        b: ref(42),
+      },
+    }),
   })
 
   const foo = toRef(baz, 'foo')
@@ -306,10 +370,10 @@ describe('shallow ref in reactive', () => {
       bar: {
         baz: ref(123),
         qux: reactive({
-          z: ref(123)
-        })
-      }
-    })
+          z: ref(123),
+        }),
+      },
+    }),
   })
 
   expectType<Ref<number>>(x.foo.bar.baz)
@@ -318,7 +382,7 @@ describe('shallow ref in reactive', () => {
 
 describe('ref in shallow ref', () => {
   const x = shallowRef({
-    a: ref(123)
+    a: ref(123),
   })
 
   expectType<Ref<number>>(x.value.a)
@@ -327,8 +391,8 @@ describe('ref in shallow ref', () => {
 describe('reactive in shallow ref', () => {
   const x = shallowRef({
     a: reactive({
-      b: ref(0)
-    })
+      b: ref(0),
+    }),
   })
 
   expectType<number>(x.value.a.b)
@@ -339,7 +403,7 @@ describe('toRef <-> toValue', () => {
     a: MaybeRef<string>,
     b: () => string,
     c: MaybeRefOrGetter<string>,
-    d: ComputedRef<string>
+    d: ComputedRef<string>,
   ) {
     const r = toRef(a)
     expectType<Ref<string>>(r)
@@ -370,7 +434,7 @@ describe('toRef <-> toValue', () => {
       r: toValue(r),
       rb: toValue(rb),
       rc: toValue(rc),
-      rd: toValue(rd)
+      rd: toValue(rd),
     }
   }
 
@@ -384,7 +448,7 @@ describe('toRef <-> toValue', () => {
       'foo',
       () => 'bar',
       ref('baz'),
-      computed(() => 'hi')
-    )
+      computed(() => 'hi'),
+    ),
   )
 })
diff --git a/packages/dts-test/setupHelpers.test-d.ts b/packages/dts-test/setupHelpers.test-d.ts
index feb4085dea0..c749e80a5c7 100644
--- a/packages/dts-test/setupHelpers.test-d.ts
+++ b/packages/dts-test/setupHelpers.test-d.ts
@@ -1,18 +1,19 @@
 import {
-  defineProps,
+  type Ref,
+  type Slots,
+  type VNode,
+  defineComponent,
   defineEmits,
+  defineModel,
+  defineProps,
+  defineSlots,
+  toRefs,
   useAttrs,
+  useModel,
   useSlots,
   withDefaults,
-  Slots,
-  defineSlots,
-  VNode,
-  Ref,
-  defineModel
 } from 'vue'
 import { describe, expectType } from './utils'
-import { defineComponent } from 'vue'
-import { useModel } from 'vue'
 
 describe('defineProps w/ type declaration', () => {
   // type declaration
@@ -20,6 +21,7 @@ describe('defineProps w/ type declaration', () => {
     foo: string
     bool?: boolean
     boolAndUndefined: boolean | undefined
+    file?: File | File[]
   }>()
   // explicitly declared type should be refined
   expectType<string>(props.foo)
@@ -61,8 +63,8 @@ describe('defineProps w/ type declaration + withDefaults', () => {
       fn: () => {},
       genStr: () => '',
       y: undefined,
-      z: 'string'
-    }
+      z: 'string',
+    },
   )
 
   res.number + 1
@@ -95,8 +97,8 @@ describe('defineProps w/ union type declaration + withDefaults', () => {
       union1: 123,
       union2: () => [123],
       union3: () => ({ x: 123 }),
-      union4: () => 123
-    }
+      union4: () => 123,
+    },
   )
 })
 
@@ -108,6 +110,7 @@ describe('defineProps w/ generic type declaration + withDefaults', <T extends
     defineProps<{
       n?: number
       bool?: boolean
+      s?: string
 
       generic1?: T[] | { x: T }
       generic2?: { x: T }
@@ -121,11 +124,15 @@ describe('defineProps w/ generic type declaration + withDefaults', <T extends
       generic2: () => ({ x: 123 }) as { x: T },
 
       generic3: () => 'test' as TString,
-      generic4: () => ({ a: 'test' }) as TA
-    }
+      generic4: () => ({ a: 'test' }) as TA,
+    },
   )
 
   res.n + 1
+  // @ts-expect-error should be readonly
+  res.n++
+  // @ts-expect-error should be readonly
+  res.s = ''
 
   expectType<T[] | { x: T }>(res.generic1)
   expectType<{ x: T }>(res.generic2)
@@ -140,7 +147,7 @@ describe('withDefaults w/ boolean type', () => {
     defineProps<{
       bool?: boolean
     }>(),
-    { bool: false }
+    { bool: false },
   )
   expectType<boolean>(res1.bool)
 
@@ -149,8 +156,8 @@ describe('withDefaults w/ boolean type', () => {
       bool?: boolean
     }>(),
     {
-      bool: undefined
-    }
+      bool: undefined,
+    },
   )
   expectType<boolean | undefined>(res2.bool)
 })
@@ -161,12 +168,12 @@ describe('defineProps w/ runtime declaration', () => {
     foo: String,
     bar: {
       type: Number,
-      default: 1
+      default: 1,
     },
     baz: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
   })
   expectType<{
     foo?: string
@@ -226,7 +233,7 @@ describe('defineEmits w/ alt type declaration', () => {
 describe('defineEmits w/ runtime declaration', () => {
   const emit = defineEmits({
     foo: () => {},
-    bar: null
+    bar: null,
   })
   emit('foo')
   emit('bar', 123)
@@ -253,6 +260,30 @@ describe('defineSlots', () => {
   expectType<Slots>(slotsUntype)
 })
 
+describe('defineSlots generic', <T extends Record<string, any>>() => {
+  const props = defineProps<{
+    item: T
+  }>()
+
+  const slots = defineSlots<
+    {
+      [K in keyof T as `slot-${K & string}`]?: (props: { item: T }) => any
+    } & {
+      label?: (props: { item: T }) => any
+    }
+  >()
+
+  for (const key of Object.keys(props.item) as (keyof T & string)[]) {
+    slots[`slot-${String(key)}`]?.({
+      item: props.item,
+    })
+  }
+  slots.label?.({ item: props.item })
+
+  // @ts-expect-error calling wrong slot
+  slots.foo({})
+})
+
 describe('defineModel', () => {
   // overload 1
   const modelValueRequired = defineModel<boolean>({ required: true })
@@ -283,14 +314,41 @@ describe('defineModel', () => {
   const inferredRequired = defineModel({ default: 123, required: true })
   expectType<Ref<number>>(inferredRequired)
 
+  // modifiers
+  const [_, modifiers] = defineModel<string>()
+  expectType<true | undefined>(modifiers.foo)
+
+  // limit supported modifiers
+  const [__, typedModifiers] = defineModel<string, 'trim' | 'capitalize'>()
+  expectType<true | undefined>(typedModifiers.trim)
+  expectType<true | undefined>(typedModifiers.capitalize)
+  // @ts-expect-error
+  typedModifiers.foo
+
+  // transformers with type
+  defineModel<string>({
+    get(val) {
+      return val.toLowerCase()
+    },
+    set(val) {
+      return val.toUpperCase()
+    },
+  })
+  // transformers with runtime type
+  defineModel({
+    type: String,
+    get(val) {
+      return val.toLowerCase()
+    },
+    set(val) {
+      return val.toUpperCase()
+    },
+  })
+
   // @ts-expect-error type / default mismatch
   defineModel<string>({ default: 123 })
   // @ts-expect-error unknown props option
   defineModel({ foo: 123 })
-
-  // accept defineModel-only options
-  defineModel({ local: true })
-  defineModel('foo', { local: true })
 })
 
 describe('useModel', () => {
@@ -302,20 +360,20 @@ describe('useModel', () => {
 
       // @ts-expect-error
       useModel(props, 'bar')
-    }
+    },
   })
 
   defineComponent({
     props: {
       foo: String,
       bar: { type: Number, required: true },
-      baz: { type: Boolean }
+      baz: { type: Boolean },
     },
     setup(props) {
       expectType<Ref<string | undefined>>(useModel(props, 'foo'))
       expectType<Ref<number>>(useModel(props, 'bar'))
       expectType<Ref<boolean>>(useModel(props, 'baz'))
-    }
+    },
   })
 })
 
@@ -328,3 +386,83 @@ describe('useSlots', () => {
   const slots = useSlots()
   expectType<Slots>(slots)
 })
+
+describe('defineSlots generic', <T extends Record<string, any>>() => {
+  const props = defineProps<{
+    item: T
+  }>()
+
+  const slots = defineSlots<
+    {
+      [K in keyof T as `slot-${K & string}`]?: (props: { item: T }) => any
+    } & {
+      label?: (props: { item: T }) => any
+    }
+  >()
+
+  // @ts-expect-error slots should be readonly
+  slots.label = () => {}
+
+  // @ts-expect-error non existing slot
+  slots['foo-asdas']?.({
+    item: props.item,
+  })
+  for (const key in props.item) {
+    slots[`slot-${String(key)}`]?.({
+      item: props.item,
+    })
+    slots[`slot-${String(key as keyof T)}`]?.({
+      item: props.item,
+    })
+  }
+
+  for (const key of Object.keys(props.item) as (keyof T)[]) {
+    slots[`slot-${String(key)}`]?.({
+      item: props.item,
+    })
+  }
+  slots.label?.({ item: props.item })
+
+  // @ts-expect-error calling wrong slot
+  slots.foo({})
+})
+
+describe('defineSlots generic strict', <T extends {
+  foo: 'foo'
+  bar: 'bar'
+}>() => {
+  const props = defineProps<{
+    item: T
+  }>()
+
+  const slots = defineSlots<
+    {
+      [K in keyof T as `slot-${K & string}`]?: (props: { item: T }) => any
+    } & {
+      label?: (props: { item: T }) => any
+    }
+  >()
+
+  // slot-bar/foo should be automatically inferred
+  slots['slot-bar']?.({ item: props.item })
+  slots['slot-foo']?.({ item: props.item })
+
+  slots.label?.({ item: props.item })
+
+  // @ts-expect-error not part of the extends
+  slots['slot-RANDOM']?.({ item: props.item })
+
+  // @ts-expect-error slots should be readonly
+  slots.label = () => {}
+
+  // @ts-expect-error calling wrong slot
+  slots.foo({})
+})
+
+// #6420
+describe('toRefs w/ type declaration', () => {
+  const props = defineProps<{
+    file?: File | File[]
+  }>()
+  expectType<Ref<File | File[] | undefined>>(toRefs(props).file)
+})
diff --git a/packages/dts-test/tsx.test-d.tsx b/packages/dts-test/tsx.test-d.tsx
index 04915a9673f..63945c0629b 100644
--- a/packages/dts-test/tsx.test-d.tsx
+++ b/packages/dts-test/tsx.test-d.tsx
@@ -1,5 +1,5 @@
 // TSX w/ defineComponent is tested in defineComponent.test-d.tsx
-import { KeepAlive, Suspense, Fragment, Teleport, VNode } from 'vue'
+import { Fragment, KeepAlive, Suspense, Teleport, type VNode } from 'vue'
 import { expectType } from './utils'
 
 expectType<VNode>(<div />)
@@ -7,6 +7,7 @@ expectType<JSX.Element>(<div />)
 expectType<JSX.Element>(<div id="foo" />)
 expectType<JSX.Element>(<div>hello</div>)
 expectType<JSX.Element>(<input value="foo" />)
+expectType<JSX.Element>(<textarea value={null} />)
 
 // @ts-expect-error style css property validation
 ;<div style={{ unknown: 123 }} />
@@ -14,9 +15,62 @@ expectType<JSX.Element>(<input value="foo" />)
 // allow array styles and nested array styles
 expectType<JSX.Element>(<div style={[{ color: 'red' }]} />)
 expectType<JSX.Element>(
-  <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />
+  <div style={[{ color: 'red' }, [{ fontSize: '1em' }]]} />,
 )
 
+// allow undefined, string, object, array and nested array classes
+expectType<JSX.Element>(<div class={undefined} />)
+expectType<JSX.Element>(<div class={'foo'} />)
+expectType<JSX.Element>(<div class={['foo', undefined, 'bar']} />)
+expectType<JSX.Element>(<div class={[]} />)
+expectType<JSX.Element>(<div class={['foo', ['bar'], [['baz']]]} />)
+expectType<JSX.Element>(<div class={{ foo: true, bar: false, baz: true }} />)
+expectType<JSX.Element>(<div class={{}} />)
+expectType<JSX.Element>(
+  <div class={['foo', ['bar'], { baz: true }, [{ qux: true }]]} />,
+)
+expectType<JSX.Element>(
+  <div
+    class={[
+      { foo: false },
+      { bar: 0 },
+      { baz: -0 },
+      { qux: '' },
+      { quux: null },
+      { corge: undefined },
+      { grault: NaN },
+    ]}
+  />,
+)
+expectType<JSX.Element>(
+  <div
+    class={[
+      { foo: true },
+      { bar: 'not-empty' },
+      { baz: 1 },
+      { qux: {} },
+      { quux: [] },
+    ]}
+  />,
+)
+
+// #7955
+expectType<JSX.Element>(<div style={[undefined, '', null, false]} />)
+
+expectType<JSX.Element>(<div style={undefined} />)
+
+expectType<JSX.Element>(<div style={null} />)
+
+expectType<JSX.Element>(<div style={''} />)
+
+expectType<JSX.Element>(<div style={false} />)
+
+// @ts-expect-error
+;<div style={[0]} />
+
+// @ts-expect-error
+;<div style={0} />
+
 // @ts-expect-error unknown prop
 ;<div foo="bar" />
 
@@ -30,7 +84,7 @@ expectType<JSX.Element>(
       // infer correct event type
       expectType<EventTarget | null>(e.target)
     }}
-  />
+  />,
 )
 
 // built-in types
@@ -55,7 +109,15 @@ expectType<JSX.Element>(<KeepAlive key="1" />)
 expectType<JSX.Element>(<Suspense />)
 expectType<JSX.Element>(<Suspense key="1" />)
 expectType<JSX.Element>(
-  <Suspense onResolve={() => {}} onFallback={() => {}} onPending={() => {}} />
+  <Suspense onResolve={() => {}} onFallback={() => {}} onPending={() => {}} />,
 )
 // @ts-expect-error
 ;<Suspense onResolve={123} />
+
+// svg
+expectType<JSX.Element>(
+  <svg
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  />,
+)
diff --git a/packages/dts-test/watch.test-d.ts b/packages/dts-test/watch.test-d.ts
index 9d727999bcc..5986d3d30b1 100644
--- a/packages/dts-test/watch.test-d.ts
+++ b/packages/dts-test/watch.test-d.ts
@@ -1,4 +1,11 @@
-import { ref, computed, watch, defineComponent } from 'vue'
+import {
+  computed,
+  defineComponent,
+  defineModel,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
 import { expectType } from './utils'
 
 const source = ref('foo')
@@ -29,7 +36,7 @@ watch(
     expectType<string>(value)
     expectType<string | undefined>(oldValue)
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 watch(
@@ -37,10 +44,10 @@ watch(
   (values, oldValues) => {
     expectType<[string, string, number]>(values)
     expectType<[string | undefined, string | undefined, number | undefined]>(
-      oldValues
+      oldValues,
     )
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 // const array
@@ -52,12 +59,12 @@ watch(
       Readonly<[string | undefined, string | undefined, number | undefined]>
     >(oldValues)
   },
-  { immediate: true }
+  { immediate: true },
 )
 
 // should provide correct ref.value inner type to callbacks
 const nestedRefSource = ref({
-  foo: ref(1)
+  foo: ref(1),
 })
 
 watch(nestedRefSource, (v, ov) => {
@@ -88,7 +95,49 @@ defineComponent({
       (v, ov) => {
         expectType<number>(v)
         expectType<number>(ov)
-      }
+      },
     )
-  }
+  },
 })
+
+{
+  //#7852
+  type Steps = { step: '1' } | { step: '2' }
+  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
+  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)
+
+  watch(shallowUnionGenParam, value => {
+    expectType<Steps>(value)
+  })
+  watch(shallowUnionAsCast, value => {
+    expectType<Steps>(value)
+  })
+}
+
+{
+  // defineModel
+  const bool = defineModel({ default: false })
+  watch(bool, value => {
+    expectType<boolean>(value)
+  })
+
+  const bool1 = defineModel<boolean>()
+  watch(bool1, value => {
+    expectType<boolean | undefined>(value)
+  })
+
+  const msg = defineModel<string>({ required: true })
+  watch(msg, value => {
+    expectType<string>(value)
+  })
+
+  const arr = defineModel<string[]>({ required: true })
+  watch(arr, value => {
+    expectType<string[]>(value)
+  })
+
+  const obj = defineModel<{ foo: string }>({ required: true })
+  watch(obj, value => {
+    expectType<{ foo: string }>(value)
+  })
+}
diff --git a/packages/global.d.ts b/packages/global.d.ts
index 97405129be9..704f6d0220d 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -7,7 +7,7 @@ declare var __BROWSER__: boolean
 declare var __GLOBAL__: boolean
 declare var __ESM_BUNDLER__: boolean
 declare var __ESM_BROWSER__: boolean
-declare var __NODE_JS__: boolean
+declare var __CJS__: boolean
 declare var __SSR__: boolean
 declare var __COMMIT__: string
 declare var __VERSION__: string
@@ -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 {
@@ -40,10 +41,22 @@ declare module 'estree-walker' {
       enter?: (node: T, parent: T | undefined) => any
       leave?: (node: T, parent: T | undefined) => any
       exit?: (node: T) => any
-    } & ThisType<{ skip: () => void }>
+    } & ThisType<{ skip: () => void }>,
   )
 }
 
+declare module 'source-map-js' {
+  export interface SourceMapGenerator {
+    // SourceMapGenerator has this method but the types do not include it
+    toJSON(): RawSourceMap
+    _sources: Set<string>
+    _names: Set<string>
+    _mappings: {
+      add(mapping: MappingItem): void
+    }
+  }
+}
+
 declare interface String {
   /**
    * @deprecated Please use String.prototype.slice instead of String.prototype.substring in the repository.
diff --git a/packages/reactivity-transform/LICENSE b/packages/reactivity-transform/LICENSE
deleted file mode 100644
index 15f1f7e7a49..00000000000
--- a/packages/reactivity-transform/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2018-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/packages/reactivity-transform/README.md b/packages/reactivity-transform/README.md
deleted file mode 100644
index 931702b3b0d..00000000000
--- a/packages/reactivity-transform/README.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# @vue/reactivity-transform
-
-> ⚠️ This is experimental and the proposal has been dropped.
-> The feature is now marked as deprecated and will be removed from Vue core
-> in 3.4.
->
-> See reason for deprecation [here](https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028).
-
-## Basic Rules
-
-- Ref-creating APIs have `$`-prefixed versions that create reactive variables instead. They also do not need to be explicitly imported. These include:
-  - `ref`
-  - `computed`
-  - `shallowRef`
-  - `customRef`
-  - `toRef`
-- `$()` can be used to destructure an object into reactive variables, or turn existing refs into reactive variables
-- `$$()` to "escape" the transform, which allows access to underlying refs
-
-```js
-import { watchEffect } from 'vue'
-
-// bind ref as a variable
-let count = $ref(0)
-
-watchEffect(() => {
-  // no need for .value
-  console.log(count)
-})
-
-// assignments are reactive
-count++
-
-// get the actual ref
-console.log($$(count)) // { value: 1 }
-```
-
-Macros can be optionally imported to make it more explicit:
-
-```js
-// not necessary, but also works
-import { $, $ref } from 'vue/macros'
-
-let count = $ref(0)
-const { x, y } = $(useMouse())
-```
-
-### Global Types
-
-To enable types for the macros globally, include the following in a `.d.ts` file:
-
-```ts
-/// <reference types="vue/macros-global" />
-```
-
-## API
-
-This package is the lower-level transform that can be used standalone. Higher-level tooling (e.g. `@vitejs/plugin-vue` and `vue-loader`) will provide integration via options.
-
-### `shouldTransform`
-
-Can be used to do a cheap check to determine whether full transform should be performed.
-
-```js
-import { shouldTransform } from '@vue/reactivity-transform'
-
-shouldTransform(`let a = ref(0)`) // false
-shouldTransform(`let a = $ref(0)`) // true
-```
-
-### `transform`
-
-```js
-import { transform } from '@vue/reactivity-transform'
-
-const src = `let a = $ref(0); a++`
-const {
-  code, // import { ref as _ref } from 'vue'; let a = (ref(0)); a.value++"
-  map
-} = transform(src, {
-  filename: 'foo.ts',
-  sourceMap: true,
-
-  // @babel/parser plugins to enable.
-  // 'typescript' and 'jsx' will be auto-inferred from filename if provided,
-  // so in most cases explicit parserPlugins are not necessary
-  parserPlugins: [
-    /* ... */
-  ]
-})
-```
-
-**Options**
-
-```ts
-interface RefTransformOptions {
-  filename?: string
-  sourceMap?: boolean // default: false
-  parserPlugins?: ParserPlugin[]
-  importHelpersFrom?: string // default: "vue"
-}
-```
-
-### `transformAST`
-
-Transform with an existing Babel AST + MagicString instance. This is used internally by `@vue/compiler-sfc` to avoid double parse/transform cost.
-
-```js
-import { transformAST } from '@vue/reactivity-transform'
-import { parse } from '@babel/parser'
-import MagicString from 'magic-string'
-
-const src = `let a = $ref(0); a++`
-const ast = parse(src, { sourceType: 'module' })
-const s = new MagicString(src)
-
-const {
-  rootRefs, // ['a']
-  importedHelpers // ['ref']
-} = transformAST(ast, s)
-
-console.log(s.toString()) // let a = _ref(0); a.value++
-```
diff --git a/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap b/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap
deleted file mode 100644
index 3c3f85244cc..00000000000
--- a/packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap
+++ /dev/null
@@ -1,292 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`$ unwrapping 1`] = `
-"
-    import { ref, shallowRef } from 'vue'
-    let foo = (ref())
-    export let a = (ref(1))
-    let b = (shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    label: var e = (ref())
-    "
-`;
-
-exports[`$$ 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    const b = (a)
-    const c = ({ a })
-    callExternal((a))
-    "
-`;
-
-exports[`$$ with some edge cases 1`] = `
-"import { ref as _ref } from 'vue'
-
-    ;(  /* 2 */ count /* 2 */   )
-    ;(   count /* 2 */, /**/ a   )
-    ;(   (count /* 2 */, /**/ a) /**/   )
-    {
-      a:(count,a)
-    }
-    ;((count) + 1)
-    ;([count])
-    ; (count )
-    console.log(((a)))
-    ;(a,b)
-    ;(((a++,b)))
-    count = ( a++ ,b)
-    count = ()=>(a++,b)
-    let r1 = _ref(a, (a++,b))
-    let r2 = { a:(a++,b),b: (a) }
-    switch((c)){
-      case d:
-        ;(a)
-        ;((h,f))
-        break
-    }
-    ((count++,(count),(count,a)))
-    "
-`;
-
-exports[`$computed declaration 1`] = `
-"import { computed as _computed } from 'vue'
-
-    let a = _computed(() => 1)
-    "
-`;
-
-exports[`$ref & $shallowRef declarations 1`] = `
-"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
-
-    let foo = _ref()
-    export let a = _ref(1)
-    let b = _shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    label: var e = _ref()
-    "
-`;
-
-exports[`accessing ref binding 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    console.log(a.value)
-    function get() {
-      return a.value + 1
-    }
-    "
-`;
-
-exports[`array destructure 1`] = `
-"import { ref as _ref, toRef as _toRef } from 'vue'
-
-    let n = _ref(1), __$temp_1 = (useFoo()),
-  a = _toRef(__$temp_1, 0),
-  b = _toRef(__$temp_1, 1, 1);
-    console.log(n.value, a.value, b.value)
-    "
-`;
-
-exports[`handle TS casting syntax 1`] = `
-"import { ref as _ref } from 'vue'
-
-      let a = _ref(1)
-      console.log(a.value!)
-      console.log(a.value! + 1)
-      console.log(a.value as number)
-      console.log((a.value as number) + 1)
-      console.log(<number>a.value)
-      console.log(<number>a.value + 1)
-      console.log(a.value! + (a.value as number))
-      console.log(a.value! + <number>a.value)
-      console.log((a.value as number) + <number>a.value)
-      "
-`;
-
-exports[`macro import alias and removal 1`] = `
-"import { ref as _ref, toRef as _toRef } from 'vue'
-
-    
-
-    let a = _ref(1)
-    const __$temp_1 = (useMouse()),
-  x = _toRef(__$temp_1, 'x'),
-  y = _toRef(__$temp_1, 'y');
-    "
-`;
-
-exports[`mixing $ref & $computed declarations 1`] = `
-"import { ref as _ref, computed as _computed } from 'vue'
-
-    let a = _ref(1), b = _computed(() => a.value + 1)
-    "
-`;
-
-exports[`multi $ref declarations 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1), b = _ref(2), c = _ref({
-      count: 0
-    })
-    "
-`;
-
-exports[`mutating ref binding 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    let b = _ref({ count: 0 })
-    function inc() {
-      a.value++
-      a.value = a.value + 1
-      b.value.count++
-      b.value.count = b.value.count + 1
-      ;({ a: a.value } = { a: 2 })
-      ;[a.value] = [1]
-    }
-    "
-`;
-
-exports[`nested destructure 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-    let __$temp_1 = (useFoo()),
-  b = _toRef(__$temp_1[0].a, 'b');
-    let __$temp_2 = (useBar()),
-  d = _toRef(__$temp_2.c, 0),
-  e = _toRef(__$temp_2.c, 1);
-    console.log(b.value, d.value, e.value)
-    "
-`;
-
-exports[`nested scopes 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(0)
-    let b = _ref(0)
-    let c = 0
-
-    a.value++ // outer a
-    b.value++ // outer b
-    c++ // outer c
-
-    let bar = _ref(0)
-    bar.value++ // outer bar
-
-    function foo({ a }) {
-      a++ // inner a
-      b.value++ // inner b
-      let c = _ref(0)
-      c.value++ // inner c
-      let d = _ref(0)
-
-      function bar(c) {
-        c++ // nested c
-        d.value++ // nested d
-      }
-      bar() // inner bar
-
-      if (true) {
-        let a = _ref(0)
-        a.value++ // if block a
-      }
-
-      return ({ a, b, c, d })
-    }
-    "
-`;
-
-exports[`object destructure 1`] = `
-"import { ref as _ref, toRef as _toRef } from 'vue'
-
-    let n = _ref(1), __$temp_1 = (useFoo()),
-  a = _toRef(__$temp_1, 'a'),
-  c = _toRef(__$temp_1, 'b'),
-  d = _toRef(__$temp_1, 'd', 1),
-  f = _toRef(__$temp_1, 'e', 2),
-  h = _toRef(__$temp_1, g);
-    let __$temp_2 = (useSomething(() => 1)),
-  foo = _toRef(__$temp_2, 'foo');;
-    console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
-    "
-`;
-
-exports[`object destructure w/ mid-path default values 1`] = `
-"import { toRef as _toRef } from 'vue'
-
-    const __$temp_1 = (useFoo()),
-  b = _toRef((__$temp_1.a || { b: 123 }), 'b');
-    console.log(b.value)
-  "
-`;
-
-exports[`should not overwrite current scope 1`] = `
-"
-    const fn = () => {
-      const $ = () => 'foo'
-      const $ref = () => 'bar'
-      const $$ = () => 'baz'
-      console.log($())
-      console.log($ref())
-      console.log($$())
-    }
-    "
-`;
-
-exports[`should not overwrite importing 1`] = `
-"
-    import { $, $$ } from './foo'
-    $('foo')
-    $$('bar')
-    "
-`;
-
-exports[`should not rewrite scope variable 1`] = `
-"import { ref as _ref } from 'vue'
-
-
-      let a = _ref(1)
-      let b = _ref(1)
-      let d = _ref(1)
-      const e = 1
-      function test() {
-        const a = 2
-        console.log(a)
-        console.log(b.value)
-        let c = { c: 3 }
-        console.log(c)
-        console.log(d.value)
-        console.log(e)
-      }
-      let err = _ref(null)
-      try {
-      } catch (err) {
-        console.log(err)
-      }
-    "
-`;
-
-exports[`should not rewrite type identifiers 1`] = `
-"import { ref as _ref } from 'vue'
-const props = defineProps<{msg: string; ids?: string[]}>()
-        let ids = _ref([])"
-`;
-
-exports[`using ref binding in property shorthand 1`] = `
-"import { ref as _ref } from 'vue'
-
-    let a = _ref(1)
-    const b = { a: a.value }
-    function test() {
-      const { a } = b
-    }
-    "
-`;
diff --git a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts b/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts
deleted file mode 100644
index 5255be6ba8b..00000000000
--- a/packages/reactivity-transform/__tests__/reactivityTransform.spec.ts
+++ /dev/null
@@ -1,564 +0,0 @@
-import { parse } from '@babel/parser'
-import { transform } from '../src'
-
-function assertCode(code: string) {
-  // parse the generated code to make sure it is valid
-  try {
-    parse(code, {
-      sourceType: 'module',
-      plugins: ['typescript']
-    })
-  } catch (e: any) {
-    console.log(code)
-    throw e
-  }
-  expect(code).toMatchSnapshot()
-}
-
-test('$ unwrapping', () => {
-  const { code, rootRefs } = transform(`
-    import { ref, shallowRef } from 'vue'
-    let foo = $(ref())
-    export let a = $(ref(1))
-    let b = $(shallowRef({
-      count: 0
-    }))
-    let c = () => {}
-    let d
-    label: var e = $(ref())
-    `)
-  expect(code).not.toMatch(`$(ref())`)
-  expect(code).not.toMatch(`$(ref(1))`)
-  expect(code).not.toMatch(`$(shallowRef({`)
-  expect(code).toMatch(`let foo = (ref())`)
-  expect(code).toMatch(`export let a = (ref(1))`)
-  expect(code).toMatch(`
-    let b = (shallowRef({
-      count: 0
-    }))
-    `)
-  // normal declarations left untouched
-  expect(code).toMatch(`let c = () => {}`)
-  expect(code).toMatch(`let d`)
-  expect(code).toMatch(`label: var e = (ref())`)
-  expect(rootRefs).toStrictEqual(['foo', 'a', 'b', 'e'])
-  assertCode(code)
-})
-
-test('$ref & $shallowRef declarations', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let foo = $ref()
-    export let a = $ref(1)
-    let b = $shallowRef({
-      count: 0
-    })
-    let c = () => {}
-    let d
-    label: var e = $ref()
-    `)
-  expect(code).toMatch(
-    `import { ref as _ref, shallowRef as _shallowRef } from 'vue'`
-  )
-  expect(code).not.toMatch(`$ref()`)
-  expect(code).not.toMatch(`$ref(1)`)
-  expect(code).not.toMatch(`$shallowRef({`)
-  expect(code).toMatch(`let foo = _ref()`)
-  expect(code).toMatch(`let a = _ref(1)`)
-  expect(code).toMatch(`
-    let b = _shallowRef({
-      count: 0
-    })
-    `)
-  // normal declarations left untouched
-  expect(code).toMatch(`let c = () => {}`)
-  expect(code).toMatch(`let d`)
-  expect(code).toMatch(`label: var e = _ref()`)
-  expect(rootRefs).toStrictEqual(['foo', 'a', 'b', 'e'])
-  expect(importedHelpers).toStrictEqual(['ref', 'shallowRef'])
-  assertCode(code)
-})
-
-test('multi $ref declarations', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let a = $ref(1), b = $ref(2), c = $ref({
-      count: 0
-    })
-    `)
-  expect(code).toMatch(`
-    let a = _ref(1), b = _ref(2), c = _ref({
-      count: 0
-    })
-    `)
-  expect(rootRefs).toStrictEqual(['a', 'b', 'c'])
-  expect(importedHelpers).toStrictEqual(['ref'])
-  assertCode(code)
-})
-
-test('$computed declaration', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let a = $computed(() => 1)
-    `)
-  expect(code).toMatch(`
-    let a = _computed(() => 1)
-    `)
-  expect(rootRefs).toStrictEqual(['a'])
-  expect(importedHelpers).toStrictEqual(['computed'])
-  assertCode(code)
-})
-
-test('mixing $ref & $computed declarations', () => {
-  const { code, rootRefs, importedHelpers } = transform(`
-    let a = $ref(1), b = $computed(() => a + 1)
-    `)
-  expect(code).toMatch(`
-    let a = _ref(1), b = _computed(() => a.value + 1)
-    `)
-  expect(rootRefs).toStrictEqual(['a', 'b'])
-  expect(importedHelpers).toStrictEqual(['ref', 'computed'])
-  assertCode(code)
-})
-
-test('accessing ref binding', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    console.log(a)
-    function get() {
-      return a + 1
-    }
-    `)
-  expect(code).toMatch(`console.log(a.value)`)
-  expect(code).toMatch(`return a.value + 1`)
-  assertCode(code)
-})
-
-describe('cases that should not append .value', () => {
-  test('member expression', () => {
-    const { code } = transform(`
-      let a = $ref(1)
-      console.log(b.a)
-      `)
-    expect(code).not.toMatch(`a.value`)
-  })
-
-  test('function argument', () => {
-    const { code } = transform(`
-      let a = $ref(1)
-      function get(a) {
-        return a + 1
-      }
-      function get2({ a }) {
-        return a + 1
-      }
-      function get3([a]) {
-        return a + 1
-      }
-      `)
-    expect(code).not.toMatch(`a.value`)
-  })
-
-  test('for in/of loops', () => {
-    const { code } = transform(`
-    let a = $ref(1)
-    for (const [a, b] of arr) {
-      console.log(a)
-    }
-    for (let a in arr) {
-      console.log(a)
-    }
-    `)
-    expect(code).not.toMatch(`a.value`)
-  })
-})
-
-test('mutating ref binding', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    let b = $ref({ count: 0 })
-    function inc() {
-      a++
-      a = a + 1
-      b.count++
-      b.count = b.count + 1
-      ;({ a } = { a: 2 })
-      ;[a] = [1]
-    }
-    `)
-  expect(code).toMatch(`a.value++`)
-  expect(code).toMatch(`a.value = a.value + 1`)
-  expect(code).toMatch(`b.value.count++`)
-  expect(code).toMatch(`b.value.count = b.value.count + 1`)
-  expect(code).toMatch(`;({ a: a.value } = { a: 2 })`)
-  expect(code).toMatch(`;[a.value] = [1]`)
-  assertCode(code)
-})
-
-test('using ref binding in property shorthand', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    const b = { a }
-    function test() {
-      const { a } = b
-    }
-    `)
-  expect(code).toMatch(`const b = { a: a.value }`)
-  // should not convert destructure
-  expect(code).toMatch(`const { a } = b`)
-  assertCode(code)
-})
-
-test('should not rewrite scope variable', () => {
-  const { code } = transform(`
-
-      let a = $ref(1)
-      let b = $ref(1)
-      let d = $ref(1)
-      const e = 1
-      function test() {
-        const a = 2
-        console.log(a)
-        console.log(b)
-        let c = { c: 3 }
-        console.log(c)
-        console.log(d)
-        console.log(e)
-      }
-      let err = $ref(null)
-      try {
-      } catch (err) {
-        console.log(err)
-      }
-    `)
-  expect(code).toMatch('console.log(a)')
-  expect(code).toMatch('console.log(b.value)')
-  expect(code).toMatch('console.log(c)')
-  expect(code).toMatch('console.log(d.value)')
-  expect(code).toMatch('console.log(e)')
-  expect(code).toMatch('console.log(err)')
-  assertCode(code)
-})
-
-test('object destructure', () => {
-  const { code, rootRefs } = transform(`
-    let n = $ref(1), { a, b: c, d = 1, e: f = 2, [g]: h } = $(useFoo())
-    let { foo } = $(useSomething(() => 1));
-    console.log(n, a, c, d, f, h, foo)
-    `)
-  expect(code).toMatch(`a = _toRef(__$temp_1, 'a')`)
-  expect(code).toMatch(`c = _toRef(__$temp_1, 'b')`)
-  expect(code).toMatch(`d = _toRef(__$temp_1, 'd', 1)`)
-  expect(code).toMatch(`f = _toRef(__$temp_1, 'e', 2)`)
-  expect(code).toMatch(`h = _toRef(__$temp_1, g)`)
-  expect(code).toMatch(`foo = _toRef(__$temp_2, 'foo')`)
-  expect(code).toMatch(
-    `console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)`
-  )
-  expect(rootRefs).toStrictEqual(['n', 'a', 'c', 'd', 'f', 'h', 'foo'])
-  assertCode(code)
-})
-
-test('object destructure w/ mid-path default values', () => {
-  const { code, rootRefs } = transform(`
-    const { a: { b } = { b: 123 }} = $(useFoo())
-    console.log(b)
-  `)
-  expect(code).toMatch(`b = _toRef((__$temp_1.a || { b: 123 }), 'b')`)
-  expect(code).toMatch(`console.log(b.value)`)
-  expect(rootRefs).toStrictEqual(['b'])
-  assertCode(code)
-})
-
-test('array destructure', () => {
-  const { code, rootRefs } = transform(`
-    let n = $ref(1), [a, b = 1] = $(useFoo())
-    console.log(n, a, b)
-    `)
-  expect(code).toMatch(`a = _toRef(__$temp_1, 0)`)
-  expect(code).toMatch(`b = _toRef(__$temp_1, 1, 1)`)
-  expect(code).toMatch(`console.log(n.value, a.value, b.value)`)
-  expect(rootRefs).toStrictEqual(['n', 'a', 'b'])
-  assertCode(code)
-})
-
-test('nested destructure', () => {
-  const { code, rootRefs } = transform(`
-    let [{ a: { b }}] = $(useFoo())
-    let { c: [d, e] } = $(useBar())
-    console.log(b, d, e)
-    `)
-  expect(code).toMatch(`b = _toRef(__$temp_1[0].a, 'b')`)
-  expect(code).toMatch(`d = _toRef(__$temp_2.c, 0)`)
-  expect(code).toMatch(`e = _toRef(__$temp_2.c, 1)`)
-  expect(rootRefs).toStrictEqual(['b', 'd', 'e'])
-  assertCode(code)
-})
-
-test('$$', () => {
-  const { code } = transform(`
-    let a = $ref(1)
-    const b = $$(a)
-    const c = $$({ a })
-    callExternal($$(a))
-    `)
-  expect(code).toMatch(`const b = (a)`)
-  expect(code).toMatch(`const c = ({ a })`)
-  expect(code).toMatch(`callExternal((a))`)
-  assertCode(code)
-})
-
-test('$$ with some edge cases', () => {
-  const { code } = transform(`
-    $$(  /* 2 */ count /* 2 */   )
-    $$(   count /* 2 */, /**/ a   )
-    $$(   (count /* 2 */, /**/ a) /**/   )
-    {
-      a:$$(count,a)
-    }
-    $$((count) + 1)
-    $$([count])
-    $$ (count )
-    console.log($$($$(a)))
-    $$(a,b)
-    $$($$((a++,b)))
-    count = $$( a++ ,b)
-    count = ()=>$$(a++,b)
-    let r1 = $ref(a, $$(a++,b))
-    let r2 = { a:$$(a++,b),b:$$ (a) }
-    switch($$(c)){
-      case d:
-        $$(a)
-        $$($$(h,f))
-        break
-    }
-    ($$(count++,$$(count),$$(count,a)))
-    `)
-  expect(code).toMatch(`/* 2 */ count /* 2 */`)
-  expect(code).toMatch(`;(   count /* 2 */, /**/ a   )`)
-  expect(code).toMatch(`;(   (count /* 2 */, /**/ a) /**/   )`)
-  expect(code).toMatch(`a:(count,a)`)
-  expect(code).toMatch(`;((count) + 1)`)
-  expect(code).toMatch(`;([count])`)
-  expect(code).toMatch(`;(a,b)`)
-  expect(code).toMatch(`log(((a)))`)
-  expect(code).toMatch(`count = ( a++ ,b)`)
-  expect(code).toMatch(`()=>(a++,b)`)
-  expect(code).toMatch(`_ref(a, (a++,b))`)
-  expect(code).toMatch(`{ a:(a++,b),b: (a) }`)
-  expect(code).toMatch(`switch((c))`)
-  expect(code).toMatch(`;((h,f))`)
-  expect(code).toMatch(`((count++,(count),(count,a)))`)
-  assertCode(code)
-})
-
-test('nested scopes', () => {
-  const { code, rootRefs } = transform(`
-    let a = $ref(0)
-    let b = $ref(0)
-    let c = 0
-
-    a++ // outer a
-    b++ // outer b
-    c++ // outer c
-
-    let bar = $ref(0)
-    bar++ // outer bar
-
-    function foo({ a }) {
-      a++ // inner a
-      b++ // inner b
-      let c = $ref(0)
-      c++ // inner c
-      let d = $ref(0)
-
-      function bar(c) {
-        c++ // nested c
-        d++ // nested d
-      }
-      bar() // inner bar
-
-      if (true) {
-        let a = $ref(0)
-        a++ // if block a
-      }
-
-      return $$({ a, b, c, d })
-    }
-    `)
-  expect(rootRefs).toStrictEqual(['a', 'b', 'bar'])
-
-  expect(code).toMatch('a.value++ // outer a')
-  expect(code).toMatch('b.value++ // outer b')
-  expect(code).toMatch('c++ // outer c')
-
-  expect(code).toMatch('a++ // inner a') // shadowed by function arg
-  expect(code).toMatch('b.value++ // inner b')
-  expect(code).toMatch('c.value++ // inner c') // shadowed by local ref binding
-
-  expect(code).toMatch('c++ // nested c') // shadowed by inline fn arg
-  expect(code).toMatch(`d.value++ // nested d`)
-
-  expect(code).toMatch(`a.value++ // if block a`) // if block
-
-  expect(code).toMatch(`bar.value++ // outer bar`)
-  // inner bar shadowed by function declaration
-  expect(code).toMatch(`bar() // inner bar`)
-
-  expect(code).toMatch(`return ({ a, b, c, d })`)
-  assertCode(code)
-})
-
-//#4062
-test('should not rewrite type identifiers', () => {
-  const { code } = transform(
-    `const props = defineProps<{msg: string; ids?: string[]}>()
-        let ids = $ref([])`,
-    {
-      parserPlugins: ['typescript']
-    }
-  )
-  expect(code).not.toMatch('.value')
-  assertCode(code)
-})
-
-// #4254
-test('handle TS casting syntax', () => {
-  const { code } = transform(
-    `
-      let a = $ref(1)
-      console.log(a!)
-      console.log(a! + 1)
-      console.log(a as number)
-      console.log((a as number) + 1)
-      console.log(<number>a)
-      console.log(<number>a + 1)
-      console.log(a! + (a as number))
-      console.log(a! + <number>a)
-      console.log((a as number) + <number>a)
-      `,
-    {
-      parserPlugins: ['typescript']
-    }
-  )
-  expect(code).toMatch('console.log(a.value!)')
-  expect(code).toMatch('console.log(a.value as number)')
-  expect(code).toMatch('console.log(<number>a.value)')
-  assertCode(code)
-})
-
-test('macro import alias and removal', () => {
-  const { code } = transform(
-    `
-    import { $ as fromRefs, $ref } from 'vue/macros'
-
-    let a = $ref(1)
-    const { x, y } = fromRefs(useMouse())
-    `
-  )
-  // should remove imports
-  expect(code).not.toMatch(`from 'vue/macros'`)
-  expect(code).toMatch(`let a = _ref(1)`)
-  expect(code).toMatch(`const __$temp_1 = (useMouse())`)
-  assertCode(code)
-})
-
-// #6838
-test('should not overwrite importing', () => {
-  const { code } = transform(
-    `
-    import { $, $$ } from './foo'
-    $('foo')
-    $$('bar')
-    `
-  )
-  assertCode(code)
-})
-
-// #6838
-test('should not overwrite current scope', () => {
-  const { code } = transform(
-    `
-    const fn = () => {
-      const $ = () => 'foo'
-      const $ref = () => 'bar'
-      const $$ = () => 'baz'
-      console.log($())
-      console.log($ref())
-      console.log($$())
-    }
-    `
-  )
-  assertCode(code)
-})
-
-describe('errors', () => {
-  test('$ref w/ destructure', () => {
-    expect(() => transform(`let { a } = $ref(1)`)).toThrow(
-      `cannot be used with destructure`
-    )
-  })
-
-  test('$computed w/ destructure', () => {
-    expect(() => transform(`let { a } = $computed(() => 1)`)).toThrow(
-      `cannot be used with destructure`
-    )
-  })
-
-  test('warn usage in non-init positions', () => {
-    expect(() =>
-      transform(
-        `let bar = $ref(1)
-          bar = $ref(2)`
-      )
-    ).toThrow(`$ref can only be used as the initializer`)
-
-    expect(() => transform(`let bar = { foo: $computed(1) }`)).toThrow(
-      `$computed can only be used as the initializer`
-    )
-  })
-
-  test('not transform the prototype attributes', () => {
-    const { code } = transform(`
-    const hasOwnProperty = Object.prototype.hasOwnProperty
-    const hasOwn = (val, key) => hasOwnProperty.call(val, key)
-    `)
-    expect(code).not.toMatch('.value')
-  })
-
-  test('rest element in $() destructure', () => {
-    expect(() => transform(`let { a, ...b } = $(foo())`)).toThrow(
-      `does not support rest element`
-    )
-    expect(() => transform(`let [a, ...b] = $(foo())`)).toThrow(
-      `does not support rest element`
-    )
-  })
-
-  test('assignment to constant variable', () => {
-    expect(() =>
-      transform(`
-        const foo = $ref(0)
-        foo = 1
-      `)
-    ).toThrow(`Assignment to constant variable.`)
-
-    expect(() =>
-      transform(`
-        const [a, b] = $([1, 2])
-        a = 1
-      `)
-    ).toThrow(`Assignment to constant variable.`)
-
-    expect(() =>
-      transform(`
-        const foo = $ref(0)
-        foo++
-      `)
-    ).toThrow(`Assignment to constant variable.`)
-
-    expect(() =>
-      transform(`
-      const foo = $ref(0)
-      bar = foo
-      `)
-    ).not.toThrow()
-  })
-})
diff --git a/packages/reactivity-transform/package.json b/packages/reactivity-transform/package.json
deleted file mode 100644
index ef884997ad0..00000000000
--- a/packages/reactivity-transform/package.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "name": "@vue/reactivity-transform",
-  "version": "3.3.5",
-  "description": "@vue/reactivity-transform",
-  "main": "dist/reactivity-transform.cjs.js",
-  "files": [
-    "dist"
-  ],
-  "buildOptions": {
-    "formats": [
-      "cjs"
-    ],
-    "prod": false
-  },
-  "types": "dist/reactivity-transform.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vuejs/core.git",
-    "directory": "packages/reactivity-transform"
-  },
-  "keywords": [
-    "vue"
-  ],
-  "author": "Evan You",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vuejs/core/issues"
-  },
-  "homepage": "https://github.com/vuejs/core/tree/dev/packages/reactivity-transform#readme",
-  "dependencies": {
-    "@babel/parser": "^7.23.0",
-    "@vue/compiler-core": "3.3.5",
-    "@vue/shared": "3.3.5",
-    "estree-walker": "^2.0.2",
-    "magic-string": "^0.30.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/types": "^7.23.0"
-  }
-}
diff --git a/packages/reactivity-transform/src/babelPlugin.ts b/packages/reactivity-transform/src/babelPlugin.ts
deleted file mode 100644
index 757ad9c1f28..00000000000
--- a/packages/reactivity-transform/src/babelPlugin.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function plugin() {
-  // TODO
-}
diff --git a/packages/reactivity-transform/src/index.ts b/packages/reactivity-transform/src/index.ts
deleted file mode 100644
index 0a4d85f00fc..00000000000
--- a/packages/reactivity-transform/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './reactivityTransform'
diff --git a/packages/reactivity-transform/src/reactivityTransform.ts b/packages/reactivity-transform/src/reactivityTransform.ts
deleted file mode 100644
index 855dfbb1897..00000000000
--- a/packages/reactivity-transform/src/reactivityTransform.ts
+++ /dev/null
@@ -1,794 +0,0 @@
-import {
-  Node,
-  Identifier,
-  BlockStatement,
-  CallExpression,
-  ObjectPattern,
-  ArrayPattern,
-  Program,
-  VariableDeclarator,
-  Expression,
-  VariableDeclaration,
-  ImportDeclaration,
-  ImportSpecifier,
-  ImportDefaultSpecifier,
-  ImportNamespaceSpecifier
-} from '@babel/types'
-import MagicString, { SourceMap } from 'magic-string'
-import { walk } from 'estree-walker'
-import {
-  extractIdentifiers,
-  isFunctionType,
-  isInDestructureAssignment,
-  isReferencedIdentifier,
-  isStaticProperty,
-  walkFunctionParams
-} from '@vue/compiler-core'
-import { parse, ParserPlugin } from '@babel/parser'
-import { hasOwn, isArray, isString, genPropsAccessExp } from '@vue/shared'
-
-const CONVERT_SYMBOL = '$'
-const ESCAPE_SYMBOL = '$$'
-const IMPORT_SOURCE = 'vue/macros'
-const shorthands = ['ref', 'computed', 'shallowRef', 'toRef', 'customRef']
-const transformCheckRE = /[^\w]\$(?:\$|ref|computed|shallowRef)?\s*(\(|\<)/
-
-/**
- * @deprecated will be removed in 3.4
- */
-export function shouldTransform(src: string): boolean {
-  return transformCheckRE.test(src)
-}
-
-interface Binding {
-  isConst?: boolean
-  isProp?: boolean
-}
-type Scope = Record<string, Binding | false>
-
-export interface RefTransformOptions {
-  filename?: string
-  sourceMap?: boolean
-  parserPlugins?: ParserPlugin[]
-  importHelpersFrom?: string
-}
-
-export interface RefTransformResults {
-  code: string
-  map: SourceMap | null
-  rootRefs: string[]
-  importedHelpers: string[]
-}
-
-export interface ImportBinding {
-  local: string
-  imported: string
-  source: string
-  specifier: ImportSpecifier | ImportDefaultSpecifier | ImportNamespaceSpecifier
-}
-
-/**
- * @deprecated will be removed in 3.4
- */
-export function transform(
-  src: string,
-  {
-    filename,
-    sourceMap,
-    parserPlugins,
-    importHelpersFrom = 'vue'
-  }: RefTransformOptions = {}
-): RefTransformResults {
-  const plugins: ParserPlugin[] = parserPlugins || []
-  if (filename) {
-    if (/\.tsx?$/.test(filename)) {
-      plugins.push('typescript')
-    }
-    if (filename.endsWith('x')) {
-      plugins.push('jsx')
-    }
-  }
-
-  const ast = parse(src, {
-    sourceType: 'module',
-    plugins
-  })
-  const s = new MagicString(src)
-  const res = transformAST(ast.program, s, 0)
-
-  // inject helper imports
-  if (res.importedHelpers.length) {
-    s.prepend(
-      `import { ${res.importedHelpers
-        .map(h => `${h} as _${h}`)
-        .join(', ')} } from '${importHelpersFrom}'\n`
-    )
-  }
-
-  return {
-    ...res,
-    code: s.toString(),
-    map: sourceMap
-      ? s.generateMap({
-          source: filename,
-          hires: true,
-          includeContent: true
-        })
-      : null
-  }
-}
-
-/**
- * @deprecated will be removed in 3.4
- */
-export function transformAST(
-  ast: Program,
-  s: MagicString,
-  offset = 0,
-  knownRefs?: string[],
-  knownProps?: Record<
-    string, // public prop key
-    {
-      local: string // local identifier, may be different
-      default?: any
-      isConst?: boolean
-    }
-  >
-): {
-  rootRefs: string[]
-  importedHelpers: string[]
-} {
-  warnExperimental()
-
-  const userImports: Record<string, ImportBinding> = Object.create(null)
-  for (const node of ast.body) {
-    if (node.type !== 'ImportDeclaration') continue
-    walkImportDeclaration(node)
-  }
-
-  // macro import handling
-  let convertSymbol: string | undefined
-  let escapeSymbol: string | undefined
-  for (const { local, imported, source, specifier } of Object.values(
-    userImports
-  )) {
-    if (source === IMPORT_SOURCE) {
-      if (imported === ESCAPE_SYMBOL) {
-        escapeSymbol = local
-      } else if (imported === CONVERT_SYMBOL) {
-        convertSymbol = local
-      } else if (imported !== local) {
-        error(
-          `macro imports for ref-creating methods do not support aliasing.`,
-          specifier
-        )
-      }
-    }
-  }
-
-  // default symbol
-  if (!convertSymbol && !userImports[CONVERT_SYMBOL]) {
-    convertSymbol = CONVERT_SYMBOL
-  }
-  if (!escapeSymbol && !userImports[ESCAPE_SYMBOL]) {
-    escapeSymbol = ESCAPE_SYMBOL
-  }
-
-  const importedHelpers = new Set<string>()
-  const rootScope: Scope = {}
-  const scopeStack: Scope[] = [rootScope]
-  let currentScope: Scope = rootScope
-  let escapeScope: CallExpression | undefined // inside $$()
-  const excludedIds = new WeakSet<Identifier>()
-  const parentStack: Node[] = []
-  const propsLocalToPublicMap: Record<string, string> = Object.create(null)
-
-  if (knownRefs) {
-    for (const key of knownRefs) {
-      rootScope[key] = {}
-    }
-  }
-  if (knownProps) {
-    for (const key in knownProps) {
-      const { local, isConst } = knownProps[key]
-      rootScope[local] = {
-        isProp: true,
-        isConst: !!isConst
-      }
-      propsLocalToPublicMap[local] = key
-    }
-  }
-
-  function walkImportDeclaration(node: ImportDeclaration) {
-    const source = node.source.value
-    if (source === IMPORT_SOURCE) {
-      s.remove(node.start! + offset, node.end! + offset)
-    }
-
-    for (const specifier of node.specifiers) {
-      const local = specifier.local.name
-      const imported =
-        (specifier.type === 'ImportSpecifier' &&
-          specifier.imported.type === 'Identifier' &&
-          specifier.imported.name) ||
-        'default'
-      userImports[local] = {
-        source,
-        local,
-        imported,
-        specifier
-      }
-    }
-  }
-
-  function isRefCreationCall(callee: string): string | false {
-    if (!convertSymbol || currentScope[convertSymbol] !== undefined) {
-      return false
-    }
-    if (callee === convertSymbol) {
-      return convertSymbol
-    }
-    if (callee[0] === '$' && shorthands.includes(callee.slice(1))) {
-      return callee
-    }
-    return false
-  }
-
-  function error(msg: string, node: Node): never {
-    const e = new Error(msg)
-    ;(e as any).node = node
-    throw e
-  }
-
-  function helper(msg: string) {
-    importedHelpers.add(msg)
-    return `_${msg}`
-  }
-
-  function registerBinding(id: Identifier, binding?: Binding) {
-    excludedIds.add(id)
-    if (currentScope) {
-      currentScope[id.name] = binding ? binding : false
-    } else {
-      error(
-        'registerBinding called without active scope, something is wrong.',
-        id
-      )
-    }
-  }
-
-  const registerRefBinding = (id: Identifier, isConst = false) =>
-    registerBinding(id, { isConst })
-
-  let tempVarCount = 0
-  function genTempVar() {
-    return `__$temp_${++tempVarCount}`
-  }
-
-  function snip(node: Node) {
-    return s.original.slice(node.start! + offset, node.end! + offset)
-  }
-
-  function walkScope(node: Program | BlockStatement, isRoot = false) {
-    for (const stmt of node.body) {
-      if (stmt.type === 'VariableDeclaration') {
-        walkVariableDeclaration(stmt, isRoot)
-      } else if (
-        stmt.type === 'FunctionDeclaration' ||
-        stmt.type === 'ClassDeclaration'
-      ) {
-        if (stmt.declare || !stmt.id) continue
-        registerBinding(stmt.id)
-      } else if (
-        (stmt.type === 'ForOfStatement' || stmt.type === 'ForInStatement') &&
-        stmt.left.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.left)
-      } else if (
-        stmt.type === 'ExportNamedDeclaration' &&
-        stmt.declaration &&
-        stmt.declaration.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.declaration, isRoot)
-      } else if (
-        stmt.type === 'LabeledStatement' &&
-        stmt.body.type === 'VariableDeclaration'
-      ) {
-        walkVariableDeclaration(stmt.body, isRoot)
-      }
-    }
-  }
-
-  function walkVariableDeclaration(stmt: VariableDeclaration, isRoot = false) {
-    if (stmt.declare) {
-      return
-    }
-    for (const decl of stmt.declarations) {
-      let refCall
-      const isCall =
-        decl.init &&
-        decl.init.type === 'CallExpression' &&
-        decl.init.callee.type === 'Identifier'
-      if (
-        isCall &&
-        (refCall = isRefCreationCall((decl as any).init.callee.name))
-      ) {
-        processRefDeclaration(
-          refCall,
-          decl.id,
-          decl.init as CallExpression,
-          stmt.kind === 'const'
-        )
-      } else {
-        const isProps =
-          isRoot && isCall && (decl as any).init.callee.name === 'defineProps'
-        for (const id of extractIdentifiers(decl.id)) {
-          if (isProps) {
-            // for defineProps destructure, only exclude them since they
-            // are already passed in as knownProps
-            excludedIds.add(id)
-          } else {
-            registerBinding(id)
-          }
-        }
-      }
-    }
-  }
-
-  function processRefDeclaration(
-    method: string,
-    id: VariableDeclarator['id'],
-    call: CallExpression,
-    isConst: boolean
-  ) {
-    excludedIds.add(call.callee as Identifier)
-    if (method === convertSymbol) {
-      // $
-      // remove macro
-      s.remove(call.callee.start! + offset, call.callee.end! + offset)
-      if (id.type === 'Identifier') {
-        // single variable
-        registerRefBinding(id, isConst)
-      } else if (id.type === 'ObjectPattern') {
-        processRefObjectPattern(id, call, isConst)
-      } else if (id.type === 'ArrayPattern') {
-        processRefArrayPattern(id, call, isConst)
-      }
-    } else {
-      // shorthands
-      if (id.type === 'Identifier') {
-        registerRefBinding(id, isConst)
-        // replace call
-        s.overwrite(
-          call.start! + offset,
-          call.start! + method.length + offset,
-          helper(method.slice(1))
-        )
-      } else {
-        error(`${method}() cannot be used with destructure patterns.`, call)
-      }
-    }
-  }
-
-  function processRefObjectPattern(
-    pattern: ObjectPattern,
-    call: CallExpression,
-    isConst: boolean,
-    tempVar?: string,
-    path: PathSegment[] = []
-  ) {
-    if (!tempVar) {
-      tempVar = genTempVar()
-      // const { x } = $(useFoo()) --> const __$temp_1 = useFoo()
-      s.overwrite(pattern.start! + offset, pattern.end! + offset, tempVar)
-    }
-
-    let nameId: Identifier | undefined
-    for (const p of pattern.properties) {
-      let key: Expression | string | undefined
-      let defaultValue: Expression | undefined
-      if (p.type === 'ObjectProperty') {
-        if (p.key.start! === p.value.start!) {
-          // shorthand { foo }
-          nameId = p.key as Identifier
-          if (p.value.type === 'Identifier') {
-            // avoid shorthand value identifier from being processed
-            excludedIds.add(p.value)
-          } else if (
-            p.value.type === 'AssignmentPattern' &&
-            p.value.left.type === 'Identifier'
-          ) {
-            // { foo = 1 }
-            excludedIds.add(p.value.left)
-            defaultValue = p.value.right
-          }
-        } else {
-          key = p.computed ? (p.key as Expression) : (p.key as Identifier).name
-          if (p.value.type === 'Identifier') {
-            // { foo: bar }
-            nameId = p.value
-          } else if (p.value.type === 'ObjectPattern') {
-            processRefObjectPattern(p.value, call, isConst, tempVar, [
-              ...path,
-              key
-            ])
-          } else if (p.value.type === 'ArrayPattern') {
-            processRefArrayPattern(p.value, call, isConst, tempVar, [
-              ...path,
-              key
-            ])
-          } else if (p.value.type === 'AssignmentPattern') {
-            if (p.value.left.type === 'Identifier') {
-              // { foo: bar = 1 }
-              nameId = p.value.left
-              defaultValue = p.value.right
-            } else if (p.value.left.type === 'ObjectPattern') {
-              processRefObjectPattern(p.value.left, call, isConst, tempVar, [
-                ...path,
-                [key, p.value.right]
-              ])
-            } else if (p.value.left.type === 'ArrayPattern') {
-              processRefArrayPattern(p.value.left, call, isConst, tempVar, [
-                ...path,
-                [key, p.value.right]
-              ])
-            } else {
-              // MemberExpression case is not possible here, ignore
-            }
-          }
-        }
-      } else {
-        // rest element { ...foo }
-        error(`reactivity destructure does not support rest elements.`, p)
-      }
-      if (nameId) {
-        registerRefBinding(nameId, isConst)
-        // inject toRef() after original replaced pattern
-        const source = pathToString(tempVar, path)
-        const keyStr = isString(key)
-          ? `'${key}'`
-          : key
-          ? snip(key)
-          : `'${nameId.name}'`
-        const defaultStr = defaultValue ? `, ${snip(defaultValue)}` : ``
-        s.appendLeft(
-          call.end! + offset,
-          `,\n  ${nameId.name} = ${helper(
-            'toRef'
-          )}(${source}, ${keyStr}${defaultStr})`
-        )
-      }
-    }
-    if (nameId) {
-      s.appendLeft(call.end! + offset, ';')
-    }
-  }
-
-  function processRefArrayPattern(
-    pattern: ArrayPattern,
-    call: CallExpression,
-    isConst: boolean,
-    tempVar?: string,
-    path: PathSegment[] = []
-  ) {
-    if (!tempVar) {
-      // const [x] = $(useFoo()) --> const __$temp_1 = useFoo()
-      tempVar = genTempVar()
-      s.overwrite(pattern.start! + offset, pattern.end! + offset, tempVar)
-    }
-
-    let nameId: Identifier | undefined
-    for (let i = 0; i < pattern.elements.length; i++) {
-      const e = pattern.elements[i]
-      if (!e) continue
-      let defaultValue: Expression | undefined
-      if (e.type === 'Identifier') {
-        // [a] --> [__a]
-        nameId = e
-      } else if (e.type === 'AssignmentPattern') {
-        // [a = 1]
-        nameId = e.left as Identifier
-        defaultValue = e.right
-      } else if (e.type === 'RestElement') {
-        // [...a]
-        error(`reactivity destructure does not support rest elements.`, e)
-      } else if (e.type === 'ObjectPattern') {
-        processRefObjectPattern(e, call, isConst, tempVar, [...path, i])
-      } else if (e.type === 'ArrayPattern') {
-        processRefArrayPattern(e, call, isConst, tempVar, [...path, i])
-      }
-      if (nameId) {
-        registerRefBinding(nameId, isConst)
-        // inject toRef() after original replaced pattern
-        const source = pathToString(tempVar, path)
-        const defaultStr = defaultValue ? `, ${snip(defaultValue)}` : ``
-        s.appendLeft(
-          call.end! + offset,
-          `,\n  ${nameId.name} = ${helper(
-            'toRef'
-          )}(${source}, ${i}${defaultStr})`
-        )
-      }
-    }
-    if (nameId) {
-      s.appendLeft(call.end! + offset, ';')
-    }
-  }
-
-  type PathSegmentAtom = Expression | string | number
-
-  type PathSegment =
-    | PathSegmentAtom
-    | [PathSegmentAtom, Expression /* default value */]
-
-  function pathToString(source: string, path: PathSegment[]): string {
-    if (path.length) {
-      for (const seg of path) {
-        if (isArray(seg)) {
-          source = `(${source}${segToString(seg[0])} || ${snip(seg[1])})`
-        } else {
-          source += segToString(seg)
-        }
-      }
-    }
-    return source
-  }
-
-  function segToString(seg: PathSegmentAtom): string {
-    if (typeof seg === 'number') {
-      return `[${seg}]`
-    } else if (typeof seg === 'string') {
-      return `.${seg}`
-    } else {
-      return snip(seg)
-    }
-  }
-
-  function rewriteId(
-    scope: Scope,
-    id: Identifier,
-    parent: Node,
-    parentStack: Node[]
-  ): boolean {
-    if (hasOwn(scope, id.name)) {
-      const binding = scope[id.name]
-
-      if (binding) {
-        if (
-          binding.isConst &&
-          ((parent.type === 'AssignmentExpression' && id === parent.left) ||
-            parent.type === 'UpdateExpression')
-        ) {
-          error(`Assignment to constant variable.`, id)
-        }
-
-        const { isProp } = binding
-        if (isStaticProperty(parent) && parent.shorthand) {
-          // let binding used in a property shorthand
-          // skip for destructure patterns
-          if (
-            !(parent as any).inPattern ||
-            isInDestructureAssignment(parent, parentStack)
-          ) {
-            if (isProp) {
-              if (escapeScope) {
-                // prop binding in $$()
-                // { prop } -> { prop: __props_prop }
-                registerEscapedPropBinding(id)
-                s.appendLeft(
-                  id.end! + offset,
-                  `: __props_${propsLocalToPublicMap[id.name]}`
-                )
-              } else {
-                // { prop } -> { prop: __props.prop }
-                s.appendLeft(
-                  id.end! + offset,
-                  `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`
-                )
-              }
-            } else {
-              // { foo } -> { foo: foo.value }
-              s.appendLeft(id.end! + offset, `: ${id.name}.value`)
-            }
-          }
-        } else {
-          if (isProp) {
-            if (escapeScope) {
-              // x --> __props_x
-              registerEscapedPropBinding(id)
-              s.overwrite(
-                id.start! + offset,
-                id.end! + offset,
-                `__props_${propsLocalToPublicMap[id.name]}`
-              )
-            } else {
-              // x --> __props.x
-              s.overwrite(
-                id.start! + offset,
-                id.end! + offset,
-                genPropsAccessExp(propsLocalToPublicMap[id.name])
-              )
-            }
-          } else {
-            // x --> x.value
-            s.appendLeft(id.end! + offset, '.value')
-          }
-        }
-      }
-      return true
-    }
-    return false
-  }
-
-  const propBindingRefs: Record<string, true> = {}
-  function registerEscapedPropBinding(id: Identifier) {
-    if (!propBindingRefs.hasOwnProperty(id.name)) {
-      propBindingRefs[id.name] = true
-      const publicKey = propsLocalToPublicMap[id.name]
-      s.prependRight(
-        offset,
-        `const __props_${publicKey} = ${helper(
-          `toRef`
-        )}(__props, '${publicKey}');\n`
-      )
-    }
-  }
-
-  // check root scope first
-  walkScope(ast, true)
-  walk(ast, {
-    enter(node: Node, parent?: Node) {
-      parent && parentStack.push(parent)
-
-      // function scopes
-      if (isFunctionType(node)) {
-        scopeStack.push((currentScope = {}))
-        walkFunctionParams(node, registerBinding)
-        if (node.body.type === 'BlockStatement') {
-          walkScope(node.body)
-        }
-        return
-      }
-
-      // catch param
-      if (node.type === 'CatchClause') {
-        scopeStack.push((currentScope = {}))
-        if (node.param && node.param.type === 'Identifier') {
-          registerBinding(node.param)
-        }
-        walkScope(node.body)
-        return
-      }
-
-      // non-function block scopes
-      if (node.type === 'BlockStatement' && !isFunctionType(parent!)) {
-        scopeStack.push((currentScope = {}))
-        walkScope(node)
-        return
-      }
-
-      // skip type nodes
-      if (
-        parent &&
-        parent.type.startsWith('TS') &&
-        parent.type !== 'TSAsExpression' &&
-        parent.type !== 'TSNonNullExpression' &&
-        parent.type !== 'TSTypeAssertion'
-      ) {
-        return this.skip()
-      }
-
-      if (node.type === 'Identifier') {
-        const binding = rootScope[node.name]
-        if (
-          // if inside $$(), skip unless this is a destructured prop binding
-          !(escapeScope && (!binding || !binding.isProp)) &&
-          isReferencedIdentifier(node, parent!, parentStack) &&
-          !excludedIds.has(node)
-        ) {
-          // walk up the scope chain to check if id should be appended .value
-          let i = scopeStack.length
-          while (i--) {
-            if (rewriteId(scopeStack[i], node, parent!, parentStack)) {
-              return
-            }
-          }
-        }
-      }
-
-      if (node.type === 'CallExpression' && node.callee.type === 'Identifier') {
-        const callee = node.callee.name
-
-        const refCall = isRefCreationCall(callee)
-        if (refCall && (!parent || parent.type !== 'VariableDeclarator')) {
-          return error(
-            `${refCall} can only be used as the initializer of ` +
-              `a variable declaration.`,
-            node
-          )
-        }
-
-        if (
-          escapeSymbol &&
-          currentScope[escapeSymbol] === undefined &&
-          callee === escapeSymbol
-        ) {
-          escapeScope = node
-          s.remove(node.callee.start! + offset, node.callee.end! + offset)
-
-          if (parent?.type === 'ExpressionStatement') {
-            // edge case where the call expression is an expression statement
-            // if its own - prepend semicolon to avoid it being parsed as
-            // function invocation of previous line
-            let i =
-              (node.leadingComments
-                ? node.leadingComments[0].start
-                : node.start)! + offset
-            while (i--) {
-              const char = s.original.charAt(i)
-              if (char === '\n') {
-                // only insert semi if it's actually the first thing after
-                // newline
-                s.prependRight(node.start! + offset, ';')
-                break
-              } else if (!/\s/.test(char)) {
-                break
-              }
-            }
-          }
-        }
-      }
-    },
-    leave(node: Node, parent?: Node) {
-      parent && parentStack.pop()
-      if (
-        (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
-        isFunctionType(node)
-      ) {
-        scopeStack.pop()
-        currentScope = scopeStack[scopeStack.length - 1] || null
-      }
-      if (node === escapeScope) {
-        escapeScope = undefined
-      }
-    }
-  })
-
-  return {
-    rootRefs: Object.keys(rootScope).filter(key => {
-      const binding = rootScope[key]
-      return binding && !binding.isProp
-    }),
-    importedHelpers: [...importedHelpers]
-  }
-}
-
-const hasWarned: Record<string, boolean> = {}
-
-function warnExperimental() {
-  // eslint-disable-next-line
-  if (typeof window !== 'undefined') {
-    return
-  }
-  warnOnce(
-    `Reactivity Transform was an experimental feature and has now been deprecated. ` +
-      `It will be removed from Vue core in 3.4. If you intend to continue using it, ` +
-      `switch to https://vue-macros.sxzz.moe/features/reactivity-transform.html.\n` +
-      `See reason for deprecation here: https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028`
-  )
-}
-
-function warnOnce(msg: string) {
-  const isNodeProd =
-    typeof process !== 'undefined' && process.env.NODE_ENV === 'production'
-  if (!isNodeProd && !__TEST__ && !hasWarned[msg]) {
-    hasWarned[msg] = true
-    warn(msg)
-  }
-}
-
-function warn(msg: string) {
-  console.warn(
-    `\x1b[1m\x1b[33m[@vue/reactivity-transform]\x1b[0m\x1b[33m ${msg}\x1b[0m\n`
-  )
-}
diff --git a/packages/reactivity/__tests__/collections/Map.spec.ts b/packages/reactivity/__tests__/collections/Map.spec.ts
index 0cbe10fc201..a0de8feaf33 100644
--- a/packages/reactivity/__tests__/collections/Map.spec.ts
+++ b/packages/reactivity/__tests__/collections/Map.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, toRaw, isReactive } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   function coverCollectionFn(collection: Map<any, any>, fnName: string) {
@@ -69,7 +69,6 @@ describe('reactivity/collections', () => {
       const map = reactive(new Map())
       effect(() => {
         dummy = 0
-        // eslint-disable-next-line no-unused-vars
         for (let [key, num] of map) {
           key
           dummy += num
@@ -164,7 +163,6 @@ describe('reactivity/collections', () => {
       effect(() => {
         dummy = ''
         dummy2 = 0
-        // eslint-disable-next-line no-unused-vars
         for (let [key, num] of map.entries()) {
           dummy += key
           dummy2 += num
@@ -411,7 +409,7 @@ describe('reactivity/collections', () => {
       const map = reactive(raw)
       map.set(key, 2)
       expect(
-        `Reactive Map contains both the raw and reactive`
+        `Reactive Map contains both the raw and reactive`,
       ).toHaveBeenWarned()
     })
 
diff --git a/packages/reactivity/__tests__/collections/Set.spec.ts b/packages/reactivity/__tests__/collections/Set.spec.ts
index ae74eb476ac..2aeef198256 100644
--- a/packages/reactivity/__tests__/collections/Set.spec.ts
+++ b/packages/reactivity/__tests__/collections/Set.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, isReactive, toRaw } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   function coverCollectionFn(collection: Set<any>, fnName: string) {
@@ -125,7 +125,6 @@ describe('reactivity/collections', () => {
       const set = reactive(new Set<number>())
       effect(() => {
         dummy = 0
-        // eslint-disable-next-line no-unused-vars
         for (let [key, num] of set.entries()) {
           key
           dummy += num
@@ -413,7 +412,7 @@ describe('reactivity/collections', () => {
       const set = reactive(raw)
       set.delete(key)
       expect(
-        `Reactive Set contains both the raw and reactive`
+        `Reactive Set contains both the raw and reactive`,
       ).toHaveBeenWarned()
     })
 
diff --git a/packages/reactivity/__tests__/collections/WeakMap.spec.ts b/packages/reactivity/__tests__/collections/WeakMap.spec.ts
index d7657a9f94c..757808a43f8 100644
--- a/packages/reactivity/__tests__/collections/WeakMap.spec.ts
+++ b/packages/reactivity/__tests__/collections/WeakMap.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, effect, toRaw, isReactive } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('WeakMap', () => {
diff --git a/packages/reactivity/__tests__/collections/WeakSet.spec.ts b/packages/reactivity/__tests__/collections/WeakSet.spec.ts
index 9ec30019756..c9a4b68aaa6 100644
--- a/packages/reactivity/__tests__/collections/WeakSet.spec.ts
+++ b/packages/reactivity/__tests__/collections/WeakSet.spec.ts
@@ -1,4 +1,4 @@
-import { reactive, isReactive, effect, toRaw } from '../../src'
+import { effect, isReactive, reactive, toRaw } from '../../src'
 
 describe('reactivity/collections', () => {
   describe('WeakSet', () => {
diff --git a/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts b/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts
index 11eb002fc88..2f13ea653fb 100644
--- a/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts
+++ b/packages/reactivity/__tests__/collections/shallowReadonly.spec.ts
@@ -14,7 +14,7 @@ describe('reactivity/collections', () => {
 
         sroMap.set(key, {} as any)
         expect(
-          `Set operation on key "[object Object]" failed: target is readonly.`
+          `Set operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -28,7 +28,7 @@ describe('reactivity/collections', () => {
 
         sroMap.get(key)!.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -48,7 +48,7 @@ describe('reactivity/collections', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -57,7 +57,7 @@ describe('reactivity/collections', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -73,7 +73,7 @@ describe('reactivity/collections', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -91,7 +91,7 @@ describe('reactivity/collections', () => {
 
         sroSet.add({} as any)
         expect(
-          `Add operation on key "[object Object]" failed: target is readonly.`
+          `Add operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
     })
@@ -109,12 +109,12 @@ describe('reactivity/collections', () => {
 
       sroSet.add({} as any)
       expect(
-        `Add operation on key "[object Object]" failed: target is readonly.`
+        `Add operation on key "[object Object]" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       values[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -132,7 +132,7 @@ describe('reactivity/collections', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -141,7 +141,7 @@ describe('reactivity/collections', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -157,7 +157,7 @@ describe('reactivity/collections', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
diff --git a/packages/reactivity/__tests__/computed.bench.ts b/packages/reactivity/__tests__/computed.bench.ts
new file mode 100644
index 00000000000..0ffa288ff1e
--- /dev/null
+++ b/packages/reactivity/__tests__/computed.bench.ts
@@ -0,0 +1,126 @@
+import { bench, describe } from 'vitest'
+import { type ComputedRef, type Ref, computed, ref } from '../src/index'
+
+describe('computed', () => {
+  bench('create computed', () => {
+    computed(() => 100)
+  })
+
+  {
+    let i = 0
+    const o = ref(100)
+    bench('write independent ref dep', () => {
+      o.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    computed(() => v.value * 2)
+    let i = 0
+    bench("write ref, don't read computed (never invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    computed(() => {
+      return v.value * 2
+    })
+    let i = 0
+    bench("write ref, don't read computed (never invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    c.value
+    let i = 0
+    bench("write ref, don't read computed (invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const c = computed(() => {
+      return v.value * 2
+    })
+    let i = 0
+    bench('write ref, read computed', () => {
+      v.value = i++
+      c.value
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      computeds.push(c)
+    }
+    let i = 0
+    bench("write ref, don't read 1000 computeds (never invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      c.value
+      computeds.push(c)
+    }
+    let i = 0
+    bench("write ref, don't read 1000 computeds (invoked)", () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    const computeds: ComputedRef<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      const c = computed(() => {
+        return v.value * 2
+      })
+      c.value
+      computeds.push(c)
+    }
+    let i = 0
+    bench('write ref, read 1000 computeds', () => {
+      v.value = i++
+      computeds.forEach(c => c.value)
+    })
+  }
+
+  {
+    const refs: Ref<number>[] = []
+    for (let i = 0, n = 1000; i < n; i++) {
+      refs.push(ref(i))
+    }
+    const c = computed(() => {
+      let total = 0
+      refs.forEach(ref => (total += ref.value))
+      return total
+    })
+    let i = 0
+    const n = refs.length
+    bench('1000 refs, 1 computed', () => {
+      refs[i++ % n].value++
+      c.value
+    })
+  }
+})
diff --git a/packages/reactivity/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts
index c044b5feb35..c9f47720edd 100644
--- a/packages/reactivity/__tests__/computed.spec.ts
+++ b/packages/reactivity/__tests__/computed.spec.ts
@@ -1,16 +1,20 @@
+import { h, nextTick, nodeOps, render, serializeInner } from '@vue/runtime-test'
 import {
+  type DebuggerEvent,
+  ITERATE_KEY,
+  TrackOpTypes,
+  TriggerOpTypes,
+  type WritableComputedRef,
   computed,
-  reactive,
   effect,
-  ref,
-  WritableComputedRef,
   isReadonly,
-  DebuggerEvent,
+  reactive,
+  ref,
+  shallowRef,
   toRaw,
-  TrackOpTypes,
-  ITERATE_KEY,
-  TriggerOpTypes
 } from '../src'
+import { DirtyLevels } from '../src/constants'
+import { COMPUTED_SIDE_EFFECT_WARN } from '../src/computed'
 
 describe('reactivity/computed', () => {
   it('should return updated value', () => {
@@ -140,7 +144,7 @@ describe('reactivity/computed', () => {
       get: () => n.value + 1,
       set: val => {
         n.value = val - 1
-      }
+      },
     })
 
     expect(plusOne.value).toBe(2)
@@ -157,7 +161,7 @@ describe('reactivity/computed', () => {
       get: () => n.value + 1,
       set: val => {
         n.value = val - 1
-      }
+      },
     })
 
     let dummy
@@ -184,7 +188,7 @@ describe('reactivity/computed', () => {
     // mutate n
     n.value++
     // on the 2nd run, plusOne.value should have already updated.
-    expect(plusOneValues).toMatchObject([1, 2, 2])
+    expect(plusOneValues).toMatchObject([1, 2])
   })
 
   it('should warn if trying to set a readonly computed', () => {
@@ -193,7 +197,7 @@ describe('reactivity/computed', () => {
     ;(plusOne as WritableComputedRef<number>).value++ // Type cast to prevent TS from preventing the error
 
     expect(
-      'Write operation failed: computed value is readonly'
+      'Write operation failed: computed value is readonly',
     ).toHaveBeenWarnedLast()
   })
 
@@ -209,7 +213,7 @@ describe('reactivity/computed', () => {
       },
       set(v) {
         a = v
-      }
+      },
     })
     expect(isReadonly(z)).toBe(false)
     expect(isReadonly(z.value.a)).toBe(false)
@@ -228,7 +232,7 @@ describe('reactivity/computed', () => {
     })
     const obj = reactive({ foo: 1, bar: 2 })
     const c = computed(() => (obj.foo, 'bar' in obj, Object.keys(obj)), {
-      onTrack
+      onTrack,
     })
     expect(c.value).toEqual(['foo', 'bar'])
     expect(onTrack).toHaveBeenCalledTimes(3)
@@ -237,20 +241,20 @@ describe('reactivity/computed', () => {
         effect: c.effect,
         target: toRaw(obj),
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         effect: c.effect,
         target: toRaw(obj),
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         effect: c.effect,
         target: toRaw(obj),
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
@@ -274,7 +278,7 @@ describe('reactivity/computed', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.foo
@@ -285,7 +289,333 @@ describe('reactivity/computed', () => {
       target: toRaw(obj),
       type: TriggerOpTypes.DELETE,
       key: 'foo',
-      oldValue: 2
+      oldValue: 2,
+    })
+  })
+
+  // https://github.com/vuejs/core/pull/5912#issuecomment-1497596875
+  it('should query deps dirty sequentially', () => {
+    const cSpy = vi.fn()
+
+    const a = ref<null | { v: number }>({
+      v: 1,
+    })
+    const b = computed(() => {
+      return a.value
+    })
+    const c = computed(() => {
+      cSpy()
+      return b.value?.v
+    })
+    const d = computed(() => {
+      if (b.value) {
+        return c.value
+      }
+      return 0
+    })
+
+    d.value
+    a.value!.v = 2
+    a.value = null
+    d.value
+    expect(cSpy).toHaveBeenCalledTimes(1)
+  })
+
+  // https://github.com/vuejs/core/pull/5912#issuecomment-1738257692
+  it('chained computed dirty reallocation after querying dirty', () => {
+    let _msg: string | undefined
+
+    const items = ref<number[]>()
+    const isLoaded = computed(() => {
+      return !!items.value
+    })
+    const msg = computed(() => {
+      if (isLoaded.value) {
+        return 'The items are loaded'
+      } else {
+        return 'The items are not loaded'
+      }
+    })
+
+    effect(() => {
+      _msg = msg.value
+    })
+
+    items.value = [1, 2, 3]
+    items.value = [1, 2, 3]
+    items.value = undefined
+
+    expect(_msg).toBe('The items are not loaded')
+  })
+
+  it('chained computed dirty reallocation after trigger computed getter', () => {
+    let _msg: string | undefined
+
+    const items = ref<number[]>()
+    const isLoaded = computed(() => {
+      return !!items.value
+    })
+    const msg = computed(() => {
+      if (isLoaded.value) {
+        return 'The items are loaded'
+      } else {
+        return 'The items are not loaded'
+      }
     })
+
+    _msg = msg.value
+    items.value = [1, 2, 3]
+    isLoaded.value // <- trigger computed getter
+    _msg = msg.value
+    items.value = undefined
+    _msg = msg.value
+
+    expect(_msg).toBe('The items are not loaded')
+  })
+
+  // https://github.com/vuejs/core/pull/5912#issuecomment-1739159832
+  it('deps order should be consistent with the last time get value', () => {
+    const cSpy = vi.fn()
+
+    const a = ref(0)
+    const b = computed(() => {
+      return a.value % 3 !== 0
+    })
+    const c = computed(() => {
+      cSpy()
+      if (a.value % 3 === 2) {
+        return 'expensive'
+      }
+      return 'cheap'
+    })
+    const d = computed(() => {
+      return a.value % 3 === 2
+    })
+    const e = computed(() => {
+      if (b.value) {
+        if (d.value) {
+          return 'Avoiding expensive calculation'
+        }
+      }
+      return c.value
+    })
+
+    e.value
+    a.value++
+    e.value
+
+    expect(e.effect.deps.length).toBe(3)
+    expect(e.effect.deps.indexOf((b as any).dep)).toBe(0)
+    expect(e.effect.deps.indexOf((d as any).dep)).toBe(1)
+    expect(e.effect.deps.indexOf((c as any).dep)).toBe(2)
+    expect(cSpy).toHaveBeenCalledTimes(2)
+
+    a.value++
+    e.value
+
+    expect(cSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should trigger by the second computed that maybe dirty', () => {
+    const cSpy = vi.fn()
+
+    const src1 = ref(0)
+    const src2 = ref(0)
+    const c1 = computed(() => src1.value)
+    const c2 = computed(() => (src1.value % 2) + src2.value)
+    const c3 = computed(() => {
+      cSpy()
+      c1.value
+      c2.value
+    })
+
+    c3.value
+    src1.value = 2
+    c3.value
+    expect(cSpy).toHaveBeenCalledTimes(2)
+    src2.value = 1
+    c3.value
+    expect(cSpy).toHaveBeenCalledTimes(3)
+  })
+
+  it('should trigger the second effect', () => {
+    const fnSpy = vi.fn()
+    const v = ref(1)
+    const c = computed(() => v.value)
+
+    effect(() => {
+      c.value
+    })
+    effect(() => {
+      c.value
+      fnSpy()
+    })
+
+    expect(fnSpy).toBeCalledTimes(1)
+    v.value = 2
+    expect(fnSpy).toBeCalledTimes(2)
+  })
+
+  it('should chained recurse effects clear dirty after trigger', () => {
+    const v = ref(1)
+    const c1 = computed(() => v.value)
+    const c2 = computed(() => c1.value)
+
+    c1.effect.allowRecurse = true
+    c2.effect.allowRecurse = true
+    c2.value
+
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
+  })
+
+  it('should chained computeds dirtyLevel update with first computed effect', () => {
+    const v = ref(0)
+    const c1 = computed(() => {
+      if (v.value === 0) {
+        v.value = 1
+      }
+      return v.value
+    })
+    const c2 = computed(() => c1.value)
+    const c3 = computed(() => c2.value)
+
+    c3.value
+
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c2.effect._dirtyLevel).toBe(
+      DirtyLevels.MaybeDirty_ComputedSideEffect,
+    )
+    expect(c3.effect._dirtyLevel).toBe(
+      DirtyLevels.MaybeDirty_ComputedSideEffect,
+    )
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should work when chained(ref+computed)', () => {
+    const v = ref(0)
+    const c1 = computed(() => {
+      if (v.value === 0) {
+        v.value = 1
+      }
+      return 'foo'
+    })
+    const c2 = computed(() => v.value + c1.value)
+    expect(c2.value).toBe('0foo')
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c2.value).toBe('1foo')
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should trigger effect even computed already dirty', () => {
+    const fnSpy = vi.fn()
+    const v = ref(0)
+    const c1 = computed(() => {
+      if (v.value === 0) {
+        v.value = 1
+      }
+      return 'foo'
+    })
+    const c2 = computed(() => v.value + c1.value)
+
+    effect(() => {
+      fnSpy()
+      c2.value
+    })
+    expect(fnSpy).toBeCalledTimes(1)
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    v.value = 2
+    expect(fnSpy).toBeCalledTimes(2)
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  // #10185
+  it('should not override queried MaybeDirty result', () => {
+    class Item {
+      v = ref(0)
+    }
+    const v1 = shallowRef()
+    const v2 = ref(false)
+    const c1 = computed(() => {
+      let c = v1.value
+      if (!v1.value) {
+        c = new Item()
+        v1.value = c
+      }
+      return c.v.value
+    })
+    const c2 = computed(() => {
+      if (!v2.value) return 'no'
+      return c1.value ? 'yes' : 'no'
+    })
+    const c3 = computed(() => c2.value)
+
+    c3.value
+    v2.value = true
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+
+    c3.value
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c2.effect._dirtyLevel).toBe(
+      DirtyLevels.MaybeDirty_ComputedSideEffect,
+    )
+    expect(c3.effect._dirtyLevel).toBe(
+      DirtyLevels.MaybeDirty_ComputedSideEffect,
+    )
+
+    v1.value.v.value = 999
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+
+    expect(c3.value).toBe('yes')
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should be not dirty after deps mutate (mutate deps in computed)', async () => {
+    const state = reactive<any>({})
+    const consumer = computed(() => {
+      if (!('a' in state)) state.a = 1
+      return state.a
+    })
+    const Comp = {
+      setup: () => {
+        nextTick().then(() => {
+          state.a = 2
+        })
+        return () => consumer.value
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    await nextTick()
+    await nextTick()
+    expect(serializeInner(root)).toBe(`2`)
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
+  })
+
+  it('should not trigger effect scheduler by recurse computed effect', async () => {
+    const v = ref('Hello')
+    const c = computed(() => {
+      v.value += ' World'
+      return v.value
+    })
+    const Comp = {
+      setup: () => {
+        return () => c.value
+      },
+    }
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe('Hello World')
+
+    v.value += ' World'
+    await nextTick()
+    expect(serializeInner(root)).toBe('Hello World World World World')
+    expect(COMPUTED_SIDE_EFFECT_WARN).toHaveBeenWarned()
   })
 })
diff --git a/packages/reactivity/__tests__/deferredComputed.spec.ts b/packages/reactivity/__tests__/deferredComputed.spec.ts
index 100f14ae358..8e78ba959c3 100644
--- a/packages/reactivity/__tests__/deferredComputed.spec.ts
+++ b/packages/reactivity/__tests__/deferredComputed.spec.ts
@@ -1,57 +1,32 @@
-import { computed, deferredComputed, effect, ref } from '../src'
+import { computed, effect, ref } from '../src'
 
 describe('deferred computed', () => {
-  const tick = Promise.resolve()
-
-  test('should only trigger once on multiple mutations', async () => {
+  test('should not trigger if value did not change', () => {
     const src = ref(0)
-    const c = deferredComputed(() => src.value)
+    const c = computed(() => src.value % 2)
     const spy = vi.fn()
     effect(() => {
       spy(c.value)
     })
     expect(spy).toHaveBeenCalledTimes(1)
-    src.value = 1
     src.value = 2
-    src.value = 3
-    // not called yet
-    expect(spy).toHaveBeenCalledTimes(1)
-    await tick
-    // should only trigger once
-    expect(spy).toHaveBeenCalledTimes(2)
-    expect(spy).toHaveBeenCalledWith(c.value)
-  })
 
-  test('should not trigger if value did not change', async () => {
-    const src = ref(0)
-    const c = deferredComputed(() => src.value % 2)
-    const spy = vi.fn()
-    effect(() => {
-      spy(c.value)
-    })
-    expect(spy).toHaveBeenCalledTimes(1)
-    src.value = 1
-    src.value = 2
-
-    await tick
     // should not trigger
     expect(spy).toHaveBeenCalledTimes(1)
 
     src.value = 3
-    src.value = 4
     src.value = 5
-    await tick
     // should trigger because latest value changes
     expect(spy).toHaveBeenCalledTimes(2)
   })
 
-  test('chained computed trigger', async () => {
+  test('chained computed trigger', () => {
     const effectSpy = vi.fn()
     const c1Spy = vi.fn()
     const c2Spy = vi.fn()
 
     const src = ref(0)
-    const c1 = deferredComputed(() => {
+    const c1 = computed(() => {
       c1Spy()
       return src.value % 2
     })
@@ -69,19 +44,18 @@ describe('deferred computed', () => {
     expect(effectSpy).toHaveBeenCalledTimes(1)
 
     src.value = 1
-    await tick
     expect(c1Spy).toHaveBeenCalledTimes(2)
     expect(c2Spy).toHaveBeenCalledTimes(2)
     expect(effectSpy).toHaveBeenCalledTimes(2)
   })
 
-  test('chained computed avoid re-compute', async () => {
+  test('chained computed avoid re-compute', () => {
     const effectSpy = vi.fn()
     const c1Spy = vi.fn()
     const c2Spy = vi.fn()
 
     const src = ref(0)
-    const c1 = deferredComputed(() => {
+    const c1 = computed(() => {
       c1Spy()
       return src.value % 2
     })
@@ -98,26 +72,24 @@ describe('deferred computed', () => {
     src.value = 2
     src.value = 4
     src.value = 6
-    await tick
-    // c1 should re-compute once.
-    expect(c1Spy).toHaveBeenCalledTimes(2)
+    expect(c1Spy).toHaveBeenCalledTimes(4)
     // c2 should not have to re-compute because c1 did not change.
     expect(c2Spy).toHaveBeenCalledTimes(1)
     // effect should not trigger because c2 did not change.
     expect(effectSpy).toHaveBeenCalledTimes(1)
   })
 
-  test('chained computed value invalidation', async () => {
+  test('chained computed value invalidation', () => {
     const effectSpy = vi.fn()
     const c1Spy = vi.fn()
     const c2Spy = vi.fn()
 
     const src = ref(0)
-    const c1 = deferredComputed(() => {
+    const c1 = computed(() => {
       c1Spy()
       return src.value % 2
     })
-    const c2 = deferredComputed(() => {
+    const c2 = computed(() => {
       c2Spy()
       return c1.value + 1
     })
@@ -139,17 +111,17 @@ describe('deferred computed', () => {
     expect(c2Spy).toHaveBeenCalledTimes(2)
   })
 
-  test('sync access of invalidated chained computed should not prevent final effect from running', async () => {
+  test('sync access of invalidated chained computed should not prevent final effect from running', () => {
     const effectSpy = vi.fn()
     const c1Spy = vi.fn()
     const c2Spy = vi.fn()
 
     const src = ref(0)
-    const c1 = deferredComputed(() => {
+    const c1 = computed(() => {
       c1Spy()
       return src.value % 2
     })
-    const c2 = deferredComputed(() => {
+    const c2 = computed(() => {
       c2Spy()
       return c1.value + 1
     })
@@ -162,14 +134,13 @@ describe('deferred computed', () => {
     src.value = 1
     // sync access c2
     c2.value
-    await tick
     expect(effectSpy).toHaveBeenCalledTimes(2)
   })
 
-  test('should not compute if deactivated before scheduler is called', async () => {
+  test('should not compute if deactivated before scheduler is called', () => {
     const c1Spy = vi.fn()
     const src = ref(0)
-    const c1 = deferredComputed(() => {
+    const c1 = computed(() => {
       c1Spy()
       return src.value % 2
     })
@@ -179,7 +150,6 @@ describe('deferred computed', () => {
     c1.effect.stop()
     // trigger
     src.value++
-    await tick
     expect(c1Spy).toHaveBeenCalledTimes(1)
   })
 })
diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts
index 635e6534abe..bd26934f1ce 100644
--- a/packages/reactivity/__tests__/effect.spec.ts
+++ b/packages/reactivity/__tests__/effect.spec.ts
@@ -1,18 +1,27 @@
 import {
-  ref,
-  reactive,
-  effect,
-  stop,
-  toRaw,
+  type DebuggerEvent,
+  type ReactiveEffectRunner,
   TrackOpTypes,
   TriggerOpTypes,
-  DebuggerEvent,
+  effect,
   markRaw,
-  shallowReactive,
+  reactive,
   readonly,
-  ReactiveEffectRunner
+  shallowReactive,
+  stop,
+  toRaw,
 } from '../src/index'
-import { ITERATE_KEY } from '../src/effect'
+import { pauseScheduling, resetScheduling } from '../src/effect'
+import { ITERATE_KEY, getDepFromReactive } from '../src/reactiveEffect'
+import {
+  computed,
+  h,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
+  serializeInner,
+} from '@vue/runtime-test'
 
 describe('reactivity/effect', () => {
   it('should run the passed function once (wrapped by a effect)', () => {
@@ -129,7 +138,7 @@ describe('reactivity/effect', () => {
       },
       get prop() {
         return hiddenValue
-      }
+      },
     })
     Object.setPrototypeOf(obj, parent)
     effect(() => (dummy = obj.prop))
@@ -243,6 +252,22 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(undefined)
   })
 
+  it('should support manipulating an array while observing symbol keyed properties', () => {
+    const key = Symbol()
+    let dummy
+    const array: any = reactive([1, 2, 3])
+    effect(() => (dummy = array[key]))
+
+    expect(dummy).toBe(undefined)
+    array.pop()
+    array.shift()
+    array.splice(0, 1)
+    expect(dummy).toBe(undefined)
+    array[key] = 'value'
+    array.length = 0
+    expect(dummy).toBe('value')
+  })
+
   it('should observe function valued properties', () => {
     const oldFunc = () => {}
     const newFunc = () => {}
@@ -261,7 +286,7 @@ describe('reactivity/effect', () => {
       a: 1,
       get b() {
         return this.a
-      }
+      },
     })
 
     let dummy
@@ -276,7 +301,7 @@ describe('reactivity/effect', () => {
       a: 1,
       b() {
         return this.a
-      }
+      },
     })
 
     let dummy
@@ -333,7 +358,7 @@ describe('reactivity/effect', () => {
       },
       get prop() {
         return hiddenValue
-      }
+      },
     })
     Object.setPrototypeOf(obj, parent)
     effect(() => (dummy = obj.prop))
@@ -558,8 +583,8 @@ describe('reactivity/effect', () => {
     expect(output.fx2).toBe(1 + 3 + 3)
     expect(fx1Spy).toHaveBeenCalledTimes(1)
 
-    // Invoked twice due to change of fx1.
-    expect(fx2Spy).toHaveBeenCalledTimes(2)
+    // Invoked due to change of fx1.
+    expect(fx2Spy).toHaveBeenCalledTimes(1)
 
     fx1Spy.mockClear()
     fx2Spy.mockClear()
@@ -696,7 +721,7 @@ describe('reactivity/effect', () => {
       () => {
         dummy = obj.foo
       },
-      { scheduler }
+      { scheduler },
     )
     expect(scheduler).not.toHaveBeenCalled()
     expect(dummy).toBe(1)
@@ -724,7 +749,7 @@ describe('reactivity/effect', () => {
         dummy = 'bar' in obj
         dummy = Object.keys(obj)
       },
-      { onTrack }
+      { onTrack },
     )
     expect(dummy).toEqual(['foo', 'bar'])
     expect(onTrack).toHaveBeenCalledTimes(3)
@@ -733,20 +758,20 @@ describe('reactivity/effect', () => {
         effect: runner.effect,
         target: toRaw(obj),
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         effect: runner.effect,
         target: toRaw(obj),
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         effect: runner.effect,
         target: toRaw(obj),
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
@@ -761,7 +786,7 @@ describe('reactivity/effect', () => {
       () => {
         dummy = obj.foo
       },
-      { onTrigger }
+      { onTrigger },
     )
 
     obj.foo!++
@@ -773,7 +798,7 @@ describe('reactivity/effect', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.foo
@@ -784,7 +809,7 @@ describe('reactivity/effect', () => {
       target: toRaw(obj),
       type: TriggerOpTypes.DELETE,
       key: 'foo',
-      oldValue: 2
+      oldValue: 2,
     })
   })
 
@@ -805,30 +830,10 @@ describe('reactivity/effect', () => {
     expect(dummy).toBe(3)
   })
 
-  // #5707
-  // when an effect completes its run, it should clear the tracking bits of
-  // its tracked deps. However, if the effect stops itself, the deps list is
-  // emptied so their bits are never cleared.
-  it('edge case: self-stopping effect tracking ref', () => {
-    const c = ref(true)
-    const runner = effect(() => {
-      // reference ref
-      if (!c.value) {
-        // stop itself while running
-        stop(runner)
-      }
-    })
-    // trigger run
-    c.value = !c.value
-    // should clear bits
-    expect((c as any).dep.w).toBe(0)
-    expect((c as any).dep.n).toBe(0)
-  })
-
   it('events: onStop', () => {
     const onStop = vi.fn()
     const runner = effect(() => {}, {
-      onStop
+      onStop,
     })
 
     stop(runner)
@@ -860,8 +865,8 @@ describe('reactivity/effect', () => {
   it('markRaw', () => {
     const obj = reactive({
       foo: markRaw({
-        prop: 0
-      })
+        prop: 0,
+      }),
     })
     let dummy
     effect(() => {
@@ -876,7 +881,7 @@ describe('reactivity/effect', () => {
 
   it('should not be triggered when the value and the old value both are NaN', () => {
     const obj = reactive({
-      foo: NaN
+      foo: NaN,
     })
     const fnSpy = vi.fn(() => obj.foo)
     effect(fnSpy)
@@ -999,4 +1004,112 @@ describe('reactivity/effect', () => {
       expect(has).toBe(false)
     })
   })
+
+  it('should be triggered once with pauseScheduling', () => {
+    const counter = reactive({ num: 0 })
+
+    const counterSpy = vi.fn(() => counter.num)
+    effect(counterSpy)
+
+    counterSpy.mockClear()
+
+    pauseScheduling()
+    counter.num++
+    counter.num++
+    resetScheduling()
+    expect(counterSpy).toHaveBeenCalledTimes(1)
+  })
+
+  // #10082
+  it('should set dirtyLevel when effect is allowRecurse and is running', async () => {
+    const s = ref(0)
+    const n = computed(() => s.value + 1)
+
+    const Child = {
+      setup() {
+        s.value++
+        return () => n.value
+      },
+    }
+
+    const renderSpy = vi.fn()
+    const Parent = {
+      setup() {
+        return () => {
+          renderSpy()
+          return [n.value, h(Child)]
+        }
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    await nextTick()
+    expect(serializeInner(root)).toBe('22')
+    expect(renderSpy).toHaveBeenCalledTimes(2)
+  })
+
+  describe('empty dep cleanup', () => {
+    it('should remove the dep when the effect is stopped', () => {
+      const obj = reactive({ prop: 1 })
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      const runner = effect(() => obj.prop)
+      const dep = getDepFromReactive(toRaw(obj), 'prop')
+      expect(dep).toHaveLength(1)
+      obj.prop = 2
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(1)
+      stop(runner)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      obj.prop = 3
+      runner()
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+    })
+
+    it('should only remove the dep when the last effect is stopped', () => {
+      const obj = reactive({ prop: 1 })
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      const runner1 = effect(() => obj.prop)
+      const dep = getDepFromReactive(toRaw(obj), 'prop')
+      expect(dep).toHaveLength(1)
+      const runner2 = effect(() => obj.prop)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(2)
+      obj.prop = 2
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(2)
+      stop(runner1)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(1)
+      obj.prop = 3
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBe(dep)
+      expect(dep).toHaveLength(1)
+      stop(runner2)
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      obj.prop = 4
+      runner1()
+      runner2()
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+    })
+
+    it('should remove the dep when it is no longer used by the effect', () => {
+      const obj = reactive<{ a: number; b: number; c: 'a' | 'b' }>({
+        a: 1,
+        b: 2,
+        c: 'a',
+      })
+      expect(getDepFromReactive(toRaw(obj), 'prop')).toBeUndefined()
+      effect(() => obj[obj.c])
+      const depC = getDepFromReactive(toRaw(obj), 'c')
+      expect(getDepFromReactive(toRaw(obj), 'a')).toHaveLength(1)
+      expect(getDepFromReactive(toRaw(obj), 'b')).toBeUndefined()
+      expect(depC).toHaveLength(1)
+      obj.c = 'b'
+      obj.a = 4
+      expect(getDepFromReactive(toRaw(obj), 'a')).toBeUndefined()
+      expect(getDepFromReactive(toRaw(obj), 'b')).toHaveLength(1)
+      expect(getDepFromReactive(toRaw(obj), 'c')).toBe(depC)
+      expect(depC).toHaveLength(1)
+    })
+  })
 })
diff --git a/packages/reactivity/__tests__/effectScope.spec.ts b/packages/reactivity/__tests__/effectScope.spec.ts
index b26a90a09db..f7e3241ccd6 100644
--- a/packages/reactivity/__tests__/effectScope.spec.ts
+++ b/packages/reactivity/__tests__/effectScope.spec.ts
@@ -1,13 +1,13 @@
 import { nextTick, watch, watchEffect } from '@vue/runtime-core'
 import {
-  reactive,
-  effect,
+  type ComputedRef,
   EffectScope,
-  onScopeDispose,
   computed,
+  effect,
+  getCurrentScope,
+  onScopeDispose,
+  reactive,
   ref,
-  ComputedRef,
-  getCurrentScope
 } from '../src'
 
 describe('reactivity/effect/scope', () => {
@@ -213,7 +213,7 @@ describe('reactivity/effect/scope', () => {
     onScopeDispose(spy)
 
     expect(
-      '[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.'
+      '[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.',
     ).toHaveBeenWarned()
 
     scope.stop()
diff --git a/packages/reactivity/__tests__/gc.spec.ts b/packages/reactivity/__tests__/gc.spec.ts
new file mode 100644
index 00000000000..953765dd1d9
--- /dev/null
+++ b/packages/reactivity/__tests__/gc.spec.ts
@@ -0,0 +1,81 @@
+import {
+  type ComputedRef,
+  computed,
+  effect,
+  reactive,
+  shallowRef as ref,
+  toRaw,
+} from '../src/index'
+import { getDepFromReactive } from '../src/reactiveEffect'
+
+describe.skipIf(!global.gc)('reactivity/gc', () => {
+  const gc = () => {
+    return new Promise<void>(resolve => {
+      setTimeout(() => {
+        global.gc!()
+        resolve()
+      })
+    })
+  }
+
+  // #9233
+  it('should release computed cache', async () => {
+    const src = ref<{} | undefined>({})
+    const srcRef = new WeakRef(src.value!)
+
+    let c: ComputedRef | undefined = computed(() => src.value)
+
+    c.value // cache src value
+    src.value = undefined // release value
+    c = undefined // release computed
+
+    await gc()
+    expect(srcRef.deref()).toBeUndefined()
+  })
+
+  it('should release reactive property dep', async () => {
+    const src = reactive({ foo: 1 })
+
+    let c: ComputedRef | undefined = computed(() => src.foo)
+
+    c.value
+    expect(getDepFromReactive(toRaw(src), 'foo')).not.toBeUndefined()
+
+    c = undefined
+    await gc()
+    await gc()
+    expect(getDepFromReactive(toRaw(src), 'foo')).toBeUndefined()
+  })
+
+  it('should not release effect for ref', async () => {
+    const spy = vi.fn()
+    const src = ref(0)
+
+    effect(() => {
+      spy()
+      src.value
+    })
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    await gc()
+    src.value++
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should not release effect for reactive', async () => {
+    const spy = vi.fn()
+    const src = reactive({ foo: 1 })
+
+    effect(() => {
+      spy()
+      src.foo
+    })
+
+    expect(spy).toHaveBeenCalledTimes(1)
+
+    await gc()
+    src.foo++
+    expect(spy).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/packages/reactivity/__tests__/reactive.spec.ts b/packages/reactivity/__tests__/reactive.spec.ts
index e7fe18252ab..ab953ff891a 100644
--- a/packages/reactivity/__tests__/reactive.spec.ts
+++ b/packages/reactivity/__tests__/reactive.spec.ts
@@ -1,5 +1,5 @@
-import { ref, isRef } from '../src/ref'
-import { reactive, isReactive, toRaw, markRaw } from '../src/reactive'
+import { isRef, ref } from '../src/ref'
+import { isReactive, markRaw, reactive, toRaw } from '../src/reactive'
 import { computed } from '../src/computed'
 import { effect } from '../src/effect'
 
@@ -35,9 +35,9 @@ describe('reactivity/reactive', () => {
   test('nested reactives', () => {
     const original = {
       nested: {
-        foo: 1
+        foo: 1,
       },
-      array: [{ bar: 2 }]
+      array: [{ bar: 2 }],
     }
     const observed = reactive(original)
     expect(isReactive(observed.nested)).toBe(true)
@@ -158,6 +158,21 @@ describe('reactivity/reactive', () => {
     expect(original.bar).toBe(original2)
   })
 
+  // #1246
+  test('mutation on objects using reactive as prototype should not trigger', () => {
+    const observed = reactive({ foo: 1 })
+    const original = Object.create(observed)
+    let dummy
+    effect(() => (dummy = original.foo))
+    expect(dummy).toBe(1)
+    observed.foo = 2
+    expect(dummy).toBe(2)
+    original.foo = 3
+    expect(dummy).toBe(2)
+    original.foo = 4
+    expect(dummy).toBe(2)
+  })
+
   test('toRaw', () => {
     const original = { foo: 1 }
     const observed = reactive(original)
@@ -166,11 +181,18 @@ describe('reactivity/reactive', () => {
   })
 
   test('toRaw on object using reactive as prototype', () => {
-    const original = reactive({})
-    const obj = Object.create(original)
+    const original = { foo: 1 }
+    const observed = reactive(original)
+    const inherted = Object.create(observed)
+    expect(toRaw(inherted)).toBe(inherted)
+  })
+
+  test('toRaw on user Proxy wrapping reactive', () => {
+    const original = {}
+    const re = reactive(original)
+    const obj = new Proxy(re, {})
     const raw = toRaw(obj)
-    expect(raw).toBe(obj)
-    expect(raw).not.toBe(toRaw(original))
+    expect(raw).toBe(original)
   })
 
   test('should not unwrap Ref<T>', () => {
@@ -187,7 +209,7 @@ describe('reactivity/reactive', () => {
     // writable
     const b = computed({
       get: () => 1,
-      set: () => {}
+      set: () => {},
     })
     const obj = reactive({ a, b })
     // check type
@@ -216,7 +238,7 @@ describe('reactivity/reactive', () => {
     const assertValue = (value: any) => {
       reactive(value)
       expect(
-        `value cannot be made reactive: ${String(value)}`
+        `value cannot be made reactive: ${String(value)}`,
       ).toHaveBeenWarnedLast()
     }
 
@@ -249,18 +271,23 @@ describe('reactivity/reactive', () => {
   test('markRaw', () => {
     const obj = reactive({
       foo: { a: 1 },
-      bar: markRaw({ b: 2 })
+      bar: markRaw({ b: 2 }),
     })
     expect(isReactive(obj.foo)).toBe(true)
     expect(isReactive(obj.bar)).toBe(false)
   })
 
+  test('markRaw should skip non-extensible objects', () => {
+    const obj = Object.seal({ foo: 1 })
+    expect(() => markRaw(obj)).not.toThrowError()
+  })
+
   test('should not observe non-extensible objects', () => {
     const obj = reactive({
       foo: Object.preventExtensions({ a: 1 }),
       // sealed or frozen objects are considered non-extensible as well
       bar: Object.freeze({ a: 1 }),
-      baz: Object.seal({ a: 1 })
+      baz: Object.seal({ a: 1 }),
     })
     expect(isReactive(obj.foo)).toBe(false)
     expect(isReactive(obj.bar)).toBe(false)
@@ -270,7 +297,7 @@ describe('reactivity/reactive', () => {
   test('should not observe objects with __v_skip', () => {
     const original = {
       foo: 1,
-      __v_skip: true
+      __v_skip: true,
     }
     const observed = reactive(original)
     expect(isReactive(observed)).toBe(false)
diff --git a/packages/reactivity/__tests__/reactiveArray.bench.ts b/packages/reactivity/__tests__/reactiveArray.bench.ts
new file mode 100644
index 00000000000..9ce0dc531d1
--- /dev/null
+++ b/packages/reactivity/__tests__/reactiveArray.bench.ts
@@ -0,0 +1,92 @@
+import { bench } from 'vitest'
+import { computed, reactive, readonly, shallowRef, triggerRef } from '../src'
+
+for (let amount = 1e1; amount < 1e4; amount *= 10) {
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive(rawArray)
+    const c = computed(() => {
+      return r.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *reactive* array, ${amount} elements`, () => {
+      for (let i = 0, n = r.length; i < n; i++) {
+        r[i]++
+      }
+      c.value
+    })
+  }
+
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive(rawArray)
+    const c = computed(() => {
+      return r.reduce((v, a) => a + v, 0)
+    })
+
+    bench(
+      `reduce *reactive* array, ${amount} elements, only change first value`,
+      () => {
+        r[0]++
+        c.value
+      },
+    )
+  }
+
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = reactive({ arr: readonly(rawArray) })
+    const c = computed(() => {
+      return r.arr.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *readonly* array, ${amount} elements`, () => {
+      r.arr = r.arr.map(v => v + 1)
+      c.value
+    })
+  }
+
+  {
+    const rawArray = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = shallowRef(rawArray)
+    const c = computed(() => {
+      return r.value.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *raw* array, copied, ${amount} elements`, () => {
+      r.value = r.value.map(v => v + 1)
+      c.value
+    })
+  }
+
+  {
+    const rawArray: number[] = []
+    for (let i = 0, n = amount; i < n; i++) {
+      rawArray.push(i)
+    }
+    const r = shallowRef(rawArray)
+    const c = computed(() => {
+      return r.value.reduce((v, a) => a + v, 0)
+    })
+
+    bench(`reduce *raw* array, manually triggered, ${amount} elements`, () => {
+      for (let i = 0, n = rawArray.length; i < n; i++) {
+        rawArray[i]++
+      }
+      triggerRef(r)
+      c.value
+    })
+  }
+}
diff --git a/packages/reactivity/__tests__/reactiveArray.spec.ts b/packages/reactivity/__tests__/reactiveArray.spec.ts
index 808c5aa5529..1c6fcefd592 100644
--- a/packages/reactivity/__tests__/reactiveArray.spec.ts
+++ b/packages/reactivity/__tests__/reactiveArray.spec.ts
@@ -1,5 +1,5 @@
-import { reactive, isReactive, toRaw } from '../src/reactive'
-import { ref, isRef } from '../src/ref'
+import { isReactive, reactive, toRaw } from '../src/reactive'
+import { isRef, ref } from '../src/ref'
 import { effect } from '../src/effect'
 
 describe('reactivity/reactive/Array', () => {
@@ -99,6 +99,39 @@ describe('reactivity/reactive/Array', () => {
     expect(fn).toHaveBeenCalledTimes(1)
   })
 
+  test('shift on Array should trigger dependency once', () => {
+    const arr = reactive([1, 2, 3])
+    const fn = vi.fn()
+    effect(() => {
+      for (let i = 0; i < arr.length; i++) {
+        arr[i]
+      }
+      fn()
+    })
+    expect(fn).toHaveBeenCalledTimes(1)
+    arr.shift()
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  //#6018
+  test('edge case: avoid trigger effect in deleteProperty when array length-decrease mutation methods called', () => {
+    const arr = ref([1])
+    const fn1 = vi.fn()
+    const fn2 = vi.fn()
+    effect(() => {
+      fn1()
+      if (arr.value.length > 0) {
+        arr.value.slice()
+        fn2()
+      }
+    })
+    expect(fn1).toHaveBeenCalledTimes(1)
+    expect(fn2).toHaveBeenCalledTimes(1)
+    arr.value.splice(0)
+    expect(fn1).toHaveBeenCalledTimes(2)
+    expect(fn2).toHaveBeenCalledTimes(1)
+  })
+
   test('add existing index on Array should not trigger length dependency', () => {
     const array = new Array(3)
     const observed = reactive(array)
@@ -142,6 +175,15 @@ describe('reactivity/reactive/Array', () => {
     expect(length).toBe('01')
   })
 
+  // #9742
+  test('mutation on user proxy of reactive Array', () => {
+    const array = reactive<number[]>([])
+    const proxy = new Proxy(array, {})
+    proxy.push(1)
+    expect(array).toHaveLength(1)
+    expect(proxy).toHaveLength(1)
+  })
+
   describe('Array methods w/ refs', () => {
     let original: any[]
     beforeEach(() => {
diff --git a/packages/reactivity/__tests__/reactiveMap.bench.ts b/packages/reactivity/__tests__/reactiveMap.bench.ts
new file mode 100644
index 00000000000..70a034e96c3
--- /dev/null
+++ b/packages/reactivity/__tests__/reactiveMap.bench.ts
@@ -0,0 +1,143 @@
+import { bench } from 'vitest'
+import { type ComputedRef, computed, reactive } from '../src'
+
+function createMap(obj: Record<string, any>) {
+  const map = new Map()
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      map.set(key, obj[key])
+    }
+  }
+  return map
+}
+
+bench('create reactive map', () => {
+  reactive(createMap({ a: 1 }))
+})
+
+{
+  let i = 0
+  const r = reactive(createMap({ a: 1 }))
+  bench('write reactive map property', () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  computed(() => {
+    return r.get('a') * 2
+  })
+  let i = 0
+  bench("write reactive map, don't read computed (never invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const c = computed(() => {
+    return r.get('a') * 2
+  })
+  c.value
+  let i = 0
+  bench("write reactive map, don't read computed (invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const c = computed(() => {
+    return r.get('a') * 2
+  })
+  let i = 0
+  bench('write reactive map, read computed', () => {
+    r.set('a', i++)
+    c.value
+  })
+}
+
+{
+  const _m = new Map()
+  for (let i = 0; i < 10000; i++) {
+    _m.set(i, i)
+  }
+  const r = reactive(_m)
+  const c = computed(() => {
+    let total = 0
+    r.forEach((value, key) => {
+      total += value
+    })
+    return total
+  })
+  bench("write reactive map (10'000 items), read computed", () => {
+    r.set(5000, r.get(5000) + 1)
+    c.value
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const computeds = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.get('a') * 2
+    })
+    computeds.push(c)
+  }
+  let i = 0
+  bench("write reactive map, don't read 1000 computeds (never invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const computeds = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.get('a') * 2
+    })
+    c.value
+    computeds.push(c)
+  }
+  let i = 0
+  bench("write reactive map, don't read 1000 computeds (invoked)", () => {
+    r.set('a', i++)
+  })
+}
+
+{
+  const r = reactive(createMap({ a: 1 }))
+  const computeds: ComputedRef<number>[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.get('a') * 2
+    })
+    computeds.push(c)
+  }
+  let i = 0
+  bench('write reactive map, read 1000 computeds', () => {
+    r.set('a', i++)
+    computeds.forEach(c => c.value)
+  })
+}
+
+{
+  const reactives: Map<any, any>[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    reactives.push(reactive(createMap({ a: i })))
+  }
+  const c = computed(() => {
+    let total = 0
+    reactives.forEach(r => (total += r.get('a')))
+    return total
+  })
+  let i = 0
+  const n = reactives.length
+  bench('1000 reactive maps, 1 computed', () => {
+    reactives[i++ % n].set('a', reactives[i++ % n].get('a') + 1)
+    c.value
+  })
+}
diff --git a/packages/reactivity/__tests__/reactiveObject.bench.ts b/packages/reactivity/__tests__/reactiveObject.bench.ts
new file mode 100644
index 00000000000..71632283f69
--- /dev/null
+++ b/packages/reactivity/__tests__/reactiveObject.bench.ts
@@ -0,0 +1,114 @@
+import { bench } from 'vitest'
+import { type ComputedRef, computed, reactive } from '../src'
+
+bench('create reactive obj', () => {
+  reactive({ a: 1 })
+})
+
+{
+  let i = 0
+  const r = reactive({ a: 1 })
+  bench('write reactive obj property', () => {
+    r.a = i++
+  })
+}
+
+{
+  const r = reactive({ a: 1 })
+  computed(() => {
+    return r.a * 2
+  })
+  let i = 0
+  bench("write reactive obj, don't read computed (never invoked)", () => {
+    r.a = i++
+  })
+}
+
+{
+  const r = reactive({ a: 1 })
+  const c = computed(() => {
+    return r.a * 2
+  })
+  c.value
+  let i = 0
+  bench("write reactive obj, don't read computed (invoked)", () => {
+    r.a = i++
+  })
+}
+
+{
+  const r = reactive({ a: 1 })
+  const c = computed(() => {
+    return r.a * 2
+  })
+  let i = 0
+  bench('write reactive obj, read computed', () => {
+    r.a = i++
+    c.value
+  })
+}
+
+{
+  const r = reactive({ a: 1 })
+  const computeds = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.a * 2
+    })
+    computeds.push(c)
+  }
+  let i = 0
+  bench("write reactive obj, don't read 1000 computeds (never invoked)", () => {
+    r.a = i++
+  })
+}
+
+{
+  const r = reactive({ a: 1 })
+  const computeds = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.a * 2
+    })
+    c.value
+    computeds.push(c)
+  }
+  let i = 0
+  bench("write reactive obj, don't read 1000 computeds (invoked)", () => {
+    r.a = i++
+  })
+}
+
+{
+  const r = reactive({ a: 1 })
+  const computeds: ComputedRef<number>[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    const c = computed(() => {
+      return r.a * 2
+    })
+    computeds.push(c)
+  }
+  let i = 0
+  bench('write reactive obj, read 1000 computeds', () => {
+    r.a = i++
+    computeds.forEach(c => c.value)
+  })
+}
+
+{
+  const reactives: Record<string, number>[] = []
+  for (let i = 0, n = 1000; i < n; i++) {
+    reactives.push(reactive({ a: i }))
+  }
+  const c = computed(() => {
+    let total = 0
+    reactives.forEach(r => (total += r.a))
+    return total
+  })
+  let i = 0
+  const n = reactives.length
+  bench('1000 reactive objs, 1 computed', () => {
+    reactives[i++ % n].a++
+    c.value
+  })
+}
diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
index d0c91f0fb9f..66da71a8c9e 100644
--- a/packages/reactivity/__tests__/readonly.spec.ts
+++ b/packages/reactivity/__tests__/readonly.spec.ts
@@ -1,14 +1,14 @@
 import {
-  reactive,
-  readonly,
-  toRaw,
+  computed,
+  effect,
+  isProxy,
   isReactive,
   isReadonly,
   markRaw,
-  effect,
+  reactive,
+  readonly,
   ref,
-  isProxy,
-  computed
+  toRaw,
 } from '../src'
 
 /**
@@ -44,49 +44,49 @@ describe('reactivity/readonly', () => {
       const original = {
         foo: 1,
         bar: {
-          baz: 2
+          baz: 2,
         },
-        [qux]: 3
+        [qux]: 3,
       }
       const wrapped: Writable<typeof original> = readonly(original)
 
       wrapped.foo = 2
       expect(wrapped.foo).toBe(1)
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       wrapped.bar.baz = 3
       expect(wrapped.bar.baz).toBe(2)
       expect(
-        `Set operation on key "baz" failed: target is readonly.`
+        `Set operation on key "baz" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       wrapped[qux] = 4
       expect(wrapped[qux]).toBe(3)
       expect(
-        `Set operation on key "Symbol(qux)" failed: target is readonly.`
+        `Set operation on key "Symbol(qux)" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       // @ts-expect-error
       delete wrapped.foo
       expect(wrapped.foo).toBe(1)
       expect(
-        `Delete operation on key "foo" failed: target is readonly.`
+        `Delete operation on key "foo" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       // @ts-expect-error
       delete wrapped.bar.baz
       expect(wrapped.bar.baz).toBe(2)
       expect(
-        `Delete operation on key "baz" failed: target is readonly.`
+        `Delete operation on key "baz" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
 
       // @ts-expect-error
       delete wrapped[qux]
       expect(wrapped[qux]).toBe(3)
       expect(
-        `Delete operation on key "Symbol(qux)" failed: target is readonly.`
+        `Delete operation on key "Symbol(qux)" failed: target is readonly.`,
       ).toHaveBeenWarnedLast()
     })
 
@@ -131,12 +131,12 @@ describe('reactivity/readonly', () => {
       wrapped[0] = 1
       expect(wrapped[0]).not.toBe(1)
       expect(
-        `Set operation on key "0" failed: target is readonly.`
+        `Set operation on key "0" failed: target is readonly.`,
       ).toHaveBeenWarned()
       wrapped[0].foo = 2
       expect(wrapped[0].foo).toBe(1)
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       // should block length mutation
@@ -144,7 +144,7 @@ describe('reactivity/readonly', () => {
       expect(wrapped.length).toBe(1)
       expect(wrapped[0].foo).toBe(1)
       expect(
-        `Set operation on key "length" failed: target is readonly.`
+        `Set operation on key "length" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       // mutation methods invoke set/length internally and thus are blocked as well
@@ -180,7 +180,7 @@ describe('reactivity/readonly', () => {
         const key2 = {}
         const original = new Collection([
           [key1, {}],
-          [key2, {}]
+          [key2, {}],
         ])
         const wrapped = readonly(original)
         expect(wrapped).not.toBe(original)
@@ -207,7 +207,7 @@ describe('reactivity/readonly', () => {
         expect(dummy).toBeUndefined()
         expect(map.has(key)).toBe(false)
         expect(
-          `Set operation on key "${key}" failed: target is readonly.`
+          `Set operation on key "${key}" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -233,7 +233,7 @@ describe('reactivity/readonly', () => {
           const key2 = {}
           const original = new Map([
             [key1, {}],
-            [key2, {}]
+            [key2, {}],
           ])
           const wrapped: any = readonly(original)
           expect(wrapped.size).toBe(2)
@@ -255,8 +255,8 @@ describe('reactivity/readonly', () => {
           const original = reactive(
             new Map([
               [key1, {}],
-              [key2, {}]
-            ])
+              [key2, {}],
+            ]),
           )
           const wrapped: any = readonly(original)
           expect(wrapped.size).toBe(2)
@@ -275,6 +275,14 @@ describe('reactivity/readonly', () => {
             expect(isReactive(value)).toBe(true)
           }
         })
+
+        test('should return undefined from Map.clear() call', () => {
+          const wrapped = readonly(new Collection())
+          expect(wrapped.clear()).toBeUndefined()
+          expect(
+            `Clear operation failed: target is readonly.`,
+          ).toHaveBeenWarned()
+        })
       }
     })
   })
@@ -309,7 +317,7 @@ describe('reactivity/readonly', () => {
         expect(dummy).toBe(false)
         expect(set.has(key)).toBe(false)
         expect(
-          `Add operation on key "${key}" failed: target is readonly.`
+          `Add operation on key "${key}" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -332,6 +340,14 @@ describe('reactivity/readonly', () => {
             expect(isReadonly(v2)).toBe(true)
           }
         })
+
+        test('should return undefined from Set.clear() call', () => {
+          const wrapped = readonly(new Collection())
+          expect(wrapped.clear()).toBeUndefined()
+          expect(
+            `Clear operation failed: target is readonly.`,
+          ).toHaveBeenWarned()
+        })
       }
     })
   })
@@ -431,7 +447,7 @@ describe('reactivity/readonly', () => {
   test('markRaw', () => {
     const obj = readonly({
       foo: { a: 1 },
-      bar: markRaw({ b: 2 })
+      bar: markRaw({ b: 2 }),
     })
     expect(isReadonly(obj.foo)).toBe(true)
     expect(isReactive(obj.bar)).toBe(false)
@@ -443,7 +459,7 @@ describe('reactivity/readonly', () => {
     n.value = 2
     expect(n.value).toBe(1)
     expect(
-      `Set operation on key "value" failed: target is readonly.`
+      `Set operation on key "value" failed: target is readonly.`,
     ).toHaveBeenWarned()
   })
 
@@ -457,13 +473,13 @@ describe('reactivity/readonly', () => {
 
     expect(rC.value).toBe(true)
     expect(
-      'Set operation on key "_dirty" failed: target is readonly.'
+      'Set operation on key "_dirty" failed: target is readonly.',
     ).not.toHaveBeenWarned()
     // @ts-expect-error - non-existent property
     rC.randomProperty = true
 
     expect(
-      'Set operation on key "randomProperty" failed: target is readonly.'
+      'Set operation on key "randomProperty" failed: target is readonly.',
     ).toHaveBeenWarned()
   })
 
diff --git a/packages/reactivity/__tests__/ref.bench.ts b/packages/reactivity/__tests__/ref.bench.ts
new file mode 100644
index 00000000000..286d53e8840
--- /dev/null
+++ b/packages/reactivity/__tests__/ref.bench.ts
@@ -0,0 +1,33 @@
+import { bench, describe } from 'vitest'
+import { ref } from '../src/index'
+
+describe('ref', () => {
+  bench('create ref', () => {
+    ref(100)
+  })
+
+  {
+    let i = 0
+    const v = ref(100)
+    bench('write ref', () => {
+      v.value = i++
+    })
+  }
+
+  {
+    const v = ref(100)
+    bench('read ref', () => {
+      v.value
+    })
+  }
+
+  {
+    let i = 0
+    const v = ref(100)
+    bench('write/read ref', () => {
+      v.value = i++
+
+      v.value
+    })
+  }
+})
diff --git a/packages/reactivity/__tests__/ref.spec.ts b/packages/reactivity/__tests__/ref.spec.ts
index 0ee32866da8..2b2024d9723 100644
--- a/packages/reactivity/__tests__/ref.spec.ts
+++ b/packages/reactivity/__tests__/ref.spec.ts
@@ -1,20 +1,20 @@
 import {
-  ref,
+  type Ref,
   effect,
-  reactive,
+  isReactive,
   isRef,
+  reactive,
+  ref,
   toRef,
   toRefs,
-  Ref,
-  isReactive
 } from '../src/index'
 import { computed } from '@vue/runtime-dom'
-import { shallowRef, unref, customRef, triggerRef } from '../src/ref'
+import { customRef, shallowRef, triggerRef, unref } from '../src/ref'
 import {
   isReadonly,
   isShallow,
   readonly,
-  shallowReactive
+  shallowReactive,
 } from '../src/reactive'
 
 describe('reactivity/ref', () => {
@@ -44,7 +44,7 @@ describe('reactivity/ref', () => {
 
   it('should make nested properties reactive', () => {
     const a = ref({
-      count: 1
+      count: 1,
     })
     let dummy
     effect(() => {
@@ -71,8 +71,8 @@ describe('reactivity/ref', () => {
     const obj = reactive({
       a,
       b: {
-        c: a
-      }
+        c: a,
+      },
     })
 
     let dummy1: number
@@ -104,7 +104,7 @@ describe('reactivity/ref', () => {
 
   it('should unwrap nested values in types', () => {
     const a = {
-      b: ref(0)
+      b: ref(0),
     }
 
     const c = ref(a)
@@ -138,7 +138,7 @@ describe('reactivity/ref', () => {
       '1',
       { a: 1 },
       () => 0,
-      ref(0)
+      ref(0),
     ]
     const tupleRef = ref(tuple)
 
@@ -169,7 +169,7 @@ describe('reactivity/ref', () => {
       [Symbol.toPrimitive]: new WeakMap<Ref<boolean>, string>(),
       [Symbol.toStringTag]: { weakSet: new WeakSet<Ref<boolean>>() },
       [Symbol.unscopables]: { weakMap: new WeakMap<Ref<boolean>, string>() },
-      [customSymbol]: { arr: [ref(1)] }
+      [customSymbol]: { arr: [ref(1)] },
     }
 
     const objRef = ref(obj)
@@ -188,7 +188,7 @@ describe('reactivity/ref', () => {
       Symbol.toPrimitive,
       Symbol.toStringTag,
       Symbol.unscopables,
-      customSymbol
+      customSymbol,
     ]
 
     keys.forEach(key => {
@@ -248,7 +248,7 @@ describe('reactivity/ref', () => {
 
   test('toRef', () => {
     const a = reactive({
-      x: 1
+      x: 1,
     })
     const x = toRef(a, 'x')
     expect(isRef(x)).toBe(true)
@@ -313,7 +313,7 @@ describe('reactivity/ref', () => {
   test('toRefs', () => {
     const a = reactive({
       x: 1,
-      y: 2
+      y: 2,
     })
 
     const { x, y } = toRefs(a)
@@ -386,7 +386,7 @@ describe('reactivity/ref', () => {
       set(newValue: number) {
         value = newValue
         _trigger = trigger
-      }
+      },
     }))
 
     expect(isRef(custom)).toBe(true)
diff --git a/packages/reactivity/__tests__/shallowReactive.spec.ts b/packages/reactivity/__tests__/shallowReactive.spec.ts
index bc49078029a..e9b64d39b36 100644
--- a/packages/reactivity/__tests__/shallowReactive.spec.ts
+++ b/packages/reactivity/__tests__/shallowReactive.spec.ts
@@ -3,11 +3,11 @@ import {
   isShallow,
   reactive,
   shallowReactive,
-  shallowReadonly
+  shallowReadonly,
 } from '../src/reactive'
 
 import { effect } from '../src/effect'
-import { Ref, isRef, ref } from '../src/ref'
+import { type Ref, isRef, ref } from '../src/ref'
 
 describe('shallowReactive', () => {
   test('should not make non-reactive properties reactive', () => {
@@ -50,7 +50,7 @@ describe('shallowReactive', () => {
   // vuejs/vue#12597
   test('should not unwrap refs', () => {
     const foo = shallowReactive({
-      bar: ref(123)
+      bar: ref(123),
     })
     expect(isRef(foo.bar)).toBe(true)
     expect(foo.bar.value).toBe(123)
@@ -60,7 +60,7 @@ describe('shallowReactive', () => {
   test('should not mutate refs', () => {
     const original = ref(123)
     const foo = shallowReactive<{ bar: Ref<number> | number }>({
-      bar: original
+      bar: original,
     })
     expect(foo.bar).toBe(original)
     foo.bar = 234
@@ -133,8 +133,8 @@ describe('shallowReactive', () => {
           a = Array.from(shallowSet)
         },
         {
-          onTrack: onTrackFn
-        }
+          onTrack: onTrackFn,
+        },
       )
 
       expect(a).toMatchObject([])
@@ -178,8 +178,8 @@ describe('shallowReactive', () => {
           a = Array.from(shallowArray)
         },
         {
-          onTrack: onTrackFn
-        }
+          onTrack: onTrackFn,
+        },
       )
 
       expect(a).toMatchObject([])
diff --git a/packages/reactivity/__tests__/shallowReadonly.spec.ts b/packages/reactivity/__tests__/shallowReadonly.spec.ts
index 79d4376cc01..193bc27c520 100644
--- a/packages/reactivity/__tests__/shallowReadonly.spec.ts
+++ b/packages/reactivity/__tests__/shallowReadonly.spec.ts
@@ -12,7 +12,7 @@ describe('reactivity/shallowReadonly', () => {
     props.n = 2
     expect(props.n).toBe(1)
     expect(
-      `Set operation on key "n" failed: target is readonly.`
+      `Set operation on key "n" failed: target is readonly.`,
     ).toHaveBeenWarned()
   })
 
@@ -23,7 +23,7 @@ describe('reactivity/shallowReadonly', () => {
     props.n.foo = 2
     expect(props.n.foo).toBe(2)
     expect(
-      `Set operation on key "foo" failed: target is readonly.`
+      `Set operation on key "foo" failed: target is readonly.`,
     ).not.toHaveBeenWarned()
   })
 
@@ -50,7 +50,7 @@ describe('reactivity/shallowReadonly', () => {
 
         sroMap.set(key, {} as any)
         expect(
-          `Set operation on key "[object Object]" failed: target is readonly.`
+          `Set operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
 
@@ -64,7 +64,7 @@ describe('reactivity/shallowReadonly', () => {
 
         sroMap.get(key)!.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
@@ -84,7 +84,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -93,7 +93,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -109,10 +109,16 @@ describe('reactivity/shallowReadonly', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
+
+    test('should return undefined from Map.clear() call', () => {
+      const sroMap = shallowReadonly(new Map())
+      expect(sroMap.clear()).toBeUndefined()
+      expect(`Clear operation failed: target is readonly.`).toHaveBeenWarned()
+    })
   })
 
   describe('collection/Set', () => {
@@ -127,7 +133,7 @@ describe('reactivity/shallowReadonly', () => {
 
         sroSet.add({} as any)
         expect(
-          `Add operation on key "[object Object]" failed: target is readonly.`
+          `Add operation on key "[object Object]" failed: target is readonly.`,
         ).toHaveBeenWarned()
       })
     })
@@ -145,12 +151,12 @@ describe('reactivity/shallowReadonly', () => {
 
       sroSet.add({} as any)
       expect(
-        `Add operation on key "[object Object]" failed: target is readonly.`
+        `Add operation on key "[object Object]" failed: target is readonly.`,
       ).toHaveBeenWarned()
 
       values[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -168,7 +174,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values1[0].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
 
       expect(isReadonly(values2[0][1])).toBe(false)
@@ -177,7 +183,7 @@ describe('reactivity/shallowReadonly', () => {
 
       values2[0][1].foo = 2
       expect(
-        `Set operation on key "foo" failed: target is readonly.`
+        `Set operation on key "foo" failed: target is readonly.`,
       ).not.toHaveBeenWarned()
     })
 
@@ -193,9 +199,15 @@ describe('reactivity/shallowReadonly', () => {
 
         val.foo = 2
         expect(
-          `Set operation on key "foo" failed: target is readonly.`
+          `Set operation on key "foo" failed: target is readonly.`,
         ).not.toHaveBeenWarned()
       })
     })
+
+    test('should return undefined from Set.clear() call', () => {
+      const sroSet = shallowReadonly(new Set())
+      expect(sroSet.clear()).toBeUndefined()
+      expect(`Clear operation failed: target is readonly.`).toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/reactivity/package.json b/packages/reactivity/package.json
index 5438a3debd8..c4f412f4e6a 100644
--- a/packages/reactivity/package.json
+++ b/packages/reactivity/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
@@ -11,6 +11,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/reactivity.d.ts",
+      "node": {
+        "production": "./dist/reactivity.cjs.prod.js",
+        "development": "./dist/reactivity.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/reactivity.esm-bundler.js",
+      "import": "./dist/reactivity.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -36,6 +50,6 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/reactivity#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5"
+    "@vue/shared": "workspace:*"
   }
 }
diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
index 259b44a1edc..a1b3003a5e7 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -1,32 +1,31 @@
 import {
+  type Target,
+  isReadonly,
+  isShallow,
   reactive,
+  reactiveMap,
   readonly,
-  toRaw,
-  ReactiveFlags,
-  Target,
   readonlyMap,
-  reactiveMap,
   shallowReactiveMap,
   shallowReadonlyMap,
-  isReadonly,
-  isShallow
+  toRaw,
 } from './reactive'
-import { TrackOpTypes, TriggerOpTypes } from './operations'
+import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
 import {
-  track,
-  trigger,
-  ITERATE_KEY,
+  pauseScheduling,
   pauseTracking,
-  resetTracking
+  resetScheduling,
+  resetTracking,
 } from './effect'
+import { ITERATE_KEY, track, trigger } from './reactiveEffect'
 import {
-  isObject,
-  hasOwn,
-  isSymbol,
   hasChanged,
+  hasOwn,
   isArray,
   isIntegerKey,
-  makeMap
+  isObject,
+  isSymbol,
+  makeMap,
 } from '@vue/shared'
 import { isRef } from './ref'
 import { warn } from './warning'
@@ -41,7 +40,7 @@ const builtInSymbols = new Set(
     // function
     .filter(key => key !== 'arguments' && key !== 'caller')
     .map(key => (Symbol as any)[key])
-    .filter(isSymbol)
+    .filter(isSymbol),
 )
 
 const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations()
@@ -71,7 +70,9 @@ function createArrayInstrumentations() {
   ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
     instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
       pauseTracking()
+      pauseScheduling()
       const res = (toRaw(this) as any)[key].apply(this, args)
+      resetScheduling()
       resetTracking()
       return res
     }
@@ -88,7 +89,7 @@ function hasOwnProperty(this: object, key: string) {
 class BaseReactiveHandler implements ProxyHandler<Target> {
   constructor(
     protected readonly _isReadonly = false,
-    protected readonly _shallow = false
+    protected readonly _shallow = false,
   ) {}
 
   get(target: Target, key: string | symbol, receiver: object) {
@@ -100,19 +101,25 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
       return isReadonly
     } else if (key === ReactiveFlags.IS_SHALLOW) {
       return shallow
-    } else if (
-      key === ReactiveFlags.RAW &&
-      receiver ===
-        (isReadonly
-          ? shallow
-            ? shallowReadonlyMap
-            : readonlyMap
-          : shallow
-          ? shallowReactiveMap
-          : reactiveMap
-        ).get(target)
-    ) {
-      return target
+    } else if (key === ReactiveFlags.RAW) {
+      if (
+        receiver ===
+          (isReadonly
+            ? shallow
+              ? shallowReadonlyMap
+              : readonlyMap
+            : shallow
+              ? shallowReactiveMap
+              : reactiveMap
+          ).get(target) ||
+        // receiver is not the reactive proxy, but has the same prototype
+        // this means the reciever is a user proxy of the reactive proxy
+        Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)
+      ) {
+        return target
+      }
+      // early return undefined
+      return
     }
 
     const targetIsArray = isArray(target)
@@ -165,20 +172,22 @@ class MutableReactiveHandler extends BaseReactiveHandler {
     target: object,
     key: string | symbol,
     value: unknown,
-    receiver: object
+    receiver: object,
   ): boolean {
     let oldValue = (target as any)[key]
-    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
-      return false
-    }
     if (!this._shallow) {
+      const isOldValueReadonly = isReadonly(oldValue)
       if (!isShallow(value) && !isReadonly(value)) {
         oldValue = toRaw(oldValue)
         value = toRaw(value)
       }
       if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
-        oldValue.value = value
-        return true
+        if (isOldValueReadonly) {
+          return false
+        } else {
+          oldValue.value = value
+          return true
+        }
       }
     } else {
       // in shallow mode, objects are set as-is regardless of reactive or not
@@ -221,7 +230,7 @@ class MutableReactiveHandler extends BaseReactiveHandler {
     track(
       target,
       TrackOpTypes.ITERATE,
-      isArray(target) ? 'length' : ITERATE_KEY
+      isArray(target) ? 'length' : ITERATE_KEY,
     )
     return Reflect.ownKeys(target)
   }
@@ -236,7 +245,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
     if (__DEV__) {
       warn(
         `Set operation on key "${String(key)}" failed: target is readonly.`,
-        target
+        target,
       )
     }
     return true
@@ -246,7 +255,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
     if (__DEV__) {
       warn(
         `Delete operation on key "${String(key)}" failed: target is readonly.`,
-        target
+        target,
       )
     }
     return true
@@ -260,7 +269,7 @@ export const readonlyHandlers: ProxyHandler<object> =
   /*#__PURE__*/ new ReadonlyReactiveHandler()
 
 export const shallowReactiveHandlers = /*#__PURE__*/ new MutableReactiveHandler(
-  true
+  true,
 )
 
 // Props handlers are special in the sense that it should not unwrap top-level
diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts
index 1d07af3be8c..58e69b1cc62 100644
--- a/packages/reactivity/src/collectionHandlers.ts
+++ b/packages/reactivity/src/collectionHandlers.ts
@@ -1,9 +1,14 @@
-import { toRaw, ReactiveFlags, toReactive, toReadonly } from './reactive'
-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
+import { toRaw, toReactive, toReadonly } from './reactive'
+import {
+  ITERATE_KEY,
+  MAP_KEY_ITERATE_KEY,
+  track,
+  trigger,
+} from './reactiveEffect'
+import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
+import { capitalize, hasChanged, hasOwn, isMap, toRawType } from '@vue/shared'
+
+type CollectionTypes = IterableCollections | WeakCollections
 
 type IterableCollections = Map<any, any> | Set<any>
 type WeakCollections = WeakMap<any, any> | WeakSet<any>
@@ -19,7 +24,7 @@ function get(
   target: MapTypes,
   key: unknown,
   isReadonly = false,
-  isShallow = false
+  isShallow = false,
 ) {
   // #1772: readonly(reactive(Map)) should return readonly + reactive version
   // of the value
@@ -141,7 +146,7 @@ function createForEach(isReadonly: boolean, isShallow: boolean) {
   return function forEach(
     this: IterableCollections,
     callback: Function,
-    thisArg?: unknown
+    thisArg?: unknown,
   ) {
     const observed = this as any
     const target = observed[ReactiveFlags.RAW]
@@ -173,7 +178,7 @@ interface IterationResult {
 function createIterableMethod(
   method: string | symbol,
   isReadonly: boolean,
-  isShallow: boolean
+  isShallow: boolean,
 ) {
   return function (
     this: IterableCollections,
@@ -191,7 +196,7 @@ function createIterableMethod(
       track(
         rawTarget,
         TrackOpTypes.ITERATE,
-        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
+        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY,
       )
     // return a wrapped iterator which returns observed versions of the
     // values emitted from the real iterator
@@ -203,13 +208,13 @@ function createIterableMethod(
           ? { value, done }
           : {
               value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
-              done
+              done,
             }
       },
       // iterable protocol
       [Symbol.iterator]() {
         return this
-      }
+      },
     }
   }
 }
@@ -220,10 +225,14 @@ function createReadonlyMethod(type: TriggerOpTypes): Function {
       const key = args[0] ? `on key "${args[0]}" ` : ``
       console.warn(
         `${capitalize(type)} operation ${key}failed: target is readonly.`,
-        toRaw(this)
+        toRaw(this),
       )
     }
-    return type === TriggerOpTypes.DELETE ? false : this
+    return type === TriggerOpTypes.DELETE
+      ? false
+      : type === TriggerOpTypes.CLEAR
+        ? undefined
+        : this
   }
 }
 
@@ -240,7 +249,7 @@ function createInstrumentations() {
     set,
     delete: deleteEntry,
     clear,
-    forEach: createForEach(false, false)
+    forEach: createForEach(false, false),
   }
 
   const shallowInstrumentations: Record<string, Function | number> = {
@@ -255,7 +264,7 @@ function createInstrumentations() {
     set,
     delete: deleteEntry,
     clear,
-    forEach: createForEach(false, true)
+    forEach: createForEach(false, true),
   }
 
   const readonlyInstrumentations: Record<string, Function | number> = {
@@ -272,7 +281,7 @@ function createInstrumentations() {
     set: createReadonlyMethod(TriggerOpTypes.SET),
     delete: createReadonlyMethod(TriggerOpTypes.DELETE),
     clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
-    forEach: createForEach(true, false)
+    forEach: createForEach(true, false),
   }
 
   const shallowReadonlyInstrumentations: Record<string, Function | number> = {
@@ -289,7 +298,7 @@ function createInstrumentations() {
     set: createReadonlyMethod(TriggerOpTypes.SET),
     delete: createReadonlyMethod(TriggerOpTypes.DELETE),
     clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
-    forEach: createForEach(true, true)
+    forEach: createForEach(true, true),
   }
 
   const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
@@ -297,22 +306,22 @@ function createInstrumentations() {
     mutableInstrumentations[method as string] = createIterableMethod(
       method,
       false,
-      false
+      false,
     )
     readonlyInstrumentations[method as string] = createIterableMethod(
       method,
       true,
-      false
+      false,
     )
     shallowInstrumentations[method as string] = createIterableMethod(
       method,
       false,
-      true
+      true,
     )
     shallowReadonlyInstrumentations[method as string] = createIterableMethod(
       method,
       true,
-      true
+      true,
     )
   })
 
@@ -320,7 +329,7 @@ function createInstrumentations() {
     mutableInstrumentations,
     readonlyInstrumentations,
     shallowInstrumentations,
-    shallowReadonlyInstrumentations
+    shallowReadonlyInstrumentations,
   ]
 }
 
@@ -328,7 +337,7 @@ const [
   mutableInstrumentations,
   readonlyInstrumentations,
   shallowInstrumentations,
-  shallowReadonlyInstrumentations
+  shallowReadonlyInstrumentations,
 ] = /* #__PURE__*/ createInstrumentations()
 
 function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
@@ -337,13 +346,13 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
       ? shallowReadonlyInstrumentations
       : shallowInstrumentations
     : isReadonly
-    ? readonlyInstrumentations
-    : mutableInstrumentations
+      ? readonlyInstrumentations
+      : mutableInstrumentations
 
   return (
     target: CollectionTypes,
     key: string | symbol,
-    receiver: CollectionTypes
+    receiver: CollectionTypes,
   ) => {
     if (key === ReactiveFlags.IS_REACTIVE) {
       return !isReadonly
@@ -358,32 +367,32 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
         ? instrumentations
         : target,
       key,
-      receiver
+      receiver,
     )
   }
 }
 
 export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
-  get: /*#__PURE__*/ createInstrumentationGetter(false, false)
+  get: /*#__PURE__*/ createInstrumentationGetter(false, false),
 }
 
 export const shallowCollectionHandlers: ProxyHandler<CollectionTypes> = {
-  get: /*#__PURE__*/ createInstrumentationGetter(false, true)
+  get: /*#__PURE__*/ createInstrumentationGetter(false, true),
 }
 
 export const readonlyCollectionHandlers: ProxyHandler<CollectionTypes> = {
-  get: /*#__PURE__*/ createInstrumentationGetter(true, false)
+  get: /*#__PURE__*/ createInstrumentationGetter(true, false),
 }
 
 export const shallowReadonlyCollectionHandlers: ProxyHandler<CollectionTypes> =
   {
-    get: /*#__PURE__*/ createInstrumentationGetter(true, true)
+    get: /*#__PURE__*/ createInstrumentationGetter(true, true),
   }
 
 function checkIdentityKeys(
   target: CollectionTypes,
   has: (key: unknown) => boolean,
-  key: unknown
+  key: unknown,
 ) {
   const rawKey = toRaw(key)
   if (rawKey !== key && has.call(target, rawKey)) {
@@ -393,7 +402,7 @@ function checkIdentityKeys(
         `versions of the same object${type === `Map` ? ` as keys` : ``}, ` +
         `which can lead to inconsistencies. ` +
         `Avoid differentiating between the raw and reactive versions ` +
-        `of an object and only use the reactive version if possible.`
+        `of an object and only use the reactive version if possible.`,
     )
   }
 }
diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts
index b24484c9e62..a4b74172fcf 100644
--- a/packages/reactivity/src/computed.ts
+++ b/packages/reactivity/src/computed.ts
@@ -1,8 +1,10 @@
-import { DebuggerOptions, ReactiveEffect } from './effect'
-import { Ref, trackRefValue, triggerRefValue } from './ref'
-import { isFunction, NOOP } from '@vue/shared'
-import { ReactiveFlags, toRaw } from './reactive'
-import { Dep } from './dep'
+import { type DebuggerOptions, ReactiveEffect } from './effect'
+import { type Ref, trackRefValue, triggerRefValue } from './ref'
+import { NOOP, hasChanged, isFunction } from '@vue/shared'
+import { toRaw } from './reactive'
+import type { Dep } from './dep'
+import { DirtyLevels, ReactiveFlags } from './constants'
+import { warn } from './warning'
 
 declare const ComputedRefSymbol: unique symbol
 
@@ -15,14 +17,20 @@ export interface WritableComputedRef<T> extends Ref<T> {
   readonly effect: ReactiveEffect<T>
 }
 
-export type ComputedGetter<T> = (...args: any[]) => T
-export type ComputedSetter<T> = (v: T) => void
+export type ComputedGetter<T> = (oldValue?: T) => T
+export type ComputedSetter<T> = (newValue: T) => void
 
 export interface WritableComputedOptions<T> {
   get: ComputedGetter<T>
   set: ComputedSetter<T>
 }
 
+export const COMPUTED_SIDE_EFFECT_WARN =
+  `Computed is still dirty after getter evaluation,` +
+  ` likely because a computed is mutating its own dependency in its getter.` +
+  ` State mutations in computed getters should be avoided. ` +
+  ` Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`
+
 export class ComputedRefImpl<T> {
   public dep?: Dep = undefined
 
@@ -32,21 +40,24 @@ export class ComputedRefImpl<T> {
   public readonly __v_isRef = true
   public readonly [ReactiveFlags.IS_READONLY]: boolean = false
 
-  public _dirty = true
   public _cacheable: boolean
 
   constructor(
     getter: ComputedGetter<T>,
     private readonly _setter: ComputedSetter<T>,
     isReadonly: boolean,
-    isSSR: boolean
+    isSSR: boolean,
   ) {
-    this.effect = new ReactiveEffect(getter, () => {
-      if (!this._dirty) {
-        this._dirty = true
-        triggerRefValue(this)
-      }
-    })
+    this.effect = new ReactiveEffect(
+      () => getter(this._value),
+      () =>
+        triggerRefValue(
+          this,
+          this.effect._dirtyLevel === DirtyLevels.MaybeDirty_ComputedSideEffect
+            ? DirtyLevels.MaybeDirty_ComputedSideEffect
+            : DirtyLevels.MaybeDirty,
+        ),
+    )
     this.effect.computed = this
     this.effect.active = this._cacheable = !isSSR
     this[ReactiveFlags.IS_READONLY] = isReadonly
@@ -55,10 +66,16 @@ export class ComputedRefImpl<T> {
   get value() {
     // the computed ref may get wrapped by other proxies e.g. readonly() #3376
     const self = toRaw(this)
+    if (
+      (!self._cacheable || self.effect.dirty) &&
+      hasChanged(self._value, (self._value = self.effect.run()!))
+    ) {
+      triggerRefValue(self, DirtyLevels.Dirty)
+    }
     trackRefValue(self)
-    if (self._dirty || !self._cacheable) {
-      self._dirty = false
-      self._value = self.effect.run()!
+    if (self.effect._dirtyLevel >= DirtyLevels.MaybeDirty_ComputedSideEffect) {
+      __DEV__ && warn(COMPUTED_SIDE_EFFECT_WARN)
+      triggerRefValue(self, DirtyLevels.MaybeDirty_ComputedSideEffect)
     }
     return self._value
   }
@@ -66,6 +83,16 @@ export class ComputedRefImpl<T> {
   set value(newValue: T) {
     this._setter(newValue)
   }
+
+  // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
+  get _dirty() {
+    return this.effect.dirty
+  }
+
+  set _dirty(v) {
+    this.effect.dirty = v
+  }
+  // #endregion
 }
 
 /**
@@ -103,16 +130,16 @@ export class ComputedRefImpl<T> {
  */
 export function computed<T>(
   getter: ComputedGetter<T>,
-  debugOptions?: DebuggerOptions
+  debugOptions?: DebuggerOptions,
 ): ComputedRef<T>
 export function computed<T>(
   options: WritableComputedOptions<T>,
-  debugOptions?: DebuggerOptions
+  debugOptions?: DebuggerOptions,
 ): WritableComputedRef<T>
 export function computed<T>(
   getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
   debugOptions?: DebuggerOptions,
-  isSSR = false
+  isSSR = false,
 ) {
   let getter: ComputedGetter<T>
   let setter: ComputedSetter<T>
@@ -122,7 +149,7 @@ export function computed<T>(
     getter = getterOrOptions
     setter = __DEV__
       ? () => {
-          console.warn('Write operation failed: computed value is readonly')
+          warn('Write operation failed: computed value is readonly')
         }
       : NOOP
   } else {
diff --git a/packages/reactivity/src/constants.ts b/packages/reactivity/src/constants.ts
new file mode 100644
index 00000000000..baa75d61644
--- /dev/null
+++ b/packages/reactivity/src/constants.ts
@@ -0,0 +1,31 @@
+// using literal strings instead of numbers so that it's easier to inspect
+// debugger events
+
+export enum TrackOpTypes {
+  GET = 'get',
+  HAS = 'has',
+  ITERATE = 'iterate',
+}
+
+export enum TriggerOpTypes {
+  SET = 'set',
+  ADD = 'add',
+  DELETE = 'delete',
+  CLEAR = 'clear',
+}
+
+export enum ReactiveFlags {
+  SKIP = '__v_skip',
+  IS_REACTIVE = '__v_isReactive',
+  IS_READONLY = '__v_isReadonly',
+  IS_SHALLOW = '__v_isShallow',
+  RAW = '__v_raw',
+}
+
+export enum DirtyLevels {
+  NotDirty = 0,
+  QueryingDirty = 1,
+  MaybeDirty_ComputedSideEffect = 2,
+  MaybeDirty = 3,
+  Dirty = 4,
+}
diff --git a/packages/reactivity/src/deferredComputed.ts b/packages/reactivity/src/deferredComputed.ts
index a23122046a4..1dbba1f3f03 100644
--- a/packages/reactivity/src/deferredComputed.ts
+++ b/packages/reactivity/src/deferredComputed.ts
@@ -1,88 +1,6 @@
-import { Dep } from './dep'
-import { ReactiveEffect } from './effect'
-import { ComputedGetter, ComputedRef } from './computed'
-import { ReactiveFlags, toRaw } from './reactive'
-import { trackRefValue, triggerRefValue } from './ref'
+import { computed } from './computed'
 
-const tick = /*#__PURE__*/ Promise.resolve()
-const queue: any[] = []
-let queued = false
-
-const scheduler = (fn: any) => {
-  queue.push(fn)
-  if (!queued) {
-    queued = true
-    tick.then(flush)
-  }
-}
-
-const flush = () => {
-  for (let i = 0; i < queue.length; i++) {
-    queue[i]()
-  }
-  queue.length = 0
-  queued = false
-}
-
-class DeferredComputedRefImpl<T> {
-  public dep?: Dep = undefined
-
-  private _value!: T
-  private _dirty = true
-  public readonly effect: ReactiveEffect<T>
-
-  public readonly __v_isRef = true
-  public readonly [ReactiveFlags.IS_READONLY] = true
-
-  constructor(getter: ComputedGetter<T>) {
-    let compareTarget: any
-    let hasCompareTarget = false
-    let scheduled = false
-    this.effect = new ReactiveEffect(getter, (computedTrigger?: boolean) => {
-      if (this.dep) {
-        if (computedTrigger) {
-          compareTarget = this._value
-          hasCompareTarget = true
-        } else if (!scheduled) {
-          const valueToCompare = hasCompareTarget ? compareTarget : this._value
-          scheduled = true
-          hasCompareTarget = false
-          scheduler(() => {
-            if (this.effect.active && this._get() !== valueToCompare) {
-              triggerRefValue(this)
-            }
-            scheduled = false
-          })
-        }
-        // chained upstream computeds are notified synchronously to ensure
-        // value invalidation in case of sync access; normal effects are
-        // deferred to be triggered in scheduler.
-        for (const e of this.dep) {
-          if (e.computed instanceof DeferredComputedRefImpl) {
-            e.scheduler!(true /* computedTrigger */)
-          }
-        }
-      }
-      this._dirty = true
-    })
-    this.effect.computed = this as any
-  }
-
-  private _get() {
-    if (this._dirty) {
-      this._dirty = false
-      return (this._value = this.effect.run()!)
-    }
-    return this._value
-  }
-
-  get value() {
-    trackRefValue(this)
-    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
-    return toRaw(this)._get()
-  }
-}
-
-export function deferredComputed<T>(getter: () => T): ComputedRef<T> {
-  return new DeferredComputedRefImpl(getter) as any
-}
+/**
+ * @deprecated use `computed` instead. See #5912
+ */
+export const deferredComputed = computed
diff --git a/packages/reactivity/src/dep.ts b/packages/reactivity/src/dep.ts
index 8677f575756..c8e8a130dc9 100644
--- a/packages/reactivity/src/dep.ts
+++ b/packages/reactivity/src/dep.ts
@@ -1,57 +1,17 @@
-import { ReactiveEffect, trackOpBit } from './effect'
+import type { ReactiveEffect } from './effect'
+import type { ComputedRefImpl } from './computed'
 
-export type Dep = Set<ReactiveEffect> & TrackedMarkers
-
-/**
- * wasTracked and newTracked maintain the status for several levels of effect
- * tracking recursion. One bit per level is used to define whether the dependency
- * was/is tracked.
- */
-type TrackedMarkers = {
-  /**
-   * wasTracked
-   */
-  w: number
-  /**
-   * newTracked
-   */
-  n: number
+export type Dep = Map<ReactiveEffect, number> & {
+  cleanup: () => void
+  computed?: ComputedRefImpl<any>
 }
 
-export const createDep = (effects?: ReactiveEffect[]): Dep => {
-  const dep = new Set<ReactiveEffect>(effects) as Dep
-  dep.w = 0
-  dep.n = 0
+export const createDep = (
+  cleanup: () => void,
+  computed?: ComputedRefImpl<any>,
+): Dep => {
+  const dep = new Map() as Dep
+  dep.cleanup = cleanup
+  dep.computed = computed
   return dep
 }
-
-export const wasTracked = (dep: Dep): boolean => (dep.w & trackOpBit) > 0
-
-export const newTracked = (dep: Dep): boolean => (dep.n & trackOpBit) > 0
-
-export const initDepMarkers = ({ deps }: ReactiveEffect) => {
-  if (deps.length) {
-    for (let i = 0; i < deps.length; i++) {
-      deps[i].w |= trackOpBit // set was tracked
-    }
-  }
-}
-
-export const finalizeDepMarkers = (effect: ReactiveEffect) => {
-  const { deps } = effect
-  if (deps.length) {
-    let ptr = 0
-    for (let i = 0; i < deps.length; i++) {
-      const dep = deps[i]
-      if (wasTracked(dep) && !newTracked(dep)) {
-        dep.delete(effect)
-      } else {
-        deps[ptr++] = dep
-      }
-      // clear bits
-      dep.w &= ~trackOpBit
-      dep.n &= ~trackOpBit
-    }
-    deps.length = ptr
-  }
-}
diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts
index bbac96a4b2a..ca90544c0de 100644
--- a/packages/reactivity/src/effect.ts
+++ b/packages/reactivity/src/effect.ts
@@ -1,34 +1,12 @@
-import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { extend, isArray, isIntegerKey, isMap } from '@vue/shared'
-import { EffectScope, recordEffectScope } from './effectScope'
+import { NOOP, extend } from '@vue/shared'
+import type { ComputedRefImpl } from './computed'
 import {
-  createDep,
-  Dep,
-  finalizeDepMarkers,
-  initDepMarkers,
-  newTracked,
-  wasTracked
-} from './dep'
-import { ComputedRefImpl } from './computed'
-
-// The main WeakMap that stores {target -> key -> dep} connections.
-// Conceptually, it's easier to think of a dependency as a Dep class
-// which maintains a Set of subscribers, but we simply store them as
-// raw Sets to reduce memory overhead.
-type KeyToDepMap = Map<any, Dep>
-const targetMap = new WeakMap<object, KeyToDepMap>()
-
-// The number of effects currently being tracked recursively.
-let effectTrackDepth = 0
-
-export let trackOpBit = 1
-
-/**
- * The bitwise track markers support at most 30 levels of recursion.
- * This value is chosen to enable modern JS engines to use a SMI on all platforms.
- * When recursion depth is greater, fall back to using a full cleanup.
- */
-const maxMarkerBits = 30
+  DirtyLevels,
+  type TrackOpTypes,
+  type TriggerOpTypes,
+} from './constants'
+import type { Dep } from './dep'
+import { type EffectScope, recordEffectScope } from './effectScope'
 
 export type EffectScheduler = (...args: any[]) => any
 
@@ -47,13 +25,9 @@ export type DebuggerEventExtraInfo = {
 
 export let activeEffect: ReactiveEffect | undefined
 
-export const ITERATE_KEY = Symbol(__DEV__ ? 'iterate' : '')
-export const MAP_KEY_ITERATE_KEY = Symbol(__DEV__ ? 'Map key iterate' : '')
-
 export class ReactiveEffect<T = any> {
   active = true
   deps: Dep[] = []
-  parent: ReactiveEffect | undefined = undefined
 
   /**
    * Can be attached after creation
@@ -64,10 +38,6 @@ export class ReactiveEffect<T = any> {
    * @internal
    */
   allowRecurse?: boolean
-  /**
-   * @internal
-   */
-  private deferStop?: boolean
 
   onStop?: () => void
   // dev only
@@ -75,77 +45,120 @@ export class ReactiveEffect<T = any> {
   // dev only
   onTrigger?: (event: DebuggerEvent) => void
 
+  /**
+   * @internal
+   */
+  _dirtyLevel = DirtyLevels.Dirty
+  /**
+   * @internal
+   */
+  _trackId = 0
+  /**
+   * @internal
+   */
+  _runnings = 0
+  /**
+   * @internal
+   */
+  _shouldSchedule = false
+  /**
+   * @internal
+   */
+  _depsLength = 0
+
   constructor(
     public fn: () => T,
-    public scheduler: EffectScheduler | null = null,
-    scope?: EffectScope
+    public trigger: () => void,
+    public scheduler?: EffectScheduler,
+    scope?: EffectScope,
   ) {
     recordEffectScope(this, scope)
   }
 
+  public get dirty() {
+    if (
+      this._dirtyLevel === DirtyLevels.MaybeDirty_ComputedSideEffect ||
+      this._dirtyLevel === DirtyLevels.MaybeDirty
+    ) {
+      this._dirtyLevel = DirtyLevels.QueryingDirty
+      pauseTracking()
+      for (let i = 0; i < this._depsLength; i++) {
+        const dep = this.deps[i]
+        if (dep.computed) {
+          triggerComputed(dep.computed)
+          if (this._dirtyLevel >= DirtyLevels.Dirty) {
+            break
+          }
+        }
+      }
+      if (this._dirtyLevel === DirtyLevels.QueryingDirty) {
+        this._dirtyLevel = DirtyLevels.NotDirty
+      }
+      resetTracking()
+    }
+    return this._dirtyLevel >= DirtyLevels.Dirty
+  }
+
+  public set dirty(v) {
+    this._dirtyLevel = v ? DirtyLevels.Dirty : DirtyLevels.NotDirty
+  }
+
   run() {
+    this._dirtyLevel = DirtyLevels.NotDirty
     if (!this.active) {
       return this.fn()
     }
-    let parent: ReactiveEffect | undefined = activeEffect
     let lastShouldTrack = shouldTrack
-    while (parent) {
-      if (parent === this) {
-        return
-      }
-      parent = parent.parent
-    }
+    let lastEffect = activeEffect
     try {
-      this.parent = activeEffect
-      activeEffect = this
       shouldTrack = true
-
-      trackOpBit = 1 << ++effectTrackDepth
-
-      if (effectTrackDepth <= maxMarkerBits) {
-        initDepMarkers(this)
-      } else {
-        cleanupEffect(this)
-      }
+      activeEffect = this
+      this._runnings++
+      preCleanupEffect(this)
       return this.fn()
     } finally {
-      if (effectTrackDepth <= maxMarkerBits) {
-        finalizeDepMarkers(this)
-      }
-
-      trackOpBit = 1 << --effectTrackDepth
-
-      activeEffect = this.parent
+      postCleanupEffect(this)
+      this._runnings--
+      activeEffect = lastEffect
       shouldTrack = lastShouldTrack
-      this.parent = undefined
-
-      if (this.deferStop) {
-        this.stop()
-      }
     }
   }
 
   stop() {
-    // stopped while running itself - defer the cleanup
-    if (activeEffect === this) {
-      this.deferStop = true
-    } else if (this.active) {
-      cleanupEffect(this)
-      if (this.onStop) {
-        this.onStop()
-      }
+    if (this.active) {
+      preCleanupEffect(this)
+      postCleanupEffect(this)
+      this.onStop?.()
       this.active = false
     }
   }
 }
 
-function cleanupEffect(effect: ReactiveEffect) {
-  const { deps } = effect
-  if (deps.length) {
-    for (let i = 0; i < deps.length; i++) {
-      deps[i].delete(effect)
+function triggerComputed(computed: ComputedRefImpl<any>) {
+  return computed.value
+}
+
+function preCleanupEffect(effect: ReactiveEffect) {
+  effect._trackId++
+  effect._depsLength = 0
+}
+
+function postCleanupEffect(effect: ReactiveEffect) {
+  if (effect.deps.length > effect._depsLength) {
+    for (let i = effect._depsLength; i < effect.deps.length; i++) {
+      cleanupDepEffect(effect.deps[i], effect)
+    }
+    effect.deps.length = effect._depsLength
+  }
+}
+
+function cleanupDepEffect(dep: Dep, effect: ReactiveEffect) {
+  const trackId = dep.get(effect)
+  if (trackId !== undefined && effect._trackId !== trackId) {
+    dep.delete(effect)
+    if (dep.size === 0) {
+      dep.cleanup()
     }
-    deps.length = 0
   }
 }
 
@@ -179,13 +192,17 @@ export interface ReactiveEffectRunner<T = any> {
  */
 export function effect<T = any>(
   fn: () => T,
-  options?: ReactiveEffectOptions
+  options?: ReactiveEffectOptions,
 ): ReactiveEffectRunner {
   if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
     fn = (fn as ReactiveEffectRunner).effect.fn
   }
 
-  const _effect = new ReactiveEffect(fn)
+  const _effect = new ReactiveEffect(fn, NOOP, () => {
+    if (_effect.dirty) {
+      _effect.run()
+    }
+  })
   if (options) {
     extend(_effect, options)
     if (options.scope) recordEffectScope(_effect, options.scope)
@@ -208,6 +225,8 @@ export function stop(runner: ReactiveEffectRunner) {
 }
 
 export let shouldTrack = true
+export let pauseScheduleStack = 0
+
 const trackStack: boolean[] = []
 
 /**
@@ -234,196 +253,75 @@ export function resetTracking() {
   shouldTrack = last === undefined ? true : last
 }
 
-/**
- * Tracks access to a reactive property.
- *
- * This will check which effect is running at the moment and record it as dep
- * which records all effects that depend on the reactive property.
- *
- * @param target - Object holding the reactive property.
- * @param type - Defines the type of access to the reactive property.
- * @param key - Identifier of the reactive property to track.
- */
-export function track(target: object, type: TrackOpTypes, key: unknown) {
-  if (shouldTrack && activeEffect) {
-    let depsMap = targetMap.get(target)
-    if (!depsMap) {
-      targetMap.set(target, (depsMap = new Map()))
-    }
-    let dep = depsMap.get(key)
-    if (!dep) {
-      depsMap.set(key, (dep = createDep()))
-    }
-
-    const eventInfo = __DEV__
-      ? { effect: activeEffect, target, type, key }
-      : undefined
-
-    trackEffects(dep, eventInfo)
-  }
+export function pauseScheduling() {
+  pauseScheduleStack++
 }
 
-export function trackEffects(
-  dep: Dep,
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo
-) {
-  let shouldTrack = false
-  if (effectTrackDepth <= maxMarkerBits) {
-    if (!newTracked(dep)) {
-      dep.n |= trackOpBit // set newly tracked
-      shouldTrack = !wasTracked(dep)
-    }
-  } else {
-    // Full cleanup mode.
-    shouldTrack = !dep.has(activeEffect!)
-  }
-
-  if (shouldTrack) {
-    dep.add(activeEffect!)
-    activeEffect!.deps.push(dep)
-    if (__DEV__ && activeEffect!.onTrack) {
-      activeEffect!.onTrack(
-        extend(
-          {
-            effect: activeEffect!
-          },
-          debuggerEventExtraInfo!
-        )
-      )
-    }
+export function resetScheduling() {
+  pauseScheduleStack--
+  while (!pauseScheduleStack && queueEffectSchedulers.length) {
+    queueEffectSchedulers.shift()!()
   }
 }
 
-/**
- * Finds all deps associated with the target (or a specific property) and
- * triggers the effects stored within.
- *
- * @param target - The reactive object.
- * @param type - Defines the type of the operation that needs to trigger effects.
- * @param key - Can be used to target a specific reactive property in the target object.
- */
-export function trigger(
-  target: object,
-  type: TriggerOpTypes,
-  key?: unknown,
-  newValue?: unknown,
-  oldValue?: unknown,
-  oldTarget?: Map<unknown, unknown> | Set<unknown>
+export function trackEffect(
+  effect: ReactiveEffect,
+  dep: Dep,
+  debuggerEventExtraInfo?: DebuggerEventExtraInfo,
 ) {
-  const depsMap = targetMap.get(target)
-  if (!depsMap) {
-    // never been tracked
-    return
-  }
-
-  let deps: (Dep | undefined)[] = []
-  if (type === TriggerOpTypes.CLEAR) {
-    // collection being cleared
-    // trigger all effects for target
-    deps = [...depsMap.values()]
-  } else if (key === 'length' && isArray(target)) {
-    const newLength = Number(newValue)
-    depsMap.forEach((dep, key) => {
-      if (key === 'length' || key >= newLength) {
-        deps.push(dep)
-      }
-    })
-  } else {
-    // schedule runs for SET | ADD | DELETE
-    if (key !== void 0) {
-      deps.push(depsMap.get(key))
-    }
-
-    // also run for iteration key on ADD | DELETE | Map.SET
-    switch (type) {
-      case TriggerOpTypes.ADD:
-        if (!isArray(target)) {
-          deps.push(depsMap.get(ITERATE_KEY))
-          if (isMap(target)) {
-            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
-          }
-        } else if (isIntegerKey(key)) {
-          // new index added to array -> length changes
-          deps.push(depsMap.get('length'))
-        }
-        break
-      case TriggerOpTypes.DELETE:
-        if (!isArray(target)) {
-          deps.push(depsMap.get(ITERATE_KEY))
-          if (isMap(target)) {
-            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
-          }
-        }
-        break
-      case TriggerOpTypes.SET:
-        if (isMap(target)) {
-          deps.push(depsMap.get(ITERATE_KEY))
-        }
-        break
-    }
-  }
-
-  const eventInfo = __DEV__
-    ? { target, type, key, newValue, oldValue, oldTarget }
-    : undefined
-
-  if (deps.length === 1) {
-    if (deps[0]) {
-      if (__DEV__) {
-        triggerEffects(deps[0], eventInfo)
-      } else {
-        triggerEffects(deps[0])
-      }
-    }
-  } else {
-    const effects: ReactiveEffect[] = []
-    for (const dep of deps) {
-      if (dep) {
-        effects.push(...dep)
+  if (dep.get(effect) !== effect._trackId) {
+    dep.set(effect, effect._trackId)
+    const oldDep = effect.deps[effect._depsLength]
+    if (oldDep !== dep) {
+      if (oldDep) {
+        cleanupDepEffect(oldDep, effect)
       }
+      effect.deps[effect._depsLength++] = dep
+    } else {
+      effect._depsLength++
     }
     if (__DEV__) {
-      triggerEffects(createDep(effects), eventInfo)
-    } else {
-      triggerEffects(createDep(effects))
+      effect.onTrack?.(extend({ effect }, debuggerEventExtraInfo!))
     }
   }
 }
 
-export function triggerEffects(
-  dep: Dep | ReactiveEffect[],
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo
-) {
-  // spread into array for stabilization
-  const effects = isArray(dep) ? dep : [...dep]
-  for (const effect of effects) {
-    if (effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
-    }
-  }
-  for (const effect of effects) {
-    if (!effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
-    }
-  }
-}
+const queueEffectSchedulers: EffectScheduler[] = []
 
-function triggerEffect(
-  effect: ReactiveEffect,
-  debuggerEventExtraInfo?: DebuggerEventExtraInfo
+export function triggerEffects(
+  dep: Dep,
+  dirtyLevel: DirtyLevels,
+  debuggerEventExtraInfo?: DebuggerEventExtraInfo,
 ) {
-  if (effect !== activeEffect || effect.allowRecurse) {
-    if (__DEV__ && effect.onTrigger) {
-      effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
+  pauseScheduling()
+  for (const effect of dep.keys()) {
+    // dep.get(effect) is very expensive, we need to calculate it lazily and reuse the result
+    let tracking: boolean | undefined
+    if (
+      effect._dirtyLevel < dirtyLevel &&
+      (tracking ??= dep.get(effect) === effect._trackId)
+    ) {
+      effect._shouldSchedule ||= effect._dirtyLevel === DirtyLevels.NotDirty
+      effect._dirtyLevel = dirtyLevel
     }
-    if (effect.scheduler) {
-      effect.scheduler()
-    } else {
-      effect.run()
+    if (
+      effect._shouldSchedule &&
+      (tracking ??= dep.get(effect) === effect._trackId)
+    ) {
+      if (__DEV__) {
+        effect.onTrigger?.(extend({ effect }, debuggerEventExtraInfo))
+      }
+      effect.trigger()
+      if (
+        (!effect._runnings || effect.allowRecurse) &&
+        effect._dirtyLevel !== DirtyLevels.MaybeDirty_ComputedSideEffect
+      ) {
+        effect._shouldSchedule = false
+        if (effect.scheduler) {
+          queueEffectSchedulers.push(effect.scheduler)
+        }
+      }
     }
   }
-}
-
-export function getDepFromReactive(object: any, key: string | number | symbol) {
-  return targetMap.get(object)?.get(key)
+  resetScheduling()
 }
diff --git a/packages/reactivity/src/effectScope.ts b/packages/reactivity/src/effectScope.ts
index a65c48d031b..6a3eaec9fd5 100644
--- a/packages/reactivity/src/effectScope.ts
+++ b/packages/reactivity/src/effectScope.ts
@@ -1,4 +1,4 @@
-import { ReactiveEffect } from './effect'
+import type { ReactiveEffect } from './effect'
 import { warn } from './warning'
 
 let activeEffectScope: EffectScope | undefined
@@ -39,7 +39,7 @@ export class EffectScope {
     if (!detached && activeEffectScope) {
       this.index =
         (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
-          this
+          this,
         ) - 1
     }
   }
@@ -122,7 +122,7 @@ export function effectScope(detached?: boolean) {
 
 export function recordEffectScope(
   effect: ReactiveEffect,
-  scope: EffectScope | undefined = activeEffectScope
+  scope: EffectScope | undefined = activeEffectScope,
 ) {
   if (scope && scope.active) {
     scope.effects.push(effect)
@@ -151,7 +151,7 @@ export function onScopeDispose(fn: () => void) {
   } else if (__DEV__) {
     warn(
       `onScopeDispose() is called when there is no active effect scope` +
-        ` to be associated with.`
+        ` to be associated with.`,
     )
   }
 }
diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts
index ee4da5b1935..1c80fbc752b 100644
--- a/packages/reactivity/src/index.ts
+++ b/packages/reactivity/src/index.ts
@@ -18,7 +18,7 @@ export {
   type ShallowRef,
   type ShallowUnwrapRef,
   type RefUnwrapBailTypes,
-  type CustomRefFactory
+  type CustomRefFactory,
 } from './ref'
 export {
   reactive,
@@ -31,11 +31,10 @@ export {
   shallowReadonly,
   markRaw,
   toRaw,
-  ReactiveFlags /* @remove */,
   type Raw,
   type DeepReadonly,
   type ShallowReactive,
-  type UnwrapNestedRefs
+  type UnwrapNestedRefs,
 } from './reactive'
 export {
   computed,
@@ -43,33 +42,30 @@ export {
   type WritableComputedRef,
   type WritableComputedOptions,
   type ComputedGetter,
-  type ComputedSetter
+  type ComputedSetter,
 } from './computed'
 export { deferredComputed } from './deferredComputed'
 export {
   effect,
   stop,
-  trigger,
-  track,
   enableTracking,
   pauseTracking,
   resetTracking,
-  ITERATE_KEY,
+  pauseScheduling,
+  resetScheduling,
   ReactiveEffect,
   type ReactiveEffectRunner,
   type ReactiveEffectOptions,
   type EffectScheduler,
   type DebuggerOptions,
   type DebuggerEvent,
-  type DebuggerEventExtraInfo
+  type DebuggerEventExtraInfo,
 } from './effect'
+export { trigger, track, ITERATE_KEY } from './reactiveEffect'
 export {
   effectScope,
   EffectScope,
   getCurrentScope,
-  onScopeDispose
+  onScopeDispose,
 } from './effectScope'
-export {
-  TrackOpTypes /* @remove */,
-  TriggerOpTypes /* @remove */
-} from './operations'
+export { TrackOpTypes, TriggerOpTypes, ReactiveFlags } from './constants'
diff --git a/packages/reactivity/src/operations.ts b/packages/reactivity/src/operations.ts
deleted file mode 100644
index 1b96e982571..00000000000
--- a/packages/reactivity/src/operations.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// using literal strings instead of numbers so that it's easier to inspect
-// debugger events
-
-export const enum TrackOpTypes {
-  GET = 'get',
-  HAS = 'has',
-  ITERATE = 'iterate'
-}
-
-export const enum TriggerOpTypes {
-  SET = 'set',
-  ADD = 'add',
-  DELETE = 'delete',
-  CLEAR = 'clear'
-}
diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts
index 1881955cf1c..8b94dd9a47f 100644
--- a/packages/reactivity/src/reactive.ts
+++ b/packages/reactivity/src/reactive.ts
@@ -1,25 +1,18 @@
-import { isObject, toRawType, def } from '@vue/shared'
+import { def, isObject, toRawType } from '@vue/shared'
 import {
   mutableHandlers,
   readonlyHandlers,
   shallowReactiveHandlers,
-  shallowReadonlyHandlers
+  shallowReadonlyHandlers,
 } from './baseHandlers'
 import {
   mutableCollectionHandlers,
   readonlyCollectionHandlers,
   shallowCollectionHandlers,
-  shallowReadonlyCollectionHandlers
+  shallowReadonlyCollectionHandlers,
 } from './collectionHandlers'
-import type { UnwrapRefSimple, Ref, RawSymbol } from './ref'
-
-export const enum ReactiveFlags {
-  SKIP = '__v_skip',
-  IS_REACTIVE = '__v_isReactive',
-  IS_READONLY = '__v_isReadonly',
-  IS_SHALLOW = '__v_isShallow',
-  RAW = '__v_raw'
-}
+import type { RawSymbol, Ref, UnwrapRefSimple } from './ref'
+import { ReactiveFlags } from './constants'
 
 export interface Target {
   [ReactiveFlags.SKIP]?: boolean
@@ -34,10 +27,10 @@ export const shallowReactiveMap = new WeakMap<Target, any>()
 export const readonlyMap = new WeakMap<Target, any>()
 export const shallowReadonlyMap = new WeakMap<Target, any>()
 
-const enum TargetType {
+enum TargetType {
   INVALID = 0,
   COMMON = 1,
-  COLLECTION = 2
+  COLLECTION = 2,
 }
 
 function targetTypeMap(rawType: string) {
@@ -90,7 +83,7 @@ export function reactive(target: object) {
     false,
     mutableHandlers,
     mutableCollectionHandlers,
-    reactiveMap
+    reactiveMap,
   )
 }
 
@@ -129,14 +122,14 @@ export type ShallowReactive<T> = T & { [ShallowReactiveMarker]?: true }
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowreactive}
  */
 export function shallowReactive<T extends object>(
-  target: T
+  target: T,
 ): ShallowReactive<T> {
   return createReactiveObject(
     target,
     false,
     shallowReactiveHandlers,
     shallowCollectionHandlers,
-    shallowReactiveMap
+    shallowReactiveMap,
   )
 }
 
@@ -145,24 +138,24 @@ type Builtin = Primitive | Function | Date | Error | RegExp
 export type DeepReadonly<T> = T extends Builtin
   ? T
   : T extends Map<infer K, infer V>
-  ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
-  : T extends ReadonlyMap<infer K, infer V>
-  ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
-  : T extends WeakMap<infer K, infer V>
-  ? WeakMap<DeepReadonly<K>, DeepReadonly<V>>
-  : T extends Set<infer U>
-  ? ReadonlySet<DeepReadonly<U>>
-  : T extends ReadonlySet<infer U>
-  ? ReadonlySet<DeepReadonly<U>>
-  : T extends WeakSet<infer U>
-  ? WeakSet<DeepReadonly<U>>
-  : T extends Promise<infer U>
-  ? Promise<DeepReadonly<U>>
-  : T extends Ref<infer U>
-  ? Readonly<Ref<DeepReadonly<U>>>
-  : T extends {}
-  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
-  : Readonly<T>
+    ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+    : T extends ReadonlyMap<infer K, infer V>
+      ? ReadonlyMap<DeepReadonly<K>, DeepReadonly<V>>
+      : T extends WeakMap<infer K, infer V>
+        ? WeakMap<DeepReadonly<K>, DeepReadonly<V>>
+        : T extends Set<infer U>
+          ? ReadonlySet<DeepReadonly<U>>
+          : T extends ReadonlySet<infer U>
+            ? ReadonlySet<DeepReadonly<U>>
+            : T extends WeakSet<infer U>
+              ? WeakSet<DeepReadonly<U>>
+              : T extends Promise<infer U>
+                ? Promise<DeepReadonly<U>>
+                : T extends Ref<infer U>
+                  ? Readonly<Ref<DeepReadonly<U>>>
+                  : T extends {}
+                    ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
+                    : Readonly<T>
 
 /**
  * Takes an object (reactive or plain) or a ref and returns a readonly proxy to
@@ -194,14 +187,14 @@ export type DeepReadonly<T> = T extends Builtin
  * @see {@link https://vuejs.org/api/reactivity-core.html#readonly}
  */
 export function readonly<T extends object>(
-  target: T
+  target: T,
 ): DeepReadonly<UnwrapNestedRefs<T>> {
   return createReactiveObject(
     target,
     true,
     readonlyHandlers,
     readonlyCollectionHandlers,
-    readonlyMap
+    readonlyMap,
   )
 }
 
@@ -241,7 +234,7 @@ export function shallowReadonly<T extends object>(target: T): Readonly<T> {
     true,
     shallowReadonlyHandlers,
     shallowReadonlyCollectionHandlers,
-    shallowReadonlyMap
+    shallowReadonlyMap,
   )
 }
 
@@ -250,7 +243,7 @@ function createReactiveObject(
   isReadonly: boolean,
   baseHandlers: ProxyHandler<any>,
   collectionHandlers: ProxyHandler<any>,
-  proxyMap: WeakMap<Target, any>
+  proxyMap: WeakMap<Target, any>,
 ) {
   if (!isObject(target)) {
     if (__DEV__) {
@@ -278,7 +271,7 @@ function createReactiveObject(
   }
   const proxy = new Proxy(
     target,
-    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
+    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
   )
   proxyMap.set(target, proxy)
   return proxy
@@ -392,7 +385,9 @@ export type Raw<T> = T & { [RawSymbol]?: true }
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#markraw}
  */
 export function markRaw<T extends object>(value: T): Raw<T> {
-  def(value, ReactiveFlags.SKIP, true)
+  if (Object.isExtensible(value)) {
+    def(value, ReactiveFlags.SKIP, true)
+  }
   return value
 }
 
diff --git a/packages/reactivity/src/reactiveEffect.ts b/packages/reactivity/src/reactiveEffect.ts
new file mode 100644
index 00000000000..6bf0e75115a
--- /dev/null
+++ b/packages/reactivity/src/reactiveEffect.ts
@@ -0,0 +1,150 @@
+import { isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
+import { DirtyLevels, type TrackOpTypes, TriggerOpTypes } from './constants'
+import { type Dep, createDep } from './dep'
+import {
+  activeEffect,
+  pauseScheduling,
+  resetScheduling,
+  shouldTrack,
+  trackEffect,
+  triggerEffects,
+} from './effect'
+
+// The main WeakMap that stores {target -> key -> dep} connections.
+// Conceptually, it's easier to think of a dependency as a Dep class
+// which maintains a Set of subscribers, but we simply store them as
+// raw Maps to reduce memory overhead.
+type KeyToDepMap = Map<any, Dep>
+const targetMap = new WeakMap<object, KeyToDepMap>()
+
+export const ITERATE_KEY = Symbol(__DEV__ ? 'iterate' : '')
+export const MAP_KEY_ITERATE_KEY = Symbol(__DEV__ ? 'Map key iterate' : '')
+
+/**
+ * Tracks access to a reactive property.
+ *
+ * This will check which effect is running at the moment and record it as dep
+ * which records all effects that depend on the reactive property.
+ *
+ * @param target - Object holding the reactive property.
+ * @param type - Defines the type of access to the reactive property.
+ * @param key - Identifier of the reactive property to track.
+ */
+export function track(target: object, type: TrackOpTypes, key: unknown) {
+  if (shouldTrack && activeEffect) {
+    let depsMap = targetMap.get(target)
+    if (!depsMap) {
+      targetMap.set(target, (depsMap = new Map()))
+    }
+    let dep = depsMap.get(key)
+    if (!dep) {
+      depsMap.set(key, (dep = createDep(() => depsMap!.delete(key))))
+    }
+    trackEffect(
+      activeEffect,
+      dep,
+      __DEV__
+        ? {
+            target,
+            type,
+            key,
+          }
+        : void 0,
+    )
+  }
+}
+
+/**
+ * Finds all deps associated with the target (or a specific property) and
+ * triggers the effects stored within.
+ *
+ * @param target - The reactive object.
+ * @param type - Defines the type of the operation that needs to trigger effects.
+ * @param key - Can be used to target a specific reactive property in the target object.
+ */
+export function trigger(
+  target: object,
+  type: TriggerOpTypes,
+  key?: unknown,
+  newValue?: unknown,
+  oldValue?: unknown,
+  oldTarget?: Map<unknown, unknown> | Set<unknown>,
+) {
+  const depsMap = targetMap.get(target)
+  if (!depsMap) {
+    // never been tracked
+    return
+  }
+
+  let deps: (Dep | undefined)[] = []
+  if (type === TriggerOpTypes.CLEAR) {
+    // collection being cleared
+    // trigger all effects for target
+    deps = [...depsMap.values()]
+  } else if (key === 'length' && isArray(target)) {
+    const newLength = Number(newValue)
+    depsMap.forEach((dep, key) => {
+      if (key === 'length' || (!isSymbol(key) && key >= newLength)) {
+        deps.push(dep)
+      }
+    })
+  } else {
+    // schedule runs for SET | ADD | DELETE
+    if (key !== void 0) {
+      deps.push(depsMap.get(key))
+    }
+
+    // also run for iteration key on ADD | DELETE | Map.SET
+    switch (type) {
+      case TriggerOpTypes.ADD:
+        if (!isArray(target)) {
+          deps.push(depsMap.get(ITERATE_KEY))
+          if (isMap(target)) {
+            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
+          }
+        } else if (isIntegerKey(key)) {
+          // new index added to array -> length changes
+          deps.push(depsMap.get('length'))
+        }
+        break
+      case TriggerOpTypes.DELETE:
+        if (!isArray(target)) {
+          deps.push(depsMap.get(ITERATE_KEY))
+          if (isMap(target)) {
+            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
+          }
+        }
+        break
+      case TriggerOpTypes.SET:
+        if (isMap(target)) {
+          deps.push(depsMap.get(ITERATE_KEY))
+        }
+        break
+    }
+  }
+
+  pauseScheduling()
+  for (const dep of deps) {
+    if (dep) {
+      triggerEffects(
+        dep,
+        DirtyLevels.Dirty,
+        __DEV__
+          ? {
+              target,
+              type,
+              key,
+              newValue,
+              oldValue,
+              oldTarget,
+            }
+          : void 0,
+      )
+    }
+  }
+  resetScheduling()
+}
+
+export function getDepFromReactive(object: any, key: string | number | symbol) {
+  return targetMap.get(object)?.get(key)
+}
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
index 915f5760878..1b9d60ef06b 100644
--- a/packages/reactivity/src/ref.ts
+++ b/packages/reactivity/src/ref.ts
@@ -1,23 +1,30 @@
+import type { ComputedRef } from './computed'
 import {
   activeEffect,
-  getDepFromReactive,
   shouldTrack,
-  trackEffects,
-  triggerEffects
+  trackEffect,
+  triggerEffects,
 } from './effect'
-import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { isArray, hasChanged, IfAny, isFunction, isObject } from '@vue/shared'
+import { DirtyLevels, TrackOpTypes, TriggerOpTypes } from './constants'
+import {
+  type IfAny,
+  hasChanged,
+  isArray,
+  isFunction,
+  isObject,
+} from '@vue/shared'
 import {
   isProxy,
-  toRaw,
   isReactive,
-  toReactive,
   isReadonly,
-  isShallow
+  isShallow,
+  toRaw,
+  toReactive,
 } from './reactive'
 import type { ShallowReactiveMarker } from './reactive'
-import { CollectionTypes } from './collectionHandlers'
-import { createDep, Dep } from './dep'
+import { type Dep, createDep } from './dep'
+import { ComputedRefImpl } from './computed'
+import { getDepFromReactive } from './reactiveEffect'
 
 declare const RefSymbol: unique symbol
 export declare const RawSymbol: unique symbol
@@ -40,32 +47,43 @@ type RefBase<T> = {
 export function trackRefValue(ref: RefBase<any>) {
   if (shouldTrack && activeEffect) {
     ref = toRaw(ref)
-    if (__DEV__) {
-      trackEffects(ref.dep || (ref.dep = createDep()), {
-        target: ref,
-        type: TrackOpTypes.GET,
-        key: 'value'
-      })
-    } else {
-      trackEffects(ref.dep || (ref.dep = createDep()))
-    }
+    trackEffect(
+      activeEffect,
+      (ref.dep ??= createDep(
+        () => (ref.dep = undefined),
+        ref instanceof ComputedRefImpl ? ref : undefined,
+      )),
+      __DEV__
+        ? {
+            target: ref,
+            type: TrackOpTypes.GET,
+            key: 'value',
+          }
+        : void 0,
+    )
   }
 }
 
-export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
+export function triggerRefValue(
+  ref: RefBase<any>,
+  dirtyLevel: DirtyLevels = DirtyLevels.Dirty,
+  newVal?: any,
+) {
   ref = toRaw(ref)
   const dep = ref.dep
   if (dep) {
-    if (__DEV__) {
-      triggerEffects(dep, {
-        target: ref,
-        type: TriggerOpTypes.SET,
-        key: 'value',
-        newValue: newVal
-      })
-    } else {
-      triggerEffects(dep)
-    }
+    triggerEffects(
+      dep,
+      dirtyLevel,
+      __DEV__
+        ? {
+            target: ref,
+            type: TriggerOpTypes.SET,
+            key: 'value',
+            newValue: newVal,
+          }
+        : void 0,
+    )
   }
 }
 
@@ -87,7 +105,6 @@ export function isRef(r: any): r is Ref {
  * @param value - The object to wrap in the ref.
  * @see {@link https://vuejs.org/api/reactivity-core.html#ref}
  */
-export function ref<T extends Ref>(value: T): T
 export function ref<T>(value: T): Ref<UnwrapRef<T>>
 export function ref<T = any>(): Ref<T | undefined>
 export function ref(value?: unknown) {
@@ -115,10 +132,13 @@ export type ShallowRef<T = any> = Ref<T> & { [ShallowRefMarker]?: true }
  * @param value - The "inner value" for the shallow ref.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#shallowref}
  */
-export function shallowRef<T extends object>(
-  value: T
-): T extends Ref ? T : ShallowRef<T>
-export function shallowRef<T>(value: T): ShallowRef<T>
+export function shallowRef<T>(
+  value: T,
+): Ref extends T
+  ? T extends Ref
+    ? IfAny<T, ShallowRef<T>, T>
+    : ShallowRef<T>
+  : ShallowRef<T>
 export function shallowRef<T = any>(): ShallowRef<T | undefined>
 export function shallowRef(value?: unknown) {
   return createRef(value, true)
@@ -140,7 +160,7 @@ class RefImpl<T> {
 
   constructor(
     value: T,
-    public readonly __v_isShallow: boolean
+    public readonly __v_isShallow: boolean,
   ) {
     this._rawValue = __v_isShallow ? value : toRaw(value)
     this._value = __v_isShallow ? value : toReactive(value)
@@ -158,7 +178,7 @@ class RefImpl<T> {
     if (hasChanged(newVal, this._rawValue)) {
       this._rawValue = newVal
       this._value = useDirectValue ? newVal : toReactive(newVal)
-      triggerRefValue(this, newVal)
+      triggerRefValue(this, DirtyLevels.Dirty, newVal)
     }
   }
 }
@@ -189,7 +209,7 @@ class RefImpl<T> {
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#triggerref}
  */
 export function triggerRef(ref: Ref) {
-  triggerRefValue(ref, __DEV__ ? ref.value : void 0)
+  triggerRefValue(ref, DirtyLevels.Dirty, __DEV__ ? ref.value : void 0)
 }
 
 export type MaybeRef<T = any> = T | Ref<T>
@@ -211,7 +231,7 @@ export type MaybeRefOrGetter<T = any> = MaybeRef<T> | (() => T)
  * @param ref - Ref or plain value to be converted into the plain value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#unref}
  */
-export function unref<T>(ref: MaybeRef<T>): T {
+export function unref<T>(ref: MaybeRef<T> | ComputedRef<T>): T {
   return isRef(ref) ? ref.value : ref
 }
 
@@ -231,7 +251,7 @@ export function unref<T>(ref: MaybeRef<T>): T {
  * @param source - A getter, an existing ref, or a non-function value.
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#tovalue}
  */
-export function toValue<T>(source: MaybeRefOrGetter<T>): T {
+export function toValue<T>(source: MaybeRefOrGetter<T> | ComputedRef<T>): T {
   return isFunction(source) ? source() : unref(source)
 }
 
@@ -245,7 +265,7 @@ const shallowUnwrapHandlers: ProxyHandler<any> = {
     } else {
       return Reflect.set(target, key, value, receiver)
     }
-  }
+  },
 }
 
 /**
@@ -259,7 +279,7 @@ const shallowUnwrapHandlers: ProxyHandler<any> = {
  * that contains refs.
  */
 export function proxyRefs<T extends object>(
-  objectWithRefs: T
+  objectWithRefs: T,
 ): ShallowUnwrapRef<T> {
   return isReactive(objectWithRefs)
     ? objectWithRefs
@@ -268,7 +288,7 @@ export function proxyRefs<T extends object>(
 
 export type CustomRefFactory<T> = (
   track: () => void,
-  trigger: () => void
+  trigger: () => void,
 ) => {
   get: () => T
   set: (value: T) => void
@@ -285,7 +305,7 @@ class CustomRefImpl<T> {
   constructor(factory: CustomRefFactory<T>) {
     const { get, set } = factory(
       () => trackRefValue(this),
-      () => triggerRefValue(this)
+      () => triggerRefValue(this),
     )
     this._get = get
     this._set = set
@@ -340,7 +360,7 @@ class ObjectRefImpl<T extends object, K extends keyof T> {
   constructor(
     private readonly _object: T,
     private readonly _key: K,
-    private readonly _defaultValue?: T[K]
+    private readonly _defaultValue?: T[K],
   ) {}
 
   get value() {
@@ -412,25 +432,25 @@ export type ToRef<T> = IfAny<T, Ref<T>, [T] extends [Ref] ? T : Ref<T>>
  * @see {@link https://vuejs.org/api/reactivity-utilities.html#toref}
  */
 export function toRef<T>(
-  value: T
+  value: T,
 ): T extends () => infer R
   ? Readonly<Ref<R>>
   : T extends Ref
-  ? T
-  : Ref<UnwrapRef<T>>
+    ? T
+    : Ref<UnwrapRef<T>>
 export function toRef<T extends object, K extends keyof T>(
   object: T,
-  key: K
+  key: K,
 ): ToRef<T[K]>
 export function toRef<T extends object, K extends keyof T>(
   object: T,
   key: K,
-  defaultValue: T[K]
+  defaultValue: T[K],
 ): ToRef<Exclude<T[K], undefined>>
 export function toRef(
   source: Record<string, any> | MaybeRef,
   key?: string,
-  defaultValue?: unknown
+  defaultValue?: unknown,
 ): Ref {
   if (isRef(source)) {
     return source
@@ -446,7 +466,7 @@ export function toRef(
 function propertyToRef(
   source: Record<string, any>,
   key: string,
-  defaultValue?: unknown
+  defaultValue?: unknown,
 ) {
   const val = source[key]
   return isRef(val)
@@ -475,33 +495,38 @@ type BaseTypes = string | number | boolean
 export interface RefUnwrapBailTypes {}
 
 export type ShallowUnwrapRef<T> = {
-  [K in keyof T]: T[K] extends Ref<infer V>
-    ? V // if `V` is `unknown` that means it does not extend `Ref` and is undefined
-    : T[K] extends Ref<infer V> | undefined
-    ? unknown extends V
-      ? undefined
-      : V | undefined
-    : T[K]
+  [K in keyof T]: DistrubuteRef<T[K]>
 }
 
-export type UnwrapRef<T> = T extends ShallowRef<infer V>
-  ? V
-  : T extends Ref<infer V>
-  ? UnwrapRefSimple<V>
-  : UnwrapRefSimple<T>
+type DistrubuteRef<T> = T extends Ref<infer V> ? V : T
+
+export type UnwrapRef<T> =
+  T extends ShallowRef<infer V>
+    ? V
+    : T extends Ref<infer V>
+      ? UnwrapRefSimple<V>
+      : UnwrapRefSimple<T>
 
 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>> & UnwrapRef<Omit<T, keyof Map<any, any>>>
+    : T extends WeakMap<infer K, infer V>
+      ? WeakMap<K, UnwrapRefSimple<V>> &
+          UnwrapRef<Omit<T, keyof WeakMap<any, any>>>
+      : T extends Set<infer V>
+        ? Set<UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof Set<any>>>
+        : T extends WeakSet<infer V>
+          ? WeakSet<UnwrapRefSimple<V>> & UnwrapRef<Omit<T, keyof WeakSet<any>>>
+          : 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
diff --git a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
index de9878b1181..74e24dce65f 100644
--- a/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
+++ b/packages/runtime-core/__tests__/apiAsyncComponent.spec.ts
@@ -1,11 +1,11 @@
 import {
+  type Component,
+  KeepAlive,
+  Suspense,
   defineAsyncComponent,
   h,
-  Component,
-  ref,
   nextTick,
-  Suspense,
-  KeepAlive
+  ref,
 } from '../src'
 import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
 import { onActivated } from '../src/components/KeepAlive'
@@ -19,13 +19,13 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->')
@@ -54,13 +54,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = r as any
         }),
       loadingComponent: () => 'loading',
-      delay: 1 // defaults to 200
+      delay: 1, // defaults to 200
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     }).mount(root)
 
     // due to the delay, initial mount should be empty
@@ -93,13 +93,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = r as any
         }),
       loadingComponent: () => 'loading',
-      delay: 0
+      delay: 0,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     }).mount(root)
 
     // with delay: 0, should show loading immediately
@@ -128,13 +128,13 @@ describe('api: defineAsyncComponent', () => {
         new Promise((_resolve, _reject) => {
           resolve = _resolve as any
           reject = _reject
-        })
+        }),
     )
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -173,13 +173,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = _resolve as any
           reject = _reject
         }),
-      errorComponent: (props: { error: Error }) => props.error.message
+      errorComponent: (props: { error: Error }) => props.error.message,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -218,13 +218,13 @@ describe('api: defineAsyncComponent', () => {
           resolve = _resolve as any
           reject = _reject
         }),
-      errorComponent: (props: { error: Error }) => props.error.message
+      errorComponent: (props: { error: Error }) => props.error.message,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     app.mount(root)
@@ -235,7 +235,7 @@ describe('api: defineAsyncComponent', () => {
     await timeout()
     expect(serializeInner(root)).toBe('errored out')
     expect(
-      'Unhandled error during execution of async component loader'
+      'Unhandled error during execution of async component loader',
     ).toHaveBeenWarned()
 
     toggle.value = false
@@ -264,13 +264,13 @@ describe('api: defineAsyncComponent', () => {
         }),
       errorComponent: (props: { error: Error }) => props.error.message,
       loadingComponent: () => 'loading',
-      delay: 1
+      delay: 1,
     })
 
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => (toggle.value ? h(Foo) : null)
+      render: () => (toggle.value ? h(Foo) : null),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -316,12 +316,12 @@ describe('api: defineAsyncComponent', () => {
         new Promise(_resolve => {
           resolve = _resolve as any
         }),
-      timeout: 1
+      timeout: 1,
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = vi.fn()
@@ -333,7 +333,7 @@ describe('api: defineAsyncComponent', () => {
     await timeout(1)
     expect(handler).toHaveBeenCalled()
     expect(handler.mock.calls[0][0].message).toMatch(
-      `Async component timed out after 1ms.`
+      `Async component timed out after 1ms.`,
     )
     expect(serializeInner(root)).toBe('<!---->')
 
@@ -351,12 +351,12 @@ describe('api: defineAsyncComponent', () => {
           resolve = _resolve as any
         }),
       timeout: 1,
-      errorComponent: () => 'timed out'
+      errorComponent: () => 'timed out',
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -384,12 +384,12 @@ describe('api: defineAsyncComponent', () => {
       delay: 1,
       timeout: 16,
       errorComponent: () => 'timed out',
-      loadingComponent: () => 'loading'
+      loadingComponent: () => 'loading',
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
     const handler = (app.config.errorHandler = vi.fn())
     app.mount(root)
@@ -415,12 +415,12 @@ describe('api: defineAsyncComponent', () => {
         }),
       delay: 1,
       timeout: 16,
-      loadingComponent: () => 'loading'
+      loadingComponent: () => 'loading',
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
     const handler = vi.fn()
     app.config.errorHandler = handler
@@ -432,7 +432,7 @@ describe('api: defineAsyncComponent', () => {
     await timeout(16)
     expect(handler).toHaveBeenCalled()
     expect(handler.mock.calls[0][0].message).toMatch(
-      `Async component timed out after 16ms.`
+      `Async component timed out after 16ms.`,
     )
     // should still display loading
     expect(serializeInner(root)).toBe('loading')
@@ -448,7 +448,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(_resolve => {
           resolve = _resolve as any
-        })
+        }),
     )
 
     const root = nodeOps.createElement('div')
@@ -456,8 +456,8 @@ describe('api: defineAsyncComponent', () => {
       render: () =>
         h(Suspense, null, {
           default: () => h('div', [h(Foo), ' & ', h(Foo)]),
-          fallback: () => 'loading'
-        })
+          fallback: () => 'loading',
+        }),
     })
 
     app.mount(root)
@@ -475,7 +475,7 @@ describe('api: defineAsyncComponent', () => {
         new Promise(_resolve => {
           resolve = _resolve as any
         }),
-      suspensible: false
+      suspensible: false,
     })
 
     const root = nodeOps.createElement('div')
@@ -483,8 +483,8 @@ describe('api: defineAsyncComponent', () => {
       render: () =>
         h(Suspense, null, {
           default: () => h('div', [h(Foo), ' & ', h(Foo)]),
-          fallback: () => 'loading'
-        })
+          fallback: () => 'loading',
+        }),
     })
 
     app.mount(root)
@@ -502,7 +502,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise((_resolve, _reject) => {
           reject = _reject
-        })
+        }),
     )
 
     const root = nodeOps.createElement('div')
@@ -510,8 +510,8 @@ describe('api: defineAsyncComponent', () => {
       render: () =>
         h(Suspense, null, {
           default: () => h('div', [h(Foo), ' & ', h(Foo)]),
-          fallback: () => 'loading'
-        })
+          fallback: () => 'loading',
+        }),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -543,12 +543,12 @@ describe('api: defineAsyncComponent', () => {
         } else {
           fail()
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -587,12 +587,12 @@ describe('api: defineAsyncComponent', () => {
         } else {
           fail()
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -627,12 +627,12 @@ describe('api: defineAsyncComponent', () => {
         } else {
           fail()
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(Foo)
+      render: () => h(Foo),
     })
 
     const handler = (app.config.errorHandler = vi.fn())
@@ -663,14 +663,14 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const fooRef = ref<any>(null)
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? h(Foo, { ref: fooRef }) : null)
+      render: () => (toggle.value ? h(Foo, { ref: fooRef }) : null),
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->')
@@ -679,10 +679,10 @@ describe('api: defineAsyncComponent', () => {
     resolve!({
       data() {
         return {
-          id: 'foo'
+          id: 'foo',
         }
       },
-      render: () => 'resolved'
+      render: () => 'resolved',
     })
     // first time resolve, wait for macro task since there are multiple
     // microtasks / .then() calls
@@ -709,7 +709,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const fooRef = ref<any>(null)
@@ -719,7 +719,7 @@ describe('api: defineAsyncComponent', () => {
     const root = nodeOps.createElement('div')
     createApp({
       render: () =>
-        toggle.value ? [h(Foo, { ref: fooRef }), updater.value] : null
+        toggle.value ? [h(Foo, { ref: fooRef }), updater.value] : null,
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->0')
@@ -728,10 +728,10 @@ describe('api: defineAsyncComponent', () => {
     resolve!({
       data() {
         return {
-          id: 'foo'
+          id: 'foo',
         }
       },
-      render: () => 'resolved'
+      render: () => 'resolved',
     })
 
     await timeout()
@@ -755,7 +755,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
     const updater = ref(0)
 
@@ -765,14 +765,14 @@ describe('api: defineAsyncComponent', () => {
       onVnodeBeforeUpdate: vi.fn(),
       onVnodeUpdated: vi.fn(),
       onVnodeBeforeUnmount: vi.fn(),
-      onVnodeUnmounted: vi.fn()
+      onVnodeUnmounted: vi.fn(),
     }
 
     const toggle = ref(true)
 
     const root = nodeOps.createElement('div')
     createApp({
-      render: () => (toggle.value ? [h(Foo, vnodeHooks), updater.value] : null)
+      render: () => (toggle.value ? [h(Foo, vnodeHooks), updater.value] : null),
     }).mount(root)
 
     expect(serializeInner(root)).toBe('<!---->0')
@@ -780,10 +780,10 @@ describe('api: defineAsyncComponent', () => {
     resolve!({
       data() {
         return {
-          id: 'foo'
+          id: 'foo',
         }
       },
-      render: () => 'resolved'
+      render: () => 'resolved',
     })
 
     await timeout()
@@ -812,7 +812,7 @@ describe('api: defineAsyncComponent', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const Bar = defineAsyncComponent(() => Promise.resolve(() => 'Bar'))
@@ -820,7 +820,7 @@ describe('api: defineAsyncComponent', () => {
     const toggle = ref(true)
     const root = nodeOps.createElement('div')
     const app = createApp({
-      render: () => h(KeepAlive, [toggle.value ? h(Foo) : h(Bar)])
+      render: () => h(KeepAlive, [toggle.value ? h(Foo) : h(Bar)]),
     })
 
     app.mount(root)
@@ -832,7 +832,7 @@ describe('api: defineAsyncComponent', () => {
           spy()
         })
         return () => 'Foo'
-      }
+      },
     })
 
     await timeout()
diff --git a/packages/runtime-core/__tests__/apiCreateApp.spec.ts b/packages/runtime-core/__tests__/apiCreateApp.spec.ts
index 637167931d2..05e51e43bb6 100644
--- a/packages/runtime-core/__tests__/apiCreateApp.spec.ts
+++ b/packages/runtime-core/__tests__/apiCreateApp.spec.ts
@@ -1,17 +1,20 @@
 import {
+  type Plugin,
   createApp,
+  defineComponent,
+  getCurrentInstance,
   h,
+  inject,
+  nextTick,
   nodeOps,
-  serializeInner,
+  onMounted,
   provide,
-  inject,
+  ref,
   resolveComponent,
   resolveDirective,
+  serializeInner,
+  watch,
   withDirectives,
-  Plugin,
-  ref,
-  getCurrentInstance,
-  defineComponent
 } from '@vue/runtime-test'
 
 describe('api: createApp', () => {
@@ -19,12 +22,12 @@ describe('api: createApp', () => {
     const Comp = defineComponent({
       props: {
         count: {
-          default: 0
-        }
+          default: 0,
+        },
       },
       setup(props) {
         return () => props.count
-      }
+      },
     })
 
     const root1 = nodeOps.createElement('div')
@@ -33,7 +36,7 @@ describe('api: createApp', () => {
     //#5571 mount multiple apps to the same host element
     createApp(Comp).mount(root1)
     expect(
-      `There is already an app instance mounted on the host container`
+      `There is already an app instance mounted on the host container`,
     ).toHaveBeenWarned()
 
     // mount with props
@@ -53,12 +56,12 @@ describe('api: createApp', () => {
     const Comp = defineComponent({
       props: {
         count: {
-          default: 0
-        }
+          default: 0,
+        },
       },
       setup(props) {
         return () => props.count
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -80,7 +83,7 @@ describe('api: createApp', () => {
         // test override
         provide('foo', 3)
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -91,7 +94,7 @@ describe('api: createApp', () => {
           inject('__proto__')
         } catch (e: any) {}
         return () => `${foo},${bar}`
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -114,12 +117,19 @@ describe('api: createApp', () => {
       setup() {
         provide('foo', 'should not be seen')
         return () => h('div')
-      }
+      },
     })
     app.provide('foo', 1)
 
     expect(app.runWithContext(() => inject('foo'))).toBe(1)
 
+    expect(
+      app.runWithContext(() => {
+        app.runWithContext(() => {})
+        return inject('foo')
+      }),
+    ).toBe(1)
+
     // ensure the context is restored
     inject('foo')
     expect('inject() can only be used inside setup').toHaveBeenWarned()
@@ -129,7 +139,7 @@ describe('api: createApp', () => {
     const Root = {
       // local override
       components: {
-        BarBaz: () => 'barbaz-local!'
+        BarBaz: () => 'barbaz-local!',
       },
       setup() {
         // resolve in setup
@@ -139,7 +149,7 @@ describe('api: createApp', () => {
           const BarBaz = resolveComponent('bar-baz') as any
           return h('div', [h(FooBar), h(BarBaz)])
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -152,7 +162,7 @@ describe('api: createApp', () => {
 
     app.component('BarBaz', () => 'barbaz!')
     expect(
-      'Component "BarBaz" has already been registered in target app.'
+      'Component "BarBaz" has already been registered in target app.',
     ).toHaveBeenWarnedTimes(1)
 
     const root = nodeOps.createElement('div')
@@ -168,7 +178,7 @@ describe('api: createApp', () => {
     const Root = {
       // local override
       directives: {
-        BarBaz: { mounted: spy3 }
+        BarBaz: { mounted: spy3 },
       },
       setup() {
         // resolve in setup
@@ -178,7 +188,7 @@ describe('api: createApp', () => {
           const BarBaz = resolveDirective('bar-baz')!
           return withDirectives(h('div'), [[FooBar], [BarBaz]])
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -188,14 +198,14 @@ describe('api: createApp', () => {
     expect(app.directive('FooBar')).toBe(FooBar)
 
     app.directive('BarBaz', {
-      mounted: spy2
+      mounted: spy2,
     })
 
     app.directive('BarBaz', {
-      mounted: spy2
+      mounted: spy2,
     })
     expect(
-      'Directive "BarBaz" has already been registered in target app.'
+      'Directive "BarBaz" has already been registered in target app.',
     ).toHaveBeenWarnedTimes(1)
 
     const root = nodeOps.createElement('div')
@@ -206,7 +216,7 @@ describe('api: createApp', () => {
 
     app.directive('bind', FooBar)
     expect(
-      `Do not use built-in directive ids as custom directive id: bind`
+      `Do not use built-in directive ids as custom directive id: bind`,
     ).toHaveBeenWarned()
   })
 
@@ -215,7 +225,7 @@ describe('api: createApp', () => {
     const mixinA = {
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       created(this: any) {
@@ -226,13 +236,13 @@ describe('api: createApp', () => {
       },
       mounted() {
         calls.push('mixinA mounted')
-      }
+      },
     }
     const mixinB = {
       name: 'mixinB',
       data() {
         return {
-          b: 2
+          b: 2,
         }
       },
       created(this: any) {
@@ -243,12 +253,12 @@ describe('api: createApp', () => {
       },
       mounted() {
         calls.push('mixinB mounted')
-      }
+      },
     }
     const Comp = {
       data() {
         return {
-          c: 3
+          c: 3,
         }
       },
       created(this: any) {
@@ -262,7 +272,7 @@ describe('api: createApp', () => {
       },
       render(this: any) {
         return `${this.a}${this.b}${this.c}`
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -272,10 +282,10 @@ describe('api: createApp', () => {
     app.mixin(mixinA)
     app.mixin(mixinB)
     expect(
-      'Mixin has already been applied to target app'
+      'Mixin has already been applied to target app',
     ).toHaveBeenWarnedTimes(2)
     expect(
-      'Mixin has already been applied to target app: mixinB'
+      'Mixin has already been applied to target app: mixinB',
     ).toHaveBeenWarnedTimes(1)
 
     const root = nodeOps.createElement('div')
@@ -288,14 +298,14 @@ describe('api: createApp', () => {
       'comp created',
       'mixinA mounted',
       'mixinB mounted',
-      'comp mounted'
+      'comp mounted',
     ])
   })
 
   test('use', () => {
     const PluginA: Plugin = app => app.provide('foo', 1)
     const PluginB: Plugin = {
-      install: (app, arg1, arg2) => app.provide('bar', arg1 + arg2)
+      install: (app, arg1, arg2) => app.provide('bar', arg1 + arg2),
     }
     class PluginC {
       someProperty = {}
@@ -310,7 +320,7 @@ describe('api: createApp', () => {
         const foo = inject('foo')
         const bar = inject('bar')
         return () => `${foo},${bar}`
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -324,13 +334,13 @@ describe('api: createApp', () => {
 
     app.use(PluginA)
     expect(
-      `Plugin has already been applied to target app`
+      `Plugin has already been applied to target app`,
     ).toHaveBeenWarnedTimes(1)
 
     app.use(PluginD)
     expect(
       `A plugin must either be a function or an object with an "install" ` +
-        `function.`
+        `function.`,
     ).toHaveBeenWarnedTimes(1)
   })
 
@@ -348,12 +358,12 @@ describe('api: createApp', () => {
       setup() {
         const count = ref(0)
         return {
-          count
+          count,
         }
       },
       render() {
         throw error
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -374,7 +384,7 @@ describe('api: createApp', () => {
       name: 'Hello',
       setup() {
         ctx = getCurrentInstance()
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -391,80 +401,80 @@ describe('api: createApp', () => {
         name: 'div',
         render() {
           return null
-        }
+        },
       }
 
       const app = createApp(Root)
 
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in or reserved HTML elements as component id: div`
+        `Do not use built-in or reserved HTML elements as component id: div`,
       ).toHaveBeenWarned()
     })
 
     test('Component.components', () => {
       const Root = {
         components: {
-          div: () => 'div'
+          div: () => 'div',
         },
         render() {
           return null
-        }
+        },
       }
 
       const app = createApp(Root)
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in or reserved HTML elements as component id: div`
+        `Do not use built-in or reserved HTML elements as component id: div`,
       ).toHaveBeenWarned()
     })
 
     test('Component.directives', () => {
       const Root = {
         directives: {
-          bind: () => {}
+          bind: () => {},
         },
         render() {
           return null
-        }
+        },
       }
 
       const app = createApp(Root)
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in directive ids as custom directive id: bind`
+        `Do not use built-in directive ids as custom directive id: bind`,
       ).toHaveBeenWarned()
     })
 
     test('register using app.component', () => {
       const app = createApp({
-        render() {}
+        render() {},
       })
 
       Object.defineProperty(app.config, 'isNativeTag', {
         value: isNativeTag,
-        writable: false
+        writable: false,
       })
 
       app.component('div', () => 'div')
       app.mount(nodeOps.createElement('div'))
       expect(
-        `Do not use built-in or reserved HTML elements as component id: div`
+        `Do not use built-in or reserved HTML elements as component id: div`,
       ).toHaveBeenWarned()
     })
   })
@@ -478,12 +488,12 @@ describe('api: createApp', () => {
       foo: 'local',
       beforeCreate() {
         merged = this.$options.foo
-      }
+      },
     })
 
     const app = createApp(App)
     app.mixin({
-      foo: 'global'
+      foo: 'global',
     })
     app.config.optionMergeStrategies.foo = (a, b) => (a ? `${a},` : ``) + b
 
@@ -495,7 +505,7 @@ describe('api: createApp', () => {
     const app = createApp({
       render() {
         return this.foo
-      }
+      },
     })
     app.config.globalProperties.foo = 'hello'
     const root = nodeOps.createElement('div')
@@ -507,21 +517,21 @@ describe('api: createApp', () => {
     const Comp = defineComponent({
       setup() {
         return {
-          _: ref(0) // return property "_" should not overwrite "ctx._"
+          _: ref(0), // return property "_" should not overwrite "ctx._"
         }
       },
       render() {
         return h('input', {
-          ref: 'input'
+          ref: 'input',
         })
-      }
+      },
     })
 
     const root1 = nodeOps.createElement('div')
     createApp(Comp).mount(root1)
 
     expect(
-      `setup() return property "_" should not start with "$" or "_" which are reserved prefixes for Vue internals.`
+      `setup() return property "_" should not start with "$" or "_" which are reserved prefixes for Vue internals.`,
     ).toHaveBeenWarned()
   })
 
@@ -530,14 +540,14 @@ describe('api: createApp', () => {
       setup() {
         return {
           _: ref(0), // return property "_" should not overwrite "ctx._"
-          __isScriptSetup: true // mock __isScriptSetup = true
+          __isScriptSetup: true, // mock __isScriptSetup = true
         }
       },
       render() {
         return h('input', {
-          ref: 'input'
+          ref: 'input',
         })
-      }
+      },
     })
 
     const root1 = nodeOps.createElement('div')
@@ -547,10 +557,39 @@ describe('api: createApp', () => {
     app.$refs.input
 
     expect(
-      `TypeError: Cannot read property '__isScriptSetup' of undefined`
+      `TypeError: Cannot read property '__isScriptSetup' of undefined`,
     ).not.toHaveBeenWarned()
   })
 
+  // #10005
+  test('flush order edge case on nested createApp', async () => {
+    const order: string[] = []
+    const App = defineComponent({
+      setup(props) {
+        const message = ref('m1')
+        watch(
+          message,
+          () => {
+            order.push('post watcher')
+          },
+          { flush: 'post' },
+        )
+        onMounted(() => {
+          message.value = 'm2'
+          createApp(() => '').mount(nodeOps.createElement('div'))
+        })
+        return () => {
+          order.push('render')
+          return h('div', [message.value])
+        }
+      },
+    })
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    await nextTick()
+    expect(order).toMatchObject(['render', 'render', 'post watcher'])
+  })
+
   // config.compilerOptions is tested in packages/vue since it is only
   // supported in the full build.
 })
diff --git a/packages/runtime-core/__tests__/apiExpose.spec.ts b/packages/runtime-core/__tests__/apiExpose.spec.ts
index b912db00521..d2e42507096 100644
--- a/packages/runtime-core/__tests__/apiExpose.spec.ts
+++ b/packages/runtime-core/__tests__/apiExpose.spec.ts
@@ -8,20 +8,20 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose({
           foo: 1,
-          bar: ref(2)
+          bar: ref(2),
         })
         return {
           bar: ref(3),
-          baz: ref(4)
+          baz: ref(4),
         }
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -36,23 +36,23 @@ describe('api: expose', () => {
       render() {},
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       setup() {
         return {
           bar: ref(2),
-          baz: ref(3)
+          baz: ref(3),
         }
       },
-      expose: ['foo', 'bar']
+      expose: ['foo', 'bar'],
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -68,25 +68,25 @@ describe('api: expose', () => {
       expose: ['foo'],
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       setup(_, { expose }) {
         expose({
-          bar: ref(2)
+          bar: ref(2),
         })
         return {
           bar: ref(3),
-          baz: ref(4)
+          baz: ref(4),
         }
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -102,16 +102,16 @@ describe('api: expose', () => {
       expose: [],
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -125,16 +125,16 @@ describe('api: expose', () => {
       expose: [],
       setup(_, { expose }) {
         expose({
-          foo: 1
+          foo: 1,
         })
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -149,22 +149,22 @@ describe('api: expose', () => {
         expect((this.$parent! as any).bar).toBe(undefined)
         expect((this.$root! as any).foo).toBe(1)
         expect((this.$root! as any).bar).toBe(undefined)
-      }
+      },
     })
 
     const Parent = defineComponent({
       expose: [],
       setup(_, { expose }) {
         expose({
-          foo: 1
+          foo: 1,
         })
         return {
-          bar: 2
+          bar: 2,
         }
       },
       render() {
         return h(Child)
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -174,15 +174,15 @@ describe('api: expose', () => {
     const Component = defineComponent({
       setup(_, { expose }) {
         expose({
-          foo: 1
+          foo: 1,
         })
         return {
-          bar: 2
+          bar: 2,
         }
       },
       render() {
         return h('div')
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     const vm = createApp(Component).mount(root) as any
@@ -194,7 +194,7 @@ describe('api: expose', () => {
     const GrandChild = defineComponent({
       render() {
         return h('div')
-      }
+      },
     })
 
     const grandChildRef = ref()
@@ -204,17 +204,17 @@ describe('api: expose', () => {
       },
       setup(_, { expose }) {
         expose({
-          foo: 42
+          foo: 42,
         })
         return () => h(GrandChild, { ref: grandChildRef })
-      }
+      },
     })
 
     const childRef = ref()
     const Parent = {
       setup() {
         return () => h(Child, { ref: childRef })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
@@ -231,11 +231,11 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose(ref(1))
         return () => null
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      'expose() should be passed a plain object, received ref'
+      'expose() should be passed a plain object, received ref',
     ).toHaveBeenWarned()
   })
 
@@ -244,11 +244,11 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose(['focus'])
         return () => null
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      'expose() should be passed a plain object, received array'
+      'expose() should be passed a plain object, received array',
     ).toHaveBeenWarned()
   })
 
@@ -257,11 +257,11 @@ describe('api: expose', () => {
       setup(_, { expose }) {
         expose(() => null)
         return () => null
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      'expose() should be passed a plain object, received function'
+      'expose() should be passed a plain object, received function',
     ).toHaveBeenWarned()
   })
 })
diff --git a/packages/runtime-core/__tests__/apiInject.spec.ts b/packages/runtime-core/__tests__/apiInject.spec.ts
index a7aae7ebfa9..485e688b1ae 100644
--- a/packages/runtime-core/__tests__/apiInject.spec.ts
+++ b/packages/runtime-core/__tests__/apiInject.spec.ts
@@ -1,17 +1,17 @@
 import {
+  type InjectionKey,
+  type Ref,
+  defineComponent,
   h,
-  provide,
+  hasInjectionContext,
   inject,
-  InjectionKey,
-  ref,
   nextTick,
-  Ref,
-  readonly,
+  provide,
   reactive,
-  defineComponent,
-  hasInjectionContext
+  readonly,
+  ref,
 } from '../src/index'
-import { render, nodeOps, serialize, createApp } from '@vue/runtime-test'
+import { createApp, nodeOps, render, serialize } from '@vue/runtime-test'
 
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#provide-inject
 describe('api: provide/inject', () => {
@@ -20,18 +20,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide('foo', 1)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const foo = inject('foo')
         return () => foo
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -47,18 +47,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide(key, 1)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const foo = inject(key) || 1
         return () => foo + 1
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -71,11 +71,11 @@ describe('api: provide/inject', () => {
       setup() {
         provide('foo', 'foo')
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -85,7 +85,7 @@ describe('api: provide/inject', () => {
         // default value should be used if value is not provided
         const bar = inject('bar', 'bar')
         return () => foo + bar
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -97,7 +97,7 @@ describe('api: provide/inject', () => {
     const Provider = {
       setup() {
         return () => h(Consumer)
-      }
+      },
     }
 
     const Consumer = defineComponent({
@@ -107,13 +107,12 @@ describe('api: provide/inject', () => {
           from: 'foo',
           default() {
             return this!.$options.name
-          }
-        }
+          },
+        },
       },
       render() {
-        // @ts-ignore
         return this.foo
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -127,7 +126,7 @@ describe('api: provide/inject', () => {
         provide('foo', 'foo')
         provide('bar', 'bar')
         return () => h(ProviderTwo)
-      }
+      },
     }
 
     const ProviderTwo = {
@@ -136,7 +135,7 @@ describe('api: provide/inject', () => {
         provide('foo', 'fooOverride')
         provide('baz', 'baz')
         return () => h(Consumer)
-      }
+      },
     }
 
     const Consumer = {
@@ -145,7 +144,7 @@ describe('api: provide/inject', () => {
         const bar = inject('bar')
         const baz = inject('baz')
         return () => [foo, bar, baz].join(',')
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -160,18 +159,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide('count', count)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const count = inject<Ref<number>>('count')!
         return () => count.value
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -190,11 +189,11 @@ describe('api: provide/inject', () => {
       setup() {
         provide('count', readonly(count))
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -203,7 +202,7 @@ describe('api: provide/inject', () => {
         // should not work
         count.value++
         return () => count.value
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -211,7 +210,7 @@ describe('api: provide/inject', () => {
     expect(serialize(root)).toBe(`<div>1</div>`)
 
     expect(
-      `Set operation on key "value" failed: target is readonly`
+      `Set operation on key "value" failed: target is readonly`,
     ).toHaveBeenWarned()
 
     // source mutation should still work
@@ -227,18 +226,18 @@ describe('api: provide/inject', () => {
       setup() {
         provide('state', rootState)
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const state = inject<typeof rootState>('state')!
         return () => state.count
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -257,11 +256,11 @@ describe('api: provide/inject', () => {
       setup() {
         provide('state', readonly(rootState))
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -270,7 +269,7 @@ describe('api: provide/inject', () => {
         // should not work
         state.count++
         return () => state.count
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -278,7 +277,7 @@ describe('api: provide/inject', () => {
     expect(serialize(root)).toBe(`<div>1</div>`)
 
     expect(
-      `Set operation on key "count" failed: target is readonly`
+      `Set operation on key "count" failed: target is readonly`,
     ).toHaveBeenWarned()
 
     rootState.count++
@@ -290,11 +289,11 @@ describe('api: provide/inject', () => {
     const Provider = {
       setup() {
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
@@ -302,7 +301,7 @@ describe('api: provide/inject', () => {
         const foo = inject('foo')
         expect(foo).toBeUndefined()
         return () => foo
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -315,18 +314,18 @@ describe('api: provide/inject', () => {
     const Provider = {
       setup() {
         return () => h(Middle)
-      }
+      },
     }
 
     const Middle = {
-      render: () => h(Consumer)
+      render: () => h(Consumer),
     }
 
     const Consumer = {
       setup() {
         const foo = inject('foo', undefined)
         return () => foo
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -341,7 +340,7 @@ describe('api: provide/inject', () => {
         provide('foo', 'foo')
         const injection = inject('foo', null)
         return () => injection
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -360,7 +359,7 @@ describe('api: provide/inject', () => {
         setup() {
           expect(hasInjectionContext()).toBe(true)
           return () => null
-        }
+        },
       }
 
       const root = nodeOps.createElement('div')
diff --git a/packages/runtime-core/__tests__/apiLifecycle.spec.ts b/packages/runtime-core/__tests__/apiLifecycle.spec.ts
index b61632ae3fe..5da57ab32bf 100644
--- a/packages/runtime-core/__tests__/apiLifecycle.spec.ts
+++ b/packages/runtime-core/__tests__/apiLifecycle.spec.ts
@@ -1,22 +1,26 @@
 import {
-  onBeforeMount,
+  TrackOpTypes,
   h,
-  nodeOps,
-  render,
-  serializeInner,
-  onMounted,
-  ref,
-  onBeforeUpdate,
   nextTick,
-  onUpdated,
+  nodeOps,
+  onBeforeMount,
   onBeforeUnmount,
-  onUnmounted,
+  onBeforeUpdate,
+  onMounted,
   onRenderTracked,
+  onRenderTriggered,
+  onUnmounted,
+  onUpdated,
   reactive,
-  TrackOpTypes,
-  onRenderTriggered
+  ref,
+  render,
+  serializeInner,
 } from '@vue/runtime-test'
-import { ITERATE_KEY, DebuggerEvent, TriggerOpTypes } from '@vue/reactivity'
+import {
+  type DebuggerEvent,
+  ITERATE_KEY,
+  TriggerOpTypes,
+} from '@vue/reactivity'
 
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks
 
@@ -32,7 +36,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onBeforeMount(fn)
         return () => h('div')
-      }
+      },
     }
     render(h(Comp), root)
     expect(fn).toHaveBeenCalledTimes(1)
@@ -49,7 +53,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onMounted(fn)
         return () => h('div')
-      }
+      },
     }
     render(h(Comp), root)
     expect(fn).toHaveBeenCalledTimes(1)
@@ -67,7 +71,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onBeforeUpdate(fn)
         return () => h('div', count.value)
-      }
+      },
     }
     render(h(Comp), root)
 
@@ -94,7 +98,7 @@ describe('api: lifecycle hooks', () => {
           renderSpy()
           return h('div', count.value)
         }
-      }
+      },
     }
     render(h(Comp), root)
     expect(renderSpy).toHaveBeenCalledTimes(1)
@@ -118,7 +122,7 @@ describe('api: lifecycle hooks', () => {
       setup() {
         onUpdated(fn)
         return () => h('div', count.value)
-      }
+      },
     }
     render(h(Comp), root)
 
@@ -138,14 +142,14 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h(Child) : null)
-      }
+      },
     }
 
     const Child = {
       setup() {
         onBeforeUnmount(fn)
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -166,14 +170,14 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h(Child) : null)
-      }
+      },
     }
 
     const Child = {
       setup() {
         onUnmounted(fn)
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -194,7 +198,7 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h(Child) : null)
-      }
+      },
     }
 
     const Child = {
@@ -203,7 +207,7 @@ describe('api: lifecycle hooks', () => {
           onBeforeUnmount(fn)
         })
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -227,7 +231,7 @@ describe('api: lifecycle hooks', () => {
         onBeforeUnmount(() => calls.push('root onBeforeUnmount'))
         onUnmounted(() => calls.push('root onUnmounted'))
         return () => h(Mid, { count: count.value })
-      }
+      },
     }
 
     const Mid = {
@@ -240,7 +244,7 @@ describe('api: lifecycle hooks', () => {
         onBeforeUnmount(() => calls.push('mid onBeforeUnmount'))
         onUnmounted(() => calls.push('mid onUnmounted'))
         return () => h(Child, { count: props.count })
-      }
+      },
     }
 
     const Child = {
@@ -253,7 +257,7 @@ describe('api: lifecycle hooks', () => {
         onBeforeUnmount(() => calls.push('child onBeforeUnmount'))
         onUnmounted(() => calls.push('child onUnmounted'))
         return () => h('div', props.count)
-      }
+      },
     }
 
     // mount
@@ -264,7 +268,7 @@ describe('api: lifecycle hooks', () => {
       'child onBeforeMount',
       'child onMounted',
       'mid onMounted',
-      'root onMounted'
+      'root onMounted',
     ])
 
     calls.length = 0
@@ -278,7 +282,7 @@ describe('api: lifecycle hooks', () => {
       'child onBeforeUpdate',
       'child onUpdated',
       'mid onUpdated',
-      'root onUpdated'
+      'root onUpdated',
     ])
 
     calls.length = 0
@@ -291,7 +295,7 @@ describe('api: lifecycle hooks', () => {
       'child onBeforeUnmount',
       'child onUnmounted',
       'mid onUnmounted',
-      'root onUnmounted'
+      'root onUnmounted',
     ])
   })
 
@@ -307,7 +311,7 @@ describe('api: lifecycle hooks', () => {
         onRenderTracked(onTrack)
         return () =>
           h('div', [obj.foo, 'bar' in obj, Object.keys(obj).join('')])
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -316,18 +320,18 @@ describe('api: lifecycle hooks', () => {
       {
         target: obj,
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         target: obj,
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         target: obj,
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
@@ -346,7 +350,7 @@ describe('api: lifecycle hooks', () => {
         onRenderTriggered(onTrigger)
         return () =>
           h('div', [obj.foo, 'bar' in obj, Object.keys(obj).join('')])
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -358,7 +362,7 @@ describe('api: lifecycle hooks', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.bar
@@ -367,7 +371,7 @@ describe('api: lifecycle hooks', () => {
     expect(events[1]).toMatchObject({
       type: TriggerOpTypes.DELETE,
       key: 'bar',
-      oldValue: 2
+      oldValue: 2,
     })
     ;(obj as any).baz = 3
     await nextTick()
@@ -375,7 +379,7 @@ describe('api: lifecycle hooks', () => {
     expect(events[2]).toMatchObject({
       type: TriggerOpTypes.ADD,
       key: 'baz',
-      newValue: 3
+      newValue: 3,
     })
   })
 
@@ -385,14 +389,14 @@ describe('api: lifecycle hooks', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? [h(Child), h(Child)] : null)
-      }
+      },
     }
     const Child = {
       setup() {
         onMounted(fn)
         onBeforeUnmount(fn)
         return () => h('div')
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts
index ca712e0d3ac..521b359e22d 100644
--- a/packages/runtime-core/__tests__/apiOptions.spec.ts
+++ b/packages/runtime-core/__tests__/apiOptions.spec.ts
@@ -1,20 +1,20 @@
 /**
  * @vitest-environment jsdom
  */
-import { vi, type Mock } from 'vitest'
+import type { Mock } from 'vitest'
 import {
+  type TestElement,
+  computed,
+  createApp,
+  defineComponent,
   h,
+  nextTick,
   nodeOps,
+  ref,
   render,
+  renderToString,
   serializeInner,
   triggerEvent,
-  TestElement,
-  nextTick,
-  renderToString,
-  ref,
-  defineComponent,
-  createApp,
-  computed
 } from '@vue/runtime-test'
 import { render as domRender } from 'vue'
 
@@ -23,7 +23,7 @@ describe('api: options', () => {
     const Comp = defineComponent({
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       render() {
@@ -32,11 +32,11 @@ describe('api: options', () => {
           {
             onClick: () => {
               this.foo++
-            }
+            },
           },
-          this.foo
+          this.foo,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -51,14 +51,14 @@ describe('api: options', () => {
     const Comp = defineComponent({
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       computed: {
         bar(): number {
           return this.foo + 1
         },
-        baz: (vm: any): number => vm.bar + 1
+        baz: (vm: any): number => vm.bar + 1,
       },
       render() {
         return h(
@@ -66,11 +66,11 @@ describe('api: options', () => {
           {
             onClick: () => {
               this.foo++
-            }
+            },
           },
-          this.bar + this.baz
+          this.bar + this.baz,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -87,7 +87,7 @@ describe('api: options', () => {
         // #3300 method on ctx should be overwritable
         this.incBy = this.incBy.bind(this, 2)
         return {
-          foo: 1
+          foo: 1,
         }
       },
       methods: {
@@ -96,18 +96,18 @@ describe('api: options', () => {
         },
         incBy(n = 0) {
           this.foo += n
-        }
+        },
       },
       render() {
         return h(
           'div',
           {
             onClick: this.inc,
-            onFoo: this.incBy
+            onFoo: this.incBy,
           },
-          this.foo
+          this.foo,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -127,11 +127,11 @@ describe('api: options', () => {
       methods: {
         foo() {
           return 'foo'
-        }
+        },
       },
       render() {
         return this.foo()
-      }
+      },
     })
     app.config.globalProperties.foo = () => 'bar'
 
@@ -157,12 +157,12 @@ describe('api: options', () => {
           foo: 1,
           bar: 2,
           baz: {
-            qux: 3
+            qux: 3,
           },
           qux: 4,
           dot: {
-            path: 5
-          }
+            path: 5,
+          },
         }
       },
       watch: {
@@ -172,20 +172,20 @@ describe('api: options', () => {
         bar: spyB,
         baz: {
           handler: spyC,
-          deep: true
+          deep: true,
         },
         qux: {
-          handler: 'onQuxChange'
+          handler: 'onQuxChange',
         },
-        'dot.path': spyE
+        'dot.path': spyE,
       },
       methods: {
         onFooChange: spyA,
-        onQuxChange: spyD
+        onQuxChange: spyD,
       },
       render() {
         ctx = this
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -237,8 +237,8 @@ describe('api: options', () => {
           foo: 1,
           bar: 2,
           baz: {
-            qux: 3
-          }
+            qux: 3,
+          },
         }
       },
       watch: {
@@ -249,16 +249,16 @@ describe('api: options', () => {
         baz: [
           {
             handler: spyC,
-            deep: true
-          }
-        ]
+            deep: true,
+          },
+        ],
       },
       methods: {
-        onFooChange: spyA
+        onFooChange: spyA,
       },
       render() {
         ctx = this
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -290,32 +290,32 @@ describe('api: options', () => {
     const mixinA = {
       data() {
         return {
-          fromMixinA: ''
+          fromMixinA: '',
         }
       },
       watch: {
         obj: {
           handler(this: any, to: any) {
             this.fromMixinA = to
-          }
-        }
-      }
+          },
+        },
+      },
     }
 
     const mixinB = {
       data() {
         return {
-          fromMixinB: ''
+          fromMixinB: '',
         }
       },
       watch: {
-        obj: 'setMixinB'
+        obj: 'setMixinB',
       },
       methods: {
         setMixinB(this: any, to: any) {
           this.fromMixinB = to
-        }
-      }
+        },
+      },
     }
 
     let vm: any
@@ -324,16 +324,16 @@ describe('api: options', () => {
       mixins: [mixinA, mixinB],
       data: () => ({
         obj: 'foo',
-        fromComp: ''
+        fromComp: '',
       }),
       watch: {
         obj(this: any, to: any) {
           this.fromComp = to
-        }
+        },
       },
       mounted() {
         vm = this
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -351,13 +351,13 @@ describe('api: options', () => {
     const Root = defineComponent({
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       provide() {
         return {
           a: this.a,
-          [symbolKey]: 2
+          [symbolKey]: 2,
         }
       },
       render() {
@@ -371,9 +371,9 @@ describe('api: options', () => {
           h(ChildG),
           h(ChildH),
           h(ChildI),
-          h(ChildJ)
+          h(ChildJ),
         ]
-      }
+      },
     })
 
     const defineChild = (injectOptions: any, injectedKey = 'b') =>
@@ -381,53 +381,53 @@ describe('api: options', () => {
         inject: injectOptions,
         render() {
           return this[injectedKey]
-        }
+        },
       }) as any
 
     const ChildA = defineChild(['a'], 'a')
     const ChildB = defineChild({ b: 'a' })
     const ChildC = defineChild({
       b: {
-        from: 'a'
-      }
+        from: 'a',
+      },
     })
     const ChildD = defineChild(
       {
         a: {
-          default: () => 0
-        }
+          default: () => 0,
+        },
       },
-      'a'
+      'a',
     )
     const ChildE = defineChild({
       b: {
         from: 'c',
-        default: 2
-      }
+        default: 2,
+      },
     })
     const ChildF = defineChild({
       b: {
         from: 'c',
-        default: () => 3
-      }
+        default: () => 3,
+      },
     })
     const ChildG = defineChild({
       b: {
-        default: 4
-      }
+        default: 4,
+      },
     })
     const ChildH = defineChild({
       b: {
-        default: () => 5
-      }
+        default: () => 5,
+      },
     })
     const ChildI = defineChild({
-      b: symbolKey
+      b: symbolKey,
     })
     const ChildJ = defineChild({
       b: {
-        from: symbolKey
-      }
+        from: symbolKey,
+      },
     })
     expect(renderToString(h(Root))).toBe(`1111234522`)
   })
@@ -439,16 +439,16 @@ describe('api: options', () => {
       provide() {
         return {
           n,
-          np
+          np,
         }
       },
-      render: () => h(Child)
+      render: () => h(Child),
     })
     const Child = defineComponent({
       inject: ['n', 'np'],
       render(this: any) {
         return this.n + this.np
-      }
+      },
     })
     const app = createApp(Parent)
     const root = nodeOps.createElement('div')
@@ -464,28 +464,28 @@ describe('api: options', () => {
     const Base = defineComponent({
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       provide() {
         return {
-          a: this.a
+          a: this.a,
         }
-      }
+      },
     })
 
     const Child = {
       inject: ['a'],
       render() {
         return (this as any).a
-      }
+      },
     }
 
     const Root = defineComponent({
       extends: Base,
       render() {
         return h(Child)
-      }
+      },
     })
     expect(renderToString(h(Root))).toBe(`1`)
   })
@@ -522,7 +522,7 @@ describe('api: options', () => {
       },
       render() {
         return h(Mid, { count: count.value })
-      }
+      },
     }
 
     const Mid = {
@@ -552,7 +552,7 @@ describe('api: options', () => {
       },
       render(this: any) {
         return h(Child, { count: this.$props.count })
-      }
+      },
     }
 
     const Child = {
@@ -582,7 +582,7 @@ describe('api: options', () => {
       },
       render(this: any) {
         return h('div', this.$props.count)
-      }
+      },
     }
 
     // mount
@@ -599,7 +599,7 @@ describe('api: options', () => {
       'child onBeforeMount',
       'child onMounted',
       'mid onMounted',
-      'root onMounted'
+      'root onMounted',
     ])
 
     calls.length = 0
@@ -613,7 +613,7 @@ describe('api: options', () => {
       'child onBeforeUpdate',
       'child onUpdated',
       'mid onUpdated',
-      'root onUpdated'
+      'root onUpdated',
     ])
 
     calls.length = 0
@@ -626,7 +626,7 @@ describe('api: options', () => {
       'child onBeforeUnmount',
       'child onUnmounted',
       'mid onUnmounted',
-      'root onUnmounted'
+      'root onUnmounted',
     ])
   })
 
@@ -635,7 +635,7 @@ describe('api: options', () => {
     const mixinA = defineComponent({
       data() {
         return {
-          a: 1
+          a: 1,
         }
       },
       created(this: any) {
@@ -646,17 +646,17 @@ describe('api: options', () => {
       },
       mounted() {
         calls.push('mixinA mounted')
-      }
+      },
     })
     const mixinB = defineComponent({
       props: {
         bP: {
-          type: String
-        }
+          type: String,
+        },
       },
       data() {
         return {
-          b: 2
+          b: 2,
         }
       },
       created(this: any) {
@@ -669,13 +669,13 @@ describe('api: options', () => {
       },
       mounted() {
         calls.push('mixinB mounted')
-      }
+      },
     })
     const mixinC = defineComponent({
       props: ['cP1', 'cP2'],
       data() {
         return {
-          c: 3
+          c: 3,
         }
       },
       created() {
@@ -686,17 +686,17 @@ describe('api: options', () => {
       },
       mounted() {
         calls.push('mixinC mounted')
-      }
+      },
     })
     const Comp = defineComponent({
       props: {
-        aaa: String
+        aaa: String,
       },
       mixins: [mixinA, mixinB, mixinC],
       data() {
         return {
           c: 4,
-          z: 4
+          z: 4,
         }
       },
       created() {
@@ -713,7 +713,7 @@ describe('api: options', () => {
       },
       render() {
         return `${this.a}${this.b}${this.c}`
-      }
+      },
     })
     expect(renderToString(h(Comp))).toBe(`124`)
     expect(calls).toEqual([
@@ -724,7 +724,7 @@ describe('api: options', () => {
       'mixinA mounted',
       'mixinB mounted',
       'mixinC mounted',
-      'comp mounted'
+      'comp mounted',
     ])
   })
 
@@ -732,9 +732,9 @@ describe('api: options', () => {
     const Comp = {
       mixins: [
         {
-          render: () => 'from mixin'
-        }
-      ]
+          render: () => 'from mixin',
+        },
+      ],
     }
     expect(renderToString(h(Comp))).toBe('from mixin')
   })
@@ -747,7 +747,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('mixinA created')
-      }
+      },
     }
 
     const extendA = {
@@ -757,7 +757,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('extendA created')
-      }
+      },
     }
 
     const Comp = {
@@ -768,7 +768,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('self created')
-      }
+      },
     }
 
     expect(renderToString(h(Comp))).toBe(`123`)
@@ -778,23 +778,23 @@ describe('api: options', () => {
       'self beforeCreate',
       'mixinA created',
       'extendA created',
-      'self created'
+      'self created',
     ])
   })
 
   test('unlikely mixin usage', () => {
     const MixinA = {
-      data() {}
+      data() {},
     }
     const MixinB = {
-      data() {}
+      data() {},
     }
     defineComponent({
       // @ts-expect-error edge case after #7963, unlikely to happen in practice
       // since the user will want to type the mixins themselves.
       mixins: [defineComponent(MixinA), defineComponent(MixinB)],
       // @ts-expect-error
-      data() {}
+      data() {},
     })
   })
 
@@ -807,7 +807,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('extendA created')
-      }
+      },
     }
 
     const mixinA = {
@@ -817,7 +817,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('mixinA created')
-      }
+      },
     }
 
     const Comp = {
@@ -828,7 +828,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('self created')
-      }
+      },
     }
 
     expect(renderToString(h(Comp))).toBe(`123`)
@@ -838,7 +838,7 @@ describe('api: options', () => {
       'self beforeCreate',
       'extendA created',
       'mixinA created',
-      'self created'
+      'self created',
     ])
   })
 
@@ -848,23 +848,23 @@ describe('api: options', () => {
       data() {
         return {
           a: 1,
-          b: 1
+          b: 1,
         }
       },
       methods: {
-        sayA() {}
+        sayA() {},
       },
       mounted(this: any) {
         expect(this.a).toBe(1)
         expect(this.b).toBe(2)
         calls.push('base')
-      }
+      },
     })
     const Comp = defineComponent({
       extends: Base,
       data() {
         return {
-          b: 2
+          b: 2,
         }
       },
       mounted() {
@@ -872,7 +872,7 @@ describe('api: options', () => {
       },
       render() {
         return `${this.a}${this.b}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe(`12`)
@@ -885,24 +885,24 @@ describe('api: options', () => {
       data() {
         return {
           a: 1,
-          x: 'base'
+          x: 'base',
         }
       },
       methods: {
-        sayA() {}
+        sayA() {},
       },
       mounted(this: any) {
         expect(this.a).toBe(1)
         expect(this.b).toBeTruthy()
         expect(this.c).toBe(2)
         calls.push('base')
-      }
+      },
     })
     const Mixin = defineComponent({
       data() {
         return {
           b: true,
-          x: 'mixin'
+          x: 'mixin',
         }
       },
       mounted(this: any) {
@@ -910,14 +910,14 @@ describe('api: options', () => {
         expect(this.b).toBeTruthy()
         expect(this.c).toBe(2)
         calls.push('mixin')
-      }
+      },
     })
     const Comp = defineComponent({
       extends: Base,
       mixins: [Mixin],
       data() {
         return {
-          c: 2
+          c: 2,
         }
       },
       mounted() {
@@ -925,7 +925,7 @@ describe('api: options', () => {
       },
       render() {
         return `${this.a}${this.b}${this.c}${this.x}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe(`1true2mixin`)
@@ -940,7 +940,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdA')
-      }
+      },
     }
     const BaseB = {
       extends: BaseA,
@@ -949,7 +949,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdB')
-      }
+      },
     }
 
     const MixinA = {
@@ -958,7 +958,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdC')
-      }
+      },
     }
     const MixinB = {
       mixins: [MixinA],
@@ -967,7 +967,7 @@ describe('api: options', () => {
       },
       created() {
         calls.push('createdD')
-      }
+      },
     }
 
     const Comp = {
@@ -979,7 +979,7 @@ describe('api: options', () => {
       created() {
         calls.push('selfCreated')
       },
-      render() {}
+      render() {},
     }
 
     renderToString(h(Comp))
@@ -993,29 +993,29 @@ describe('api: options', () => {
       'createdB',
       'createdC',
       'createdD',
-      'selfCreated'
+      'selfCreated',
     ])
   })
 
   test('flatten merged options', async () => {
     const MixinBase = {
-      msg1: 'base'
+      msg1: 'base',
     }
     const ExtendsBase = {
-      msg2: 'base'
+      msg2: 'base',
     }
     const Mixin = {
-      mixins: [MixinBase]
+      mixins: [MixinBase],
     }
     const Extends = {
-      extends: ExtendsBase
+      extends: ExtendsBase,
     }
     const Comp = defineComponent({
       extends: defineComponent(Extends),
       mixins: [defineComponent(Mixin)],
       render() {
         return `${this.$options.msg1},${this.$options.msg2}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe('base,base')
@@ -1024,8 +1024,8 @@ describe('api: options', () => {
   test('extends template', () => {
     const Comp = {
       extends: {
-        template: `<h1>Foo</h1>`
-      }
+        template: `<h1>Foo</h1>`,
+      },
     }
 
     const root = document.createElement('div') as any
@@ -1035,10 +1035,10 @@ describe('api: options', () => {
 
   test('options defined in component have higher priority', async () => {
     const Mixin = {
-      msg1: 'base'
+      msg1: 'base',
     }
     const Extends = {
-      msg2: 'base'
+      msg2: 'base',
     }
     const Comp = defineComponent({
       msg1: 'local',
@@ -1047,7 +1047,7 @@ describe('api: options', () => {
       mixins: [defineComponent(Mixin)],
       render() {
         return `${this.$options.msg1},${this.$options.msg2}`
-      }
+      },
     })
 
     expect(renderToString(h(Comp))).toBe('local,local')
@@ -1057,33 +1057,33 @@ describe('api: options', () => {
     const Comp = defineComponent({
       setup() {
         return {
-          count: ref(0)
+          count: ref(0),
         }
       },
       data() {
         return {
-          plusOne: (this as any).count + 1
+          plusOne: (this as any).count + 1,
         }
       },
       computed: {
         plusTwo(): number {
           return this.count + 2
-        }
+        },
       },
       methods: {
         inc() {
           this.count++
-        }
+        },
       },
       render() {
         return h(
           'div',
           {
-            onClick: this.inc
+            onClick: this.inc,
           },
-          `${this.count},${this.plusOne},${this.plusTwo}`
+          `${this.count},${this.plusOne},${this.plusTwo}`,
         )
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -1099,26 +1099,26 @@ describe('api: options', () => {
     const mixin1 = {
       data() {
         return {
-          mixin1Data: 'mixin1'
+          mixin1Data: 'mixin1',
         }
       },
-      methods: {}
+      methods: {},
     }
 
     const watchSpy = vi.fn()
     const mixin2 = {
       watch: {
-        mixin3Data: watchSpy
-      }
+        mixin3Data: watchSpy,
+      },
     }
 
     const mixin3 = {
       data() {
         return {
-          mixin3Data: 'mixin3'
+          mixin3Data: 'mixin3',
         }
       },
-      methods: {}
+      methods: {},
     }
 
     let vm: any
@@ -1127,7 +1127,7 @@ describe('api: options', () => {
       render() {},
       created() {
         vm = this
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1142,50 +1142,50 @@ describe('api: options', () => {
   test('injection from closest ancestor', () => {
     const Root = defineComponent({
       provide: {
-        a: 'root'
+        a: 'root',
       },
       render() {
         return [h(Mid), ' ', h(MidWithProvide), ' ', h(MidWithMixinProvide)]
-      }
+      },
     })
 
     const Mid = {
       render() {
         return h(Child)
-      }
+      },
     } as any
 
     const MidWithProvide = {
       provide: {
-        a: 'midWithProvide'
+        a: 'midWithProvide',
       },
       render() {
         return h(Child)
-      }
+      },
     } as any
 
     const mixin = {
       provide: {
-        a: 'midWithMixinProvide'
-      }
+        a: 'midWithMixinProvide',
+      },
     }
 
     const MidWithMixinProvide = {
       mixins: [mixin],
       render() {
         return h(Child)
-      }
+      },
     } as any
 
     const Child = {
       inject: ['a'],
       render() {
         return this.a
-      }
+      },
     } as any
 
     expect(renderToString(h(Root))).toBe(
-      'root midWithProvide midWithMixinProvide'
+      'root midWithProvide midWithMixinProvide',
     )
   })
 
@@ -1194,14 +1194,14 @@ describe('api: options', () => {
       const mixin = {
         data() {
           return { foo: 1, bar: 2 }
-        }
+        },
       }
       createApp({
         mixins: [mixin],
         data() {
           return {
             foo: 3,
-            baz: 4
+            baz: 4,
           }
         },
         created() {
@@ -1209,16 +1209,16 @@ describe('api: options', () => {
           expect(this.$options.data()).toEqual({
             foo: 3,
             bar: 2,
-            baz: 4
+            baz: 4,
           })
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options.inject', () => {
       const mixin = {
-        inject: ['a']
+        inject: ['a'],
       }
       const app = createApp({
         mixins: [mixin],
@@ -1231,7 +1231,7 @@ describe('api: options', () => {
           expect(this.b).toBe(2)
           expect(this.c).toBe(3)
         },
-        render: () => null
+        render: () => null,
       })
 
       app.provide('a', 1)
@@ -1243,21 +1243,21 @@ describe('api: options', () => {
     test('this.$options.provide', () => {
       const mixin = {
         provide: {
-          a: 1
-        }
+          a: 1,
+        },
       }
       createApp({
         mixins: [mixin],
         provide() {
           return {
-            b: 2
+            b: 2,
           }
         },
         created() {
           expect(this.$options.provide).toBeInstanceOf(Function)
           expect(this.$options.provide()).toEqual({ a: 1, b: 2 })
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
@@ -1265,7 +1265,7 @@ describe('api: options', () => {
       const mixin = {
         mounted() {},
         beforeUnmount() {},
-        unmounted() {}
+        unmounted() {},
       }
       createApp({
         mixins: [mixin],
@@ -1280,26 +1280,26 @@ describe('api: options', () => {
           expect(this.$options.unmounted).toBeInstanceOf(Array)
           expect(this.$options.unmounted.length).toBe(2)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options[asset-name]', () => {
       const mixin = {
         components: {
-          a: {}
+          a: {},
         },
         directives: {
-          d1: {}
-        }
+          d1: {},
+        },
       }
       createApp({
         mixins: [mixin],
         components: {
-          b: {}
+          b: {},
         },
         directives: {
-          d2: {}
+          d2: {},
         },
         created() {
           expect('a' in this.$options.components).toBe(true)
@@ -1307,45 +1307,45 @@ describe('api: options', () => {
           expect('d1' in this.$options.directives).toBe(true)
           expect('d2' in this.$options.directives).toBe(true)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options.methods', () => {
       const mixin = {
         methods: {
-          fn1() {}
-        }
+          fn1() {},
+        },
       }
       createApp({
         mixins: [mixin],
         methods: {
-          fn2() {}
+          fn2() {},
         },
         created() {
           expect(this.$options.methods.fn1).toBeInstanceOf(Function)
           expect(this.$options.methods.fn2).toBeInstanceOf(Function)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
     test('this.$options.computed', () => {
       const mixin = {
         computed: {
-          c1() {}
-        }
+          c1() {},
+        },
       }
       createApp({
         mixins: [mixin],
         computed: {
-          c2() {}
+          c2() {},
         },
         created() {
           expect(this.$options.computed.c1).toBeInstanceOf(Function)
           expect(this.$options.computed.c2).toBeInstanceOf(Function)
         },
-        render: () => null
+        render: () => null,
       }).mount(nodeOps.createElement('div'))
     })
 
@@ -1361,14 +1361,14 @@ describe('api: options', () => {
             this.$options.computed = {}
           }
           this.$options.computed.value = () => count.value
-        }
+        },
       }
       const root = nodeOps.createElement('div')
       createApp({
         mixins: [mixin],
         render(this: any) {
           return this.value
-        }
+        },
       }).mount(root)
 
       expect(serializeInner(root)).toBe('0')
@@ -1385,27 +1385,27 @@ describe('api: options', () => {
         watch: {
           foo: 'notExistingMethod',
           foo2: {
-            handler: 'notExistingMethod2'
-          }
+            handler: 'notExistingMethod2',
+          },
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
 
       expect(
-        'Invalid watch handler specified by key "notExistingMethod"'
+        'Invalid watch handler specified by key "notExistingMethod"',
       ).toHaveBeenWarned()
       expect(
-        'Invalid watch handler specified by key "notExistingMethod2"'
+        'Invalid watch handler specified by key "notExistingMethod2"',
       ).toHaveBeenWarned()
     })
 
     test('Invalid watch option', () => {
       const Comp = {
         watch: { foo: true },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
@@ -1419,10 +1419,10 @@ describe('api: options', () => {
       const Comp = {
         computed: {
           foo: {
-            set() {}
-          }
+            set() {},
+          },
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
@@ -1435,20 +1435,20 @@ describe('api: options', () => {
       const Comp = {
         computed: {
           foo: {
-            get() {}
-          }
+            get() {},
+          },
         },
         mounted() {
           instance = this
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       instance.foo = 1
       expect(
-        'Write operation failed: computed property "foo" is readonly'
+        'Write operation failed: computed property "foo" is readonly',
       ).toHaveBeenWarned()
     })
 
@@ -1456,64 +1456,64 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         props: { a: Number },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Inject property "a" is already defined in Props.`
+        `Inject property "a" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
     test('methods property is not a function', () => {
       const Comp = {
         methods: {
-          foo: 1
+          foo: 1,
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
         `Method "foo" has type "number" in the component definition. ` +
-          `Did you reference the function correctly?`
+          `Did you reference the function correctly?`,
       ).toHaveBeenWarned()
     })
 
     test('methods property is already declared in props', () => {
       const Comp = {
         props: {
-          foo: Number
+          foo: Number,
         },
         methods: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Methods property "foo" is already defined in Props.`
+        `Methods property "foo" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
@@ -1521,32 +1521,32 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         methods: {
-          a: () => null
+          a: () => null,
         },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Methods property "a" is already defined in Inject.`
+        `Methods property "a" is already defined in Inject.`,
       ).toHaveBeenWarned()
     })
 
@@ -1554,15 +1554,15 @@ describe('api: options', () => {
       const Comp = {
         props: { foo: Number },
         data: () => ({
-          foo: 1
+          foo: 1,
         }),
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Data property "foo" is already defined in Props.`
+        `Data property "foo" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
@@ -1570,52 +1570,52 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Data property "a" is already defined in Inject.`
+        `Data property "a" is already defined in Inject.`,
       ).toHaveBeenWarned()
     })
 
     test('data property is already declared in methods', () => {
       const Comp = {
         data: () => ({
-          foo: 1
+          foo: 1,
         }),
         methods: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Data property "foo" is already defined in Methods.`
+        `Data property "foo" is already defined in Methods.`,
       ).toHaveBeenWarned()
     })
 
@@ -1623,15 +1623,15 @@ describe('api: options', () => {
       const Comp = {
         props: { foo: Number },
         computed: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "foo" is already defined in Props.`
+        `Computed property "foo" is already defined in Props.`,
       ).toHaveBeenWarned()
     })
 
@@ -1639,71 +1639,71 @@ describe('api: options', () => {
       const Comp = {
         data() {
           return {
-            a: 1
+            a: 1,
           }
         },
         provide() {
           return {
-            a: this.a
+            a: this.a,
           }
         },
         render() {
           return [h(ChildA)]
-        }
+        },
       } as any
       const ChildA = {
         computed: {
           a: {
             get() {},
-            set() {}
-          }
+            set() {},
+          },
         },
         inject: ['a'],
         render() {
           return this.a
-        }
+        },
       } as any
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "a" is already defined in Inject.`
+        `Computed property "a" is already defined in Inject.`,
       ).toHaveBeenWarned()
     })
 
     test('computed property is already declared in methods', () => {
       const Comp = {
         computed: {
-          foo() {}
+          foo() {},
         },
         methods: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "foo" is already defined in Methods.`
+        `Computed property "foo" is already defined in Methods.`,
       ).toHaveBeenWarned()
     })
 
     test('computed property is already declared in data', () => {
       const Comp = {
         data: () => ({
-          foo: 1
+          foo: 1,
         }),
         computed: {
-          foo() {}
+          foo() {},
         },
-        render() {}
+        render() {},
       }
 
       const root = nodeOps.createElement('div')
       render(h(Comp), root)
       expect(
-        `Computed property "foo" is already defined in Data.`
+        `Computed property "foo" is already defined in Data.`,
       ).toHaveBeenWarned()
     })
   })
diff --git a/packages/runtime-core/__tests__/apiSetupContext.spec.ts b/packages/runtime-core/__tests__/apiSetupContext.spec.ts
index e0ddd9c4da3..c4a32a067c0 100644
--- a/packages/runtime-core/__tests__/apiSetupContext.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupContext.spec.ts
@@ -1,15 +1,15 @@
-import { ref, reactive } from '@vue/reactivity'
+import { reactive, ref } from '@vue/reactivity'
 import {
-  renderToString,
+  type TestElement,
+  defineComponent,
   h,
+  nextTick,
   nodeOps,
   render,
+  renderToString,
   serializeInner,
-  nextTick,
-  watchEffect,
-  defineComponent,
   triggerEvent,
-  TestElement
+  watchEffect,
 } from '@vue/runtime-test'
 
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#setup
@@ -24,12 +24,12 @@ describe('api: setup context', () => {
           // object exposed as-is
           object: reactive({ msg: 'bar' }),
           // primitive value exposed as-is
-          value: 'baz'
+          value: 'baz',
         }
       },
       render() {
         return `${this.ref} ${this.object.msg} ${this.value}`
-      }
+      },
     })
     expect(renderToString(h(Comp))).toMatch(`foo bar baz`)
   })
@@ -40,7 +40,7 @@ describe('api: setup context', () => {
         return () => {
           return h('div', 'hello')
         }
-      }
+      },
     }
     expect(renderToString(h(Comp))).toMatch(`hello`)
   })
@@ -50,7 +50,7 @@ describe('api: setup context', () => {
     let dummy
 
     const Parent = {
-      render: () => h(Child, { count: count.value })
+      render: () => h(Child, { count: count.value }),
     }
 
     const Child = defineComponent({
@@ -60,7 +60,7 @@ describe('api: setup context', () => {
           dummy = props.count
         })
         return () => h('div', props.count)
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -79,7 +79,7 @@ describe('api: setup context', () => {
     const toggle = ref(true)
 
     const Parent = {
-      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' })
+      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' }),
     }
 
     const Child = {
@@ -89,7 +89,7 @@ describe('api: setup context', () => {
       inheritAttrs: false,
       setup(props: any, { attrs }: any) {
         return () => h('div', attrs)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -107,13 +107,13 @@ describe('api: setup context', () => {
     const toggle = ref(true)
 
     const Parent = {
-      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' })
+      render: () => h(Child, toggle.value ? { id: 'foo' } : { class: 'baz' }),
     }
 
     const Wrapper = {
       render(this: any) {
         return this.$slots.default()
-      }
+      },
     }
 
     const Child = {
@@ -122,12 +122,12 @@ describe('api: setup context', () => {
         return () => {
           const vnode = h(Wrapper, null, {
             default: () => [h('div', attrs)],
-            _: 1 // mark stable slots
+            _: 1, // mark stable slots
           })
           vnode.dynamicChildren = [] // force optimized mode
           return vnode
         }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -147,14 +147,14 @@ describe('api: setup context', () => {
       render: () =>
         h(Child, null, {
           foo: () => id.value,
-          bar: () => 'bar'
-        })
+          bar: () => 'bar',
+        }),
     }
 
     const Child = {
       setup(props: any, { slots }: any) {
         return () => h('div', [...slots.foo(), ...slots.bar()])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -178,27 +178,27 @@ describe('api: setup context', () => {
           onInc: (newVal: number) => {
             spy()
             count.value = newVal
-          }
-        })
+          },
+        }),
     }
 
     const Child = defineComponent({
       props: {
         count: {
           type: Number,
-          default: 1
-        }
+          default: 1,
+        },
       },
       setup(props, { emit }) {
         return () =>
           h(
             'div',
             {
-              onClick: () => emit('inc', props.count + 1)
+              onClick: () => emit('inc', props.count + 1),
             },
-            props.count
+            props.count,
           )
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
diff --git a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
index e5bca1d9272..04e9c1c86db 100644
--- a/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
+++ b/packages/runtime-core/__tests__/apiSetupHelpers.spec.ts
@@ -1,5 +1,9 @@
 import {
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
+  type ComputedRef,
+  type SetupContext,
+  Suspense,
+  computed,
   createApp,
   defineComponent,
   getCurrentInstance,
@@ -8,26 +12,19 @@ import {
   onMounted,
   render,
   serializeInner,
-  SetupContext,
-  Suspense,
-  computed,
-  ComputedRef,
   shallowReactive,
-  nextTick,
-  ref
 } from '@vue/runtime-test'
 import {
+  createPropsRestProxy,
   defineEmits,
-  defineProps,
   defineExpose,
-  withDefaults,
+  defineProps,
+  mergeDefaults,
+  mergeModels,
   useAttrs,
   useSlots,
-  mergeDefaults,
   withAsyncContext,
-  createPropsRestProxy,
-  mergeModels,
-  useModel
+  withDefaults,
 } from '../src/apiSetupHelpers'
 
 describe('SFC <script setup> helpers', () => {
@@ -53,12 +50,12 @@ describe('SFC <script setup> helpers', () => {
         slots = useSlots()
         attrs = useAttrs()
         return () => {}
-      }
+      },
     }
     const passedAttrs = { id: 'foo' }
     const passedSlots = {
       default: () => {},
-      x: () => {}
+      x: () => {},
     }
     render(h(Comp, passedAttrs, passedSlots), nodeOps.createElement('div'))
     expect(typeof slots!.default).toBe('function')
@@ -76,7 +73,7 @@ describe('SFC <script setup> helpers', () => {
         attrs = useAttrs()
         ctx = _ctx
         return () => {}
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(slots).toBe(ctx!.slots)
@@ -89,18 +86,18 @@ describe('SFC <script setup> helpers', () => {
         {
           foo: null,
           bar: { type: String, required: false },
-          baz: String
+          baz: String,
         },
         {
           foo: 1,
           bar: 'baz',
-          baz: 'qux'
-        }
+          baz: 'qux',
+        },
       )
       expect(merged).toMatchObject({
         foo: { default: 1 },
         bar: { type: String, required: false, default: 'baz' },
-        baz: { type: String, default: 'qux' }
+        baz: { type: String, default: 'qux' },
       })
     })
 
@@ -108,12 +105,12 @@ describe('SFC <script setup> helpers', () => {
       const merged = mergeDefaults(['foo', 'bar', 'baz'], {
         foo: 1,
         bar: 'baz',
-        baz: 'qux'
+        baz: 'qux',
       })
       expect(merged).toMatchObject({
         foo: { default: 1 },
         bar: { default: 'baz' },
-        baz: { default: 'qux' }
+        baz: { default: 'qux' },
       })
     })
 
@@ -121,17 +118,17 @@ describe('SFC <script setup> helpers', () => {
       const fn = () => {}
       const merged = mergeDefaults(['foo', 'bar', 'baz'], {
         foo: fn,
-        __skip_foo: true
+        __skip_foo: true,
       })
       expect(merged).toMatchObject({
-        foo: { default: fn, skipFactory: true }
+        foo: { default: fn, skipFactory: true },
       })
     })
 
     test('should warn missing', () => {
       mergeDefaults({}, { foo: 1 })
       expect(
-        `props default key "foo" has no corresponding declaration`
+        `props default key "foo" has no corresponding declaration`,
       ).toHaveBeenWarned()
     })
   })
@@ -141,25 +138,25 @@ describe('SFC <script setup> helpers', () => {
       expect(mergeModels(['foo', 'bar'], ['baz'])).toMatchObject([
         'foo',
         'bar',
-        'baz'
+        'baz',
       ])
     })
 
     test('object syntax', () => {
       expect(
-        mergeModels({ foo: null, bar: { required: true } }, ['baz'])
+        mergeModels({ foo: null, bar: { required: true } }, ['baz']),
       ).toMatchObject({
         foo: null,
         bar: { required: true },
-        baz: {}
+        baz: {},
       })
 
       expect(
-        mergeModels(['baz'], { foo: null, bar: { required: true } })
+        mergeModels(['baz'], { foo: null, bar: { required: true } }),
       ).toMatchObject({
         foo: null,
         bar: { required: true },
-        baz: {}
+        baz: {},
       })
     })
 
@@ -167,123 +164,21 @@ describe('SFC <script setup> helpers', () => {
       expect(
         mergeModels(
           { foo: null, bar: { required: true } },
-          { bar: {}, baz: {} }
-        )
+          { bar: {}, baz: {} },
+        ),
       ).toMatchObject({
         foo: null,
         bar: {},
-        baz: {}
+        baz: {},
       })
     })
   })
 
-  describe('useModel', () => {
-    test('basic', async () => {
-      let foo: any
-      const update = () => {
-        foo.value = 'bar'
-      }
-
-      const Comp = defineComponent({
-        props: ['modelValue'],
-        emits: ['update:modelValue'],
-        setup(props) {
-          foo = useModel(props, 'modelValue')
-        },
-        render() {}
-      })
-
-      const msg = ref('')
-      const setValue = vi.fn(v => (msg.value = v))
-      const root = nodeOps.createElement('div')
-      createApp(() =>
-        h(Comp, {
-          modelValue: msg.value,
-          'onUpdate:modelValue': setValue
-        })
-      ).mount(root)
-
-      expect(foo.value).toBe('')
-      expect(msg.value).toBe('')
-      expect(setValue).not.toBeCalled()
-
-      // update from child
-      update()
-
-      await nextTick()
-      expect(msg.value).toBe('bar')
-      expect(foo.value).toBe('bar')
-      expect(setValue).toBeCalledTimes(1)
-
-      // update from parent
-      msg.value = 'qux'
-
-      await nextTick()
-      expect(msg.value).toBe('qux')
-      expect(foo.value).toBe('qux')
-      expect(setValue).toBeCalledTimes(1)
-    })
-
-    test('local', async () => {
-      let foo: any
-      const update = () => {
-        foo.value = 'bar'
-      }
-
-      const Comp = defineComponent({
-        props: ['foo'],
-        emits: ['update:foo'],
-        setup(props) {
-          foo = useModel(props, 'foo', { local: true })
-        },
-        render() {}
-      })
-
-      const root = nodeOps.createElement('div')
-      const updateFoo = vi.fn()
-      render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
-
-      expect(foo.value).toBeUndefined()
-      update()
-
-      expect(foo.value).toBe('bar')
-
-      await nextTick()
-      expect(updateFoo).toBeCalledTimes(1)
-    })
-
-    test('default value', async () => {
-      let count: any
-      const inc = () => {
-        count.value++
-      }
-      const Comp = defineComponent({
-        props: { count: { default: 0 } },
-        emits: ['update:count'],
-        setup(props) {
-          count = useModel(props, 'count', { local: true })
-        },
-        render() {}
-      })
-
-      const root = nodeOps.createElement('div')
-      const updateCount = vi.fn()
-      render(h(Comp, { 'onUpdate:count': updateCount }), root)
-
-      expect(count.value).toBe(0)
-
-      inc()
-      expect(count.value).toBe(1)
-      await nextTick()
-      expect(updateCount).toBeCalledTimes(1)
-    })
-  })
-
   test('createPropsRestProxy', () => {
     const original = shallowReactive({
       foo: 1,
       bar: 2,
-      baz: 3
+      baz: 3,
     })
     const rest = createPropsRestProxy(original, ['foo', 'bar'])
     expect('foo' in rest).toBe(false)
@@ -324,7 +219,7 @@ describe('SFC <script setup> helpers', () => {
               () =>
                 new Promise(r => {
                   resolve = r
-                })
+                }),
             )),
             (__temp = await __temp),
             __restore(),
@@ -334,13 +229,13 @@ describe('SFC <script setup> helpers', () => {
           onMounted(spy)
           afterInstance = getCurrentInstance()
           return () => msg
-        }
+        },
       })
 
       const root = nodeOps.createElement('div')
       render(
         h(() => h(Suspense, () => h(Comp))),
-        root
+        root,
       )
 
       expect(spy).not.toHaveBeenCalled()
@@ -371,7 +266,7 @@ describe('SFC <script setup> helpers', () => {
               () =>
                 new Promise((_, rj) => {
                   reject = rj
-                })
+                }),
             )
             __temp = await __temp
             __restore()
@@ -382,13 +277,13 @@ describe('SFC <script setup> helpers', () => {
           onMounted(spy)
           afterInstance = getCurrentInstance()
           return () => ''
-        }
+        },
       })
 
       const root = nodeOps.createElement('div')
       render(
         h(() => h(Suspense, () => h(Comp))),
-        root
+        root,
       )
 
       expect(spy).not.toHaveBeenCalled()
@@ -441,13 +336,13 @@ describe('SFC <script setup> helpers', () => {
             resolve()
             return ''
           }
-        }
+        },
       })
 
       const root = nodeOps.createElement('div')
       render(
         h(() => h(Suspense, () => h(Comp))),
-        root
+        root,
       )
 
       await ready
@@ -473,7 +368,7 @@ describe('SFC <script setup> helpers', () => {
           __temp = await __temp
           __restore()
         },
-        render() {}
+        render() {},
       })
 
       const app = createApp(() => h(Suspense, () => h(Comp)))
@@ -493,7 +388,7 @@ describe('SFC <script setup> helpers', () => {
     test('race conditions', async () => {
       const uids = {
         one: { before: NaN, after: NaN },
-        two: { before: NaN, after: NaN }
+        two: { before: NaN, after: NaN },
       }
 
       const Comp = defineComponent({
@@ -508,13 +403,13 @@ describe('SFC <script setup> helpers', () => {
 
           uids[props.name].after = getCurrentInstance()!.uid
           return () => ''
-        }
+        },
       })
 
       const app = createApp(() =>
         h(Suspense, () =>
-          h('div', [h(Comp, { name: 'one' }), h(Comp, { name: 'two' })])
-        )
+          h('div', [h(Comp, { name: 'one' }), h(Comp, { name: 'two' })]),
+        ),
       )
       const root = nodeOps.createElement('div')
       app.mount(root)
@@ -544,7 +439,7 @@ describe('SFC <script setup> helpers', () => {
           // register the lifecycle after an await statement
           onMounted(resolve)
           return () => ''
-        }
+        },
       })
 
       const app = createApp(() => h(Suspense, () => h(Comp)))
diff --git a/packages/runtime-core/__tests__/apiWatch.bench.ts b/packages/runtime-core/__tests__/apiWatch.bench.ts
new file mode 100644
index 00000000000..58e6b1b514c
--- /dev/null
+++ b/packages/runtime-core/__tests__/apiWatch.bench.ts
@@ -0,0 +1,58 @@
+import { nextTick, ref, watch, watchEffect } from '../src'
+import { bench } from 'vitest'
+
+bench('create watcher', () => {
+  const v = ref(100)
+  watch(v, v => {})
+})
+
+{
+  const v = ref(100)
+  watch(v, v => {})
+  let i = 0
+  bench('update ref to trigger watcher (scheduled but not executed)', () => {
+    v.value = i++
+  })
+}
+
+{
+  const v = ref(100)
+  watch(v, v => {})
+  let i = 0
+  bench('update ref to trigger watcher (executed)', async () => {
+    v.value = i++
+    return nextTick()
+  })
+}
+
+{
+  bench('create watchEffect', () => {
+    watchEffect(() => {})
+  })
+}
+
+{
+  const v = ref(100)
+  watchEffect(() => {
+    v.value
+  })
+  let i = 0
+  bench(
+    'update ref to trigger watchEffect (scheduled but not executed)',
+    () => {
+      v.value = i++
+    },
+  )
+}
+
+{
+  const v = ref(100)
+  watchEffect(() => {
+    v.value
+  })
+  let i = 0
+  bench('update ref to trigger watchEffect (executed)', async () => {
+    v.value = i++
+    await nextTick()
+  })
+}
diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts
index f24ce80b9df..fe299edbb63 100644
--- a/packages/runtime-core/__tests__/apiWatch.spec.ts
+++ b/packages/runtime-core/__tests__/apiWatch.spec.ts
@@ -1,36 +1,38 @@
 import {
-  watch,
-  watchEffect,
-  reactive,
+  type ComponentInternalInstance,
+  type ComponentPublicInstance,
   computed,
-  nextTick,
-  ref,
   defineComponent,
   getCurrentInstance,
-  ComponentInternalInstance,
-  ComponentPublicInstance
+  nextTick,
+  reactive,
+  ref,
+  watch,
+  watchEffect,
 } from '../src/index'
 import {
-  render,
+  type TestElement,
+  createApp,
+  h,
   nodeOps,
+  onMounted,
+  render,
   serializeInner,
-  TestElement,
-  h,
-  createApp,
   watchPostEffect,
   watchSyncEffect,
-  onMounted
 } from '@vue/runtime-test'
 import {
+  type DebuggerEvent,
   ITERATE_KEY,
-  DebuggerEvent,
+  type Ref,
+  type ShallowRef,
   TrackOpTypes,
   TriggerOpTypes,
-  triggerRef,
-  shallowRef,
-  Ref,
   effectScope,
-  toRef
+  shallowReactive,
+  shallowRef,
+  toRef,
+  triggerRef,
 } from '@vue/reactivity'
 
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
@@ -61,7 +63,7 @@ describe('api: watch', () => {
         if (prevCount) {
           prevCount + 1
         }
-      }
+      },
     )
     state.count++
     await nextTick()
@@ -91,7 +93,7 @@ describe('api: watch', () => {
     array.push(1)
     await nextTick()
     expect(spy).toBeCalledTimes(1)
-    expect(spy).toBeCalledWith([1], expect.anything(), expect.anything())
+    expect(spy).toBeCalledWith([1], [1], expect.anything())
   })
 
   it('should not fire if watched getter result did not change', async () => {
@@ -135,8 +137,8 @@ describe('api: watch', () => {
         dummy = [c, prevCount]
       },
       {
-        deep: true
-      }
+        deep: true,
+      },
     )
     count.value++
     await nextTick()
@@ -145,7 +147,7 @@ describe('api: watch', () => {
 
   it('directly watching reactive object (with automatic deep: true)', async () => {
     const src = reactive({
-      count: 0
+      count: 0,
     })
     let dummy
     watch(src, ({ count }) => {
@@ -156,6 +158,77 @@ describe('api: watch', () => {
     expect(dummy).toBe(1)
   })
 
+  it('directly watching reactive object with explicit deep: false', async () => {
+    const src = reactive({
+      state: {
+        count: 0,
+      },
+    })
+    let dummy
+    watch(
+      src,
+      ({ state }) => {
+        dummy = state?.count
+      },
+      {
+        deep: false,
+      },
+    )
+
+    // nested should not trigger
+    src.state.count++
+    await nextTick()
+    expect(dummy).toBe(undefined)
+
+    // root level should trigger
+    src.state = { count: 1 }
+    await nextTick()
+    expect(dummy).toBe(1)
+  })
+
+  // #9916
+  it('watching shallow reactive array with deep: false', async () => {
+    class foo {
+      prop1: ShallowRef<string> = shallowRef('')
+      prop2: string = ''
+    }
+
+    const obj1 = new foo()
+    const obj2 = new foo()
+
+    const collection = shallowReactive([obj1, obj2])
+    const cb = vi.fn()
+    watch(collection, cb, { deep: false })
+
+    collection[0].prop1.value = 'foo'
+    await nextTick()
+    // should not trigger
+    expect(cb).toBeCalledTimes(0)
+
+    collection.push(new foo())
+    await nextTick()
+    // should trigger on array self mutation
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  it('should still respect deep: true on shallowReactive source', async () => {
+    const obj = reactive({ a: 1 })
+    const arr = shallowReactive([obj])
+
+    let dummy
+    watch(
+      arr,
+      () => {
+        dummy = arr[0].a
+      },
+      { deep: true },
+    )
+
+    obj.a++
+    await nextTick()
+    expect(dummy).toBe(2)
+  })
+
   it('watching multiple sources', async () => {
     const state = reactive({ count: 1 })
     const count = ref(1)
@@ -174,7 +247,7 @@ describe('api: watch', () => {
     await nextTick()
     expect(dummy).toMatchObject([
       [2, 2, 3],
-      [1, 1, 2]
+      [1, 1, 2],
     ])
   })
 
@@ -189,7 +262,7 @@ describe('api: watch', () => {
         expect([newA, newB]).toMatchObject([undefined, undefined])
         expect([oldA, oldB]).toMatchObject([undefined, undefined])
       },
-      { immediate: true }
+      { immediate: true },
     )
     await nextTick()
     expect(called).toBe(true)
@@ -214,7 +287,7 @@ describe('api: watch', () => {
     await nextTick()
     expect(dummy).toMatchObject([
       [2, true],
-      [1, false]
+      [1, false],
     ])
   })
 
@@ -264,7 +337,7 @@ describe('api: watch', () => {
       () => state.count,
       count => {
         dummy = count
-      }
+      },
     )
 
     state.count++
@@ -345,7 +418,7 @@ describe('api: watch', () => {
           assertion(count.value, count2.value)
         })
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -375,10 +448,10 @@ describe('api: watch', () => {
           () => {
             assertion(count.value)
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -404,7 +477,7 @@ describe('api: watch', () => {
           assertion(count.value)
         })
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -444,11 +517,11 @@ describe('api: watch', () => {
             assertion(count.value)
           },
           {
-            flush: 'sync'
-          }
+            flush: 'sync',
+          },
         )
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -490,7 +563,7 @@ describe('api: watch', () => {
           assertion(count.value)
         })
         return () => count.value
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -513,12 +586,12 @@ describe('api: watch', () => {
       setup() {
         watch(toggle, cb, { flush: 'post' })
       },
-      render() {}
+      render() {},
     }
     const App = {
       render() {
         return toggle.value ? h(Comp) : null
-      }
+      },
     }
     render(h(App), nodeOps.createElement('div'))
     expect(cb).not.toHaveBeenCalled()
@@ -535,12 +608,12 @@ describe('api: watch', () => {
       setup() {
         watch(toggle, cb, { flush: 'pre' })
       },
-      render() {}
+      render() {},
     }
     const App = {
       render() {
         return toggle.value ? h(Comp) : null
-      }
+      },
     }
     render(h(App), nodeOps.createElement('div'))
     expect(cb).not.toHaveBeenCalled()
@@ -549,6 +622,98 @@ describe('api: watch', () => {
     expect(cb).not.toHaveBeenCalled()
   })
 
+  // #7030
+  it('should not fire on child component unmount w/ flush: pre', async () => {
+    const visible = ref(true)
+    const cb = vi.fn()
+    const Parent = defineComponent({
+      props: ['visible'],
+      render() {
+        return visible.value ? h(Comp) : null
+      },
+    })
+    const Comp = {
+      setup() {
+        watch(visible, cb, { flush: 'pre' })
+      },
+      render() {},
+    }
+    const App = {
+      render() {
+        return h(Parent, {
+          visible: visible.value,
+        })
+      },
+    }
+    render(h(App), nodeOps.createElement('div'))
+    expect(cb).not.toHaveBeenCalled()
+    visible.value = false
+    await nextTick()
+    expect(cb).not.toHaveBeenCalled()
+  })
+
+  // #7030
+  it('flush: pre watcher in child component should not fire before parent update', async () => {
+    const b = ref(0)
+    const calls: string[] = []
+
+    const Comp = {
+      setup() {
+        watch(
+          () => b.value,
+          val => {
+            calls.push('watcher child')
+          },
+          { flush: 'pre' },
+        )
+        return () => {
+          b.value
+          calls.push('render child')
+        }
+      },
+    }
+
+    const Parent = {
+      props: ['a'],
+      setup() {
+        watch(
+          () => b.value,
+          val => {
+            calls.push('watcher parent')
+          },
+          { flush: 'pre' },
+        )
+        return () => {
+          b.value
+          calls.push('render parent')
+          return h(Comp)
+        }
+      },
+    }
+
+    const App = {
+      render() {
+        return h(Parent, {
+          a: b.value,
+        })
+      },
+    }
+
+    render(h(App), nodeOps.createElement('div'))
+    expect(calls).toEqual(['render parent', 'render child'])
+
+    b.value++
+    await nextTick()
+    expect(calls).toEqual([
+      'render parent',
+      'render child',
+      'watcher parent',
+      'render parent',
+      'watcher child',
+      'render child',
+    ])
+  })
+
   // #1763
   it('flush: pre watcher watching props should fire before child update', async () => {
     const a = ref(0)
@@ -565,7 +730,7 @@ describe('api: watch', () => {
             calls.push('watcher 1')
             c.value++
           },
-          { flush: 'pre' }
+          { flush: 'pre' },
         )
 
         // #1777 chained pre-watcher
@@ -574,19 +739,19 @@ describe('api: watch', () => {
           () => {
             calls.push('watcher 2')
           },
-          { flush: 'pre' }
+          { flush: 'pre' },
         )
         return () => {
           c.value
           calls.push('render')
         }
-      }
+      },
     }
 
     const App = {
       render() {
         return h(Comp, { a: a.value, b: b.value })
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -613,7 +778,7 @@ describe('api: watch', () => {
           () => {
             calls.push('watch ' + count.value)
           },
-          { flush: 'pre' }
+          { flush: 'pre' },
         )
         onMounted(() => {
           calls.push('mounted')
@@ -622,7 +787,7 @@ describe('api: watch', () => {
         count.value++
         count.value++
         count.value++
-      }
+      },
     }
     render(h(App), nodeOps.createElement('div'))
     expect(calls).toMatchObject(['watch 3', 'mounted'])
@@ -642,13 +807,13 @@ describe('api: watch', () => {
           () => {
             dom = domRef.value
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
 
         return () => {
           return toggle.value ? h('p', { ref: domRef }) : null
         }
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -662,14 +827,14 @@ describe('api: watch', () => {
   it('deep', async () => {
     const state = reactive({
       nested: {
-        count: ref(0)
+        count: ref(0),
       },
       array: [1, 2, 3],
       map: new Map([
         ['a', 1],
-        ['b', 2]
+        ['b', 2],
       ]),
-      set: new Set([1, 2, 3])
+      set: new Set([1, 2, 3]),
     })
 
     let dummy
@@ -680,10 +845,10 @@ describe('api: watch', () => {
           state.nested.count,
           state.array[0],
           state.map.get('a'),
-          state.set.has(1)
+          state.set.has(1),
         ]
       },
-      { deep: true }
+      { deep: true },
     )
 
     state.nested.count++
@@ -717,7 +882,7 @@ describe('api: watch', () => {
       state => {
         dummy = [state[0].value, state[1].value]
       },
-      { deep: true }
+      { deep: true },
     )
 
     count.value++
@@ -768,7 +933,7 @@ describe('api: watch', () => {
         dummy = count.value
       },
       // @ts-expect-error
-      { immediate: false }
+      { immediate: false },
     )
     expect(dummy).toBe(0)
     expect(`"immediate" option is only respected`).toHaveBeenWarned()
@@ -787,7 +952,7 @@ describe('api: watch', () => {
         return arr
       },
       // @ts-expect-error
-      { deep: true }
+      { deep: true },
     )
     expect(spy).toHaveBeenCalledTimes(1)
     ;(arr.value[1] as Array<number>)[0] = 3
@@ -807,7 +972,7 @@ describe('api: watch', () => {
       () => {
         dummy = [obj.foo, 'bar' in obj, Object.keys(obj)]
       },
-      { onTrack }
+      { onTrack },
     )
     await nextTick()
     expect(dummy).toEqual([1, true, ['foo', 'bar']])
@@ -816,18 +981,18 @@ describe('api: watch', () => {
       {
         target: obj,
         type: TrackOpTypes.GET,
-        key: 'foo'
+        key: 'foo',
       },
       {
         target: obj,
         type: TrackOpTypes.HAS,
-        key: 'bar'
+        key: 'bar',
       },
       {
         target: obj,
         type: TrackOpTypes.ITERATE,
-        key: ITERATE_KEY
-      }
+        key: ITERATE_KEY,
+      },
     ])
   })
 
@@ -842,7 +1007,7 @@ describe('api: watch', () => {
       () => {
         dummy = obj.foo
       },
-      { onTrigger }
+      { onTrigger },
     )
     await nextTick()
     expect(dummy).toBe(1)
@@ -855,7 +1020,7 @@ describe('api: watch', () => {
       type: TriggerOpTypes.SET,
       key: 'foo',
       oldValue: 1,
-      newValue: 2
+      newValue: 2,
     })
 
     delete obj.foo
@@ -865,7 +1030,7 @@ describe('api: watch', () => {
     expect(events[1]).toMatchObject({
       type: TriggerOpTypes.DELETE,
       key: 'foo',
-      oldValue: 2
+      oldValue: 2,
     })
   })
 
@@ -879,8 +1044,8 @@ describe('api: watch', () => {
         ++calls
       },
       {
-        flush: 'sync'
-      }
+        flush: 'sync',
+      },
     )
 
     expect(calls).toBe(0)
@@ -981,7 +1146,7 @@ describe('api: watch', () => {
       mounted() {
         instance = getCurrentInstance()
       },
-      unmounted() {}
+      unmounted() {},
     })
 
     const Comp = defineComponent({
@@ -994,7 +1159,7 @@ describe('api: watch', () => {
       render() {
         return this.show
           ? h(Child, {
-              ref: vm => void (this.comp = vm as ComponentPublicInstance)
+              ref: vm => void (this.comp = vm as ComponentPublicInstance),
             })
           : null
       },
@@ -1003,9 +1168,9 @@ describe('api: watch', () => {
         // the effect for this `$watch` should nonetheless be registered with Child
         this.comp!.$watch(
           () => this.show,
-          () => void 0
+          () => void 0,
         )
-      }
+      },
     })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -1032,7 +1197,7 @@ describe('api: watch', () => {
       created(this: any) {
         instance = this
         this.$watch(source, function () {})
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1049,7 +1214,7 @@ describe('api: watch', () => {
       render() {},
       setup() {
         watch(source, () => {})
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1070,17 +1235,17 @@ describe('api: watch', () => {
       watch: {
         a() {
           b.value
-        }
+        },
       },
       render() {
         return h('div', this.a)
-      }
+      },
     })
 
     const Parent = defineComponent({
       render() {
         return h(Child, { a: a.value })
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1103,19 +1268,19 @@ describe('api: watch', () => {
       data() {
         return {
           a: {
-            b: 1
-          }
+            b: 1,
+          },
         }
       },
       watch: {
-        'a.b': spy
+        'a.b': spy,
       },
       created(this: any) {
         this.$watch('a.b', spy)
       },
       mounted(this: any) {
         this.a.b++
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -1158,11 +1323,11 @@ describe('api: watch', () => {
         effectScope(true).run(() => {
           watch(
             () => 1,
-            () => {}
+            () => {},
           )
         })
         return () => ''
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     createApp(Comp).mount(root)
@@ -1185,7 +1350,7 @@ describe('api: watch', () => {
           watch(trigger, () => countW++)
         })
         return () => ''
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp), root)
@@ -1205,4 +1370,108 @@ describe('api: watch', () => {
     expect(countWE).toBe(3)
     expect(countW).toBe(2)
   })
+
+  const options = [
+    { name: 'only trigger once watch' },
+    {
+      deep: true,
+      name: 'only trigger once watch with deep',
+    },
+    {
+      flush: 'sync',
+      name: 'only trigger once watch with flush: sync',
+    },
+    {
+      flush: 'pre',
+      name: 'only trigger once watch with flush: pre',
+    },
+    {
+      immediate: true,
+      name: 'only trigger once watch with immediate',
+    },
+  ] as const
+  test.each(options)('$name', async option => {
+    const count = ref(0)
+    const cb = vi.fn()
+
+    watch(count, cb, { once: true, ...option })
+
+    count.value++
+    await nextTick()
+
+    expect(count.value).toBe(1)
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    count.value++
+    await nextTick()
+
+    expect(count.value).toBe(2)
+    expect(cb).toHaveBeenCalledTimes(1)
+  })
+
+  // #5151
+  test('OnCleanup also needs to be cleaned，', async () => {
+    const spy1 = vi.fn()
+    const spy2 = vi.fn()
+    const num = ref(0)
+
+    watch(num, (value, oldValue, onCleanup) => {
+      if (value > 1) {
+        return
+      }
+      spy1()
+      onCleanup(() => {
+        // OnCleanup also needs to be cleaned
+        spy2()
+      })
+    })
+
+    num.value++
+    await nextTick()
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(0)
+
+    num.value++
+    await nextTick()
+
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+
+    num.value++
+    await nextTick()
+    // would not be calld when value>1
+    expect(spy1).toHaveBeenCalledTimes(1)
+    expect(spy2).toHaveBeenCalledTimes(1)
+  })
+
+  test("effect should be removed from scope's effects after it is stopped", () => {
+    const num = ref(0)
+    let unwatch: () => void
+
+    let instance: ComponentInternalInstance
+    const Comp = {
+      setup() {
+        instance = getCurrentInstance()!
+        unwatch = watch(num, () => {
+          console.log(num.value)
+        })
+        return () => null
+      },
+    }
+    const root = nodeOps.createElement('div')
+    createApp(Comp).mount(root)
+    expect(instance!.scope.effects.length).toBe(2)
+    unwatch!()
+    expect(instance!.scope.effects.length).toBe(1)
+
+    const scope = effectScope()
+    scope.run(() => {
+      unwatch = watch(num, () => {
+        console.log(num.value)
+      })
+    })
+    expect(scope.effects.length).toBe(1)
+    unwatch!()
+    expect(scope.effects.length).toBe(0)
+  })
 })
diff --git a/packages/runtime-core/__tests__/componentEmits.spec.ts b/packages/runtime-core/__tests__/componentEmits.spec.ts
index 0019dd9eb97..86307275bf8 100644
--- a/packages/runtime-core/__tests__/componentEmits.spec.ts
+++ b/packages/runtime-core/__tests__/componentEmits.spec.ts
@@ -2,13 +2,13 @@
 // ./rendererAttrsFallthrough.spec.ts.
 
 import {
-  render,
+  type ComponentPublicInstance,
   defineComponent,
   h,
+  nextTick,
   nodeOps,
+  render,
   toHandlers,
-  nextTick,
-  ComponentPublicInstance
 } from '@vue/runtime-test'
 import { isEmitListener } from '../src/componentEmits'
 
@@ -21,7 +21,7 @@ describe('component: emit', () => {
         this.$emit('foo')
         this.$emit('bar')
         this.$emit('!baz')
-      }
+      },
     })
 
     const onfoo = vi.fn()
@@ -41,13 +41,13 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('test-event')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
     const Comp = () =>
       h(Foo, {
-        onTestEvent: fooSpy
+        onTestEvent: fooSpy,
       })
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -59,13 +59,13 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('test-event')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
     const Comp = () =>
       h(Foo, {
-        'onTest-event': fooSpy
+        'onTest-event': fooSpy,
       })
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -79,7 +79,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('test-event')
         this.$emit('testEvent')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
@@ -90,8 +90,8 @@ describe('component: emit', () => {
         Foo,
         toHandlers({
           'test-event': fooSpy,
-          testEvent: barSpy
-        })
+          testEvent: barSpy,
+        }),
       )
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -106,7 +106,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:fooProp')
         this.$emit('update:barProp')
-      }
+      },
     })
 
     const fooSpy = vi.fn()
@@ -114,7 +114,7 @@ describe('component: emit', () => {
     const Comp = () =>
       h(Foo, {
         'onUpdate:fooProp': fooSpy,
-        'onUpdate:bar-prop': barSpy
+        'onUpdate:bar-prop': barSpy,
       })
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -127,7 +127,7 @@ describe('component: emit', () => {
       setup(_, { emit }) {
         emit('foo', 1)
         return () => h('div')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -137,9 +137,9 @@ describe('component: emit', () => {
       setup() {
         return () =>
           h(Child, {
-            onFoo: [fn1, fn2]
+            onFoo: [fn1, fn2],
           })
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -156,28 +156,28 @@ describe('component: emit', () => {
       created() {
         // @ts-expect-error
         this.$emit('bar')
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "bar" but it is neither declared`
+      `Component emitted event "bar" but it is neither declared`,
     ).toHaveBeenWarned()
   })
 
   test('warning for undeclared event (object)', () => {
     const Foo = defineComponent({
       emits: {
-        foo: null
+        foo: null,
       },
       render() {},
       created() {
         // @ts-expect-error
         this.$emit('bar')
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "bar" but it is neither declared`
+      `Component emitted event "bar" but it is neither declared`,
     ).toHaveBeenWarned()
   })
 
@@ -189,23 +189,23 @@ describe('component: emit', () => {
       created() {
         // @ts-expect-error
         this.$emit('foo')
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "foo" but it is neither declared`
+      `Component emitted event "foo" but it is neither declared`,
     ).not.toHaveBeenWarned()
   })
 
   test('validator warning', () => {
     const Foo = defineComponent({
       emits: {
-        foo: (arg: number) => arg > 0
+        foo: (arg: number) => arg > 0,
       },
       render() {},
       created() {
         this.$emit('foo', -1)
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(`event validation failed for event "foo"`).toHaveBeenWarned()
@@ -214,15 +214,15 @@ describe('component: emit', () => {
   test('merging from mixins', () => {
     const mixin = {
       emits: {
-        foo: (arg: number) => arg > 0
-      }
+        foo: (arg: number) => arg > 0,
+      },
     }
     const Foo = defineComponent({
       mixins: [mixin],
       render() {},
       created() {
         this.$emit('foo', -1)
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(`event validation failed for event "foo"`).toHaveBeenWarned()
@@ -235,11 +235,11 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('foo')
-      }
+      },
     })
     render(h(Foo), nodeOps.createElement('div'))
     expect(
-      `Component emitted event "foo" but it is neither declared`
+      `Component emitted event "foo" but it is neither declared`,
     ).not.toHaveBeenWarned()
   })
 
@@ -248,23 +248,23 @@ describe('component: emit', () => {
       render() {},
       emits: {
         foo: null,
-        bar: null
+        bar: null,
       },
       created() {
         this.$emit('foo')
         this.$emit('foo')
         this.$emit('bar')
         this.$emit('bar')
-      }
+      },
     })
     const fn = vi.fn()
     const barFn = vi.fn()
     render(
       h(Foo, {
         onFooOnce: fn,
-        onBarOnce: barFn
+        onBarOnce: barFn,
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(fn).toHaveBeenCalledTimes(1)
     expect(barFn).toHaveBeenCalledTimes(1)
@@ -274,21 +274,21 @@ describe('component: emit', () => {
     const Foo = defineComponent({
       render() {},
       emits: {
-        foo: null
+        foo: null,
       },
       created() {
         this.$emit('foo')
         this.$emit('foo')
-      }
+      },
     })
     const onFoo = vi.fn()
     const onFooOnce = vi.fn()
     render(
       h(Foo, {
         onFoo,
-        onFooOnce
+        onFooOnce,
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(onFoo).toHaveBeenCalledTimes(2)
     expect(onFooOnce).toHaveBeenCalledTimes(1)
@@ -300,7 +300,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:modelValue', '1')
         this.$emit('update:foo', '2')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -314,7 +314,7 @@ describe('component: emit', () => {
 
         foo: null,
         fooModifiers: { number: true },
-        'onUpdate:foo': fn2
+        'onUpdate:foo': fn2,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -331,7 +331,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:modelValue', ' one ')
         this.$emit('update:foo', '  two  ')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -345,7 +345,7 @@ describe('component: emit', () => {
 
         foo: null,
         fooModifiers: { trim: true },
-        'onUpdate:foo': fn2
+        'onUpdate:foo': fn2,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -362,7 +362,7 @@ describe('component: emit', () => {
       created() {
         this.$emit('update:modelValue', '    +01.2    ')
         this.$emit('update:foo', '    1    ')
-      }
+      },
     })
 
     const fn1 = vi.fn()
@@ -376,7 +376,7 @@ describe('component: emit', () => {
 
         foo: null,
         fooModifiers: { trim: true, number: true },
-        'onUpdate:foo': fn2
+        'onUpdate:foo': fn2,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -392,7 +392,7 @@ describe('component: emit', () => {
       render() {},
       created() {
         this.$emit('update:modelValue', ' foo ', { bar: ' bar ' })
-      }
+      },
     })
 
     const fn = vi.fn()
@@ -400,7 +400,7 @@ describe('component: emit', () => {
       h(Foo, {
         modelValue: null,
         modelModifiers: { trim: true },
-        'onUpdate:modelValue': fn
+        'onUpdate:modelValue': fn,
       })
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -414,7 +414,7 @@ describe('component: emit', () => {
       click: null,
       'test-event': null,
       fooBar: null,
-      FooBaz: null
+      FooBaz: null,
     }
     expect(isEmitListener(options, 'onClick')).toBe(true)
     expect(isEmitListener(options, 'onclick')).toBe(false)
@@ -440,11 +440,11 @@ describe('component: emit', () => {
       },
       render() {
         return h('div')
-      }
+      },
     })
     const Comp = () =>
       h(Foo, {
-        onClosing: fn
+        onClosing: fn,
       })
 
     const el = nodeOps.createElement('div')
@@ -457,10 +457,10 @@ describe('component: emit', () => {
 
   test('merge string array emits', async () => {
     const ComponentA = defineComponent({
-      emits: ['one', 'two']
+      emits: ['one', 'two'],
     })
     const ComponentB = defineComponent({
-      emits: ['three']
+      emits: ['three'],
     })
     const renderFn = vi.fn(function (this: ComponentPublicInstance) {
       expect(this.$options.emits).toEqual(['one', 'two', 'three'])
@@ -468,7 +468,7 @@ describe('component: emit', () => {
     })
     const ComponentC = defineComponent({
       render: renderFn,
-      mixins: [ComponentA, ComponentB]
+      mixins: [ComponentA, ComponentB],
     })
     const el = nodeOps.createElement('div')
     expect(renderFn).toHaveBeenCalledTimes(0)
@@ -481,24 +481,24 @@ describe('component: emit', () => {
     const ComponentA = defineComponent({
       emits: {
         one: null,
-        two: twoFn
-      }
+        two: twoFn,
+      },
     })
     const ComponentB = defineComponent({
-      emits: ['three']
+      emits: ['three'],
     })
     const renderFn = vi.fn(function (this: ComponentPublicInstance) {
       expect(this.$options.emits).toEqual({
         one: null,
         two: twoFn,
-        three: null
+        three: null,
       })
       expect(this.$options.emits.two).toBe(twoFn)
       return h('div')
     })
     const ComponentC = defineComponent({
       render: renderFn,
-      mixins: [ComponentA, ComponentB]
+      mixins: [ComponentA, ComponentB],
     })
     const el = nodeOps.createElement('div')
     expect(renderFn).toHaveBeenCalledTimes(0)
diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 89112f2ad49..6fc5d4dd2d7 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -3,21 +3,21 @@
  */
 
 import {
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
+  type FunctionalComponent,
+  type SetupContext,
+  createApp,
+  defineComponent,
   getCurrentInstance,
-  render,
   h,
+  inject,
   nodeOps,
-  FunctionalComponent,
-  defineComponent,
+  provide,
   ref,
+  render,
   serializeInner,
-  createApp,
-  provide,
-  inject,
-  watch,
   toRefs,
-  SetupContext
+  watch,
 } from '@vue/runtime-test'
 import { render as domRender, nextTick } from 'vue'
 
@@ -33,7 +33,7 @@ describe('component props', () => {
         props = this.$props
         attrs = this.$attrs
         proxy = this
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -74,7 +74,7 @@ describe('component props', () => {
           props = _props
           attrs = _attrs
         }
-      }
+      },
     })
 
     const root = nodeOps.createElement('div')
@@ -142,20 +142,20 @@ describe('component props', () => {
         foo: Boolean,
         bar: Boolean,
         baz: Boolean,
-        qux: Boolean
+        qux: Boolean,
       },
       render() {
         proxy = this
-      }
+      },
     }
     render(
       h(Comp, {
         // absent should cast to false
         bar: '', // empty string should cast to true
         baz: 'baz', // same string should cast to true
-        qux: 'ok' // other values should be left in-tact (but raise warning)
+        qux: 'ok', // other values should be left in-tact (but raise warning)
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
 
     expect(proxy.foo).toBe(false)
@@ -173,19 +173,19 @@ describe('component props', () => {
     const Comp = {
       props: {
         foo: {
-          default: 1
+          default: 1,
         },
         bar: {
-          default: defaultFn
+          default: defaultFn,
         },
         baz: {
           type: Function,
-          default: defaultBaz
-        }
+          default: defaultBaz,
+        },
       },
       render() {
         proxy = this
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -225,21 +225,21 @@ describe('component props', () => {
     const Child = defineComponent({
       props: {
         test: {
-          default: () => inject('test', 'default')
-        }
+          default: () => inject('test', 'default'),
+        },
       },
       setup(props) {
         return () => {
           return h('div', props.test)
         }
-      }
+      },
     })
 
     const Comp = {
       setup() {
         provide('test', 'injected')
         return () => h(Child)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -250,7 +250,7 @@ describe('component props', () => {
   test('optimized props updates', async () => {
     const Child = defineComponent({
       props: ['foo'],
-      template: `<div>{{ foo }}</div>`
+      template: `<div>{{ foo }}</div>`,
     })
 
     const foo = ref(1)
@@ -260,11 +260,11 @@ describe('component props', () => {
       setup() {
         return {
           foo,
-          id
+          id,
         }
       },
       components: { Child },
-      template: `<Child :foo="foo" :id="id"/>`
+      template: `<Child :foo="foo" :id="id"/>`,
     })
 
     // Note this one is using the main Vue render so it can compile template
@@ -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
@@ -291,7 +341,7 @@ describe('component props', () => {
         instance = getCurrentInstance()!
         setupProps = props
         return () => null
-      }
+      },
     }
     render(h(Comp, { foo: 1 }), nodeOps.createElement('div'))
     expect(setupProps.foo).toBe(1)
@@ -313,11 +363,11 @@ describe('component props', () => {
       props: {
         bool: { type: Boolean, required: true },
         str: { type: String, required: true },
-        num: { type: Number, required: true }
+        num: { type: Number, required: true },
       },
       setup() {
         return () => null
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(`Missing required prop: "bool"`).toHaveBeenWarned()
@@ -336,11 +386,12 @@ describe('component props', () => {
         obj: { type: Object },
         cls: { type: MyClass },
         fn: { type: Function },
-        skipCheck: { type: [Boolean, Function], skipCheck: true }
+        skipCheck: { type: [Boolean, Function], skipCheck: true },
+        empty: { type: [] },
       },
       setup() {
         return () => null
-      }
+      },
     }
     render(
       h(Comp, {
@@ -351,51 +402,55 @@ describe('component props', () => {
         obj: 'false',
         cls: {},
         fn: true,
-        skipCheck: 'foo'
+        skipCheck: 'foo',
+        empty: [1, 2, 3],
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(
-      `Invalid prop: type check failed for prop "bool". Expected Boolean, got String`
+      `Invalid prop: type check failed for prop "bool". Expected Boolean, got String`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`
+      `Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`
+      `Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "arr". Expected Array, got Object`
+      `Invalid prop: type check failed for prop "arr". Expected Array, got Object`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "obj". Expected Object, got String with value "false"`
+      `Invalid prop: type check failed for prop "obj". Expected Object, got String with value "false"`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "fn". Expected Function, got Boolean with value true.`
+      `Invalid prop: type check failed for prop "fn". Expected Function, got Boolean with value true.`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`
+      `Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`,
     ).toHaveBeenWarned()
     expect(
-      `Invalid prop: type check failed for prop "skipCheck". Expected Boolean | Function, got String with value "foo".`
+      `Invalid prop: type check failed for prop "skipCheck". Expected Boolean | Function, got String with value "foo".`,
     ).not.toHaveBeenWarned()
+    expect(
+      `Prop type [] for prop "empty" won't match anything. Did you mean to use type Array instead?`,
+    ).toHaveBeenWarned()
   })
 
   // #3495
   test('should not warn required props using kebab-case', async () => {
     const Comp = {
       props: {
-        fooBar: { type: String, required: true }
+        fooBar: { type: String, required: true },
       },
       setup() {
         return () => null
-      }
+      },
     }
     render(
       h(Comp, {
-        'foo-bar': 'hello'
+        'foo-bar': 'hello',
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     expect(`Missing required prop: "fooBar"`).not.toHaveBeenWarned()
   })
@@ -405,13 +460,13 @@ describe('component props', () => {
     let renderProxy: any
 
     const E = {
-      props: ['base']
+      props: ['base'],
     }
     const M1 = {
-      props: ['m1']
+      props: ['m1'],
     }
     const M2 = {
-      props: { m2: null }
+      props: { m2: null },
     }
     const Comp = {
       props: ['self'],
@@ -423,7 +478,7 @@ describe('component props', () => {
       render(this: any) {
         renderProxy = this
         return h('div', [this.self, this.base, this.m1, this.m2])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -431,12 +486,12 @@ describe('component props', () => {
       self: 'from self, ',
       base: 'from base, ',
       m1: 'from mixin 1, ',
-      m2: 'from mixin 2'
+      m2: 'from mixin 2',
     }
     render(h(Comp, props), root)
 
     expect(serializeInner(root)).toMatch(
-      `from self, from base, from mixin 1, from mixin 2`
+      `from self, from base, from mixin 1, from mixin 2`,
     )
     expect(setupProps).toMatchObject(props)
     expect(renderProxy.$props).toMatchObject(props)
@@ -447,10 +502,10 @@ describe('component props', () => {
     let renderProxy: any
 
     const M1 = {
-      props: ['m1']
+      props: ['m1'],
     }
     const M2 = {
-      props: { m2: null }
+      props: { m2: null },
     }
     const Comp = {
       props: ['self'],
@@ -460,13 +515,13 @@ describe('component props', () => {
       render(this: any) {
         renderProxy = this
         return h('div', [this.self, this.m1, this.m2])
-      }
+      },
     }
 
     const props = {
       self: 'from self, ',
       m1: 'from mixin 1, ',
-      m2: 'from mixin 2'
+      m2: 'from mixin 2',
     }
     const app = createApp(Comp, props)
     app.mixin(M1)
@@ -476,7 +531,7 @@ describe('component props', () => {
     app.mount(root)
 
     expect(serializeInner(root)).toMatch(
-      `from self, from mixin 1, from mixin 2`
+      `from self, from mixin 1, from mixin 2`,
     )
     expect(setupProps).toMatchObject(props)
     expect(renderProxy.$props).toMatchObject(props)
@@ -485,19 +540,19 @@ describe('component props', () => {
   test('props type support BigInt', () => {
     const Comp = {
       props: {
-        foo: BigInt
+        foo: BigInt,
       },
       render(this: any) {
         return h('div', [this.foo])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
     render(
       h(Comp, {
-        foo: BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000)
+        foo: BigInt(BigInt(100000111)) + BigInt(2000000000) * BigInt(30000000),
       }),
-      root
+      root,
     )
 
     expect(serializeInner(root)).toMatch('<div>60000000100000111</div>')
@@ -510,25 +565,25 @@ describe('component props', () => {
       props: {
         foo: {
           type: Object,
-          default: () => ({ val: 1 })
+          default: () => ({ val: 1 }),
         },
-        bar: Number
+        bar: Number,
       },
       setup(props: any) {
         watch(
           () => props.foo,
           () => {
             count++
-          }
+          },
         )
         return () => h('h1', [props.foo.val, props.bar])
-      }
+      },
     }
 
     const foo = ref()
     const bar = ref(0)
     const app = createApp({
-      render: () => h(Comp, { foo: foo.value, bar: bar.value })
+      render: () => h(Comp, { foo: foo.value, bar: bar.value }),
     })
 
     const root = nodeOps.createElement('div')
@@ -551,13 +606,13 @@ describe('component props', () => {
     const Comp = {
       render() {},
       props: {
-        foo: String
+        foo: String,
       },
       setup(props: any) {
         initialKeys = Object.keys(props)
         const { foo } = toRefs(props)
         watch(foo, changeSpy)
-      }
+      },
     }
 
     const Parent = () => (passFoo.value ? h(Comp, { foo: 'ok' }) : h(Comp))
@@ -585,15 +640,15 @@ describe('component props', () => {
           childProps.value && childProps.value.foo
           return slots.default!()
         }
-      }
+      },
     }
 
     const Child = {
       props: {
         foo: {
           type: Boolean,
-          required: false
-        }
+          required: false,
+        },
       },
       setup(props: { foo: boolean }) {
         const register = inject('register') as any
@@ -602,13 +657,13 @@ describe('component props', () => {
         register(props)
 
         return () => 'foo'
-      }
+      },
     }
 
     const App = {
       setup() {
         return () => h(Parent, () => h(Child as any, { foo: '' }, () => null))
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -620,9 +675,9 @@ describe('component props', () => {
   test('support null in required + multiple-type declarations', () => {
     const Comp = {
       props: {
-        foo: { type: [Function, null], required: true }
+        foo: { type: [Function, null], required: true },
       },
-      render() {}
+      render() {},
     }
     const root = nodeOps.createElement('div')
     expect(() => {
@@ -639,7 +694,7 @@ describe('component props', () => {
     const Comp = {
       render(this: any) {
         return JSON.stringify(this.$attrs) + Object.keys(this.$attrs)
-      }
+      },
     }
     const root = nodeOps.createElement('div')
 
@@ -647,12 +702,12 @@ describe('component props', () => {
 
     render(h(Comp, attrs), root)
     expect(serializeInner(root)).toBe(
-      JSON.stringify(attrs) + Object.keys(attrs)
+      JSON.stringify(attrs) + Object.keys(attrs),
     )
 
     render(h(Comp, (attrs = { foo: 'bar' })), root)
     expect(serializeInner(root)).toBe(
-      JSON.stringify(attrs) + Object.keys(attrs)
+      JSON.stringify(attrs) + Object.keys(attrs),
     )
   })
 
@@ -660,12 +715,12 @@ describe('component props', () => {
   test('should not mutate original props long-form definition object', () => {
     const props = {
       msg: {
-        type: String
-      }
+        type: String,
+      },
     }
     const Comp = defineComponent({
       props,
-      render() {}
+      render() {},
     })
 
     const root = nodeOps.createElement('div')
@@ -674,4 +729,23 @@ describe('component props', () => {
 
     expect(Object.keys(props.msg).length).toBe(1)
   })
+
+  test('should warn against reserved prop names', () => {
+    const Comp = defineComponent({
+      props: {
+        key: String,
+        ref: String,
+        $foo: String,
+      },
+      render() {},
+    })
+
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp, { msg: 'test' }), root)
+
+    expect(`Invalid prop name: "key"`).toHaveBeenWarned()
+    expect(`Invalid prop name: "ref"`).toHaveBeenWarned()
+    expect(`Invalid prop name: "$foo"`).toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-core/__tests__/componentPublicInstance.spec.ts b/packages/runtime-core/__tests__/componentPublicInstance.spec.ts
index 4fe63861a7a..37c228a5104 100644
--- a/packages/runtime-core/__tests__/componentPublicInstance.spec.ts
+++ b/packages/runtime-core/__tests__/componentPublicInstance.spec.ts
@@ -1,13 +1,16 @@
 import {
-  h,
-  render,
+  createApp,
+  defineComponent,
   getCurrentInstance,
+  h,
   nodeOps,
-  createApp,
+  render,
   shallowReadonly,
-  defineComponent
 } from '@vue/runtime-test'
-import { ComponentInternalInstance, ComponentOptions } from '../src/component'
+import type {
+  ComponentInternalInstance,
+  ComponentOptions,
+} from '../src/component'
 
 describe('component: proxy', () => {
   test('data', () => {
@@ -16,7 +19,7 @@ describe('component: proxy', () => {
     const Comp = {
       data() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       mounted() {
@@ -25,7 +28,7 @@ describe('component: proxy', () => {
       },
       render() {
         return null
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.foo).toBe(1)
@@ -39,7 +42,7 @@ describe('component: proxy', () => {
     const Comp = {
       setup() {
         return {
-          foo: 1
+          foo: 1,
         }
       },
       mounted() {
@@ -48,7 +51,7 @@ describe('component: proxy', () => {
       },
       render() {
         return null
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.foo).toBe(1)
@@ -64,7 +67,7 @@ describe('component: proxy', () => {
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
     render(h(Comp, { count: 1 }), nodeOps.createElement('div'))
     expect('count' in instanceProxy).toBe(false)
@@ -80,7 +83,7 @@ describe('component: proxy', () => {
       mounted() {
         instance = getCurrentInstance()!
         instanceProxy = this
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instanceProxy.$data).toBe(instance!.data)
@@ -89,7 +92,7 @@ describe('component: proxy', () => {
     expect(instanceProxy.$slots).toBe(shallowReadonly(instance!.slots))
     expect(instanceProxy.$refs).toBe(shallowReadonly(instance!.refs))
     expect(instanceProxy.$parent).toBe(
-      instance!.parent && instance!.parent.proxy
+      instance!.parent && instance!.parent.proxy,
     )
     expect(instanceProxy.$root).toBe(instance!.root.proxy)
     expect(instanceProxy.$emit).toBe(instance!.emit)
@@ -114,7 +117,7 @@ describe('component: proxy', () => {
       mounted() {
         instance = getCurrentInstance()!
         instanceProxy = this
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     instanceProxy.foo = 1
@@ -137,7 +140,7 @@ describe('component: proxy', () => {
       mounted() {
         instance = getCurrentInstance()!
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -159,21 +162,21 @@ describe('component: proxy', () => {
     const Comp = {
       render() {},
       props: {
-        msg: String
+        msg: String,
       },
       data() {
         return {
-          foo: 0
+          foo: 0,
         }
       },
       setup() {
         return {
-          bar: 1
+          bar: 1,
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp, { msg: 'hello' })
@@ -211,7 +214,7 @@ describe('component: proxy', () => {
       'msg',
       'bar',
       'foo',
-      'baz'
+      'baz',
     ])
   })
 
@@ -221,12 +224,12 @@ describe('component: proxy', () => {
       render() {},
       setup() {
         return {
-          isDisplayed: true
+          isDisplayed: true,
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -244,7 +247,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'isDisplayed', {
       get() {
         return false
-      }
+      },
     })
 
     expect(instanceProxy.isDisplayed).toBe(false)
@@ -252,7 +255,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'isDisplayed', {
       get() {
         return true
-      }
+      },
     })
 
     expect(instanceProxy.isDisplayed).toBe(true)
@@ -267,12 +270,12 @@ describe('component: proxy', () => {
         return {
           toggle() {
             return 'a'
-          }
+          },
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -289,7 +292,7 @@ describe('component: proxy', () => {
       get() {
         getCalledTimes++
         return () => 'b'
-      }
+      },
     })
 
     // getter should not be evaluated on initial definition
@@ -323,12 +326,12 @@ describe('component: proxy', () => {
       render() {},
       setup() {
         return {
-          toggle: 'a'
+          toggle: 'a',
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -339,14 +342,14 @@ describe('component: proxy', () => {
     expect(v1).toEqual('a')
 
     Object.defineProperty(instanceProxy, 'toggle', {
-      value: 'b'
+      value: 'b',
     })
     const v2 = instanceProxy.toggle
     expect(v2).toEqual('b')
 
     // expect null to be a settable value
     Object.defineProperty(instanceProxy, 'toggle', {
-      value: null
+      value: null,
     })
     const v3 = instanceProxy.toggle
     expect(v3).toBeNull()
@@ -363,21 +366,21 @@ describe('component: proxy', () => {
       computed: {
         greet() {
           return 'Hi ' + (this as any).name
-        }
+        },
       },
       render() {},
       setup() {
         return {
-          fromSetup: true
+          fromSetup: true,
         }
       },
       mounted() {
         instanceProxy = this
-      }
+      },
     }
 
     const app = createApp(Comp, {
-      fromProp: true
+      fromProp: true,
     })
 
     app.mount(nodeOps.createElement('div'))
@@ -387,7 +390,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'name', {
       get() {
         return 'getter.name'
-      }
+      },
     })
 
     // computed is same still cached
@@ -403,7 +406,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'greet', {
       get() {
         return 'Hi greet.getter.computed'
-      }
+      },
     })
     expect(instanceProxy.greet).toEqual('Hi greet.getter.computed')
 
@@ -412,7 +415,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'fromSetup', {
       get() {
         return false
-      }
+      },
     })
     expect(instanceProxy.fromSetup).toBe(false)
 
@@ -421,7 +424,7 @@ describe('component: proxy', () => {
     Object.defineProperty(instanceProxy, 'fromProp', {
       get() {
         return false
-      }
+      },
     })
     expect(instanceProxy.fromProp).toBe(false)
   })
@@ -432,11 +435,11 @@ describe('component: proxy', () => {
       props: ['test'],
       render(this: any) {
         return this.test
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(
-      `was accessed during render but is not defined`
+      `was accessed during render but is not defined`,
     ).not.toHaveBeenWarned()
   })
 
@@ -447,7 +450,7 @@ describe('component: proxy', () => {
           return '1'
         }
         return '2'
-      }
+      },
     }
 
     const app = createApp(Comp)
@@ -455,8 +458,8 @@ describe('component: proxy', () => {
 
     expect(
       `Property ${JSON.stringify(
-        Symbol.unscopables
-      )} was accessed during render ` + `but is not defined on instance.`
+        Symbol.unscopables,
+      )} was accessed during render ` + `but is not defined on instance.`,
     ).toHaveBeenWarned()
   })
 
@@ -466,7 +469,7 @@ describe('component: proxy', () => {
       setup() {
         return {
           __isScriptSetup: true,
-          foo: 1
+          foo: 1,
         }
       },
       mounted() {
@@ -474,7 +477,7 @@ describe('component: proxy', () => {
         try {
           this.foo = 123
         } catch (e) {}
-      }
+      },
     })
     render(h(Comp), nodeOps.createElement('div'))
     expect(`Cannot mutate <script setup> binding "foo"`).toHaveBeenWarned()
diff --git a/packages/runtime-core/__tests__/componentSlots.spec.ts b/packages/runtime-core/__tests__/componentSlots.spec.ts
index f08f1910cd4..09b37932147 100644
--- a/packages/runtime-core/__tests__/componentSlots.spec.ts
+++ b/packages/runtime-core/__tests__/componentSlots.spec.ts
@@ -1,10 +1,11 @@
 import {
-  ref,
-  render,
+  createApp,
+  getCurrentInstance,
   h,
-  nodeOps,
   nextTick,
-  getCurrentInstance
+  nodeOps,
+  ref,
+  render,
 } from '@vue/runtime-test'
 import { normalizeVNode } from '../src/vnode'
 import { createSlots } from '../src/helpers/createSlots'
@@ -16,7 +17,7 @@ describe('component: slots', () => {
       render() {
         instance = getCurrentInstance()
         return h('div')
-      }
+      },
     }
 
     render(h(Comp, null, slots), nodeOps.createElement('div'))
@@ -33,15 +34,15 @@ describe('component: slots', () => {
       _inner: '_inner',
       foo: null,
       header: 'header',
-      footer: ['f1', 'f2']
+      footer: ['f1', 'f2'],
     })
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(slots).not.toHaveProperty('_inner')
@@ -49,7 +50,7 @@ describe('component: slots', () => {
     expect(slots.header()).toMatchObject([normalizeVNode('header')])
     expect(slots.footer()).toMatchObject([
       normalizeVNode('f1'),
-      normalizeVNode('f2')
+      normalizeVNode('f2'),
     ])
   })
 
@@ -59,14 +60,14 @@ describe('component: slots', () => {
       render() {
         proxy = getCurrentInstance()
         return h('div')
-      }
+      },
     }
 
     render(
       h(Comp, null, {
-        header: () => 'header'
+        header: () => 'header',
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
 
     expect(proxy.slots.header()).toMatchObject([normalizeVNode('header')])
@@ -76,7 +77,7 @@ describe('component: slots', () => {
     const { slots } = renderWithSlots([h('span')])
 
     expect(
-      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(slots.default()).toMatchObject([normalizeVNode(h('span'))])
@@ -101,16 +102,16 @@ describe('component: slots', () => {
               flag1.value
                 ? {
                     name: 'one',
-                    fn: () => [h('span')]
+                    fn: () => [h('span')],
                   }
                 : {
                     name: 'two',
-                    fn: () => [h('div')]
-                  }
-            ])
-          )
+                    fn: () => [h('div')],
+                  },
+            ]),
+          ),
         ]
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -134,18 +135,20 @@ describe('component: slots', () => {
     }
 
     const oldSlots = {
-      header: 'header'
+      header: 'header',
+      footer: undefined,
     }
     const newSlots = {
-      footer: 'footer'
+      header: undefined,
+      footer: 'footer',
     }
 
     const Comp = {
       setup() {
         return () => [
-          h(Child, { n: flag1.value }, flag1.value ? oldSlots : newSlots)
+          h(Child, { n: flag1.value }, flag1.value ? oldSlots : newSlots),
         ]
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -156,11 +159,11 @@ describe('component: slots', () => {
     await nextTick()
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "header". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(
-      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for slot "footer". Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(instance.slots).not.toHaveProperty('header')
@@ -179,9 +182,9 @@ describe('component: slots', () => {
     const Comp = {
       setup() {
         return () => [
-          h(Child, { n: flag1.value }, flag1.value ? ['header'] : ['footer'])
+          h(Child, { n: flag1.value }, flag1.value ? ['header'] : ['footer']),
         ]
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
 
@@ -191,7 +194,7 @@ describe('component: slots', () => {
     await nextTick()
 
     expect(
-      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.'
+      '[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.',
     ).toHaveBeenWarned()
 
     expect(instance.slots.default()).toMatchObject([normalizeVNode('footer')])
@@ -216,11 +219,11 @@ describe('component: slots', () => {
             { n: flag2.value },
             {
               foo: () => 'foo',
-              $stable: true
-            }
-          )
+              $stable: true,
+            },
+          ),
         ]
-      }
+      },
     }
 
     render(h(App), nodeOps.createElement('div'))
@@ -238,4 +241,32 @@ describe('component: slots', () => {
     await nextTick()
     expect(spy).toHaveBeenCalledTimes(2)
   })
+
+  test('should not warn when mounting another app in setup', () => {
+    const Comp = {
+      setup(_: any, { slots }: any) {
+        return () => slots.default?.()
+      },
+    }
+
+    const mountComp = () => {
+      createApp({
+        setup() {
+          return () => h(Comp, () => 'msg')
+        },
+      }).mount(nodeOps.createElement('div'))
+    }
+
+    const App = {
+      setup() {
+        mountComp()
+        return () => null
+      },
+    }
+
+    createApp(App).mount(nodeOps.createElement('div'))
+    expect(
+      'Slot "default" invoked outside of the render function',
+    ).not.toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index f704025550b..7c389fe1ede 100644
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -1,22 +1,22 @@
 import {
-  nodeOps,
-  render,
-  h,
   BaseTransition,
-  BaseTransitionProps,
-  ref,
+  type BaseTransitionProps,
+  KeepAlive,
+  type TestElement,
+  type VNodeProps,
+  h,
   nextTick,
-  serializeInner,
+  nodeOps,
+  ref,
+  render,
   serialize,
-  VNodeProps,
-  KeepAlive,
-  TestElement
+  serializeInner,
 } from '@vue/runtime-test'
 
 function mount(
   props: BaseTransitionProps,
   slot: () => any,
-  withKeepAlive = false
+  withKeepAlive = false,
 ) {
   const root = nodeOps.createElement('div')
   const show = ref(true)
@@ -28,7 +28,7 @@ function mount(
             return withKeepAlive ? h(KeepAlive, null, slot()) : slot()
           })
         : null
-    }
+    },
   }
   render(h(App), root)
 
@@ -41,7 +41,7 @@ function mockProps(extra: BaseTransitionProps = {}, withKeepAlive = false) {
     doneLeave: Record<string, () => void>
   } = {
     doneEnter: {},
-    doneLeave: {}
+    doneLeave: {},
   }
   const props: BaseTransitionProps = {
     onBeforeEnter: vi.fn(el => {
@@ -66,21 +66,21 @@ function mockProps(extra: BaseTransitionProps = {}, withKeepAlive = false) {
     }),
     onAfterAppear: vi.fn(),
     onAppearCancelled: vi.fn(),
-    ...extra
+    ...extra,
   }
   return {
     props,
-    cbs
+    cbs,
   }
 }
 
 function assertCalls(
   props: BaseTransitionProps,
-  calls: Record<string, number>
+  calls: Record<string, number>,
 ) {
   Object.keys(calls).forEach(key => {
     expect(props[key as keyof BaseTransitionProps]).toHaveBeenCalledTimes(
-      calls[key]
+      calls[key],
     )
   })
 }
@@ -103,7 +103,7 @@ function runTestWithElements(tester: TestFn) {
     trueBranch: () => h('div'),
     falseBranch: () => h('span'),
     trueSerialized: `<div></div>`,
-    falseSerialized: `<span></span>`
+    falseSerialized: `<span></span>`,
   })
 }
 
@@ -116,7 +116,7 @@ function runTestWithComponents(tester: TestFn) {
     trueBranch: () => h(CompA, { msg: 'foo' }),
     falseBranch: () => h(CompB, { msg: 'bar' }),
     trueSerialized: `<div>foo</div>`,
-    falseSerialized: `<span>bar</span>`
+    falseSerialized: `<span>bar</span>`,
   })
 }
 
@@ -125,29 +125,29 @@ function runTestWithKeepAlive(tester: TestFn) {
     setup() {
       const count = ref(0)
       return () => h('div', count.value)
-    }
+    },
   }
   const falseComp = {
     setup() {
       const count = ref(0)
       return () => h('span', count.value)
-    }
+    },
   }
   return tester(
     {
       trueBranch: () => h(trueComp),
       falseBranch: () => h(falseComp),
       trueSerialized: `<div>0</div>`,
-      falseSerialized: `<span>0</span>`
+      falseSerialized: `<span>0</span>`,
     },
-    true /* withKeepAlive: true */
+    true /* withKeepAlive: true */,
   )
 }
 
 describe('BaseTransition', () => {
   test('appear: true w/ appear hooks', () => {
     const { props, cbs } = mockProps({
-      appear: true
+      appear: true,
     })
     mount(props, () => h('div'))
     expect(props.onBeforeAppear).toHaveBeenCalledTimes(1)
@@ -170,7 +170,7 @@ describe('BaseTransition', () => {
       onBeforeAppear: undefined,
       onAppear: undefined,
       onAfterAppear: undefined,
-      onAppearCancelled: undefined
+      onAppearCancelled: undefined,
     })
     mount(props, () => h('div'))
     expect(props.onBeforeEnter).toHaveBeenCalledTimes(1)
@@ -205,7 +205,7 @@ describe('BaseTransition', () => {
               })
             }
           }
-        }
+        },
       }
       return { state, toggle, hooks }
     }
@@ -259,14 +259,14 @@ describe('BaseTransition', () => {
         trueBranch,
         trueSerialized,
         falseBranch,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      mode?: BaseTransitionProps['mode']
+      mode?: BaseTransitionProps['mode'],
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode })
       const { root } = mount(props, () =>
-        toggle.value ? trueBranch() : falseBranch()
+        toggle.value ? trueBranch() : falseBranch(),
       )
 
       // without appear: true, enter hooks should not be called on mount
@@ -309,7 +309,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -318,7 +318,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h('div'),
         trueSerialized: `<div></div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
 
@@ -328,7 +328,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h(Comp, { msg: 'hello' }),
         trueSerialized: `<div>hello</div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
 
@@ -338,9 +338,9 @@ describe('BaseTransition', () => {
           trueBranch: () => h('div'),
           trueSerialized: `<div></div>`,
           falseBranch: () => null,
-          falseSerialized: `<!---->`
+          falseSerialized: `<!---->`,
         },
-        'in-out'
+        'in-out',
       )
     })
   })
@@ -350,12 +350,12 @@ describe('BaseTransition', () => {
       trueBranch,
       trueSerialized,
       falseBranch = () => null,
-      falseSerialized = `<!---->`
+      falseSerialized = `<!---->`,
     }: ToggleOptions) {
       const toggle = ref(false)
       const { props, cbs } = mockProps()
       const { root } = mount(props, () =>
-        toggle.value ? trueBranch() : falseBranch()
+        toggle.value ? trueBranch() : falseBranch(),
       )
 
       // start enter
@@ -402,7 +402,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -411,7 +411,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h('div'),
         trueSerialized: `<div></div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
 
@@ -421,7 +421,7 @@ describe('BaseTransition', () => {
         trueBranch: () => h(Comp, { msg: 'hello' }),
         trueSerialized: `<div>hello</div>`,
         falseBranch: () => null,
-        falseSerialized: `<!---->`
+        falseSerialized: `<!---->`,
       })
     })
   })
@@ -432,16 +432,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({}, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // without appear: true, enter hooks should not be called on mount
@@ -515,7 +515,7 @@ describe('BaseTransition', () => {
         onLeave: 2,
         onAfterLeave: 2,
         onEnterCancelled: 0,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -538,16 +538,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({}, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // start toggle
@@ -648,7 +648,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 3,
         onLeave: 3,
         onAfterLeave: withKeepAlive ? 1 : 3,
-        onLeaveCancelled: withKeepAlive ? 2 : 0
+        onLeaveCancelled: withKeepAlive ? 2 : 0,
       })
     }
 
@@ -671,16 +671,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // trigger toggle
@@ -753,7 +753,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 2,
         onLeave: 2,
         onAfterLeave: 2,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -777,16 +777,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root, unmount } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // trigger toggle
@@ -835,7 +835,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -855,14 +855,14 @@ describe('BaseTransition', () => {
   describe('mode: "out-in" toggle before finish', () => {
     async function testOutInBeforeFinish(
       { trueBranch, falseBranch, trueSerialized }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // trigger toggle
@@ -907,7 +907,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -930,16 +930,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'out-in' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       // double quick toggle
@@ -985,7 +985,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -1008,16 +1008,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'in-out' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       toggle.value = false
@@ -1089,7 +1089,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 2,
         onLeave: 2,
         onAfterLeave: 2,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
@@ -1112,16 +1112,16 @@ describe('BaseTransition', () => {
         trueBranch,
         falseBranch,
         trueSerialized,
-        falseSerialized
+        falseSerialized,
       }: ToggleOptions,
-      withKeepAlive = false
+      withKeepAlive = false,
     ) {
       const toggle = ref(true)
       const { props, cbs } = mockProps({ mode: 'in-out' }, withKeepAlive)
       const { root } = mount(
         props,
         () => (toggle.value ? trueBranch() : falseBranch()),
-        withKeepAlive
+        withKeepAlive,
       )
 
       toggle.value = false
@@ -1177,7 +1177,7 @@ describe('BaseTransition', () => {
         onBeforeLeave: 1,
         onLeave: 1,
         onAfterLeave: 1,
-        onLeaveCancelled: 0
+        onLeaveCancelled: 0,
       })
     }
 
diff --git a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
index ff8ea74b622..6d3f6a9b8b6 100644
--- a/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
+++ b/packages/runtime-core/__tests__/components/KeepAlive.spec.ts
@@ -1,31 +1,31 @@
 import {
-  h,
-  TestElement,
-  nodeOps,
-  render,
-  ref,
+  type Component,
+  type ComponentOptions,
+  type ComponentPublicInstance,
   KeepAlive,
-  serializeInner,
-  nextTick,
-  ComponentOptions,
-  markRaw,
-  inject,
-  defineComponent,
-  ComponentPublicInstance,
-  Ref,
+  type Ref,
+  type TestElement,
   cloneVNode,
-  provide,
-  defineAsyncComponent,
-  Component,
   createApp,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  inject,
+  markRaw,
+  nextTick,
+  nodeOps,
   onActivated,
-  onUnmounted,
+  onDeactivated,
   onMounted,
+  onUnmounted,
+  provide,
   reactive,
+  ref,
+  render,
+  serializeInner,
   shallowRef,
-  onDeactivated
 } from '@vue/runtime-test'
-import { KeepAliveProps } from '../../src/components/KeepAlive'
+import type { KeepAliveProps } from '../../src/components/KeepAlive'
 
 const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
 
@@ -47,7 +47,7 @@ describe('KeepAlive', () => {
       mounted: vi.fn(),
       activated: vi.fn(),
       deactivated: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
     }
     two = {
       name: 'two',
@@ -59,11 +59,11 @@ describe('KeepAlive', () => {
       mounted: vi.fn(),
       activated: vi.fn(),
       deactivated: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
     }
     views = {
       one,
-      two
+      two,
     }
   })
 
@@ -73,7 +73,7 @@ describe('KeepAlive', () => {
       component.mounted.mock.calls.length,
       component.activated.mock.calls.length,
       component.deactivated.mock.calls.length,
-      component.unmounted.mock.calls.length
+      component.unmounted.mock.calls.length,
     ]).toEqual(callCounts)
   }
 
@@ -83,9 +83,9 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return h(KeepAlive, null, {
-          default: () => h(views[viewRef.value], { ref: instanceRef })
+          default: () => h(views[viewRef.value], { ref: instanceRef }),
         })
-      }
+      },
     }
     render(h(App), root)
     expect(serializeInner(root)).toBe(`<div>one</div>`)
@@ -106,7 +106,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return toggle.value ? h(KeepAlive, () => h(views[viewRef.value])) : null
-      }
+      },
     }
     render(h(App), root)
 
@@ -147,7 +147,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return toggle.value ? h(KeepAlive, () => h(views[viewRef.value])) : null
-      }
+      },
     }
     render(h(App), root)
 
@@ -190,7 +190,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return h(KeepAlive, () => (toggle.value ? h(one) : null))
-      }
+      },
     }
     render(h(App), root)
 
@@ -225,21 +225,21 @@ describe('KeepAlive', () => {
       render(this: any) {
         return h('div', this.msg)
       },
-      activated: vi.fn()
+      activated: vi.fn(),
     }
     const one = {
       name: 'one',
       data: () => ({ msg: 'one' }),
       render(this: any) {
         return h(two)
-      }
+      },
     }
 
     const toggle = ref(true)
     const App = {
       render() {
         return h(KeepAlive, () => (toggle.value ? h(one) : null))
-      }
+      },
     }
     render(h(App), root)
 
@@ -255,7 +255,7 @@ describe('KeepAlive', () => {
     const App = {
       render() {
         return h(KeepAlive, () => (toggle1.value ? h(one) : null))
-      }
+      },
     }
     render(h(App), root)
 
@@ -335,7 +335,7 @@ describe('KeepAlive', () => {
         return outerRef.value
           ? h(KeepAlive, props, () => h(views[viewRef.value]))
           : null
-      }
+      },
     }
     render(h(App), root)
 
@@ -425,7 +425,7 @@ describe('KeepAlive', () => {
           spyCC.mock.calls.length,
           spyCA.mock.calls.length,
           spyCDA.mock.calls.length,
-          spyCUM.mock.calls.length
+          spyCUM.mock.calls.length,
         ]).toEqual(calls)
       }
 
@@ -436,22 +436,22 @@ describe('KeepAlive', () => {
           created: spyAC,
           activated: spyAA,
           deactivated: spyADA,
-          unmounted: spyAUM
+          unmounted: spyAUM,
         },
         b: {
           render: () => `two`,
           created: spyBC,
           activated: spyBA,
           deactivated: spyBDA,
-          unmounted: spyBUM
+          unmounted: spyBUM,
         },
         c: {
           render: () => `three`,
           created: spyCC,
           activated: spyCA,
           deactivated: spyCDA,
-          unmounted: spyCUM
-        }
+          unmounted: spyCUM,
+        },
       }
 
       const App = {
@@ -459,7 +459,7 @@ describe('KeepAlive', () => {
           return h(KeepAlive, { max: 2 }, () => {
             return h(views[viewRef.value])
           })
-        }
+        },
       }
       render(h(App), root)
       assertCount([1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
@@ -494,11 +494,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              include: includeRef.value
+              include: includeRef.value,
             },
-            () => h(views[viewRef.value])
+            () => h(views[viewRef.value]),
           )
-        }
+        },
       }
       render(h(App), root)
       return { viewRef, includeRef }
@@ -512,11 +512,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              exclude: excludeRef.value
+              exclude: excludeRef.value,
             },
-            () => h(views[viewRef.value])
+            () => h(views[viewRef.value]),
           )
-        }
+        },
       }
       render(h(App), root)
       return { viewRef, excludeRef }
@@ -610,13 +610,13 @@ describe('KeepAlive', () => {
       const one = {
         name: 'one',
         created: vi.fn(),
-        render: () => 'one'
+        render: () => 'one',
       }
 
       const two = {
         // anonymous
         created: vi.fn(),
-        render: () => 'two'
+        render: () => 'two',
       }
 
       const views: any = { one, two }
@@ -627,11 +627,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              include: include ? 'one' : undefined
+              include: include ? 'one' : undefined,
             },
-            () => h(views[viewRef.value])
+            () => h(views[viewRef.value]),
           )
-        }
+        },
       }
       render(h(App), root)
 
@@ -670,7 +670,7 @@ describe('KeepAlive', () => {
     test('should not destroy active instance when pruning cache', async () => {
       const Foo = {
         render: () => 'foo',
-        unmounted: vi.fn()
+        unmounted: vi.fn(),
       }
       const includeRef = ref(['foo'])
       const App = {
@@ -678,11 +678,11 @@ describe('KeepAlive', () => {
           return h(
             KeepAlive,
             {
-              include: includeRef.value
+              include: includeRef.value,
             },
-            () => h(Foo)
+            () => h(Foo),
           )
-        }
+        },
       }
       render(h(App), root)
       // condition: a render where a previous component is reused
@@ -703,7 +703,7 @@ describe('KeepAlive', () => {
         setup() {
           return () =>
             h(KeepAlive, () => (toggle.value ? h(Foo, { n: n.value }) : null))
-        }
+        },
       }
 
       render(h(App), root)
@@ -726,13 +726,13 @@ describe('KeepAlive', () => {
       name: 'Foo',
       render() {
         return h('Foo')
-      }
+      },
     })
     const Bar = markRaw({
       name: 'Bar',
       render() {
         return h('Bar')
-      }
+      },
     })
 
     const spyMounted = vi.fn()
@@ -750,19 +750,19 @@ describe('KeepAlive', () => {
           },
           onVnodeUnmounted() {
             spyUnmounted()
-          }
+          },
         }
 
         return () => {
           const child: any = slots.default!({
-            Component: Component!.value
+            Component: Component!.value,
           })[0]
 
           const innerChild = child.children[0]
           child.children[0] = cloneVNode(innerChild, componentProps)
           return child
         }
-      }
+      },
     })
 
     let toggle: () => void = () => {}
@@ -778,14 +778,14 @@ describe('KeepAlive', () => {
         }
         return {
           component,
-          toggle
+          toggle,
         }
       },
       render() {
         return h(RouterView, null, {
-          default: ({ Component }: any) => h(KeepAlive, null, [h(Component)])
+          default: ({ Component }: any) => h(KeepAlive, null, [h(Component)]),
         })
-      }
+      },
     })
 
     render(h(App), root)
@@ -818,9 +818,9 @@ describe('KeepAlive', () => {
       __scopeId: 'foo',
       render: () => {
         return h(KeepAlive, null, {
-          default: () => h(views[viewRef.value], { ref: instanceRef })
+          default: () => h(views[viewRef.value], { ref: instanceRef }),
         })
-      }
+      },
     }
     render(h(App), root)
     expect(serializeInner(root)).toBe(`<div foo>one</div>`)
@@ -841,7 +841,7 @@ describe('KeepAlive', () => {
       () =>
         new Promise(r => {
           resolve = r as any
-        })
+        }),
     )
 
     const toggle = ref(true)
@@ -849,9 +849,9 @@ describe('KeepAlive', () => {
     const App = {
       render: () => {
         return h(KeepAlive, { include: 'Foo' }, () =>
-          toggle.value ? h(AsyncComp, { ref: instanceRef }) : null
+          toggle.value ? h(AsyncComp, { ref: instanceRef }) : null,
         )
-      }
+      },
     }
 
     render(h(App), root)
@@ -863,7 +863,7 @@ describe('KeepAlive', () => {
       data: () => ({ count: 0 }),
       render() {
         return h('p', this.count)
-      }
+      },
     })
 
     await timeout()
@@ -890,7 +890,7 @@ describe('KeepAlive', () => {
     const app = createApp({
       setup() {
         return () => h(KeepAlive, null, () => h(Child))
-      }
+      },
     })
 
     const Child = {
@@ -899,7 +899,7 @@ describe('KeepAlive', () => {
           throw err
         })
       },
-      render() {}
+      render() {},
     }
 
     app.config.errorHandler = handler
@@ -926,7 +926,7 @@ describe('KeepAlive', () => {
         onActivated(activatedA)
         onDeactivated(deactivatedA)
         return () => 'A'
-      }
+      },
     }
     const B = {
       name: 'B',
@@ -934,7 +934,7 @@ describe('KeepAlive', () => {
         onMounted(mountedB)
         onUnmounted(unmountedB)
         return () => 'B'
-      }
+      },
     }
 
     const include = reactive<string[]>([])
@@ -946,13 +946,13 @@ describe('KeepAlive', () => {
             h(
               KeepAlive,
               {
-                include
+                include,
               },
-              h(current.value)
-            )
+              h(current.value),
+            ),
           ]
         }
-      }
+      },
     })
 
     app.mount(root)
diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 065898048c3..928da872faf 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -3,35 +3,41 @@
  */
 
 import {
+  type ComponentOptions,
+  Fragment,
+  KeepAlive,
+  Suspense,
+  type SuspenseProps,
   h,
+  nextTick,
+  nodeOps,
+  onErrorCaptured,
+  onMounted,
+  onUnmounted,
   ref,
-  Suspense,
-  ComponentOptions,
   render,
-  nodeOps,
+  resolveDynamicComponent,
   serializeInner,
-  nextTick,
-  onMounted,
+  shallowRef,
   watch,
   watchEffect,
-  onUnmounted,
-  onErrorCaptured,
-  shallowRef,
-  Fragment
 } from '@vue/runtime-test'
 import { createApp, defineComponent } from 'vue'
+import type { RawSlots } from 'packages/runtime-core/src/componentSlots'
+import { resetSuspenseId } from '../../src/components/Suspense'
 
 describe('Suspense', () => {
   const deps: Promise<any>[] = []
 
   beforeEach(() => {
     deps.length = 0
+    resetSuspenseId()
   })
 
   // a simple async factory for testing purposes only.
   function defineAsyncComponent<T extends ComponentOptions>(
     comp: T,
-    delay: number = 0
+    delay: number = 0,
   ) {
     return {
       setup(props: any, { slots }: any) {
@@ -44,7 +50,7 @@ describe('Suspense', () => {
         // an extra tick to avoid race conditions
         deps.push(p.then(() => Promise.resolve()))
         return p
-      }
+      },
     }
   }
 
@@ -52,7 +58,7 @@ describe('Suspense', () => {
     const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
-      }
+      },
     })
 
     const Comp = {
@@ -60,9 +66,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(Async),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -78,7 +84,7 @@ describe('Suspense', () => {
     const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
-      }
+      },
     })
 
     const onFallback = vi.fn()
@@ -96,14 +102,14 @@ describe('Suspense', () => {
               onResolve,
               onPending,
               // force displaying the fallback right away
-              timeout: 0
+              timeout: 0,
             },
             {
               default: () => (show.value ? h(Async) : null),
-              fallback: h('div', 'fallback')
-            }
+              fallback: h('div', 'fallback'),
+            },
           )
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -147,7 +153,7 @@ describe('Suspense', () => {
           calls.push('outer mounted')
         })
         return () => h(AsyncInner)
-      }
+      },
     })
 
     const AsyncInner = defineAsyncComponent(
@@ -157,9 +163,9 @@ describe('Suspense', () => {
             calls.push('inner mounted')
           })
           return () => h('div', 'inner')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Comp = {
@@ -167,9 +173,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncOuter),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -192,7 +198,7 @@ describe('Suspense', () => {
     const Async = defineAsyncComponent({
       render() {
         return h('div', 'async')
-      }
+      },
     })
 
     const onResolve = vi.fn()
@@ -203,14 +209,14 @@ describe('Suspense', () => {
           h(
             Suspense,
             {
-              onResolve
+              onResolve,
             },
             {
               default: h(Async),
-              fallback: h('div', 'fallback')
-            }
+              fallback: h('div', 'fallback'),
+            },
           )
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -239,7 +245,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch effect')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
 
         const count = ref(0)
@@ -248,7 +254,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch callback')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
         count.value++ // trigger the watcher now
 
@@ -262,7 +268,7 @@ describe('Suspense', () => {
 
         await p
         return () => h('div', 'async')
-      }
+      },
     }
 
     const Comp = {
@@ -270,9 +276,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Async) : null,
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -294,7 +300,7 @@ describe('Suspense', () => {
       `watch effect`,
       `watch callback`,
       `mounted`,
-      'unmounted'
+      'unmounted',
     ])
   })
 
@@ -312,7 +318,7 @@ describe('Suspense', () => {
 
         await p
         return () => h('div', 'async')
-      }
+      },
     }
 
     const Fallback = {
@@ -325,7 +331,7 @@ describe('Suspense', () => {
           calls.push('unmounted')
         })
         return () => h('div', 'fallback')
-      }
+      },
     }
 
     const Comp = {
@@ -333,9 +339,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Async) : null,
-            fallback: h(Fallback)
+            fallback: h(Fallback),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -354,7 +360,7 @@ describe('Suspense', () => {
       props: { msg: String },
       setup(props: any) {
         return () => h('div', props.msg)
-      }
+      },
     })
 
     const msg = ref('foo')
@@ -364,9 +370,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(Async, { msg: msg.value }),
-            fallback: h('div', `fallback ${msg.value}`)
+            fallback: h('div', `fallback ${msg.value}`),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -400,7 +406,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch effect')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
 
         const count = ref(0)
@@ -409,7 +415,7 @@ describe('Suspense', () => {
           () => {
             calls.push('watch callback')
           },
-          { flush: 'post' }
+          { flush: 'post' },
         )
         count.value++ // trigger the watcher now
 
@@ -423,7 +429,7 @@ describe('Suspense', () => {
 
         await p
         return () => h('div', 'async')
-      }
+      },
     }
 
     const Comp = {
@@ -431,9 +437,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Async) : null,
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -462,7 +468,7 @@ describe('Suspense', () => {
       setup() {
         onUnmounted(unmounted)
         return () => h('div', 'async')
-      }
+      },
     })
 
     const Comp = {
@@ -471,10 +477,10 @@ describe('Suspense', () => {
           toggle.value
             ? h(Suspense, null, {
                 default: h(Async),
-                fallback: h('div', 'fallback')
+                fallback: h('div', 'fallback'),
               })
             : null
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -502,7 +508,7 @@ describe('Suspense', () => {
         onMounted(mounted)
         onUnmounted(unmounted)
         return () => h('div', 'async')
-      }
+      },
     })
 
     const Comp = {
@@ -511,10 +517,10 @@ describe('Suspense', () => {
           toggle.value
             ? h(Suspense, null, {
                 default: h(Async),
-                fallback: h('div', 'fallback')
+                fallback: h('div', 'fallback'),
               })
             : null
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -534,6 +540,51 @@ describe('Suspense', () => {
     expect(unmounted).not.toHaveBeenCalled()
   })
 
+  // vuetifyjs/vuetify#15207
+  test('update prop of async element before suspense resolve', async () => {
+    let resolve: () => void
+    const mounted = new Promise<void>(r => {
+      resolve = r
+    })
+    const Async = {
+      async setup() {
+        onMounted(() => {
+          resolve()
+        })
+        const p = new Promise(r => setTimeout(r, 1))
+        await p
+        return () => h('div', 'async')
+      },
+    }
+
+    const Comp: ComponentOptions<{ data: string }> = {
+      props: ['data'],
+      setup(props) {
+        return () => h(Async, { 'data-test': props.data })
+      },
+    }
+
+    const Root = {
+      setup() {
+        const data = ref('1')
+        onMounted(() => {
+          data.value = '2'
+        })
+        return () =>
+          h(Suspense, null, {
+            default: h(Comp, { data: data.value }),
+            fallback: h('div', 'fallback'),
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Root), root)
+    expect(serializeInner(root)).toBe(`<div>fallback</div>`)
+    await mounted
+    expect(serializeInner(root)).toBe(`<div data-test="2">async</div>`)
+  })
+
   test('nested suspense (parent resolves first)', async () => {
     const calls: string[] = []
 
@@ -544,9 +595,9 @@ describe('Suspense', () => {
             calls.push('outer mounted')
           })
           return () => h('div', 'async outer')
-        }
+        },
       },
-      1
+      1,
     )
 
     const AsyncInner = defineAsyncComponent(
@@ -556,9 +607,9 @@ describe('Suspense', () => {
             calls.push('inner mounted')
           })
           return () => h('div', 'async inner')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Inner = {
@@ -566,9 +617,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncInner),
-            fallback: h('div', 'fallback inner')
+            fallback: h('div', 'fallback inner'),
           })
-      }
+      },
     }
 
     const Comp = {
@@ -576,9 +627,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h('div', [h(AsyncOuter), h(Inner)]),
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -588,14 +639,14 @@ describe('Suspense', () => {
     await deps[0]
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>async outer</div><div>fallback inner</div></div>`
+      `<div><div>async outer</div><div>fallback inner</div></div>`,
     )
     expect(calls).toEqual([`outer mounted`])
 
     await Promise.all(deps)
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>async outer</div><div>async inner</div></div>`
+      `<div><div>async outer</div><div>async inner</div></div>`,
     )
     expect(calls).toEqual([`outer mounted`, `inner mounted`])
   })
@@ -610,9 +661,9 @@ describe('Suspense', () => {
             calls.push('outer mounted')
           })
           return () => h('div', 'async outer')
-        }
+        },
       },
-      10
+      10,
     )
 
     const AsyncInner = defineAsyncComponent(
@@ -622,9 +673,9 @@ describe('Suspense', () => {
             calls.push('inner mounted')
           })
           return () => h('div', 'async inner')
-        }
+        },
       },
-      1
+      1,
     )
 
     const Inner = {
@@ -632,9 +683,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncInner),
-            fallback: h('div', 'fallback inner')
+            fallback: h('div', 'fallback inner'),
           })
-      }
+      },
     }
 
     const Comp = {
@@ -642,9 +693,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h('div', [h(AsyncOuter), h(Inner)]),
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -659,7 +710,7 @@ describe('Suspense', () => {
     await Promise.all(deps)
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>async outer</div><div>async inner</div></div>`
+      `<div><div>async outer</div><div>async inner</div></div>`,
     )
     expect(calls).toEqual([`inner mounted`, `outer mounted`])
   })
@@ -668,7 +719,7 @@ describe('Suspense', () => {
     const Async = {
       async setup() {
         throw new Error('oops')
-      }
+      },
     }
 
     const Comp = {
@@ -687,9 +738,9 @@ describe('Suspense', () => {
             ? h('div', errorMessage.value)
             : h(Suspense, null, {
                 default: h(Async),
-                fallback: h('div', 'fallback')
+                fallback: h('div', 'fallback'),
               })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -706,7 +757,7 @@ describe('Suspense', () => {
     const Async = {
       async setup() {
         throw new Error('oops')
-      }
+      },
     }
 
     const Comp = {
@@ -732,7 +783,7 @@ describe('Suspense', () => {
           return false
         })
         return { errorMessage }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -757,9 +808,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncInsideNestedSuspense, { msg: props.msg }),
-            fallback: h('div', 'nested fallback')
+            fallback: h('div', 'nested fallback'),
           })
-      }
+      },
     })
 
     const AsyncInsideNestedSuspense = defineAsyncComponent(
@@ -770,9 +821,9 @@ describe('Suspense', () => {
             calls.push(2)
           })
           return () => h('div', props.msg)
-        }
+        },
       },
-      20
+      20,
     )
 
     const AsyncChildParent = defineAsyncComponent({
@@ -782,7 +833,7 @@ describe('Suspense', () => {
           calls.push(1)
         })
         return () => h(NestedAsyncChild, { msg: props.msg })
-      }
+      },
     })
 
     const NestedAsyncChild = defineAsyncComponent(
@@ -793,18 +844,18 @@ describe('Suspense', () => {
             calls.push(3)
           })
           return () => h('div', props.msg)
-        }
+        },
       },
-      10
+      10,
     )
 
     const MiddleComponent = {
       setup() {
         return () =>
           h(AsyncChildWithSuspense, {
-            msg: msg.value
+            msg: msg.value,
           })
-      }
+      },
     }
 
     const Comp = {
@@ -814,12 +865,12 @@ describe('Suspense', () => {
             default: h('div', [
               h(MiddleComponent),
               h(AsyncChildParent, {
-                msg: 'root async'
-              })
+                msg: 'root async',
+              }),
             ]),
-            fallback: h('div', 'root fallback')
+            fallback: h('div', 'root fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -850,7 +901,7 @@ describe('Suspense', () => {
     await deps[3]
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>nested fallback</div><div>root async</div></div>`
+      `<div><div>nested fallback</div><div>root async</div></div>`,
     )
     expect(calls).toEqual([0, 1, 3])
 
@@ -861,7 +912,7 @@ describe('Suspense', () => {
     await Promise.all(deps)
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>nested changed</div><div>root async</div></div>`
+      `<div><div>nested changed</div><div>root async</div></div>`,
     )
     expect(calls).toEqual([0, 1, 3, 2])
 
@@ -869,7 +920,7 @@ describe('Suspense', () => {
     msg.value = 'nested changed again'
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>nested changed again</div><div>root async</div></div>`
+      `<div><div>nested changed again</div><div>root async</div></div>`,
     )
   })
 
@@ -886,7 +937,7 @@ describe('Suspense', () => {
           calls.push('foo unmounted')
         })
         return () => h('div', ['foo', h(FooNested)])
-      }
+      },
     })
 
     const FooNested = defineAsyncComponent(
@@ -899,9 +950,9 @@ describe('Suspense', () => {
             calls.push('foo nested unmounted')
           })
           return () => h('div', 'foo nested')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Bar = defineAsyncComponent(
@@ -914,9 +965,9 @@ describe('Suspense', () => {
             calls.push('bar unmounted')
           })
           return () => h('div', 'bar')
-        }
+        },
       },
-      10
+      10,
     )
 
     const Comp = {
@@ -924,9 +975,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: toggle.value ? h(Foo) : h(Bar),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -959,7 +1010,7 @@ describe('Suspense', () => {
       `foo nested mounted`,
       `bar mounted`,
       `foo nested unmounted`,
-      `foo unmounted`
+      `foo unmounted`,
     ]
     expect(calls).toEqual(tempCalls)
     expect(serializeInner(root)).toBe(`<div>bar</div>`)
@@ -983,7 +1034,7 @@ describe('Suspense', () => {
       ...tempCalls,
       `foo mounted`,
       `foo nested mounted`,
-      `bar unmounted`
+      `bar unmounted`,
     ])
     expect(serializeInner(root)).toBe(`<div>foo<div>foo nested</div></div>`)
   })
@@ -1002,9 +1053,9 @@ describe('Suspense', () => {
               calls.push(`${name} unmounted`)
             })
             return () => h('div', [name])
-          }
+          },
         },
-        delay
+        delay,
       )
 
     const One = makeComp('one')
@@ -1018,9 +1069,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(view.value),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1069,9 +1120,9 @@ describe('Suspense', () => {
               calls.push(`${name} unmounted`)
             })
             return () => h('div', [name])
-          }
+          },
         },
-        delay
+        delay,
       )
 
     const One = makeComp('one')
@@ -1084,9 +1135,9 @@ describe('Suspense', () => {
         return () =>
           h(Suspense, null, {
             default: h(view.value),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1130,9 +1181,9 @@ describe('Suspense', () => {
               calls.push(`${name} unmounted`)
             })
             return () => h('div', [name])
-          }
+          },
         },
-        delay
+        delay,
       )
 
     const One = makeComp('one')
@@ -1146,14 +1197,14 @@ describe('Suspense', () => {
           h(
             Suspense,
             {
-              timeout: 10
+              timeout: 10,
             },
             {
               default: h(view.value),
-              fallback: h('div', 'fallback')
-            }
+              fallback: h('div', 'fallback'),
+            },
           )
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1182,6 +1233,72 @@ describe('Suspense', () => {
     expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
   })
 
+  test('mount the fallback content is in the correct position', async () => {
+    const makeComp = (name: string, delay = 0) =>
+      defineAsyncComponent(
+        {
+          setup() {
+            return () => h('div', [name])
+          },
+        },
+        delay,
+      )
+
+    const One = makeComp('one')
+    const Two = makeComp('two', 20)
+
+    const view = shallowRef(One)
+
+    const Comp = {
+      setup() {
+        return () =>
+          h('div', [
+            h(
+              Suspense,
+              {
+                timeout: 10,
+              },
+              {
+                default: h(view.value),
+                fallback: h('div', 'fallback'),
+              },
+            ),
+            h('div', 'three'),
+          ])
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(
+      `<div><div>fallback</div><div>three</div></div>`,
+    )
+
+    await deps[0]
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>one</div><div>three</div></div>`,
+    )
+
+    view.value = Two
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>one</div><div>three</div></div>`,
+    )
+
+    await new Promise(r => setTimeout(r, 10))
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>fallback</div><div>three</div></div>`,
+    )
+
+    await deps[1]
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<div><div>two</div><div>three</div></div>`,
+    )
+  })
+
   // #2214
   // Since suspense renders its own root like a component, it should not patch
   // its content in optimized mode.
@@ -1195,7 +1312,7 @@ describe('Suspense', () => {
       <Suspense>
         <div><span>{{ n }}</span></div>
       </Suspense>
-      `
+      `,
     }
     const root = document.createElement('div')
     createApp(Comp).mount(root)
@@ -1212,13 +1329,13 @@ describe('Suspense', () => {
     const Child = {
       async setup() {
         return () => h('div', 'child')
-      }
+      },
     }
     const Parent = () => h('div', ['parent', toggle.value ? h(Child) : null])
     const Comp = {
       setup() {
         return () => h(Suspense, () => h(Parent))
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -1243,19 +1360,19 @@ describe('Suspense', () => {
       name: 'Child',
       async setup() {
         return () => h('div', 'child')
-      }
+      },
     }
     const Parent = {
       setup() {
         return () => h('div', [h(Child)])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
     render(h(Parent), root)
 
     expect(
-      `A component with async setup() must be nested in a <Suspense>`
+      `A component with async setup() must be nested in a <Suspense>`,
     ).toHaveBeenWarned()
   })
 
@@ -1271,9 +1388,9 @@ describe('Suspense', () => {
             calls.push('innerA mounted')
           })
           return () => h('div', 'innerA')
-        }
+        },
       },
-      10
+      10,
     )
 
     const InnerB = defineAsyncComponent(
@@ -1284,9 +1401,9 @@ describe('Suspense', () => {
             calls.push('innerB mounted')
           })
           return () => h('div', 'innerB')
-        }
+        },
       },
-      10
+      10,
     )
 
     const OuterA = defineAsyncComponent(
@@ -1298,9 +1415,9 @@ describe('Suspense', () => {
           })
           return () =>
             h(Fragment, null, [h('div', 'outerA'), slots.default?.()])
-        }
+        },
       },
-      5
+      5,
     )
 
     const OuterB = defineAsyncComponent(
@@ -1312,9 +1429,9 @@ describe('Suspense', () => {
           })
           return () =>
             h(Fragment, null, [h('div', 'outerB'), slots.default?.()])
-        }
+        },
       },
-      5
+      5,
     )
 
     const outerToggle = ref(false)
@@ -1340,14 +1457,14 @@ describe('Suspense', () => {
                     Suspense,
                     { suspensible: true },
                     {
-                      default: h(innerToggle.value ? InnerB : InnerA)
-                    }
-                  )
-              })
+                      default: h(innerToggle.value ? InnerB : InnerA),
+                    },
+                  ),
+              }),
             ],
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     }
 
     expected = `<div>fallback outer</div>`
@@ -1372,7 +1489,7 @@ describe('Suspense', () => {
       'outerA created',
       'innerA created',
       'outerA mounted',
-      'innerA mounted'
+      'innerA mounted',
     ])
 
     // toggle outer component
@@ -1418,7 +1535,7 @@ describe('Suspense', () => {
           calls.push('innerA mounted')
         })
         return () => h('div', 'innerA')
-      }
+      },
     })
 
     const InnerB = defineComponent({
@@ -1428,7 +1545,7 @@ describe('Suspense', () => {
           calls.push('innerB mounted')
         })
         return () => h('div', 'innerB')
-      }
+      },
     })
 
     const OuterA = defineComponent({
@@ -1438,7 +1555,7 @@ describe('Suspense', () => {
           calls.push('outerA mounted')
         })
         return () => h(Fragment, null, [h('div', 'outerA'), slots.default?.()])
-      }
+      },
     })
 
     const OuterB = defineComponent({
@@ -1448,7 +1565,7 @@ describe('Suspense', () => {
           calls.push('outerB mounted')
         })
         return () => h(Fragment, null, [h('div', 'outerB'), slots.default?.()])
-      }
+      },
     })
 
     const outerToggle = ref(false)
@@ -1474,14 +1591,14 @@ describe('Suspense', () => {
                     Suspense,
                     { suspensible: true },
                     {
-                      default: h(innerToggle.value ? InnerB : InnerA)
-                    }
-                  )
-              })
+                      default: h(innerToggle.value ? InnerB : InnerA),
+                    },
+                  ),
+              }),
             ],
-            fallback: h('div', 'fallback outer')
+            fallback: h('div', 'fallback outer'),
           })
-      }
+      },
     })
 
     expected = `<div>outerA</div><div>innerA</div>`
@@ -1498,7 +1615,7 @@ describe('Suspense', () => {
       'outerA created',
       'innerA created',
       'innerA mounted',
-      'outerA mounted'
+      'outerA mounted',
     ])
 
     // toggle outer component
@@ -1523,4 +1640,301 @@ describe('Suspense', () => {
     expected = `<div>outerB</div><div>innerB</div>`
     expect(serializeInner(root)).toBe(expected)
   })
+
+  //#8678
+  test('nested suspense (child suspense update before parent suspense resolve)', async () => {
+    const calls: string[] = []
+
+    const InnerA = defineAsyncComponent(
+      {
+        setup: () => {
+          calls.push('innerA created')
+          onMounted(() => {
+            calls.push('innerA mounted')
+          })
+          return () => h('div', 'innerA')
+        },
+      },
+      10,
+    )
+
+    const InnerB = defineAsyncComponent(
+      {
+        setup: () => {
+          calls.push('innerB created')
+          onMounted(() => {
+            calls.push('innerB mounted')
+          })
+          return () => h('div', 'innerB')
+        },
+      },
+      10,
+    )
+
+    const OuterA = defineAsyncComponent(
+      {
+        setup: (_, { slots }: any) => {
+          calls.push('outerA created')
+          onMounted(() => {
+            calls.push('outerA mounted')
+          })
+          return () =>
+            h(Fragment, null, [h('div', 'outerA'), slots.default?.()])
+        },
+      },
+      5,
+    )
+
+    const OuterB = defineAsyncComponent(
+      {
+        setup: (_, { slots }: any) => {
+          calls.push('outerB created')
+          onMounted(() => {
+            calls.push('outerB mounted')
+          })
+          return () =>
+            h(Fragment, null, [h('div', 'outerB'), slots.default?.()])
+        },
+      },
+      5,
+    )
+
+    const outerToggle = ref(false)
+    const innerToggle = ref(false)
+
+    /**
+     *  <Suspense>
+     *    <component :is="outerToggle ? outerB : outerA">
+     *      <Suspense>
+     *        <component :is="innerToggle ? innerB : innerA" />
+     *      </Suspense>
+     *    </component>
+     *  </Suspense>
+     */
+    const Comp = {
+      setup() {
+        return () =>
+          h(Suspense, null, {
+            default: [
+              h(outerToggle.value ? OuterB : OuterA, null, {
+                default: () =>
+                  h(Suspense, null, {
+                    default: h(innerToggle.value ? InnerB : InnerA),
+                  }),
+              }),
+            ],
+            fallback: h('div', 'fallback outer'),
+          })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(serializeInner(root)).toBe(`<div>fallback outer</div>`)
+
+    // mount outer component
+    await Promise.all(deps)
+    await nextTick()
+
+    expect(serializeInner(root)).toBe(`<div>outerA</div><!---->`)
+    expect(calls).toEqual([`outerA created`, `outerA mounted`])
+
+    // mount inner component
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerA</div><div>innerA</div>`)
+
+    expect(calls).toEqual([
+      'outerA created',
+      'outerA mounted',
+      'innerA created',
+      'innerA mounted',
+    ])
+
+    calls.length = 0
+    deps.length = 0
+
+    // toggle both outer and inner components
+    outerToggle.value = true
+    innerToggle.value = true
+    await nextTick()
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerB</div><!---->`)
+
+    await Promise.all(deps)
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>outerB</div><div>innerB</div>`)
+
+    // innerB only mount once
+    expect(calls).toEqual([
+      'outerB created',
+      'outerB mounted',
+      'innerB created',
+      'innerB mounted',
+    ])
+  })
+
+  // #6416
+  test('KeepAlive with Suspense', async () => {
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async')
+      },
+    })
+    const Sync = {
+      render() {
+        return h('div', 'sync')
+      },
+    }
+    const components = [Async, Sync]
+    const viewRef = ref(0)
+    const root = nodeOps.createElement('div')
+    const App = {
+      render() {
+        return h(KeepAlive, null, {
+          default: () => {
+            return h(Suspense, null, {
+              default: h(components[viewRef.value]),
+              fallback: h('div', 'Loading-dynamic-components'),
+            })
+          },
+        })
+      },
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<div>Loading-dynamic-components</div>`)
+
+    viewRef.value = 1
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>sync</div>`)
+
+    viewRef.value = 0
+    await nextTick()
+
+    expect(serializeInner(root)).toBe('<!---->')
+
+    await Promise.all(deps)
+    await nextTick()
+    // when async resolve,it should be <div>async</div>
+    expect(serializeInner(root)).toBe('<div>async</div>')
+
+    viewRef.value = 1
+    await nextTick()
+    // TypeError: Cannot read properties of null (reading 'parentNode')
+    // This has been fixed
+    expect(serializeInner(root)).toBe(`<div>sync</div>`)
+  })
+
+  // #6416 follow up / #10017
+  test('Suspense patched during HOC async component re-mount', async () => {
+    const key = ref('k')
+    const data = ref('data')
+
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async')
+      },
+    })
+
+    const Comp = {
+      render() {
+        return h(Async, { key: key.value })
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    const App = {
+      render() {
+        return h(Suspense, null, {
+          default: h(Comp, { k: key.value, data: data.value }),
+        })
+      },
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<!---->`)
+
+    await Promise.all(deps)
+
+    // async mounted, but key change causing a new async comp to be loaded
+    key.value = 'k1'
+    await nextTick()
+
+    // patch the Suspense
+    // should not throw error due to Suspense vnode.el being null
+    data.value = 'data2'
+    await Promise.all(deps)
+  })
+
+  describe('warnings', () => {
+    // base function to check if a combination of slots warns or not
+    function baseCheckWarn(
+      shouldWarn: boolean,
+      children: RawSlots,
+      props: SuspenseProps | null = null,
+    ) {
+      const Comp = {
+        setup() {
+          return () => h(Suspense, props, children)
+        },
+      }
+
+      const root = nodeOps.createElement('div')
+      render(h(Comp), root)
+
+      if (shouldWarn) {
+        expect(`<Suspense> slots expect a single root node.`).toHaveBeenWarned()
+      } else {
+        expect(
+          `<Suspense> slots expect a single root node.`,
+        ).not.toHaveBeenWarned()
+      }
+    }
+
+    // actual function that we use in tests
+    const checkWarn = baseCheckWarn.bind(null, true)
+    const checkNoWarn = baseCheckWarn.bind(null, false)
+
+    test('does not warn on single child', async () => {
+      checkNoWarn({
+        default: h('div'),
+        fallback: h('div'),
+      })
+    })
+
+    test('does not warn on null', async () => {
+      checkNoWarn({
+        default: null,
+        fallback: null,
+      })
+    })
+
+    test('does not warn on <component :is="null" />', async () => {
+      checkNoWarn({
+        default: () => [resolveDynamicComponent(null)],
+        fallback: () => null,
+      })
+    })
+
+    test('does not warn on empty array', async () => {
+      checkNoWarn({
+        default: [],
+        fallback: () => [],
+      })
+    })
+
+    test('warns on multiple children in default', async () => {
+      checkWarn({
+        default: [h('div'), h('div')],
+      })
+    })
+
+    test('warns on multiple children in fallback', async () => {
+      checkWarn({
+        default: h('div'),
+        fallback: [h('div'), h('div')],
+      })
+    })
+  })
 })
diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index 7371f53f7b6..9c85cd8beb6 100644
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -3,20 +3,20 @@
  */
 
 import {
-  nodeOps,
-  serializeInner,
-  render,
-  h,
   Teleport,
   Text,
-  ref,
-  nextTick,
-  markRaw,
+  createApp,
   defineComponent,
+  h,
+  markRaw,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
+  serializeInner,
   withDirectives,
-  createApp
 } from '@vue/runtime-test'
-import { createVNode, Fragment } from '../../src/vnode'
+import { Fragment, createVNode } from '../../src/vnode'
 import { compile, render as domRender } from 'vue'
 
 describe('renderer: teleport', () => {
@@ -27,16 +27,16 @@ describe('renderer: teleport', () => {
     render(
       h(() => [
         h(Teleport, { to: target }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ]),
-      root
+      root,
     )
 
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
   })
 
@@ -49,14 +49,14 @@ describe('renderer: teleport', () => {
       setup() {
         return {
           svg,
-          circle
+          circle,
         }
       },
       template: `
       <svg ref="svg"></svg>
       <teleport :to="svg" v-if="svg">
       <circle ref="circle"></circle>
-      </teleport>`
+      </teleport>`,
     })
 
     domRender(h(Comp), root)
@@ -64,7 +64,7 @@ describe('renderer: teleport', () => {
     await nextTick()
 
     expect(root.innerHTML).toMatchInlineSnapshot(
-      `"<svg><circle></circle></svg><!--teleport start--><!--teleport end-->"`
+      `"<svg><circle></circle></svg><!--teleport start--><!--teleport end-->"`,
     )
 
     expect(svg.value.namespaceURI).toBe('http://www.w3.org/2000/svg')
@@ -80,16 +80,16 @@ describe('renderer: teleport', () => {
     render(
       h(() => [
         h(Teleport, { to: target.value }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ]),
-      root
+      root,
     )
 
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(targetA)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
     expect(serializeInner(targetB)).toMatchInlineSnapshot(`""`)
 
@@ -97,11 +97,11 @@ describe('renderer: teleport', () => {
     await nextTick()
 
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(targetA)).toMatchInlineSnapshot(`""`)
     expect(serializeInner(targetB)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
   })
 
@@ -112,10 +112,10 @@ describe('renderer: teleport', () => {
 
     render(
       h(() => h(Teleport, { to: target }, children.value)),
-      root
+      root,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
 
     children.value = []
@@ -136,10 +136,10 @@ describe('renderer: teleport', () => {
     function testUnmount(props: any) {
       render(
         h(() => [h(Teleport, props, h('div', 'teleported')), h('div', 'root')]),
-        root
+        root,
       )
       expect(serializeInner(target)).toMatchInlineSnapshot(
-        props.disabled ? `""` : `"<div>teleported</div>"`
+        props.disabled ? `""` : `"<div>teleported</div>"`,
       )
 
       render(null, root)
@@ -159,12 +159,12 @@ describe('renderer: teleport', () => {
     const Comp = {
       render() {
         return [h('p'), h('p')]
-      }
+      },
     }
 
     render(
       h(() => [h(Teleport, { to: target }, h(Comp)), h('div', 'root')]),
-      root
+      root,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(`"<p></p><p></p>"`)
 
@@ -172,6 +172,31 @@ describe('renderer: teleport', () => {
     expect(serializeInner(target)).toBe('')
   })
 
+  // #6347
+  test('descendent component should be unmounted when teleport is disabled and unmounted', () => {
+    const root = nodeOps.createElement('div')
+
+    const CompWithHook = {
+      render() {
+        return [h('p'), h('p')]
+      },
+      beforeUnmount: vi.fn(),
+      unmounted: vi.fn(),
+    }
+
+    render(
+      h(() => [h(Teleport, { to: null, disabled: true }, h(CompWithHook))]),
+      root,
+    )
+    expect(CompWithHook.beforeUnmount).toBeCalledTimes(0)
+    expect(CompWithHook.unmounted).toBeCalledTimes(0)
+
+    render(null, root)
+
+    expect(CompWithHook.beforeUnmount).toBeCalledTimes(1)
+    expect(CompWithHook.unmounted).toBeCalledTimes(1)
+  })
+
   test('multiple teleport with same target', () => {
     const target = nodeOps.createElement('div')
     const root = nodeOps.createElement('div')
@@ -179,13 +204,13 @@ describe('renderer: teleport', () => {
     render(
       h('div', [
         h(Teleport, { to: target }, h('div', 'one')),
-        h(Teleport, { to: target }, 'two')
+        h(Teleport, { to: target }, 'two'),
       ]),
-      root
+      root,
     )
 
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`
+      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(`"<div>one</div>two"`)
 
@@ -193,18 +218,18 @@ describe('renderer: teleport', () => {
     render(
       h('div', [
         h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
-        h(Teleport, { to: target }, 'three')
+        h(Teleport, { to: target }, 'three'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>one</div><div>two</div>three"`
+      `"<div>one</div><div>two</div>three"`,
     )
 
     // toggling
     render(h('div', [null, h(Teleport, { to: target }, 'three')]), root)
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!----><!--teleport start--><!--teleport end--></div>"`
+      `"<div><!----><!--teleport start--><!--teleport end--></div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(`"three"`)
 
@@ -212,31 +237,31 @@ describe('renderer: teleport', () => {
     render(
       h('div', [
         h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
-        h(Teleport, { to: target }, 'three')
+        h(Teleport, { to: target }, 'three'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`
+      `"<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>"`,
     )
     // should append
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"three<div>one</div><div>two</div>"`
+      `"three<div>one</div><div>two</div>"`,
     )
 
     // toggle the other teleport
     render(
       h('div', [
         h(Teleport, { to: target }, [h('div', 'one'), h('div', 'two')]),
-        null
+        null,
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--><!----></div>"`
+      `"<div><!--teleport start--><!--teleport end--><!----></div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>one</div><div>two</div>"`
+      `"<div>one</div><div>two</div>"`,
     )
   })
 
@@ -253,20 +278,20 @@ describe('renderer: teleport', () => {
             h(
               Teleport,
               { to: target.value, disabled: disabled.value },
-              h('div', 'teleported')
-            )
+              h('div', 'teleported'),
+            ),
           ])
-      }
+      },
     }
     render(h(App), root)
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div></div><!--teleport start--><div>teleported</div><!--teleport end-->"`
+      `"<div></div><!--teleport start--><div>teleported</div><!--teleport end-->"`,
     )
 
     disabled.value = false
     await nextTick()
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div><div>teleported</div></div><!--teleport start--><!--teleport end-->"`
+      `"<div><div>teleported</div></div><!--teleport start--><!--teleport end-->"`,
     )
   })
 
@@ -277,31 +302,31 @@ describe('renderer: teleport', () => {
     const renderWithDisabled = (disabled: boolean) => {
       return h(Fragment, [
         h(Teleport, { to: target, disabled }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ])
     }
 
     render(renderWithDisabled(false), root)
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
 
     render(renderWithDisabled(true), root)
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toBe(``)
 
     // toggle back
     render(renderWithDisabled(false), root)
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
   })
 
@@ -312,43 +337,43 @@ describe('renderer: teleport', () => {
     render(
       h(Fragment, [
         h(Teleport, { to: target }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
 
     render(
       h(Fragment, [
         h('div', 'root'),
-        h(Teleport, { to: target }, h('div', 'teleported'))
+        h(Teleport, { to: target }, h('div', 'teleported')),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div>root</div><!--teleport start--><!--teleport end-->"`
+      `"<div>root</div><!--teleport start--><!--teleport end-->"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
 
     render(
       h(Fragment, [
         h(Teleport, { to: target }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
   })
 
@@ -359,36 +384,36 @@ describe('renderer: teleport', () => {
     render(
       h(Fragment, [
         h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toBe('')
 
     render(
       h(Fragment, [
         h('div', 'root'),
-        h(Teleport, { to: target, disabled: true }, h('div', 'teleported'))
+        h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<div>root</div><!--teleport start--><div>teleported</div><!--teleport end-->"`
+      `"<div>root</div><!--teleport start--><div>teleported</div><!--teleport end-->"`,
     )
     expect(serializeInner(target)).toBe('')
 
     render(
       h(Fragment, [
         h(Teleport, { to: target, disabled: true }, h('div', 'teleported')),
-        h('div', 'root')
+        h('div', 'root'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toBe('')
   })
@@ -402,7 +427,7 @@ describe('renderer: teleport', () => {
       setup() {
         return {
           target: markRaw(target),
-          disabled
+          disabled,
         }
       },
       render: compile(`
@@ -410,20 +435,20 @@ describe('renderer: teleport', () => {
         <div>teleported</div><span>{{ disabled }}</span><span v-if="disabled"/>
       </teleport>
       <div>root</div>
-      `)
+      `),
     }
     render(h(App), root)
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div><span>false</span><!--v-if-->"`
+      `"<div>teleported</div><span>false</span><!--v-if-->"`,
     )
 
     disabled.value = true
     await nextTick()
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><div>teleported</div><span>true</span><span></span><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><div>teleported</div><span>true</span><span></span><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toBe(``)
 
@@ -431,10 +456,10 @@ describe('renderer: teleport', () => {
     disabled.value = false
     await nextTick()
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end--><div>root</div>"`
+      `"<!--teleport start--><!--teleport end--><div>root</div>"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(
-      `"<div>teleported</div><span>false</span><!--v-if-->"`
+      `"<div>teleported</div><span>false</span><!--v-if-->"`,
     )
   })
 
@@ -445,7 +470,7 @@ describe('renderer: teleport', () => {
     const toggle = ref(true)
     const dir = {
       mounted: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
     }
 
     const app = createApp({
@@ -453,16 +478,16 @@ describe('renderer: teleport', () => {
         return () => {
           return toggle.value
             ? h(Teleport, { to: target }, [
-                withDirectives(h('div', ['foo']), [[dir]])
+                withDirectives(h('div', ['foo']), [[dir]]),
               ])
             : null
         }
-      }
+      },
     })
     app.mount(root)
 
     expect(serializeInner(root)).toMatchInlineSnapshot(
-      `"<!--teleport start--><!--teleport end-->"`
+      `"<!--teleport start--><!--teleport end-->"`,
     )
     expect(serializeInner(target)).toMatchInlineSnapshot(`"<div>foo</div>"`)
     expect(dir.mounted).toHaveBeenCalledTimes(1)
@@ -492,16 +517,16 @@ describe('renderer: teleport', () => {
             h(
               Teleport,
               { to: target.value, disabled: disabled.value },
-              h('div', 'teleported')
-            )
+              h('div', 'teleported'),
+            ),
           ])
-      }
+      },
     }
     render(h(App), root)
     disabled.value = false
     await nextTick()
     expect(serializeInner(target1)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
     expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
     expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
@@ -525,7 +550,7 @@ describe('renderer: teleport', () => {
     expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
     expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
     expect(serializeInner(target3)).toMatchInlineSnapshot(
-      `"<div>teleported</div>"`
+      `"<div>teleported</div>"`,
     )
   })
 })
diff --git a/packages/runtime-core/__tests__/directives.spec.ts b/packages/runtime-core/__tests__/directives.spec.ts
index 16aeb3ad4be..8d9982548b5 100644
--- a/packages/runtime-core/__tests__/directives.spec.ts
+++ b/packages/runtime-core/__tests__/directives.spec.ts
@@ -1,16 +1,19 @@
 import {
+  type DirectiveBinding,
+  type DirectiveHook,
+  type VNode,
+  defineComponent,
   h,
-  withDirectives,
+  nextTick,
+  nodeOps,
   ref,
   render,
-  nodeOps,
-  DirectiveHook,
-  VNode,
-  DirectiveBinding,
-  nextTick,
-  defineComponent
+  withDirectives,
 } from '@vue/runtime-test'
-import { currentInstance, ComponentInternalInstance } from '../src/component'
+import {
+  type ComponentInternalInstance,
+  currentInstance,
+} from '../src/component'
 
 describe('directives', () => {
   it('should work', async () => {
@@ -105,7 +108,7 @@ describe('directives', () => {
       beforeUpdate,
       updated,
       beforeUnmount,
-      unmounted
+      unmounted,
     }
 
     let _instance: ComponentInternalInstance | null = null
@@ -125,11 +128,11 @@ describe('directives', () => {
             // argument
             'foo',
             // modifiers
-            { ok: true }
-          ]
+            { ok: true },
+          ],
         ])
         return _vnode
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -185,11 +188,11 @@ describe('directives', () => {
             // argument
             'foo',
             // modifiers
-            { ok: true }
-          ]
+            { ok: true },
+          ],
         ])
         return _vnode
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -294,7 +297,7 @@ describe('directives', () => {
       beforeUpdate,
       updated,
       beforeUnmount,
-      unmounted
+      unmounted,
     }
 
     let _instance: ComponentInternalInstance | null = null
@@ -320,10 +323,10 @@ describe('directives', () => {
             // argument
             'foo',
             // modifiers
-            { ok: true }
-          ]
+            { ok: true },
+          ],
         ])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -345,22 +348,22 @@ describe('directives', () => {
   // #2298
   it('directive merging on component root', () => {
     const d1 = {
-      mounted: vi.fn()
+      mounted: vi.fn(),
     }
     const d2 = {
-      mounted: vi.fn()
+      mounted: vi.fn(),
     }
     const Comp = {
       render() {
         return withDirectives(h('div'), [[d2]])
-      }
+      },
     }
 
     const App = {
       name: 'App',
       render() {
         return h('div', [withDirectives(h(Comp), [[d1]])])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -379,11 +382,11 @@ describe('directives', () => {
         return withDirectives(h('p', text.value), [
           [
             {
-              beforeUpdate
-            }
-          ]
+              beforeUpdate,
+            },
+          ],
         ])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -402,7 +405,7 @@ describe('directives', () => {
     const App = defineComponent({
       setup(_, { expose }) {
         expose({
-          msg: 'Test'
+          msg: 'Test',
         })
 
         return () =>
@@ -411,11 +414,11 @@ describe('directives', () => {
               {
                 mounted(el, { instance }) {
                   res = (instance as any).msg as string
-                }
-              }
-            ]
+                },
+              },
+            ],
           ])
-      }
+      },
     })
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -424,14 +427,14 @@ describe('directives', () => {
 
   test('should not throw with unknown directive', async () => {
     const d1 = {
-      mounted: vi.fn()
+      mounted: vi.fn(),
     }
     const App = {
       name: 'App',
       render() {
         // simulates the code generated on an unknown directive
         return withDirectives(h('div'), [[undefined], [d1]])
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
diff --git a/packages/runtime-core/__tests__/errorHandling.spec.ts b/packages/runtime-core/__tests__/errorHandling.spec.ts
index ebbfeb1d08e..d995c5fa057 100644
--- a/packages/runtime-core/__tests__/errorHandling.spec.ts
+++ b/packages/runtime-core/__tests__/errorHandling.spec.ts
@@ -1,15 +1,15 @@
 import {
-  onMounted,
-  onErrorCaptured,
-  render,
+  createApp,
+  defineComponent,
   h,
+  nextTick,
   nodeOps,
-  watch,
+  onErrorCaptured,
+  onMounted,
   ref,
-  nextTick,
-  defineComponent,
+  render,
+  watch,
   watchEffect,
-  createApp
 } from '@vue/runtime-test'
 
 describe('error handling', () => {
@@ -24,7 +24,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -33,7 +33,7 @@ describe('error handling', () => {
           fn(err, info, 'child')
         })
         return () => h(GrandChild)
-      }
+      },
     }
 
     const GrandChild = {
@@ -42,7 +42,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -62,7 +62,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -72,7 +72,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(GrandChild)
-      }
+      },
     }
 
     const GrandChild = {
@@ -81,7 +81,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -100,7 +100,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -109,7 +109,7 @@ describe('error handling', () => {
           throw err
         })
       },
-      render() {}
+      render() {},
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -130,7 +130,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -139,7 +139,7 @@ describe('error handling', () => {
           throw err2
         })
         return () => h(GrandChild)
-      }
+      },
     }
 
     const GrandChild = {
@@ -148,7 +148,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -168,14 +168,14 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
       setup() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -195,21 +195,21 @@ describe('error handling', () => {
           return false
         })
         return () => [h(Child1), h(Child2)]
-      }
+      },
     }
 
     const Child1 = {
       created() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     const Child2 = {
       beforeCreate() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -228,7 +228,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -236,7 +236,7 @@ describe('error handling', () => {
         return () => {
           throw err
         }
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -257,7 +257,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = defineComponent(() => () => h('div', { ref }))
@@ -277,7 +277,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -286,7 +286,7 @@ describe('error handling', () => {
           throw err
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -304,7 +304,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -313,10 +313,10 @@ describe('error handling', () => {
           () => {
             throw err
           },
-          () => {}
+          () => {},
         )
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -334,7 +334,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const count = ref(0)
@@ -344,10 +344,10 @@ describe('error handling', () => {
           () => count.value,
           () => {
             throw err
-          }
+          },
         )
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -369,7 +369,7 @@ describe('error handling', () => {
           return false
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
@@ -381,7 +381,7 @@ describe('error handling', () => {
           })
         })
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -405,16 +405,16 @@ describe('error handling', () => {
           h(Child, {
             onFoo: () => {
               throw err
-            }
+            },
           })
-      }
+      },
     }
 
     const Child = {
       setup(props: any, { emit }: any) {
         emit('foo')
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -435,9 +435,9 @@ describe('error handling', () => {
           h(Child, {
             async onFoo() {
               throw err
-            }
+            },
           })
-      }
+      },
     }
 
     const Child = {
@@ -445,7 +445,7 @@ describe('error handling', () => {
       setup(props: any, { emit }: any) {
         emit('foo')
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -473,17 +473,17 @@ describe('error handling', () => {
           h(Child, {
             onFoo: [
               createAsyncHandler(Promise.reject(err)),
-              createAsyncHandler(Promise.resolve(1))
-            ]
+              createAsyncHandler(Promise.resolve(1)),
+            ],
           })
-      }
+      },
     }
 
     const Child = {
       setup(props: any, { emit }: any) {
         emit('foo')
         return () => null
-      }
+      },
     }
 
     render(h(Comp), nodeOps.createElement('div'))
@@ -511,14 +511,14 @@ describe('error handling', () => {
           fn(err, info)
         })
         return () => h(Child)
-      }
+      },
     }
 
     const Child = {
       setup() {
         throw err
       },
-      render() {}
+      render() {},
     }
 
     let caughtError
@@ -529,7 +529,7 @@ describe('error handling', () => {
     }
     expect(fn).toHaveBeenCalledWith(err, 'setup function')
     expect(
-      `Unhandled error during execution of setup function`
+      `Unhandled error during execution of setup function`,
     ).toHaveBeenWarned()
     expect(caughtError).toBe(err)
 
@@ -553,14 +553,14 @@ describe('error handling', () => {
           () => {
             throw error1
           },
-          { immediate: true }
+          { immediate: true },
         )
         watch(
           count,
           async () => {
             throw error2
           },
-          { immediate: true }
+          { immediate: true },
         )
         watchEffect(() => {
           throw error3
@@ -569,7 +569,7 @@ describe('error handling', () => {
           throw error4
         })
       },
-      render() {}
+      render() {},
     })
 
     app.config.errorHandler = handler
diff --git a/packages/runtime-core/__tests__/h.spec.ts b/packages/runtime-core/__tests__/h.spec.ts
index 21eab3c5686..ee2dabe2f3e 100644
--- a/packages/runtime-core/__tests__/h.spec.ts
+++ b/packages/runtime-core/__tests__/h.spec.ts
@@ -1,6 +1,6 @@
 import { h } from '../src/h'
 import { createVNode } from '../src/vnode'
-import { RawSlots } from '../src/componentSlots'
+import type { RawSlots } from '../src/componentSlots'
 
 // Since h is a thin layer on top of createVNode, we are only testing its
 // own logic here. Details of vnode creation is tested in vnode.spec.ts.
@@ -11,7 +11,7 @@ describe('renderer: h', () => {
 
   test('type + props', () => {
     expect(h('div', { id: 'foo' })).toMatchObject(
-      createVNode('div', { id: 'foo' })
+      createVNode('div', { id: 'foo' }),
     )
   })
 
@@ -37,12 +37,12 @@ describe('renderer: h', () => {
     expect(h('div', {}, slots)).toMatchObject(createVNode('div', {}, slots))
     const Component = { template: '<br />' }
     expect(h(Component, {}, slots)).toMatchObject(
-      createVNode(Component, {}, slots)
+      createVNode(Component, {}, slots),
     )
     // default slot
     const slot = () => {}
     expect(h(Component, {}, slot)).toMatchObject(
-      createVNode(Component, {}, slot)
+      createVNode(Component, {}, slot),
     )
     // single vnode
     const vnode = h('div')
@@ -56,12 +56,12 @@ describe('renderer: h', () => {
     const slot = () => {}
     expect(
       h(Component, null, {
-        foo: slot
-      })
+        foo: slot,
+      }),
     ).toMatchObject(
       createVNode(Component, null, {
-        foo: slot
-      })
+        foo: slot,
+      }),
     )
   })
 
@@ -69,15 +69,15 @@ describe('renderer: h', () => {
   // note this signature is not supported in types; it's purely for usage with
   // compiled code.
   test('support variadic children', () => {
-    // @ts-ignore
+    // @ts-expect-error
     const vnode = h('div', null, h('span'), h('span'))
     expect(vnode.children).toMatchObject([
       {
-        type: 'span'
+        type: 'span',
       },
       {
-        type: 'span'
-      }
+        type: 'span',
+      },
     ])
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/createSlots.spec.ts b/packages/runtime-core/__tests__/helpers/createSlots.spec.ts
index 2af24380cca..85018854eae 100644
--- a/packages/runtime-core/__tests__/helpers/createSlots.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/createSlots.spec.ts
@@ -1,4 +1,4 @@
-import { Slot } from '../../src/componentSlots'
+import type { Slot } from '../../src/componentSlots'
 import { createSlots } from '../../src/helpers/createSlots'
 
 describe('createSlot', () => {
@@ -22,7 +22,7 @@ describe('createSlot', () => {
 
     const actual = createSlots(record, dynamicSlot)
     const ret = actual.descriptor()
-    // @ts-ignore
+    // @ts-expect-error
     expect(ret.key).toBe('1')
   })
 
@@ -37,7 +37,7 @@ describe('createSlot', () => {
   it('should add all slots to the record', () => {
     const dynamicSlot = [
       { name: 'descriptor', fn: slot },
-      { name: 'descriptor2', fn: slot }
+      { name: 'descriptor2', fn: slot },
     ]
 
     const actual = createSlots(record, dynamicSlot)
@@ -48,7 +48,7 @@ describe('createSlot', () => {
   it('should add slot to the record when given slot is an array', () => {
     const dynamicSlot = [
       { name: 'descriptor', fn: slot },
-      [{ name: 'descriptor2', fn: slot }]
+      [{ name: 'descriptor2', fn: slot }],
     ]
 
     const actual = createSlots(record, dynamicSlot)
@@ -61,8 +61,8 @@ describe('createSlot', () => {
       { name: 'descriptor', fn: slot },
       [
         { name: 'descriptor2', fn: slot },
-        { name: 'descriptor3', fn: slot }
-      ]
+        { name: 'descriptor3', fn: slot },
+      ],
     ]
 
     const actual = createSlots(record, dynamicSlot)
@@ -70,7 +70,7 @@ describe('createSlot', () => {
     expect(actual).toEqual({
       descriptor: slot,
       descriptor2: slot,
-      descriptor3: slot
+      descriptor3: slot,
     })
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/renderList.spec.ts b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
index ae487b6be23..d23a63cc08e 100644
--- a/packages/runtime-core/__tests__/helpers/renderList.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderList.spec.ts
@@ -3,13 +3,13 @@ import { renderList } from '../../src/helpers/renderList'
 describe('renderList', () => {
   it('should render items in an array', () => {
     expect(
-      renderList(['1', '2', '3'], (item, index) => `node ${index}: ${item}`)
+      renderList(['1', '2', '3'], (item, index) => `node ${index}: ${item}`),
     ).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
   it('should render characters of a string', () => {
     expect(
-      renderList('123', (item, index) => `node ${index}: ${item}`)
+      renderList('123', (item, index) => `node ${index}: ${item}`),
     ).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
@@ -17,7 +17,7 @@ describe('renderList', () => {
     expect(renderList(3, (item, index) => `node ${index}: ${item}`)).toEqual([
       'node 0: 1',
       'node 1: 2',
-      'node 2: 3'
+      'node 2: 3',
     ])
   })
 
@@ -26,7 +26,7 @@ describe('renderList', () => {
       renderList(3.1, () => {})
     } catch (e) {}
     expect(
-      `The v-for range expect an integer value but got 3.1.`
+      `The v-for range expect an integer value but got 3.1.`,
     ).toHaveBeenWarned()
   })
 
@@ -34,8 +34,8 @@ describe('renderList', () => {
     expect(
       renderList(
         { a: 1, b: 2, c: 3 },
-        (item, key, index) => `node ${index}/${key}: ${item}`
-      )
+        (item, key, index) => `node ${index}/${key}: ${item}`,
+      ),
     ).toEqual(['node 0/a: 1', 'node 1/b: 2', 'node 2/c: 3'])
   })
 
@@ -47,13 +47,13 @@ describe('renderList', () => {
     }
 
     expect(
-      renderList(iterable(), (item, index) => `node ${index}: ${item}`)
+      renderList(iterable(), (item, index) => `node ${index}: ${item}`),
     ).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
   it('should return empty array when source is undefined', () => {
     expect(
-      renderList(undefined, (item, index) => `node ${index}: ${item}`)
+      renderList(undefined, (item, index) => `node ${index}: ${item}`),
     ).toEqual([])
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
index 4e661c406e6..b6183ac3c36 100644
--- a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts
@@ -1,13 +1,13 @@
 import { renderSlot } from '../../src/helpers/renderSlot'
 import {
-  h,
-  withCtx,
-  createVNode,
-  openBlock,
-  createBlock,
   Fragment,
+  type Slot,
+  createBlock,
   createCommentVNode,
-  Slot
+  createVNode,
+  h,
+  openBlock,
+  withCtx,
 } from '../../src'
 import { PatchFlags } from '@vue/shared'
 import { setCurrentRenderingInstance } from '../../src/componentRenderContext'
@@ -25,7 +25,7 @@ describe('renderSlot', () => {
     let child
     const vnode = renderSlot(
       { default: () => [(child = h('child'))] },
-      'default'
+      'default',
     )
     expect(vnode.children).toEqual([child])
   })
@@ -47,7 +47,7 @@ describe('renderSlot', () => {
         return [createVNode('div', null, 'foo', PatchFlags.TEXT)]
       },
       // mock instance
-      { type: {}, appContext: {} } as any
+      { type: {}, appContext: {} } as any,
     ) as Slot
 
     // manual invocation should not track
@@ -67,7 +67,7 @@ describe('renderSlot', () => {
         { default: () => [createCommentVNode('foo')] },
         'default',
         undefined,
-        () => [(fallback = h('fallback'))]
+        () => [(fallback = h('fallback'))],
       )
       expect(vnode.children).toEqual([fallback])
       expect(vnode.patchFlag).toBe(PatchFlags.BAIL)
@@ -79,7 +79,7 @@ describe('renderSlot', () => {
         { default: () => [renderSlot({}, 'foo')] },
         'default',
         undefined,
-        () => [(fallback = h('fallback'))]
+        () => [(fallback = h('fallback'))],
       )
       expect(vnode.children).toEqual([fallback])
       expect(vnode.patchFlag).toBe(PatchFlags.BAIL)
diff --git a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
index fdcde4639fc..d77c6034b43 100644
--- a/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/resolveAssets.spec.ts
@@ -1,16 +1,16 @@
 import {
+  Comment,
+  type Component,
+  type Directive,
+  type VNode,
   createApp,
+  createVNode,
+  h,
   nodeOps,
   resolveComponent,
   resolveDirective,
-  Component,
-  Directive,
   resolveDynamicComponent,
-  h,
   serializeInner,
-  createVNode,
-  Comment,
-  VNode
 } from '@vue/runtime-test'
 
 describe('resolveAssets', () => {
@@ -29,10 +29,10 @@ describe('resolveAssets', () => {
 
     const Root = {
       components: {
-        FooBar: FooBar
+        FooBar: FooBar,
       },
       directives: {
-        BarBaz: BarBaz
+        BarBaz: BarBaz,
       },
       setup() {
         return () => {
@@ -48,7 +48,7 @@ describe('resolveAssets', () => {
           component4 = resolveComponent('foo-bar')!
           directive4 = resolveDirective('bar-baz')!
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -76,7 +76,7 @@ describe('resolveAssets', () => {
       name: 'Root',
       components: {
         Foo,
-        Root: Foo
+        Root: Foo,
       },
       setup() {
         return () => {
@@ -84,7 +84,7 @@ describe('resolveAssets', () => {
           component2 = resolveComponent('Foo', true)
           component3 = resolveComponent('Bar', true)
         }
-      }
+      },
     }
 
     const app = createApp(Root)
@@ -100,12 +100,12 @@ describe('resolveAssets', () => {
     test('used outside render() or setup()', () => {
       resolveComponent('foo')
       expect(
-        'resolveComponent can only be used in render() or setup().'
+        'resolveComponent can only be used in render() or setup().',
       ).toHaveBeenWarned()
 
       resolveDirective('foo')
       expect(
-        'resolveDirective can only be used in render() or setup().'
+        'resolveDirective can only be used in render() or setup().',
       ).toHaveBeenWarned()
     })
 
@@ -115,7 +115,7 @@ describe('resolveAssets', () => {
           resolveComponent('foo')
           resolveDirective('bar')
           return () => null
-        }
+        },
       }
 
       const app = createApp(Root)
@@ -129,7 +129,7 @@ describe('resolveAssets', () => {
       const dynamicComponents = {
         foo: () => 'foo',
         bar: () => 'bar',
-        baz: { render: () => 'baz' }
+        baz: { render: () => 'baz' },
       }
       let foo, bar, baz // dynamic components
       let dynamicVNode: VNode
@@ -137,7 +137,7 @@ describe('resolveAssets', () => {
       const Child = {
         render(this: any) {
           return this.$slots.default()
-        }
+        },
       }
 
       const Root = {
@@ -152,7 +152,7 @@ describe('resolveAssets', () => {
               baz = resolveDynamicComponent(dynamicComponents.baz) // <component :is="baz"/>, object
             })
           }
-        }
+        },
       }
 
       const app = createApp(Root)
@@ -170,10 +170,10 @@ describe('resolveAssets', () => {
         setup() {
           return () => {
             return createVNode(resolveDynamicComponent('div') as string, null, {
-              default: () => 'hello'
+              default: () => 'hello',
             })
           }
-        }
+        },
       }
 
       const app = createApp(Root)
@@ -198,13 +198,13 @@ describe('resolveAssets', () => {
 
     const Base = {
       components: {
-        FooBar: FooBar
-      }
+        FooBar: FooBar,
+      },
     }
     const Mixin = {
       directives: {
-        BarBaz: BarBaz
-      }
+        BarBaz: BarBaz,
+      },
     }
 
     const Root = {
@@ -224,7 +224,7 @@ describe('resolveAssets', () => {
           component4 = resolveComponent('foo-bar')!
           directive4 = resolveDirective('bar-baz')!
         }
-      }
+      },
     }
 
     const app = createApp(Root)
diff --git a/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts b/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts
index 3dc5bb5172b..f1e95e5164a 100644
--- a/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/toHandlers.spec.ts
@@ -6,7 +6,7 @@ describe('toHandlers', () => {
     toHandlers(undefined as any)
 
     expect(
-      'v-on with no argument expects an object value.'
+      'v-on with no argument expects an object value.',
     ).toHaveBeenWarnedTimes(2)
   })
 
@@ -16,7 +16,7 @@ describe('toHandlers', () => {
 
     expect(toHandlers({ input, change })).toStrictEqual({
       onInput: input,
-      onChange: change
+      onChange: change,
     })
   })
 })
diff --git a/packages/runtime-core/__tests__/helpers/useModel.spec.ts b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
new file mode 100644
index 00000000000..c02af337b87
--- /dev/null
+++ b/packages/runtime-core/__tests__/helpers/useModel.spec.ts
@@ -0,0 +1,529 @@
+import {
+  Fragment,
+  type Ref,
+  createApp,
+  createBlock,
+  createElementBlock,
+  createElementVNode,
+  createVNode,
+  defineComponent,
+  h,
+  nextTick,
+  nodeOps,
+  openBlock,
+  ref,
+  render,
+  serializeInner,
+  watch,
+} from '@vue/runtime-test'
+import { useModel } from '../../src/helpers/useModel'
+
+describe('useModel', () => {
+  test('basic', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['modelValue'],
+      emits: ['update:modelValue'],
+      setup(props) {
+        foo = useModel(props, 'modelValue')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const msg = ref('')
+    const setValue = vi.fn(v => (msg.value = v))
+    const root = nodeOps.createElement('div')
+    createApp(() =>
+      h(Comp, {
+        modelValue: msg.value,
+        'onUpdate:modelValue': setValue,
+      }),
+    ).mount(root)
+
+    expect(foo.value).toBe('')
+    expect(msg.value).toBe('')
+    expect(setValue).not.toBeCalled()
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('')
+
+    // update from child
+    update()
+
+    await nextTick()
+    expect(msg.value).toBe('bar')
+    expect(foo.value).toBe('bar')
+    expect(setValue).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('bar')
+
+    // update from parent
+    msg.value = 'qux'
+    expect(msg.value).toBe('qux')
+
+    await nextTick()
+    expect(msg.value).toBe('qux')
+    expect(foo.value).toBe('qux')
+    expect(setValue).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(3)
+    expect(serializeInner(root)).toBe('qux')
+  })
+
+  test('without parent value (local mutation)', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['foo'],
+      emits: ['update:foo'],
+      setup(props) {
+        foo = useModel(props, 'foo')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    const updateFoo = vi.fn()
+    render(h(Comp, { 'onUpdate:foo': updateFoo }), root)
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('<!---->')
+
+    expect(foo.value).toBeUndefined()
+    update()
+    // when parent didn't provide value, local mutation is enabled
+    expect(foo.value).toBe('bar')
+
+    await nextTick()
+    expect(updateFoo).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('bar')
+  })
+
+  test('without parent listener (local mutation)', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['foo'],
+      emits: ['update:foo'],
+      setup(props) {
+        foo = useModel(props, 'foo')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    // provide initial value
+    render(h(Comp, { foo: 'initial' }), root)
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('initial')
+
+    expect(foo.value).toBe('initial')
+    update()
+    // when parent didn't provide value, local mutation is enabled
+    expect(foo.value).toBe('bar')
+
+    await nextTick()
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('bar')
+  })
+
+  test('kebab-case v-model (should not be local)', async () => {
+    let foo: any
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['fooBar'],
+      emits: ['update:fooBar'],
+      setup(props) {
+        foo = useModel(props, 'fooBar')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const updateFooBar = vi.fn()
+    const root = nodeOps.createElement('div')
+    // v-model:foo-bar compiles to foo-bar and onUpdate:fooBar
+    render(
+      h(Comp, { 'foo-bar': 'initial', 'onUpdate:fooBar': updateFooBar }),
+      root,
+    )
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('initial')
+
+    expect(foo.value).toBe('initial')
+    foo.value = 'bar'
+    // should not be using local mode, so nothing should actually change
+    expect(foo.value).toBe('initial')
+
+    await nextTick()
+    expect(compRender).toBeCalledTimes(1)
+    expect(updateFooBar).toBeCalledTimes(1)
+    expect(updateFooBar).toHaveBeenCalledWith('bar')
+    expect(foo.value).toBe('initial')
+    expect(serializeInner(root)).toBe('initial')
+  })
+
+  test('kebab-case update listener (should not be local)', async () => {
+    let foo: any
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['fooBar'],
+      emits: ['update:fooBar'],
+      setup(props) {
+        foo = useModel(props, 'fooBar')
+        return () => {
+          compRender()
+          return foo.value
+        }
+      },
+    })
+
+    const updateFooBar = vi.fn()
+    const root = nodeOps.createElement('div')
+    // The template compiler won't create hyphenated listeners, but it could have been passed manually
+    render(
+      h(Comp, { 'foo-bar': 'initial', 'onUpdate:foo-bar': updateFooBar }),
+      root,
+    )
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('initial')
+
+    expect(foo.value).toBe('initial')
+    foo.value = 'bar'
+    // should not be using local mode, so nothing should actually change
+    expect(foo.value).toBe('initial')
+
+    await nextTick()
+    expect(compRender).toBeCalledTimes(1)
+    expect(updateFooBar).toBeCalledTimes(1)
+    expect(updateFooBar).toHaveBeenCalledWith('bar')
+    expect(foo.value).toBe('initial')
+    expect(serializeInner(root)).toBe('initial')
+  })
+
+  test('default value', async () => {
+    let count: any
+    const inc = () => {
+      count.value++
+    }
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: { count: { default: 0 } },
+      emits: ['update:count'],
+      setup(props) {
+        count = useModel(props, 'count')
+        return () => {
+          compRender()
+          return count.value
+        }
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    const updateCount = vi.fn()
+    render(h(Comp, { 'onUpdate:count': updateCount }), root)
+    expect(compRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('0')
+
+    expect(count.value).toBe(0)
+
+    inc()
+    // when parent didn't provide value, local mutation is enabled
+    expect(count.value).toBe(1)
+
+    await nextTick()
+
+    expect(updateCount).toBeCalledTimes(1)
+    expect(compRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('1')
+  })
+
+  test('parent limiting child value', async () => {
+    let childCount: Ref<number>
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['count'],
+      emits: ['update:count'],
+      setup(props) {
+        childCount = useModel(props, 'count')
+        return () => {
+          compRender()
+          return childCount.value
+        }
+      },
+    })
+
+    const Parent = defineComponent({
+      setup() {
+        const count = ref(0)
+        watch(count, () => {
+          if (count.value < 0) {
+            count.value = 0
+          }
+        })
+        return () =>
+          h(Comp, {
+            count: count.value,
+            'onUpdate:count': val => {
+              count.value = val
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe('0')
+
+    // child update
+    childCount!.value = 1
+    // not yet updated
+    expect(childCount!.value).toBe(0)
+
+    await nextTick()
+    expect(childCount!.value).toBe(1)
+    expect(serializeInner(root)).toBe('1')
+
+    // child update to invalid value
+    childCount!.value = -1
+    // not yet updated
+    expect(childCount!.value).toBe(1)
+
+    await nextTick()
+    // limited to 0 by parent
+    expect(childCount!.value).toBe(0)
+    expect(serializeInner(root)).toBe('0')
+  })
+
+  test('has parent value -> no parent value', async () => {
+    let childCount: Ref<number>
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['count'],
+      emits: ['update:count'],
+      setup(props) {
+        childCount = useModel(props, 'count')
+        return () => {
+          compRender()
+          return childCount.value
+        }
+      },
+    })
+
+    const toggle = ref(true)
+    const Parent = defineComponent({
+      setup() {
+        const count = ref(0)
+        return () =>
+          toggle.value
+            ? h(Comp, {
+                count: count.value,
+                'onUpdate:count': val => {
+                  count.value = val
+                },
+              })
+            : h(Comp)
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe('0')
+
+    // child update
+    childCount!.value = 1
+    // not yet updated
+    expect(childCount!.value).toBe(0)
+
+    await nextTick()
+    expect(childCount!.value).toBe(1)
+    expect(serializeInner(root)).toBe('1')
+
+    // parent change
+    toggle.value = false
+
+    await nextTick()
+    // localValue should be reset
+    expect(childCount!.value).toBeUndefined()
+    expect(serializeInner(root)).toBe('<!---->')
+
+    // child local mutation should continue to work
+    childCount!.value = 2
+    expect(childCount!.value).toBe(2)
+
+    await nextTick()
+    expect(serializeInner(root)).toBe('2')
+  })
+
+  // #9838
+  test('pass modelValue to slot (optimized mode) ', async () => {
+    let foo: any
+    const update = () => {
+      foo.value = 'bar'
+    }
+
+    const Comp = {
+      render(this: any) {
+        return this.$slots.default()
+      },
+    }
+
+    const childRender = vi.fn()
+    const slotRender = vi.fn()
+    const Child = defineComponent({
+      props: ['modelValue'],
+      emits: ['update:modelValue'],
+      setup(props) {
+        foo = useModel(props, 'modelValue')
+        return () => {
+          childRender()
+          return (
+            openBlock(),
+            createElementBlock(Fragment, null, [
+              createVNode(Comp, null, {
+                default: () => {
+                  slotRender()
+                  return createElementVNode('div', null, foo.value)
+                },
+                _: 1 /* STABLE */,
+              }),
+            ])
+          )
+        }
+      },
+    })
+
+    const msg = ref('')
+    const setValue = vi.fn(v => (msg.value = v))
+    const root = nodeOps.createElement('div')
+    createApp({
+      render() {
+        return (
+          openBlock(),
+          createBlock(
+            Child,
+            {
+              modelValue: msg.value,
+              'onUpdate:modelValue': setValue,
+            },
+            null,
+            8 /* PROPS */,
+            ['modelValue'],
+          )
+        )
+      },
+    }).mount(root)
+
+    expect(foo.value).toBe('')
+    expect(msg.value).toBe('')
+    expect(setValue).not.toBeCalled()
+    expect(childRender).toBeCalledTimes(1)
+    expect(slotRender).toBeCalledTimes(1)
+    expect(serializeInner(root)).toBe('<div></div>')
+
+    // update from child
+    update()
+
+    await nextTick()
+    expect(msg.value).toBe('bar')
+    expect(foo.value).toBe('bar')
+    expect(setValue).toBeCalledTimes(1)
+    expect(childRender).toBeCalledTimes(2)
+    expect(slotRender).toBeCalledTimes(2)
+    expect(serializeInner(root)).toBe('<div>bar</div>')
+  })
+
+  test('with modifiers & transformers', async () => {
+    let childMsg: Ref<string>
+    let childModifiers: Record<string, true | undefined>
+
+    const compRender = vi.fn()
+    const Comp = defineComponent({
+      props: ['msg', 'msgModifiers'],
+      emits: ['update:msg'],
+      setup(props) {
+        ;[childMsg, childModifiers] = useModel(props, 'msg', {
+          get(val) {
+            return val.toLowerCase()
+          },
+          set(val) {
+            if (childModifiers.upper) {
+              return val.toUpperCase()
+            }
+          },
+        })
+        return () => {
+          compRender()
+          return childMsg.value
+        }
+      },
+    })
+
+    const msg = ref('HI')
+    const Parent = defineComponent({
+      setup() {
+        return () =>
+          h(Comp, {
+            msg: msg.value,
+            msgModifiers: { upper: true },
+            'onUpdate:msg': val => {
+              msg.value = val
+            },
+          })
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+
+    // should be lowered
+    expect(serializeInner(root)).toBe('hi')
+
+    // child update
+    childMsg!.value = 'Hmm'
+
+    await nextTick()
+    expect(childMsg!.value).toBe('hmm')
+    expect(serializeInner(root)).toBe('hmm')
+    // parent should get uppercase value
+    expect(msg.value).toBe('HMM')
+
+    // parent update
+    msg.value = 'Ughh'
+    await nextTick()
+    expect(serializeInner(root)).toBe('ughh')
+    expect(msg.value).toBe('Ughh')
+
+    // child update again
+    childMsg!.value = 'ughh'
+    await nextTick()
+    expect(msg.value).toBe('UGHH')
+  })
+})
diff --git a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
index 60b5132bd5e..f4f356dea4f 100644
--- a/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/withMemo.spec.ts
@@ -4,7 +4,7 @@
 
 // since v-memo really is a compiler + runtime combo feature, we are performing
 // more of an integration test here.
-import { ComponentOptions, createApp, nextTick } from 'vue'
+import { type ComponentOptions, createApp, nextTick } from 'vue'
 
 describe('v-memo', () => {
   function mount(options: ComponentOptions): [HTMLElement, any] {
@@ -17,7 +17,7 @@ describe('v-memo', () => {
   test('on with external array', async () => {
     const [el, vm] = mount({
       template: `<div v-memo="arr">{{ arr[0] }} {{ arr[1] }} {{arr[2] ?? '_' }} ({{c}})</div>{{c}}`,
-      data: () => ({ arr: [0, 0], c: 0 })
+      data: () => ({ arr: [0, 0], c: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0 0 _ (0)</div>0`)
 
@@ -58,7 +58,7 @@ describe('v-memo', () => {
   test('on normal element', async () => {
     const [el, vm] = mount({
       template: `<div v-memo="[x]">{{ x }} {{ y }}</div>`,
-      data: () => ({ x: 0, y: 0 })
+      data: () => ({ x: 0, y: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0 0</div>`)
 
@@ -85,9 +85,9 @@ describe('v-memo', () => {
       components: {
         Comp: {
           props: ['x', 'y'],
-          template: `<div>{{x}} {{y}}</div>`
-        }
-      }
+          template: `<div>{{x}} {{y}}</div>`,
+        },
+      },
     })
     expect(el.innerHTML).toBe(`<div>0 0</div>`)
 
@@ -111,7 +111,7 @@ describe('v-memo', () => {
     const [el, vm] = mount({
       template: `<div v-if="ok" v-memo="[x]">{{ x }} {{ y }}</div>
         <div v-else v-memo="[y]">{{ y }} {{ x }}</div>`,
-      data: () => ({ ok: true, x: 0, y: 0 })
+      data: () => ({ ok: true, x: 0, y: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0 0</div>`)
 
@@ -159,37 +159,37 @@ describe('v-memo', () => {
       data: () => ({
         list: [{ x: 1 }, { x: 2 }, { x: 3 }],
         y: 1,
-        z: 'z'
-      })
+        z: 'z',
+      }),
     })
     expect(el.innerHTML).toBe(
-      `<div>1 yes z</div><div>2 no z</div><div>3 no z</div>`
+      `<div>1 yes z</div><div>2 no z</div><div>3 no z</div>`,
     )
 
     vm.y = 2
     await nextTick()
     expect(el.innerHTML).toBe(
-      `<div>1 no z</div><div>2 yes z</div><div>3 no z</div>`
+      `<div>1 no z</div><div>2 yes z</div><div>3 no z</div>`,
     )
 
     vm.list[0].x = 4
     await nextTick()
     expect(el.innerHTML).toBe(
-      `<div>4 no z</div><div>2 yes z</div><div>3 no z</div>`
+      `<div>4 no z</div><div>2 yes z</div><div>3 no z</div>`,
     )
 
     vm.list[0].x = 5
     vm.y = 5
     await nextTick()
     expect(el.innerHTML).toBe(
-      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`
+      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`,
     )
 
     vm.z = 'zz'
     await nextTick()
     // should not update
     expect(el.innerHTML).toBe(
-      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`
+      `<div>5 yes z</div><div>2 no z</div><div>3 no z</div>`,
     )
   })
 
@@ -199,8 +199,8 @@ describe('v-memo', () => {
           {{count}}
         </div>`,
       data: () => ({
-        count: 0
-      })
+        count: 0,
+      }),
     })
     expect(el.innerHTML).toBe(`<div>0</div><div>0</div><div>0</div>`)
 
@@ -218,7 +218,7 @@ describe('v-memo', () => {
   test('v-memo dependency is NaN should be equal', async () => {
     const [el, vm] = mount({
       template: `<div v-memo="[x]">{{ y }}</div>`,
-      data: () => ({ x: NaN, y: 0 })
+      data: () => ({ x: NaN, y: 0 }),
     })
     expect(el.innerHTML).toBe(`<div>0</div>`)
 
diff --git a/packages/runtime-core/__tests__/hmr.spec.ts b/packages/runtime-core/__tests__/hmr.spec.ts
index db713a3f276..000fbf40bf8 100644
--- a/packages/runtime-core/__tests__/hmr.spec.ts
+++ b/packages/runtime-core/__tests__/hmr.spec.ts
@@ -1,17 +1,17 @@
-import { HMRRuntime } from '../src/hmr'
+import type { HMRRuntime } from '../src/hmr'
 import '../src/hmr'
-import { ComponentOptions, InternalRenderFunction } from '../src/component'
+import type { ComponentOptions, InternalRenderFunction } from '../src/component'
 import {
-  render,
-  nodeOps,
+  type TestElement,
   h,
+  nextTick,
+  nodeOps,
+  render,
   serializeInner,
   triggerEvent,
-  TestElement,
-  nextTick
 } from '@vue/runtime-test'
 import * as runtimeTest from '@vue/runtime-test'
-import { registerRuntimeCompiler, createApp } from '@vue/runtime-test'
+import { createApp, registerRuntimeCompiler } from '@vue/runtime-test'
 import { baseCompile } from '@vue/compiler-core'
 
 declare var __VUE_HMR_RUNTIME__: HMRRuntime
@@ -20,9 +20,9 @@ const { createRecord, rerender, reload } = __VUE_HMR_RUNTIME__
 registerRuntimeCompiler(compileToFunction)
 
 function compileToFunction(template: string) {
-  const { code } = baseCompile(template)
+  const { code } = baseCompile(template, { hoistStatic: true, hmr: true })
   const render = new Function('Vue', code)(
-    runtimeTest
+    runtimeTest,
   ) as InternalRenderFunction
   render._rc = true // isRuntimeCompiled
   return render
@@ -48,7 +48,7 @@ describe('hot module replacement', () => {
 
     const Child: ComponentOptions = {
       __hmrId: childId,
-      render: compileToFunction(`<div><slot/></div>`)
+      render: compileToFunction(`<div><slot/></div>`),
     }
     createRecord(childId, Child)
 
@@ -59,8 +59,8 @@ describe('hot module replacement', () => {
       },
       components: { Child },
       render: compileToFunction(
-        `<div @click="count++">{{ count }}<Child>{{ count }}</Child></div>`
-      )
+        `<div @click="count++">{{ count }}<Child>{{ count }}</Child></div>`,
+      ),
     }
     createRecord(parentId, Parent)
 
@@ -77,8 +77,8 @@ describe('hot module replacement', () => {
     rerender(
       parentId,
       compileToFunction(
-        `<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`
-      )
+        `<div @click="count++">{{ count }}!<Child>{{ count }}</Child></div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div>1!<div>1</div></div>`)
 
@@ -86,8 +86,8 @@ describe('hot module replacement', () => {
     rerender(
       parentId,
       compileToFunction(
-        `<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`
-      )
+        `<div @click="count++">{{ count }}!<Child>{{ count }}!</Child></div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div>1!<div>1!</div></div>`)
 
@@ -97,8 +97,8 @@ describe('hot module replacement', () => {
       compileToFunction(
         `<div @click="count++">{{ count }}<span>{{ count }}</span>
         <Child>{{ count }}!</Child>
-      </div>`
-      )
+      </div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div>1<span>1</span><div>1!</div></div>`)
 
@@ -108,8 +108,8 @@ describe('hot module replacement', () => {
       compileToFunction(
         `<div @click="count++">
         <Child><span>{{ count }}</span></Child>
-      </div>`
-      )
+      </div>`,
+      ),
     )
     expect(serializeInner(root)).toBe(`<div><div><span>1</span></div></div>`)
   })
@@ -126,12 +126,12 @@ describe('hot module replacement', () => {
         return { count: 0 }
       },
       unmounted: unmountSpy,
-      render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+      render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
-      render: () => h(Child)
+      render: () => h(Child),
     }
 
     render(h(Parent), root)
@@ -143,7 +143,7 @@ describe('hot module replacement', () => {
         return { count: 1 }
       },
       mounted: mountSpy,
-      render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+      render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
     })
     await nextTick()
     expect(serializeInner(root)).toBe(`<div>1</div>`)
@@ -166,7 +166,7 @@ describe('hot module replacement', () => {
         return { count: 0 }
       },
       unmounted: unmountSpy,
-      render: compileToFunction(`<div>{{ count }}</div>`)
+      render: compileToFunction(`<div>{{ count }}</div>`),
     }
     createRecord(childId, Child)
 
@@ -176,8 +176,9 @@ describe('hot module replacement', () => {
         return { toggle: true }
       },
       render: compileToFunction(
-        `<button @click="toggle = !toggle"></button><KeepAlive><Child v-if="toggle" /></KeepAlive>`
-      )
+        `<button @click="toggle = !toggle" />
+        <KeepAlive><Child v-if="toggle" /></KeepAlive>`,
+      ),
     }
 
     render(h(Parent), root)
@@ -192,7 +193,7 @@ describe('hot module replacement', () => {
       unmounted: unmountSpy,
       activated: activeSpy,
       deactivated: deactiveSpy,
-      render: compileToFunction(`<div>{{ count }}</div>`)
+      render: compileToFunction(`<div>{{ count }}</div>`),
     })
     await nextTick()
     expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
@@ -218,6 +219,159 @@ describe('hot module replacement', () => {
     expect(deactiveSpy).toHaveBeenCalledTimes(1)
   })
 
+  // #7121
+  test('reload KeepAlive slot in Transition', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-transition-keep-alive-reload'
+    const unmountSpy = vi.fn()
+    const mountSpy = vi.fn()
+    const activeSpy = vi.fn()
+    const deactiveSpy = vi.fn()
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      data() {
+        return { count: 0 }
+      },
+      unmounted: unmountSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      components: { Child },
+      data() {
+        return { toggle: true }
+      },
+      render: compileToFunction(
+        `<button @click="toggle = !toggle" />
+        <BaseTransition>
+          <KeepAlive><Child v-if="toggle" /></KeepAlive>
+        </BaseTransition>`,
+      ),
+    }
+
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)
+
+    reload(childId, {
+      __hmrId: childId,
+      data() {
+        return { count: 1 }
+      },
+      mounted: mountSpy,
+      unmounted: unmountSpy,
+      activated: activeSpy,
+      deactivated: deactiveSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    })
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(0)
+
+    // should not unmount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><!--v-if-->`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+
+    // should not mount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(2)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('reload KeepAlive slot in Transition with out-in', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-transition-keep-alive-reload-with-out-in'
+    const unmountSpy = vi.fn()
+    const mountSpy = vi.fn()
+    const activeSpy = vi.fn()
+    const deactiveSpy = vi.fn()
+
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      name: 'original',
+      data() {
+        return { count: 0 }
+      },
+      unmounted: unmountSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    }
+    createRecord(childId, Child)
+
+    const Parent: ComponentOptions = {
+      components: { Child },
+      data() {
+        return { toggle: true }
+      },
+      methods: {
+        // @ts-expect-error
+        onLeave(_, done) {
+          setTimeout(done, 0)
+        },
+      },
+      render: compileToFunction(
+        `<button @click="toggle = !toggle" />
+        <BaseTransition mode="out-in" @leave="onLeave">
+          <KeepAlive><Child v-if="toggle" /></KeepAlive>
+        </BaseTransition>`,
+      ),
+    }
+
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<button></button><div>0</div>`)
+
+    reload(childId, {
+      __hmrId: childId,
+      name: 'updated',
+      data() {
+        return { count: 1 }
+      },
+      mounted: mountSpy,
+      unmounted: unmountSpy,
+      activated: activeSpy,
+      deactivated: deactiveSpy,
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    })
+    await nextTick()
+    await new Promise(r => setTimeout(r, 0))
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(0)
+
+    // should not unmount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    await new Promise(r => setTimeout(r, 0))
+    expect(serializeInner(root)).toBe(`<button></button><!---->`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(1)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+
+    // should not mount when toggling
+    triggerEvent(root.children[1] as TestElement, 'click')
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<button></button><div>1</div>`)
+    expect(unmountSpy).toHaveBeenCalledTimes(1)
+    expect(mountSpy).toHaveBeenCalledTimes(1)
+    expect(activeSpy).toHaveBeenCalledTimes(2)
+    expect(deactiveSpy).toHaveBeenCalledTimes(1)
+  })
+
   test('reload class component', async () => {
     const root = nodeOps.createElement('div')
     const childId = 'test4-child'
@@ -231,13 +385,13 @@ describe('hot module replacement', () => {
           return { count: 0 }
         },
         unmounted: unmountSpy,
-        render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+        render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
       }
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
-      render: () => h(Child)
+      render: () => h(Child),
     }
 
     render(h(Parent), root)
@@ -250,7 +404,7 @@ describe('hot module replacement', () => {
           return { count: 1 }
         },
         mounted: mountSpy,
-        render: compileToFunction(`<div @click="count++">{{ count }}</div>`)
+        render: compileToFunction(`<div @click="count++">{{ count }}</div>`),
       }
     }
 
@@ -277,29 +431,29 @@ describe('hot module replacement', () => {
       data() {
         return { count: 0 }
       },
-      render: compileToFunction(template)
+      render: compileToFunction(template),
     }
     createRecord(id, Comp)
 
     render(h(Comp), root)
     expect(serializeInner(root)).toBe(
-      `<div><div>0</div><button>++</button></div>`
+      `<div><div>0</div><button>++</button></div>`,
     )
 
     // 1. click to trigger update
     triggerEvent((root as any).children[0].children[1], 'click')
     await nextTick()
     expect(serializeInner(root)).toBe(
-      `<div><div>1</div><button>++</button></div>`
+      `<div><div>1</div><button>++</button></div>`,
     )
 
     // 2. trigger HMR
     rerender(
       id,
-      compileToFunction(template.replace(`<button`, `<button class="foo"`))
+      compileToFunction(template.replace(`<button`, `<button class="foo"`)),
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>1</div><button class="foo">++</button></div>`
+      `<div><div>1</div><button class="foo">++</button></div>`,
     )
   })
 
@@ -312,16 +466,16 @@ describe('hot module replacement', () => {
     const Child: ComponentOptions = {
       __hmrId: childId,
       props: {
-        msg: String
+        msg: String,
       },
-      render: compileToFunction(`<div>{{ msg }}</div>`)
+      render: compileToFunction(`<div>{{ msg }}</div>`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
       __hmrId: parentId,
       components: { Child },
-      render: compileToFunction(`<Child msg="foo" />`)
+      render: compileToFunction(`<Child msg="foo" />`),
     }
     createRecord(parentId, Parent)
 
@@ -340,14 +494,14 @@ describe('hot module replacement', () => {
 
     const Child: ComponentOptions = {
       __hmrId: childId,
-      render: compileToFunction(`<div>child</div>`)
+      render: compileToFunction(`<div>child</div>`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
       __hmrId: parentId,
       components: { Child },
-      render: compileToFunction(`<Child class="test" />`)
+      render: compileToFunction(`<Child class="test" />`),
     }
     createRecord(parentId, Parent)
 
@@ -367,7 +521,7 @@ describe('hot module replacement', () => {
 
     const Child: ComponentOptions = {
       __hmrId: childId,
-      render: compileToFunction(`<div>child</div>`)
+      render: compileToFunction(`<div>child</div>`),
     }
     createRecord(childId, Child)
 
@@ -376,18 +530,18 @@ describe('hot module replacement', () => {
     for (let i = 0; i < numberOfParents; i++) {
       const parentId = `${parent}${i}`
       const parentComp: ComponentOptions = {
-        __hmrId: parentId
+        __hmrId: parentId,
       }
       components.push(parentComp)
       if (i === 0) {
         parentComp.render = compileToFunction(`<Child />`)
         parentComp.components = {
-          Child
+          Child,
         }
       } else {
         parentComp.render = compileToFunction(`<Parent />`)
         parentComp.components = {
-          Parent: components[i - 1]
+          Parent: components[i - 1],
         }
       }
 
@@ -414,7 +568,7 @@ describe('hot module replacement', () => {
         return {
           // style is used to ensure that the div tag will be tracked by Teleport
           style: {},
-          target
+          target,
         }
       },
       render: compileToFunction(`
@@ -423,7 +577,7 @@ describe('hot module replacement', () => {
             <slot/>
           </div>
         </teleport>
-      `)
+      `),
     }
 
     const Parent: ComponentOptions = {
@@ -435,13 +589,13 @@ describe('hot module replacement', () => {
             <div>1</div>
           </template>
         </Child>
-      `)
+      `),
     }
     createRecord(parentId, Parent)
 
     render(h(Parent), root)
     expect(serializeInner(root)).toBe(
-      `<!--teleport start--><!--teleport end-->`
+      `<!--teleport start--><!--teleport end-->`,
     )
     expect(serializeInner(target)).toBe(`<div style={}><div>1</div></div>`)
 
@@ -454,13 +608,13 @@ describe('hot module replacement', () => {
           <div>2</div>
         </template>
       </Child>
-    `)
+    `),
     )
     expect(serializeInner(root)).toBe(
-      `<!--teleport start--><!--teleport end-->`
+      `<!--teleport start--><!--teleport end-->`,
     )
     expect(serializeInner(target)).toBe(
-      `<div style={}><div>1</div><div>2</div></div>`
+      `<div style={}><div>1</div><div>2</div></div>`,
     )
   })
 
@@ -475,12 +629,12 @@ describe('hot module replacement', () => {
       created: createSpy1,
       render() {
         return h('div')
-      }
+      },
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
-      render: () => h(Child)
+      render: () => h(Child),
     }
 
     const app = createApp(Parent)
@@ -496,7 +650,7 @@ describe('hot module replacement', () => {
       created: createSpy2,
       render() {
         return h('div')
-      }
+      },
     })
     await nextTick()
     expect(createSpy1).toHaveBeenCalledTimes(1)
@@ -508,7 +662,7 @@ describe('hot module replacement', () => {
     const id = 'no-active-instance-rerender'
     const Foo: ComponentOptions = {
       __hmrId: id,
-      render: () => 'foo'
+      render: () => 'foo',
     }
 
     createRecord(id, Foo)
@@ -523,13 +677,13 @@ describe('hot module replacement', () => {
     const id = 'no-active-instance-reload'
     const Foo: ComponentOptions = {
       __hmrId: id,
-      render: () => 'foo'
+      render: () => 'foo',
     }
 
     createRecord(id, Foo)
     reload(id, {
       __hmrId: id,
-      render: () => 'bar'
+      render: () => 'bar',
     })
 
     const root = nodeOps.createElement('div')
@@ -548,16 +702,16 @@ describe('hot module replacement', () => {
       computed: {
         slotContent() {
           return this.$slots.default?.()
-        }
+        },
       },
-      render: compileToFunction(`<component :is="() => slotContent" />`)
+      render: compileToFunction(`<component :is="() => slotContent" />`),
     }
     createRecord(childId, Child)
 
     const Parent: ComponentOptions = {
       __hmrId: parentId,
       components: { Child },
-      render: compileToFunction(`<Child>1</Child>`)
+      render: compileToFunction(`<Child>1</Child>`),
     }
     createRecord(parentId, Parent)
 
@@ -567,4 +721,40 @@ describe('hot module replacement', () => {
     rerender(parentId, compileToFunction(`<Child>2</Child>`))
     expect(serializeInner(root)).toBe(`2`)
   })
+
+  // #6978, #7138, #7114
+  test('hoisted children array inside v-for', () => {
+    const root = nodeOps.createElement('div')
+    const appId = 'test-app-id'
+    const App: ComponentOptions = {
+      __hmrId: appId,
+      render: compileToFunction(
+        `<div v-for="item of 2">
+          <div>1</div>
+        </div>
+        <p>2</p>
+        <p>3</p>`,
+      ),
+    }
+    createRecord(appId, App)
+
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(
+      `<div><div>1</div></div><div><div>1</div></div><p>2</p><p>3</p>`,
+    )
+
+    // move the <p>3</p> into the <div>1</div>
+    rerender(
+      appId,
+      compileToFunction(
+        `<div v-for="item of 2">
+          <div>1<p>3</p></div>
+        </div>
+        <p>2</p>`,
+      ),
+    )
+    expect(serializeInner(root)).toBe(
+      `<div><div>1<p>3</p></div></div><div><div>1<p>3</p></div></div><p>2</p>`,
+    )
+  })
 })
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index d3cfd47c6be..da00d763599 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -3,37 +3,42 @@
  */
 
 import {
-  createSSRApp,
-  h,
-  ref,
-  nextTick,
-  VNode,
+  Suspense,
   Teleport,
+  Transition,
+  type VNode,
+  createCommentVNode,
+  createSSRApp,
   createStaticVNode,
-  Suspense,
-  onMounted,
-  defineAsyncComponent,
-  defineComponent,
   createTextVNode,
   createVNode,
-  withDirectives,
+  defineAsyncComponent,
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  ref,
+  renderSlot,
+  useCssVars,
   vModelCheckbox,
-  renderSlot
+  vShow,
+  withDirectives,
 } from '@vue/runtime-dom'
-import { renderToString, SSRContext } from '@vue/server-renderer'
-import { PatchFlags } from '../../shared/src'
+import { type SSRContext, renderToString } from '@vue/server-renderer'
+import { PatchFlags } from '@vue/shared'
+import { vShowOldKey } from '../../runtime-dom/src/directives/vShow'
 
 function mountWithHydration(html: string, render: () => any) {
   const container = document.createElement('div')
   container.innerHTML = html
   const app = createSSRApp({
-    render
+    render,
   })
   return {
     vnode: app.mount(container).$.subTree as VNode<Node, Element> & {
       el: Element
     },
-    container
+    container,
   }
 }
 
@@ -59,7 +64,7 @@ describe('SSR hydration', () => {
 
   test('empty text', async () => {
     const { container } = mountWithHydration('<div></div>', () =>
-      h('div', createTextVNode(''))
+      h('div', createTextVNode('')),
     )
     expect(container.textContent).toBe('')
     expect(`Hydration children mismatch in <div>`).not.toHaveBeenWarned()
@@ -74,7 +79,7 @@ describe('SSR hydration', () => {
   test('static', () => {
     const html = '<div><span>hello</span></div>'
     const { vnode, container } = mountWithHydration(html, () =>
-      createStaticVNode('', 1)
+      createStaticVNode('', 1),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.el.outerHTML).toBe(html)
@@ -105,7 +110,7 @@ describe('SSR hydration', () => {
   test('static (with text node as starting node)', () => {
     const html = ` A <span>foo</span> B`
     const { vnode, container } = mountWithHydration(html, () =>
-      createStaticVNode(` A <span>foo</span> B`, 3)
+      createStaticVNode(` A <span>foo</span> B`, 3),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.anchor).toBe(container.lastChild)
@@ -115,7 +120,7 @@ describe('SSR hydration', () => {
   test('static with content adoption', () => {
     const html = ` A <span>foo</span> B`
     const { vnode, container } = mountWithHydration(html, () =>
-      createStaticVNode(``, 3)
+      createStaticVNode(``, 3),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(vnode.anchor).toBe(container.lastChild)
@@ -127,7 +132,7 @@ describe('SSR hydration', () => {
     const msg = ref('foo')
     const { vnode, container } = mountWithHydration(
       '<div class="foo">foo</div>',
-      () => h('div', { class: msg.value }, msg.value)
+      () => h('div', { class: msg.value }, msg.value),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(container.firstChild!.textContent).toBe('foo')
@@ -144,15 +149,15 @@ describe('SSR hydration', () => {
       () =>
         h('div', [
           h('span', msg.value),
-          h('span', { class: msg.value, onClick: fn })
-        ])
+          h('span', { class: msg.value, onClick: fn }),
+        ]),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect((vnode.children as VNode[])[0].el).toBe(
-      container.firstChild!.childNodes[0]
+      container.firstChild!.childNodes[0],
     )
     expect((vnode.children as VNode[])[1].el).toBe(
-      container.firstChild!.childNodes[1]
+      container.firstChild!.childNodes[1],
     )
 
     // event handler
@@ -167,7 +172,7 @@ describe('SSR hydration', () => {
   test('element with ref', () => {
     const el = ref()
     const { vnode, container } = mountWithHydration('<div></div>', () =>
-      h('div', { ref: el })
+      h('div', { ref: el }),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(el.value).toBe(vnode.el)
@@ -180,13 +185,16 @@ describe('SSR hydration', () => {
       '<div><!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]--></div>',
       () =>
         h('div', [
-          [h('span', msg.value), [h('span', { class: msg.value, onClick: fn })]]
-        ])
+          [
+            h('span', msg.value),
+            [h('span', { class: msg.value, onClick: fn })],
+          ],
+        ]),
     )
     expect(vnode.el).toBe(container.firstChild)
 
     expect(vnode.el.innerHTML).toBe(
-      `<!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]-->`
+      `<!--[--><span>foo</span><!--[--><span class="foo"></span><!--]--><!--]-->`,
     )
 
     // start fragment 1
@@ -220,7 +228,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(vnode.el.innerHTML).toBe(
-      `<!--[--><span>bar</span><!--[--><span class="bar"></span><!--]--><!--]-->`
+      `<!--[--><span>bar</span><!--[--><span class="bar"></span><!--]--><!--]-->`,
     )
   })
 
@@ -237,8 +245,8 @@ describe('SSR hydration', () => {
       () =>
         h(Teleport, { to: '#teleport' }, [
           h('span', msg.value),
-          h('span', { class: msg.value, onClick: fn })
-        ])
+          h('span', { class: msg.value, onClick: fn }),
+        ]),
     )
 
     expect(vnode.el).toBe(container.firstChild)
@@ -246,10 +254,10 @@ describe('SSR hydration', () => {
 
     expect(vnode.target).toBe(teleportContainer)
     expect((vnode.children as VNode[])[0].el).toBe(
-      teleportContainer.childNodes[0]
+      teleportContainer.childNodes[0],
     )
     expect((vnode.children as VNode[])[1].el).toBe(
-      teleportContainer.childNodes[1]
+      teleportContainer.childNodes[1],
     )
     expect(vnode.targetAnchor).toBe(teleportContainer.childNodes[2])
 
@@ -260,7 +268,7 @@ describe('SSR hydration', () => {
     msg.value = 'bar'
     await nextTick()
     expect(teleportContainer.innerHTML).toBe(
-      `<span>bar</span><span class="bar"></span><!--teleport anchor-->`
+      `<span>bar</span><span class="bar"></span><!--teleport anchor-->`,
     )
   })
 
@@ -272,12 +280,12 @@ describe('SSR hydration', () => {
     const Comp = () => [
       h(Teleport, { to: '#teleport2' }, [
         h('span', msg.value),
-        h('span', { class: msg.value, onClick: fn1 })
+        h('span', { class: msg.value, onClick: fn1 }),
       ]),
       h(Teleport, { to: '#teleport2' }, [
         h('span', msg.value + '2'),
-        h('span', { class: msg.value + '2', onClick: fn2 })
-      ])
+        h('span', { class: msg.value + '2', onClick: fn2 }),
+      ]),
     ]
 
     const teleportContainer = document.createElement('div')
@@ -285,12 +293,12 @@ describe('SSR hydration', () => {
     const ctx: SSRContext = {}
     const mainHtml = await renderToString(h(Comp), ctx)
     expect(mainHtml).toMatchInlineSnapshot(
-      `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`
+      `"<!--[--><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--><!--]-->"`,
     )
 
     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
@@ -307,13 +315,13 @@ describe('SSR hydration', () => {
 
     expect(teleportVnode1.target).toBe(teleportContainer)
     expect((teleportVnode1 as any).children[0].el).toBe(
-      teleportContainer.childNodes[0]
+      teleportContainer.childNodes[0],
     )
     expect(teleportVnode1.targetAnchor).toBe(teleportContainer.childNodes[2])
 
     expect(teleportVnode2.target).toBe(teleportContainer)
     expect((teleportVnode2 as any).children[0].el).toBe(
-      teleportContainer.childNodes[3]
+      teleportContainer.childNodes[3],
     )
     expect(teleportVnode2.targetAnchor).toBe(teleportContainer.childNodes[5])
 
@@ -327,7 +335,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-->"`,
     )
   })
 
@@ -340,9 +348,9 @@ describe('SSR hydration', () => {
       h('div', 'foo'),
       h(Teleport, { to: '#teleport3', disabled: true }, [
         h('span', msg.value),
-        h('span', { class: msg.value, onClick: fn1 })
+        h('span', { class: msg.value, onClick: fn1 }),
       ]),
-      h('div', { class: msg.value + '2', onClick: fn2 }, 'bar')
+      h('div', { class: msg.value + '2', onClick: fn2 }, 'bar'),
     ]
 
     const teleportContainer = document.createElement('div')
@@ -350,7 +358,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']
@@ -368,10 +376,10 @@ describe('SSR hydration', () => {
     const teleportVnode = children[1]
     expect(teleportVnode.el).toBe(container.childNodes[2])
     expect((teleportVnode.children as VNode[])[0].el).toBe(
-      container.childNodes[3]
+      container.childNodes[3],
     )
     expect((teleportVnode.children as VNode[])[1].el).toBe(
-      container.childNodes[4]
+      container.childNodes[4],
     )
     expect(teleportVnode.anchor).toBe(container.childNodes[5])
     expect(children[2].el).toBe(container.childNodes[6])
@@ -389,10 +397,32 @@ 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><!--]-->"`,
     )
   })
 
+  // #6152
+  test('Teleport (disabled + as component root)', () => {
+    const { container } = mountWithHydration(
+      '<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->',
+      () => [
+        h('div', 'Parent fragment'),
+        h(() =>
+          h(Teleport, { to: 'body', disabled: true }, [
+            h('div', 'Teleport content'),
+          ]),
+        ),
+      ],
+    )
+    expect(document.body.innerHTML).toBe('')
+    expect(container.innerHTML).toBe(
+      '<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->',
+    )
+    expect(
+      `Hydration completed but contains mismatches.`,
+    ).not.toHaveBeenWarned()
+  })
+
   test('Teleport (as component root)', () => {
     const teleportContainer = document.createElement('div')
     teleportContainer.id = 'teleport4'
@@ -402,12 +432,12 @@ describe('SSR hydration', () => {
     const wrapper = {
       render() {
         return h(Teleport, { to: '#teleport4' }, ['hello'])
-      }
+      },
     }
 
     const { vnode, container } = mountWithHydration(
       '<div><!--teleport start--><!--teleport end--><div></div></div>',
-      () => h('div', [h(wrapper), h('div')])
+      () => h('div', [h(wrapper), h('div')]),
     )
     expect(vnode.el).toBe(container.firstChild)
     // component el
@@ -432,8 +462,8 @@ describe('SSR hydration', () => {
       '<!--teleport start--><!--teleport end-->',
       () =>
         h(Teleport, { to: '#teleport5' }, [
-          h('div', [h(Teleport, { to: '#teleport5' }, [h('div', 'child')])])
-        ])
+          h('div', [h(Teleport, { to: '#teleport5' }, [h('div', 'child')])]),
+        ]),
     )
 
     expect(vnode.el).toBe(container.firstChild)
@@ -450,7 +480,7 @@ describe('SSR hydration', () => {
 
     expect(childTeleportVNode.targetAnchor).toBe(teleportContainer.lastChild)
     expect(childTeleportVNode.children[0].el).toBe(
-      teleportContainer.lastChild?.previousSibling
+      teleportContainer.lastChild?.previousSibling,
     )
   })
 
@@ -466,8 +496,8 @@ describe('SSR hydration', () => {
           count: 0,
           text: 'hello',
           style: {
-            color: 'red'
-          }
+            color: 'red',
+          },
         }
       },
       mounted() {
@@ -482,7 +512,7 @@ describe('SSR hydration', () => {
         <span class="text">{{ text }}</span>
         <input v-model="text">
       </div>
-      `
+      `,
     }
 
     const App = {
@@ -504,11 +534,11 @@ describe('SSR hydration', () => {
           <span>hello</span>
         </div>`,
       components: {
-        Child
+        Child,
       },
       methods: {
-        log
-      }
+        log,
+      },
     }
 
     const container = document.createElement('div')
@@ -560,7 +590,7 @@ describe('SSR hydration', () => {
       template: `
         <div>
           <button class="parent-click" @click="throwError">click me</button>
-        </div>`
+        </div>`,
     }
 
     const container = document.createElement('div')
@@ -587,7 +617,7 @@ describe('SSR hydration', () => {
       template: `
         <div>
           <input class="parent-click" @blur="throwError"/>
-        </div>`
+        </div>`,
     }
 
     const container = document.createElement('div')
@@ -613,14 +643,14 @@ describe('SSR hydration', () => {
             {
               onClick: () => {
                 count.value++
-              }
+              },
             },
-            count.value
+            count.value,
           )
-      }
+      },
     }
     const { vnode, container } = mountWithHydration('<span>0</span>', () =>
-      h(Suspense, () => h(AsyncChild))
+      h(Suspense, () => h(AsyncChild)),
     )
     expect(vnode.el).toBe(container.firstChild)
     // wait for hydration to finish
@@ -650,11 +680,11 @@ describe('SSR hydration', () => {
             {
               onClick: () => {
                 count.value++
-              }
+              },
             },
-            count.value
+            count.value,
           )
-      }
+      },
     })
 
     const done = vi.fn()
@@ -667,18 +697,18 @@ describe('SSR hydration', () => {
         </div>
       </Suspense>`,
       components: {
-        AsyncChild
+        AsyncChild,
       },
       methods: {
-        done
-      }
+        done,
+      },
     }
 
     const container = document.createElement('div')
     // server render
     container.innerHTML = await renderToString(h(App))
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<div><span>1</span><span>2</span></div>"`
+      `"<div><span>1</span><span>2</span></div>"`,
     )
     // reset asyncDeps from ssr
     asyncDeps.length = 0
@@ -695,21 +725,21 @@ describe('SSR hydration', () => {
     // should flush buffered effects
     expect(mountedCalls).toMatchObject([1, 2])
     expect(container.innerHTML).toMatch(
-      `<div><span>1</span><span>2</span></div>`
+      `<div><span>1</span><span>2</span></div>`,
     )
 
     const span1 = container.querySelector('span')!
     triggerEvent('click', span1)
     await nextTick()
     expect(container.innerHTML).toMatch(
-      `<div><span>2</span><span>2</span></div>`
+      `<div><span>2</span><span>2</span></div>`,
     )
 
     const span2 = span1.nextSibling as Element
     triggerEvent('click', span2)
     await nextTick()
     expect(container.innerHTML).toMatch(
-      `<div><span>2</span><span>3</span></div>`
+      `<div><span>2</span><span>3</span></div>`,
     )
   })
 
@@ -719,9 +749,9 @@ describe('SSR hydration', () => {
       h(
         'button',
         {
-          onClick: spy
+          onClick: spy,
         },
-        'hello!'
+        'hello!',
       )
 
     let serverResolve: any
@@ -729,13 +759,13 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           serverResolve = r
-        })
+        }),
     )
 
     const App = {
       render() {
         return ['hello', h(AsyncComp), 'world']
-      }
+      },
     }
 
     // server render
@@ -743,7 +773,7 @@ describe('SSR hydration', () => {
     serverResolve(Comp)
     const html = await htmlPromise
     expect(html).toMatchInlineSnapshot(
-      `"<!--[-->hello<button>hello!</button>world<!--]-->"`
+      `"<!--[-->hello<button>hello!</button>world<!--]-->"`,
     )
 
     // hydration
@@ -752,7 +782,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           clientResolve = r
-        })
+        }),
     )
 
     const container = document.createElement('div')
@@ -776,29 +806,29 @@ describe('SSR hydration', () => {
     const Comp = {
       render() {
         return h('h1', 'Async component')
-      }
+      },
     }
     let serverResolve: any
     let AsyncComp = defineAsyncComponent(
       () =>
         new Promise(r => {
           serverResolve = r
-        })
+        }),
     )
 
-    const bol = ref(true)
+    const toggle = ref(true)
     const App = {
       setup() {
         onMounted(() => {
           // change state, this makes updateComponent(AsyncComp) execute before
           // the async component is resolved
-          bol.value = false
+          toggle.value = false
         })
 
         return () => {
-          return [bol.value ? 'hello' : 'world', h(AsyncComp)]
+          return [toggle.value ? 'hello' : 'world', h(AsyncComp)]
         }
-      }
+      },
     }
 
     // server render
@@ -806,7 +836,7 @@ describe('SSR hydration', () => {
     serverResolve(Comp)
     const html = await htmlPromise
     expect(html).toMatchInlineSnapshot(
-      `"<!--[-->hello<h1>Async component</h1><!--]-->"`
+      `"<!--[-->hello<h1>Async component</h1><!--]-->"`,
     )
 
     // hydration
@@ -815,7 +845,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           clientResolve = r
-        })
+        }),
     )
 
     const container = document.createElement('div')
@@ -829,7 +859,148 @@ describe('SSR hydration', () => {
     // should be hydrated now
     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<!--[-->world<h1>Async component</h1><!--]-->"`
+      `"<!--[-->world<h1>Async component</h1><!--]-->"`,
+    )
+  })
+
+  test('hydrate safely when property used by async setup changed before render', async () => {
+    const toggle = ref(true)
+
+    const AsyncComp = {
+      async setup() {
+        await new Promise<void>(r => setTimeout(r, 10))
+        return () => h('h1', 'Async component')
+      },
+    }
+
+    const AsyncWrapper = {
+      render() {
+        return h(AsyncComp)
+      },
+    }
+
+    const SiblingComp = {
+      setup() {
+        toggle.value = false
+        return () => h('span')
+      },
+    }
+
+    const App = {
+      setup() {
+        return () =>
+          h(
+            Suspense,
+            {},
+            {
+              default: () => [
+                h('main', {}, [
+                  h(AsyncWrapper, {
+                    prop: toggle.value ? 'hello' : 'world',
+                  }),
+                  h(SiblingComp),
+                ]),
+              ],
+            },
+          )
+      },
+    }
+
+    // server render
+    const html = await renderToString(h(App))
+
+    expect(html).toMatchInlineSnapshot(
+      `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
+    )
+
+    expect(toggle.value).toBe(false)
+
+    // hydration
+
+    // reset the value
+    toggle.value = true
+    expect(toggle.value).toBe(true)
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    createSSRApp(App).mount(container)
+
+    await new Promise(r => setTimeout(r, 10))
+
+    expect(toggle.value).toBe(false)
+
+    // should be hydrated now
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
+    )
+  })
+
+  test('hydrate safely when property used by deep nested async setup changed before render', async () => {
+    const toggle = ref(true)
+
+    const AsyncComp = {
+      async setup() {
+        await new Promise<void>(r => setTimeout(r, 10))
+        return () => h('h1', 'Async component')
+      },
+    }
+
+    const AsyncWrapper = { render: () => h(AsyncComp) }
+    const AsyncWrapperWrapper = { render: () => h(AsyncWrapper) }
+
+    const SiblingComp = {
+      setup() {
+        toggle.value = false
+        return () => h('span')
+      },
+    }
+
+    const App = {
+      setup() {
+        return () =>
+          h(
+            Suspense,
+            {},
+            {
+              default: () => [
+                h('main', {}, [
+                  h(AsyncWrapperWrapper, {
+                    prop: toggle.value ? 'hello' : 'world',
+                  }),
+                  h(SiblingComp),
+                ]),
+              ],
+            },
+          )
+      },
+    }
+
+    // server render
+    const html = await renderToString(h(App))
+
+    expect(html).toMatchInlineSnapshot(
+      `"<main><h1 prop="hello">Async component</h1><span></span></main>"`,
+    )
+
+    expect(toggle.value).toBe(false)
+
+    // hydration
+
+    // reset the value
+    toggle.value = true
+    expect(toggle.value).toBe(true)
+
+    const container = document.createElement('div')
+    container.innerHTML = html
+    createSSRApp(App).mount(container)
+
+    await new Promise(r => setTimeout(r, 10))
+
+    expect(toggle.value).toBe(false)
+
+    // should be hydrated now
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1 prop="world">Async component</h1><span></span></main>"`,
     )
   })
 
@@ -840,7 +1011,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           resolve = r
-        })
+        }),
     )
 
     const show = ref(true)
@@ -850,7 +1021,7 @@ describe('SSR hydration', () => {
     createSSRApp({
       render() {
         return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
-      }
+      },
     }).mount(root)
 
     show.value = false
@@ -865,7 +1036,7 @@ describe('SSR hydration', () => {
       () =>
         new Promise(r => {
           resolve = r
-        })
+        }),
     )
 
     const show = ref(true)
@@ -875,7 +1046,7 @@ describe('SSR hydration', () => {
     createSSRApp({
       render() {
         return h('div', [show.value ? h(AsyncComp) : h('div', 'hi')])
-      }
+      },
     }).mount(root)
 
     show.value = false
@@ -887,7 +1058,7 @@ describe('SSR hydration', () => {
   test('elements with camel-case in svg ', () => {
     const { vnode, container } = mountWithHydration(
       '<animateTransform></animateTransform>',
-      () => h('animateTransform')
+      () => h('animateTransform'),
     )
     expect(vnode.el).toBe(container.firstChild)
     expect(`Hydration node mismatch`).not.toHaveBeenWarned()
@@ -897,7 +1068,7 @@ describe('SSR hydration', () => {
     const svgContainer = document.createElement('svg')
     svgContainer.innerHTML = '<g></g>'
     const app = createSSRApp({
-      render: () => h('g')
+      render: () => h('g'),
     })
 
     expect(
@@ -905,8 +1076,18 @@ describe('SSR hydration', () => {
         app.mount(svgContainer).$.subTree as VNode<Node, Element> & {
           el: Element
         }
-      ).el instanceof SVGElement
+      ).el instanceof SVGElement,
+    )
+  })
+
+  test('force hydrate prop with `.prop` modifier', () => {
+    const { container } = mountWithHydration('<input type="checkbox">', () =>
+      h('input', {
+        type: 'checkbox',
+        '.indeterminate': true,
+      }),
     )
+    expect((container.firstChild! as any).indeterminate).toBe(true)
   })
 
   test('force hydrate input v-model with non-string value bindings', () => {
@@ -919,22 +1100,36 @@ describe('SSR hydration', () => {
             { type: 'checkbox', 'true-value': true },
             null,
             PatchFlags.PROPS,
-            ['true-value']
+            ['true-value'],
           ),
-          [[vModelCheckbox, true]]
-        )
+          [[vModelCheckbox, true]],
+        ),
     )
     expect((container.firstChild as any)._trueValue).toBe(true)
   })
 
+  test('force hydrate checkbox with indeterminate', () => {
+    const { container } = mountWithHydration(
+      '<input type="checkbox" indeterminate>',
+      () =>
+        createVNode(
+          'input',
+          { type: 'checkbox', indeterminate: '' },
+          null,
+          PatchFlags.HOISTED,
+        ),
+    )
+    expect((container.firstChild as any).indeterminate).toBe(true)
+  })
+
   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...
-          createVNode('option', { value: true }, null, -1 /* HOISTED */)
-        ])
+          createVNode('option', { value: true }, null, -1 /* HOISTED */),
+        ]),
     )
     expect((container.firstChild!.firstChild as any)._value).toBe(true)
   })
@@ -944,12 +1139,12 @@ describe('SSR hydration', () => {
     const Comp = {
       render(this: any) {
         return renderSlot(this.$slots, 'default', {}, () => [
-          createTextVNode('')
+          createTextVNode(''),
         ])
-      }
+      },
     }
     const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () =>
-      h(Comp)
+      h(Comp),
     )
     expect(container.childNodes.length).toBe(3)
     const text = container.childNodes[1]
@@ -970,9 +1165,9 @@ describe('SSR hydration', () => {
 
         return () =>
           h('button', {
-            onClick: () => count.value++
+            onClick: () => count.value++,
           })
-      }
+      },
     })
 
     const app = createSSRApp(App)
@@ -989,11 +1184,114 @@ describe('SSR hydration', () => {
   // #6637
   test('stringified root fragment', () => {
     mountWithHydration(`<!--[--><div></div><!--]-->`, () =>
-      createStaticVNode(`<div></div>`, 1)
+      createStaticVNode(`<div></div>`, 1),
+    )
+    expect(`mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('transition appear', () => {
+    const { vnode, container } = mountWithHydration(
+      `<template><div>foo</div></template>`,
+      () =>
+        h(
+          Transition,
+          { appear: true },
+          {
+            default: () => h('div', 'foo'),
+          },
+        ),
+    )
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="v-enter-from v-enter-active"
+      >
+        foo
+      </div>
+    `)
+    expect(vnode.el).toBe(container.firstChild)
+    expect(`mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('transition appear with v-if', () => {
+    const show = false
+    const { vnode, container } = mountWithHydration(
+      `<template><!----></template>`,
+      () =>
+        h(
+          Transition,
+          { appear: true },
+          {
+            default: () => (show ? h('div', 'foo') : createCommentVNode('')),
+          },
+        ),
+    )
+    expect(container.firstChild).toMatchInlineSnapshot('<!---->')
+    expect(vnode.el).toBe(container.firstChild)
+    expect(`mismatch`).not.toHaveBeenWarned()
+  })
+
+  test('transition appear with v-show', () => {
+    const show = false
+    const { vnode, container } = mountWithHydration(
+      `<template><div style="display: none;">foo</div></template>`,
+      () =>
+        h(
+          Transition,
+          { appear: true },
+          {
+            default: () =>
+              withDirectives(createVNode('div', null, 'foo'), [[vShow, show]]),
+          },
+        ),
     )
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="v-enter-from v-enter-active"
+        style="display: none;"
+      >
+        foo
+      </div>
+    `)
+    expect((container.firstChild as any)[vShowOldKey]).toBe('')
+    expect(vnode.el).toBe(container.firstChild)
     expect(`mismatch`).not.toHaveBeenWarned()
   })
 
+  test('transition appear w/ event listener', async () => {
+    const container = document.createElement('div')
+    container.innerHTML = `<template><button>0</button></template>`
+    createSSRApp({
+      data() {
+        return {
+          count: 0,
+        }
+      },
+      template: `
+        <Transition appear>
+          <button @click="count++">{{count}}</button>
+        </Transition>
+      `,
+    }).mount(container)
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        0
+      </button>
+    `)
+
+    triggerEvent('click', container.querySelector('button')!)
+    await nextTick()
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <button
+        class="v-enter-from v-enter-active"
+      >
+        1
+      </button>
+    `)
+  })
+
   describe('mismatch handling', () => {
     test('text node', () => {
       const { container } = mountWithHydration(`foo`, () => 'bar')
@@ -1003,35 +1301,35 @@ describe('SSR hydration', () => {
 
     test('element text content', () => {
       const { container } = mountWithHydration(`<div>foo</div>`, () =>
-        h('div', 'bar')
+        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', () => {
       const { container } = mountWithHydration(`<div></div>`, () =>
-        h('div', [h('span', 'foo'), h('span', 'bar')])
+        h('div', [h('span', 'foo'), h('span', 'bar')]),
       )
       expect(container.innerHTML).toBe(
-        '<div><span>foo</span><span>bar</span></div>'
+        '<div><span>foo</span><span>bar</span></div>',
       )
-      expect(`Hydration children mismatch in <div>`).toHaveBeenWarned()
+      expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
 
     test('too many children', () => {
       const { container } = mountWithHydration(
         `<div><span>foo</span><span>bar</span></div>`,
-        () => h('div', [h('span', 'foo')])
+        () => 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', () => {
       const { container } = mountWithHydration(
         `<div><span>foo</span><span>bar</span></div>`,
-        () => h('div', [h('div', 'foo'), h('p', 'bar')])
+        () => h('div', [h('div', 'foo'), h('p', 'bar')]),
       )
       expect(container.innerHTML).toBe('<div><div>foo</div><p>bar</p></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarnedTimes(2)
@@ -1040,7 +1338,7 @@ describe('SSR hydration', () => {
     test('fragment mismatch removal', () => {
       const { container } = mountWithHydration(
         `<div><!--[--><div>foo</div><div>bar</div><!--]--></div>`,
-        () => h('div', [h('span', 'replaced')])
+        () => h('div', [h('span', 'replaced')]),
       )
       expect(container.innerHTML).toBe('<div><span>replaced</span></div>')
       expect(`Hydration node mismatch`).toHaveBeenWarned()
@@ -1049,10 +1347,10 @@ describe('SSR hydration', () => {
     test('fragment not enough children', () => {
       const { container } = mountWithHydration(
         `<div><!--[--><div>foo</div><!--]--><div>baz</div></div>`,
-        () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')])
+        () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
       )
       expect(container.innerHTML).toBe(
-        '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>'
+        '<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>',
       )
       expect(`Hydration node mismatch`).toHaveBeenWarned()
     })
@@ -1060,10 +1358,10 @@ describe('SSR hydration', () => {
     test('fragment too many children', () => {
       const { container } = mountWithHydration(
         `<div><!--[--><div>foo</div><div>bar</div><!--]--><div>baz</div></div>`,
-        () => h('div', [[h('div', 'foo')], h('div', 'baz')])
+        () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
       )
       expect(container.innerHTML).toBe(
-        '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>'
+        '<div><!--[--><div>foo</div><!--]--><div>baz</div></div>',
       )
       // fragment ends early and attempts to hydrate the extra <div>bar</div>
       // as 2nd fragment child.
@@ -1078,10 +1376,200 @@ describe('SSR hydration', () => {
       document.body.appendChild(teleportContainer)
 
       mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
-        h(Teleport, { to: '#teleport' }, [h('span', 'value')])
+        h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
       )
       expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
       expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
+
+    test('comment mismatch (element)', () => {
+      const { container } = mountWithHydration(`<div><span></span></div>`, () =>
+        h('div', [createCommentVNode('hi')]),
+      )
+      expect(container.innerHTML).toBe('<div><!--hi--></div>')
+      expect(`Hydration node mismatch`).toHaveBeenWarned()
+    })
+
+    test('comment mismatch (text)', () => {
+      const { container } = mountWithHydration(`<div>foobar</div>`, () =>
+        h('div', [createCommentVNode('hi')]),
+      )
+      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' }),
+      )
+      // SVG classes
+      mountWithHydration(`<svg class="foo bar"></svg>`, () =>
+        h('svg', { class: 'foo bar' }),
+      )
+      // class with different order
+      mountWithHydration(`<div class="foo bar"></div>`, () =>
+        h('div', { class: 'bar foo' }),
+      )
+      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;` }),
+      )
+      mountWithHydration(
+        `<div style="color:red; font-size: 12px;"></div>`,
+        () => h('div', { style: `font-size: 12px; color:red;` }),
+      )
+      mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        h('div', { style: { color: 'green' } }),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
+    test('style mismatch w/ v-show', () => {
+      mountWithHydration(`<div style="color:red;display:none"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
+    })
+
+    test('attr mismatch', () => {
+      mountWithHydration(`<div id="foo"></div>`, () => h('div', { id: 'foo' }))
+      mountWithHydration(`<div spellcheck></div>`, () =>
+        h('div', { spellcheck: '' }),
+      )
+      mountWithHydration(`<div></div>`, () => h('div', { id: undefined }))
+      // 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`).toHaveBeenWarnedTimes(1)
+
+      mountWithHydration(`<div id="bar"></div>`, () => h('div', { id: 'foo' }))
+      expect(`Hydration attribute mismatch`).toHaveBeenWarnedTimes(2)
+    })
+
+    test('attr special case: textarea value', () => {
+      mountWithHydration(`<textarea>foo</textarea>`, () =>
+        h('textarea', { value: 'foo' }),
+      )
+      mountWithHydration(`<textarea></textarea>`, () =>
+        h('textarea', { value: '' }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<textarea>foo</textarea>`, () =>
+        h('textarea', { value: 'bar' }),
+      )
+      expect(`Hydration attribute mismatch`).toHaveBeenWarned()
+    })
+
+    test('boolean attr handling', () => {
+      mountWithHydration(`<input />`, () => h('input', { readonly: false }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input readonly />`, () =>
+        h('input', { readonly: true }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input readonly="readonly" />`, () =>
+        h('input', { readonly: true }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('client value is null or undefined', () => {
+      mountWithHydration(`<div></div>`, () =>
+        h('div', { draggable: undefined }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input />`, () => h('input', { type: null }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn against object values', () => {
+      mountWithHydration(`<input />`, () => h('input', { from: {} }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn on falsy bindings of non-property keys', () => {
+      mountWithHydration(`<button />`, () => h('button', { href: undefined }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn on non-renderable option values', () => {
+      mountWithHydration(`<select><option>hello</option></select>`, () =>
+        h('select', [h('option', { value: ['foo'] }, 'hello')]),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
+    test('should not warn css v-bind', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="--foo:red;color:var(--foo);" />`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () => h('div', { style: { color: 'var(--foo)' } })
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
+
+    // #10317 - test case from #10325
+    test('css vars should only be added to expected on component root dom', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="--foo:red;"><div style="color:var(--foo);" /></div>`
+      const app = createSSRApp({
+        setup() {
+          useCssVars(() => ({
+            foo: 'red',
+          }))
+          return () =>
+            h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
+        },
+      })
+      app.mount(container)
+      expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+    })
   })
 })
diff --git a/packages/runtime-core/__tests__/misc.spec.ts b/packages/runtime-core/__tests__/misc.spec.ts
index 4cb93eb41cf..dd4ab64f499 100644
--- a/packages/runtime-core/__tests__/misc.spec.ts
+++ b/packages/runtime-core/__tests__/misc.spec.ts
@@ -1,4 +1,4 @@
-import { render, h, nodeOps, reactive, isReactive } from '@vue/runtime-test'
+import { h, isReactive, nodeOps, reactive, render } from '@vue/runtime-test'
 
 describe('misc', () => {
   test('component public instance should not be observable', () => {
@@ -7,7 +7,7 @@ describe('misc', () => {
       render() {},
       mounted() {
         instance = this
-      }
+      },
     }
     render(h(Comp), nodeOps.createElement('div'))
     expect(instance).toBeDefined()
diff --git a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
index 1de05b67b44..79e2867ad69 100644
--- a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
+++ b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
@@ -4,19 +4,21 @@
 // using DOM renderer because this case is mostly DOM-specific
 
 import {
+  Fragment,
+  type FunctionalComponent,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createElementVNode,
+  defineComponent,
   h,
-  render,
-  nextTick,
   mergeProps,
-  ref,
+  nextTick,
   onUpdated,
-  defineComponent,
   openBlock,
-  createBlock,
-  FunctionalComponent,
-  createCommentVNode,
-  Fragment,
-  withModifiers
+  ref,
+  render,
+  withModifiers,
 } from '@vue/runtime-dom'
 import { PatchFlags } from '@vue/shared'
 
@@ -41,9 +43,9 @@ describe('attribute fallthrough', () => {
             class: 'c' + count.value,
             style: { color: count.value ? 'red' : 'green' },
             onClick: inc,
-            'data-id': count.value + 1
+            'data-id': count.value + 1,
           })
-      }
+      },
     }
 
     const Child = {
@@ -54,11 +56,11 @@ describe('attribute fallthrough', () => {
             'div',
             {
               class: 'c2',
-              style: { fontWeight: 'bold' }
+              style: { fontWeight: 'bold' },
             },
-            props.foo
+            props.foo,
           )
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -103,7 +105,7 @@ describe('attribute fallthrough', () => {
         id: 'test',
         class: 'c' + count.value,
         style: { color: count.value ? 'red' : 'green' },
-        onClick: inc
+        onClick: inc,
       })
 
     const Child = (props: any) => {
@@ -112,9 +114,9 @@ describe('attribute fallthrough', () => {
         'div',
         {
           class: 'c2',
-          style: { fontWeight: 'bold' }
+          style: { fontWeight: 'bold' },
         },
-        props.foo
+        props.foo,
       )
     }
 
@@ -161,7 +163,7 @@ describe('attribute fallthrough', () => {
         id: 'test',
         class: 'c' + count.value,
         style: { color: count.value ? 'red' : 'green' },
-        onClick: inc
+        onClick: inc,
       })
 
     const Child = (props: { foo: number }) => {
@@ -170,9 +172,9 @@ describe('attribute fallthrough', () => {
         'div',
         {
           class: 'c2',
-          style: { fontWeight: 'bold' }
+          style: { fontWeight: 'bold' },
         },
-        props.foo
+        props.foo,
       )
     }
     Child.props = ['foo']
@@ -220,9 +222,9 @@ describe('attribute fallthrough', () => {
             id: 'test',
             class: 'c' + count.value,
             style: { color: count.value ? 'red' : 'green' },
-            onClick: inc
+            onClick: inc,
           })
-      }
+      },
     }
 
     const Child = {
@@ -232,13 +234,13 @@ describe('attribute fallthrough', () => {
         // this will result in merging the same attrs, but should be deduped by
         // `mergeProps`.
         return () => h(GrandChild, props)
-      }
+      },
     }
 
     const GrandChild = defineComponent({
       props: {
         id: String,
-        foo: Number
+        foo: Number,
       },
       setup(props) {
         onUpdated(grandChildUpdated)
@@ -248,11 +250,11 @@ describe('attribute fallthrough', () => {
             {
               id: props.id,
               class: 'c2',
-              style: { fontWeight: 'bold' }
+              style: { fontWeight: 'bold' },
             },
-            props.foo
+            props.foo,
           )
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -287,7 +289,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent' })
-      }
+      },
     }
 
     const Child = defineComponent({
@@ -295,7 +297,7 @@ describe('attribute fallthrough', () => {
       inheritAttrs: false,
       render() {
         return h('div', this.foo)
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -311,11 +313,11 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent' })
-      }
+      },
     }
 
     const mixin = {
-      inheritAttrs: false
+      inheritAttrs: false,
     }
 
     const Child = defineComponent({
@@ -323,7 +325,7 @@ describe('attribute fallthrough', () => {
       props: ['foo'],
       render() {
         return h('div', this.foo)
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -338,7 +340,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent' })
-      }
+      },
     }
 
     const Child = defineComponent({
@@ -349,13 +351,13 @@ describe('attribute fallthrough', () => {
           'div',
           mergeProps(
             {
-              class: 'child'
+              class: 'child',
             },
-            this.$attrs
+            this.$attrs,
           ),
-          this.foo
+          this.foo,
         )
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -370,14 +372,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = defineComponent({
       props: ['foo'],
       render() {
         return [h('div'), h('div')]
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -400,7 +402,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { onClick: inc })
-      }
+      },
     }
 
     const Child = defineComponent({
@@ -409,12 +411,12 @@ describe('attribute fallthrough', () => {
           'div',
           mergeProps(
             {
-              onClick: withModifiers(() => {}, ['prevent', 'stop'])
+              onClick: withModifiers(() => {}, ['prevent', 'stop']),
             },
-            this.$attrs
-          )
+            this.$attrs,
+          ),
         )
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -431,14 +433,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = defineComponent({
       props: ['foo'],
       render() {
         return [h('div'), h('div', this.$attrs)]
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -455,14 +457,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = defineComponent({
       props: ['foo'],
       setup(_props, { attrs }) {
         return () => [h('div'), h('div', attrs)]
-      }
+      },
     })
 
     const root = document.createElement('div')
@@ -479,12 +481,12 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child: FunctionalComponent = (_, { attrs }) => [
       h('div'),
-      h('div', attrs)
+      h('div', attrs),
     ]
 
     Child.props = ['foo']
@@ -502,7 +504,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child = (props: any) => [h('div'), h('div', { class: props.class })]
@@ -520,7 +522,7 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { foo: 1, class: 'parent', onBar: () => {} })
-      }
+      },
     }
 
     const Child: FunctionalComponent = () => [h('div'), h('div')]
@@ -543,14 +545,14 @@ describe('attribute fallthrough', () => {
     const Parent = {
       render() {
         return h(Child, { 'aria-hidden': aria.value, class: cls.value })
-      }
+      },
     }
 
     const Child = {
       props: [],
       render() {
         return openBlock(), createBlock('div')
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -577,20 +579,20 @@ describe('attribute fallthrough', () => {
           {
             onClick: () => {
               this.$emit('click', 'custom')
-            }
+            },
           },
-          'hello'
+          'hello',
         )
-      }
+      },
     })
 
     const onClick = vi.fn()
     const App = {
       render() {
         return h(Child, {
-          onClick
+          onClick,
         })
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -610,7 +612,7 @@ describe('attribute fallthrough', () => {
       return h('button', {
         onClick: () => {
           emit('click', 'custom')
-        }
+        },
       })
     }
     Child.emits = ['click']
@@ -619,9 +621,9 @@ describe('attribute fallthrough', () => {
     const App = {
       render() {
         return h(Child, {
-          onClick
+          onClick,
         })
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -640,7 +642,7 @@ describe('attribute fallthrough', () => {
     const Hello = {
       setup() {
         return () => h(Child, { class: 'foo', onClick: click })
-      }
+      },
     }
 
     const Child = {
@@ -653,12 +655,12 @@ describe('attribute fallthrough', () => {
             [
               createCommentVNode('hello'),
               h('button'),
-              createCommentVNode('world')
+              createCommentVNode('world'),
             ],
-            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
           )
         )
-      }
+      },
     }
 
     const root = document.createElement('div')
@@ -666,13 +668,65 @@ describe('attribute fallthrough', () => {
     render(h(Hello), root)
 
     expect(root.innerHTML).toBe(
-      `<!--hello--><button class="foo"></button><!--world-->`
+      `<!--hello--><button class="foo"></button><!--world-->`,
     )
     const button = root.children[0] as HTMLElement
     button.dispatchEvent(new CustomEvent('click'))
     expect(click).toHaveBeenCalled()
   })
 
+  it('should support fallthrough for nested dev root fragments', async () => {
+    const toggle = ref(false)
+
+    const Child = {
+      setup() {
+        return () => (
+          openBlock(),
+          createElementBlock(
+            Fragment,
+            null,
+            [
+              createCommentVNode(' comment A '),
+              toggle.value
+                ? (openBlock(), createElementBlock('span', { key: 0 }, 'Foo'))
+                : (openBlock(),
+                  createElementBlock(
+                    Fragment,
+                    { key: 1 },
+                    [
+                      createCommentVNode(' comment B '),
+                      createElementVNode('div', null, 'Bar'),
+                    ],
+                    PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+                  )),
+            ],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    }
+
+    const Root = {
+      setup() {
+        return () => (openBlock(), createBlock(Child, { class: 'red' }))
+      },
+    }
+
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    render(h(Root), root)
+
+    expect(root.innerHTML).toBe(
+      `<!-- comment A --><!-- comment B --><div class="red">Bar</div>`,
+    )
+
+    toggle.value = true
+    await nextTick()
+    expect(root.innerHTML).toBe(
+      `<!-- comment A --><span class=\"red\">Foo</span>`,
+    )
+  })
+
   // #1989
   it('should not fallthrough v-model listeners with corresponding declared prop', () => {
     let textFoo = ''
@@ -686,9 +740,9 @@ describe('attribute fallthrough', () => {
             modelValue: textFoo,
             'onUpdate:modelValue': (val: string) => {
               textFoo = val
-            }
+            },
           })
-      }
+      },
     })
 
     const Child = defineComponent({
@@ -700,9 +754,9 @@ describe('attribute fallthrough', () => {
             'onUpdate:modelValue': (val: string) => {
               textBar = val
               emit('update:modelValue', 'from Child')
-            }
+            },
           })
-      }
+      },
     })
 
     const GrandChild = defineComponent({
@@ -713,9 +767,9 @@ describe('attribute fallthrough', () => {
             onClick() {
               click()
               emit('update:modelValue', 'from GrandChild')
-            }
+            },
           })
-      }
+      },
     })
 
     const root = document.createElement('div')
diff --git a/packages/runtime-core/__tests__/rendererChildren.spec.ts b/packages/runtime-core/__tests__/rendererChildren.spec.ts
index 747626ad531..47024b674f4 100644
--- a/packages/runtime-core/__tests__/rendererChildren.spec.ts
+++ b/packages/runtime-core/__tests__/rendererChildren.spec.ts
@@ -1,12 +1,12 @@
 // reference: https://github.com/vuejs/vue/blob/dev/test/unit/modules/vdom/patch/children.spec.js
 import {
+  type TestElement,
+  TestNodeTypes,
   h,
-  render,
   nodeOps,
-  TestNodeTypes,
-  TestElement,
+  render,
   serialize,
-  serializeInner
+  serializeInner,
 } from '@vue/runtime-test'
 function toSpan(content: any) {
   if (typeof content === 'string') {
@@ -99,7 +99,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -114,7 +114,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -129,7 +129,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -144,7 +144,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -156,7 +156,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '4',
-      '5'
+      '5',
     ])
 
     render(h('div'), root)
@@ -191,7 +191,7 @@ describe('renderer: keyed children', () => {
       '1',
       '2',
       '4',
-      '5'
+      '5',
     ])
   })
 
@@ -205,7 +205,7 @@ describe('renderer: keyed children', () => {
       '2',
       '3',
       '1',
-      '4'
+      '4',
     ])
   })
 
@@ -219,7 +219,7 @@ describe('renderer: keyed children', () => {
       '1',
       '4',
       '2',
-      '3'
+      '3',
     ])
   })
 
@@ -242,7 +242,7 @@ describe('renderer: keyed children', () => {
       '4',
       '2',
       '3',
-      '1'
+      '1',
     ])
   })
 
@@ -257,7 +257,7 @@ describe('renderer: keyed children', () => {
       '1',
       '2',
       '3',
-      '6'
+      '6',
     ])
   })
 
@@ -291,7 +291,7 @@ describe('renderer: keyed children', () => {
       '4',
       '3',
       '2',
-      '1'
+      '1',
     ])
   })
 
@@ -306,7 +306,7 @@ describe('renderer: keyed children', () => {
       '2',
       '1',
       '5',
-      '0'
+      '0',
     ])
   })
 
@@ -324,15 +324,15 @@ describe('renderer: keyed children', () => {
       render(
         h(
           'span',
-          arr.map(n => spanNumWithOpacity(n, '1'))
+          arr.map(n => spanNumWithOpacity(n, '1')),
         ),
-        root
+        root,
       )
       elm = root.children[0] as TestElement
 
       for (let i = 0; i < elms; ++i) {
         expect(serializeInner(elm.children[i] as TestElement)).toBe(
-          i.toString()
+          i.toString(),
         )
         opacities[i] = Math.random().toFixed(5).toString()
       }
@@ -341,21 +341,21 @@ describe('renderer: keyed children', () => {
       render(
         h(
           'span',
-          arr.map(n => spanNumWithOpacity(shufArr[n], opacities[n]))
+          arr.map(n => spanNumWithOpacity(shufArr[n], opacities[n])),
         ),
-        root
+        root,
       )
       elm = root.children[0] as TestElement
       for (let i = 0; i < elms; ++i) {
         expect(serializeInner(elm.children[i] as TestElement)).toBe(
-          shufArr[i].toString()
+          shufArr[i].toString(),
         )
         expect(elm.children[i]).toMatchObject({
           props: {
             style: {
-              opacity: opacities[i]
-            }
-          }
+              opacity: opacities[i],
+            },
+          },
         })
       }
     }
@@ -367,22 +367,22 @@ describe('renderer: keyed children', () => {
         h('div', { key: 1 }, 'one'),
         h('div', { key: 2 }, 'two'),
         h('div', { key: 3 }, 'three'),
-        h('div', { key: 4 }, 'four')
+        h('div', { key: 4 }, 'four'),
       ]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(c => c.tag)).toEqual([
       'div',
       'div',
       'div',
-      'div'
+      'div',
     ])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'one',
       'two',
       'three',
-      'four'
+      'four',
     ])
 
     render(
@@ -390,21 +390,21 @@ describe('renderer: keyed children', () => {
         h('div', { key: 4 }, 'four'),
         h('span', { key: 3 }, 'three'),
         h('span', { key: 2 }, 'two'),
-        h('div', { key: 1 }, 'one')
+        h('div', { key: 1 }, 'one'),
       ]),
-      root
+      root,
     )
     expect((elm.children as TestElement[]).map(c => c.tag)).toEqual([
       'div',
       'span',
       'span',
-      'div'
+      'div',
     ])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'four',
       'three',
       'two',
-      'one'
+      'one',
     ])
   })
 
@@ -413,8 +413,8 @@ describe('renderer: keyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       props: {
-        class: 'hi'
-      }
+        class: 'hi',
+      },
     })
 
     render(h('div', [h('div', 'four')]), root)
@@ -423,8 +423,8 @@ describe('renderer: keyed children', () => {
       props: {
         // in the DOM renderer this will be ''
         // but the test renderer simply sets whatever value it receives.
-        class: null
-      }
+        class: null,
+      },
     })
     expect(serialize(elm.children[0])).toBe(`<div>four</div>`)
   })
@@ -456,7 +456,7 @@ describe('renderer: unkeyed children', () => {
       '1',
       'a',
       'b',
-      'c'
+      'c',
     ])
 
     elm = renderChildren(['d', 'a', 'b', 'c', 1, 'e'])
@@ -467,7 +467,7 @@ describe('renderer: unkeyed children', () => {
       'b',
       'c',
       '1',
-      'e'
+      'e',
     ])
   })
 
@@ -478,7 +478,7 @@ describe('renderer: unkeyed children', () => {
     elm = renderChildren(['hello', 'world'])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'hello',
-      'world'
+      'world',
     ])
   })
 
@@ -488,7 +488,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text'
+      text: 'text',
     })
 
     render(h('div', ['text', h('span', ['hello'])]), root)
@@ -496,7 +496,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text'
+      text: 'text',
     })
   })
 
@@ -506,7 +506,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text'
+      text: 'text',
     })
 
     render(h('div', ['text2', h('span', ['hello'])]), root)
@@ -514,7 +514,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect(elm.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'text2'
+      text: 'text2',
     })
   })
 
@@ -526,7 +526,7 @@ describe('renderer: unkeyed children', () => {
     render(h('div', [h('span', ['hello']), h('span', ['world'])]), root)
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'hello',
-      'world'
+      'world',
     ])
   })
 
@@ -538,24 +538,24 @@ describe('renderer: unkeyed children', () => {
     render(h('div', [h('div', ['hello']), h('span', ['world'])]), root)
     expect((elm.children as TestElement[]).map(c => c.tag)).toEqual([
       'div',
-      'span'
+      'span',
     ])
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'hello',
-      'world'
+      'world',
     ])
   })
 
   test('remove elements with updating children without keys', () => {
     render(
       h('div', [h('span', ['one']), h('span', ['two']), h('span', ['three'])]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'one',
       'two',
-      'three'
+      'three',
     ])
 
     render(h('div', [h('span', ['one']), h('span', ['three'])]), root)
@@ -587,7 +587,7 @@ describe('renderer: unkeyed children', () => {
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(c => serialize(c))).toEqual([
       'one',
-      '<span>two</span>'
+      '<span>two</span>',
     ])
 
     render(h('div', [h('div', ['three'])]), root)
@@ -599,24 +599,24 @@ describe('renderer: unkeyed children', () => {
   test('reorder elements', () => {
     render(
       h('div', [h('span', ['one']), h('div', ['two']), h('b', ['three'])]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'one',
       'two',
-      'three'
+      'three',
     ])
 
     render(
       h('div', [h('b', ['three']), h('div', ['two']), h('span', ['one'])]),
-      root
+      root,
     )
     elm = root.children[0] as TestElement
     expect((elm.children as TestElement[]).map(inner)).toEqual([
       'three',
       'two',
-      'one'
+      'one',
     ])
   })
 
diff --git a/packages/runtime-core/__tests__/rendererComponent.spec.ts b/packages/runtime-core/__tests__/rendererComponent.spec.ts
index 6f1d0288b21..c5faa05de83 100644
--- a/packages/runtime-core/__tests__/rendererComponent.spec.ts
+++ b/packages/runtime-core/__tests__/rendererComponent.spec.ts
@@ -1,16 +1,16 @@
 import {
-  ref,
+  type Ref,
+  type SetupContext,
+  type VNode,
   h,
-  render,
-  nodeOps,
-  serializeInner,
+  inject,
   nextTick,
-  VNode,
+  nodeOps,
   provide,
-  inject,
-  Ref,
+  ref,
+  render,
+  serializeInner,
   watch,
-  SetupContext
 } from '@vue/runtime-test'
 
 describe('renderer: component', () => {
@@ -24,7 +24,7 @@ describe('renderer: component', () => {
       render: () => {
         // let Parent first rerender
         return (parentVnode = h(Child))
-      }
+      },
     }
 
     const Child = {
@@ -32,7 +32,7 @@ describe('renderer: component', () => {
         return value.value
           ? (childVnode1 = h('div'))
           : (childVnode2 = h('span'))
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -50,7 +50,7 @@ describe('renderer: component', () => {
     const Comp = {
       render: () => {
         return h('div')
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp, { id: 'foo', class: 'bar' }), root)
@@ -61,7 +61,7 @@ describe('renderer: component', () => {
     const Comp = {
       render: () => {
         return h('div', 'test')
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp, { id: 'foo', class: 'bar' }), root)
@@ -72,7 +72,7 @@ describe('renderer: component', () => {
     const Comp1 = {
       render: () => {
         return h('div', 'foo')
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(Comp1), root)
@@ -81,7 +81,7 @@ describe('renderer: component', () => {
     const Comp2 = {
       render: () => {
         return h('span', 'foo')
-      }
+      },
     }
     render(h(Comp2), root)
     expect(serializeInner(root)).toBe('<span>foo</span>')
@@ -92,20 +92,20 @@ describe('renderer: component', () => {
     const Comp1 = {
       emits: ['foo'],
       updated: vi.fn(),
-      render: () => null
+      render: () => null,
     }
     const root = nodeOps.createElement('div')
     render(
       h(Comp1, {
-        onFoo: () => {}
+        onFoo: () => {},
       }),
-      root
+      root,
     )
     render(
       h(Comp1, {
-        onFoo: () => {}
+        onFoo: () => {},
       }),
-      root
+      root,
     )
     expect(Comp1.updated).not.toHaveBeenCalled()
   })
@@ -119,7 +119,7 @@ describe('renderer: component', () => {
         return () => {
           return [h('div', n.value), h(Child)]
         }
-      }
+      },
     }
 
     const Child = {
@@ -130,7 +130,7 @@ describe('renderer: component', () => {
         return () => {
           return h('div', n.value)
         }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -150,24 +150,24 @@ describe('renderer: component', () => {
     let instance: any
     const Comp = {
       props: {
-        testProp: String
+        testProp: String,
       },
 
       data() {
         return {
-          testData: undefined
+          testData: undefined,
         }
       },
 
       watch: {
         testProp() {
-          // @ts-ignore
+          // @ts-expect-error
           propWatchSpy(this.$el)
         },
         testData() {
-          // @ts-ignore
+          // @ts-expect-error
           dataWatchSpy(this.$el)
-        }
+        },
       },
 
       created() {
@@ -176,7 +176,7 @@ describe('renderer: component', () => {
 
       render() {
         return h('div')
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -206,11 +206,11 @@ describe('renderer: component', () => {
             h('div', inner.value),
             h(Child, {
               value: outer.value,
-              onUpdate: (val: number) => (inner.value = val)
-            })
+              onUpdate: (val: number) => (inner.value = val),
+            }),
           ]
         }
-      }
+      },
     }
 
     const Child = {
@@ -218,13 +218,13 @@ describe('renderer: component', () => {
       setup(props: any, { emit }: SetupContext) {
         watch(
           () => props.value,
-          (val: number) => emit('update', val)
+          (val: number) => emit('update', val),
         )
 
         return () => {
           return h('div', props.value)
         }
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -243,7 +243,7 @@ describe('renderer: component', () => {
       props: ['foo'],
       data() {
         return {
-          count: 0
+          count: 0,
         }
       },
       watch: {
@@ -251,8 +251,8 @@ describe('renderer: component', () => {
           immediate: true,
           handler() {
             ;(this as any).count
-          }
-        }
+          },
+        },
       },
       created() {
         childInstance = this as any
@@ -260,14 +260,14 @@ describe('renderer: component', () => {
       },
       render() {
         return h('h1', (this as any).count)
-      }
+      },
     }
 
     const App = {
       setup() {
         return () => h(Child)
       },
-      updated: vi.fn()
+      updated: vi.fn(),
     }
 
     const root = nodeOps.createElement('div')
@@ -289,7 +289,7 @@ describe('renderer: component', () => {
         },
         render() {
           return h('h1', (this as any).foo)
-        }
+        },
       }
       const root = nodeOps.createElement('div')
 
@@ -305,7 +305,7 @@ describe('renderer: component', () => {
       render() {
         const c = [h(Comp)]
         return [c, c, c]
-      }
+      },
     }
 
     const ids: number[] = []
@@ -313,7 +313,7 @@ describe('renderer: component', () => {
       render: () => h('h1'),
       beforeUnmount() {
         ids.push((this as any).$.uid)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -332,7 +332,7 @@ describe('renderer: component', () => {
     const App = {
       render() {
         return h(Comp, { text: text.value })
-      }
+      },
     }
 
     const Comp = {
@@ -340,7 +340,7 @@ describe('renderer: component', () => {
       render(this: any) {
         spy()
         return h('h1', this.text)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -354,4 +354,25 @@ describe('renderer: component', () => {
     expect(serializeInner(root)).toBe(`<h1>1</h1>`)
     expect(spy).toHaveBeenCalledTimes(2)
   })
+
+  it('should warn accessing `this` in a <script setup> template', () => {
+    const App = {
+      setup() {
+        return {
+          __isScriptSetup: true,
+        }
+      },
+
+      render(this: any) {
+        return this.$attrs.id
+      },
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+
+    expect(
+      `Property '$attrs' was accessed via 'this'. Avoid using 'this' in templates.`,
+    ).toHaveBeenWarned()
+  })
 })
diff --git a/packages/runtime-core/__tests__/rendererElement.spec.ts b/packages/runtime-core/__tests__/rendererElement.spec.ts
index 4e044ad408e..8103832e8df 100644
--- a/packages/runtime-core/__tests__/rendererElement.spec.ts
+++ b/packages/runtime-core/__tests__/rendererElement.spec.ts
@@ -1,9 +1,9 @@
 import {
+  type TestElement,
   h,
-  render,
+  serializeInner as inner,
   nodeOps,
-  TestElement,
-  serializeInner as inner
+  render,
 } from '@vue/runtime-test'
 
 describe('renderer: element', () => {
diff --git a/packages/runtime-core/__tests__/rendererFragment.spec.ts b/packages/runtime-core/__tests__/rendererFragment.spec.ts
index d0c9e5c79a7..5f1e869366f 100644
--- a/packages/runtime-core/__tests__/rendererFragment.spec.ts
+++ b/packages/runtime-core/__tests__/rendererFragment.spec.ts
@@ -1,19 +1,19 @@
 import {
-  h,
-  createVNode,
-  render,
-  nodeOps,
-  TestNodeTypes,
-  TestElement,
   Fragment,
-  resetOps,
-  dumpOps,
   NodeOpTypes,
-  serializeInner,
-  createTextVNode,
+  type TestElement,
+  TestNodeTypes,
   createBlock,
+  createCommentVNode,
+  createTextVNode,
+  createVNode,
+  dumpOps,
+  h,
+  nodeOps,
   openBlock,
-  createCommentVNode
+  render,
+  resetOps,
+  serializeInner,
 } from '@vue/runtime-test'
 import { PatchFlags } from '@vue/shared'
 import { renderList } from '../src/helpers/renderList'
@@ -23,7 +23,7 @@ describe('renderer: fragment', () => {
     const App = {
       render() {
         return [h('div', 'one'), 'two']
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -33,23 +33,23 @@ describe('renderer: fragment', () => {
     expect(root.children.length).toBe(4)
     expect(root.children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: ''
+      text: '',
     })
     expect(root.children[1]).toMatchObject({
       type: TestNodeTypes.ELEMENT,
-      tag: 'div'
+      tag: 'div',
     })
     expect((root.children[1] as TestElement).children[0]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'one'
+      text: 'one',
     })
     expect(root.children[2]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: 'two'
+      text: 'two',
     })
     expect(root.children[3]).toMatchObject({
       type: TestNodeTypes.TEXT,
-      text: ''
+      text: '',
     })
   })
 
@@ -64,22 +64,22 @@ describe('renderer: fragment', () => {
     const root = nodeOps.createElement('div')
     render(
       h(Fragment, [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
 
     resetOps()
     render(
       h(Fragment, [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
     const ops = dumpOps()
     // should be moving nodes instead of re-creating or patching them
     expect(ops).toMatchObject([
       {
-        type: NodeOpTypes.INSERT
-      }
+        type: NodeOpTypes.INSERT,
+      },
     ])
   })
 
@@ -95,11 +95,11 @@ describe('renderer: fragment', () => {
     // should be patching nodes instead of moving or re-creating them
     expect(ops).toMatchObject([
       {
-        type: NodeOpTypes.SET_ELEMENT_TEXT
+        type: NodeOpTypes.SET_ELEMENT_TEXT,
       },
       {
-        type: NodeOpTypes.SET_ELEMENT_TEXT
-      }
+        type: NodeOpTypes.SET_ELEMENT_TEXT,
+      },
     ])
   })
 
@@ -111,11 +111,11 @@ describe('renderer: fragment', () => {
         null,
         [
           createVNode('div', null, 'one', PatchFlags.TEXT),
-          createTextVNode('two')
+          createTextVNode('two'),
         ],
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>one</div>two`)
 
@@ -126,11 +126,11 @@ describe('renderer: fragment', () => {
         [
           createVNode('div', null, 'foo', PatchFlags.TEXT),
           createTextVNode('bar'),
-          createTextVNode('baz')
+          createTextVNode('baz'),
         ],
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>foo</div>barbaz`)
 
@@ -140,11 +140,11 @@ describe('renderer: fragment', () => {
         null,
         [
           createTextVNode('baz'),
-          createVNode('div', null, 'foo', PatchFlags.TEXT)
+          createVNode('div', null, 'foo', PatchFlags.TEXT),
         ],
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`baz<div>foo</div>`)
   })
@@ -157,9 +157,9 @@ describe('renderer: fragment', () => {
         Fragment,
         null,
         [h('div', { key: 1 }, 'one'), h('div', { key: 2 }, 'two')],
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>one</div><div>two</div>`)
 
@@ -169,17 +169,17 @@ describe('renderer: fragment', () => {
         Fragment,
         null,
         [h('div', { key: 2 }, 'two'), h('div', { key: 1 }, 'one')],
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       ),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(`<div>two</div><div>one</div>`)
     const ops = dumpOps()
     // should be moving nodes instead of re-creating or patching them
     expect(ops).toMatchObject([
       {
-        type: NodeOpTypes.INSERT
-      }
+        type: NodeOpTypes.INSERT,
+      },
     ])
   })
 
@@ -190,13 +190,13 @@ describe('renderer: fragment', () => {
         h('div', { key: 1 }, 'outer'),
         h(Fragment, { key: 2 }, [
           h('div', { key: 1 }, 'one'),
-          h('div', { key: 2 }, 'two')
-        ])
+          h('div', { key: 2 }, 'two'),
+        ]),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>outer</div><div>one</div><div>two</div></div>`
+      `<div><div>outer</div><div>one</div><div>two</div></div>`,
     )
 
     resetOps()
@@ -204,14 +204,14 @@ describe('renderer: fragment', () => {
       h('div', [
         h(Fragment, { key: 2 }, [
           h('div', { key: 2 }, 'two'),
-          h('div', { key: 1 }, 'one')
+          h('div', { key: 1 }, 'one'),
         ]),
-        h('div', { key: 1 }, 'outer')
+        h('div', { key: 1 }, 'outer'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div><div>two</div><div>one</div><div>outer</div></div>`
+      `<div><div>two</div><div>one</div><div>outer</div></div>`,
     )
     const ops = dumpOps()
     // should be moving nodes instead of re-creating them
@@ -224,7 +224,7 @@ describe('renderer: fragment', () => {
       { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
-      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
+      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
     ])
   })
 
@@ -236,13 +236,13 @@ describe('renderer: fragment', () => {
         h('div', { key: 1 }, 'outer'),
         h(Fragment, { key: 2 }, [
           h('div', { key: 1 }, 'one'),
-          h('div', { key: 2 }, 'two')
-        ])
+          h('div', { key: 2 }, 'two'),
+        ]),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div>outer</div><div>one</div><div>two</div>`
+      `<div>outer</div><div>one</div><div>two</div>`,
     )
 
     resetOps()
@@ -250,14 +250,14 @@ describe('renderer: fragment', () => {
       h(Fragment, [
         h(Fragment, { key: 2 }, [
           h('div', { key: 2 }, 'two'),
-          h('div', { key: 1 }, 'one')
+          h('div', { key: 1 }, 'one'),
         ]),
-        h('div', { key: 1 }, 'outer')
+        h('div', { key: 1 }, 'outer'),
       ]),
-      root
+      root,
     )
     expect(serializeInner(root)).toBe(
-      `<div>two</div><div>one</div><div>outer</div>`
+      `<div>two</div><div>one</div><div>outer</div>`,
     )
     const ops = dumpOps()
     // should be moving nodes instead of re-creating them
@@ -266,7 +266,7 @@ describe('renderer: fragment', () => {
       { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
       { type: NodeOpTypes.INSERT, targetNode: { type: 'element' } },
-      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } }
+      { type: NodeOpTypes.INSERT, targetNode: { type: 'text', text: '' } },
     ])
 
     // should properly remove nested fragments
@@ -294,25 +294,25 @@ describe('renderer: fragment', () => {
                 [
                   createCommentVNode('comment'),
                   hoisted,
-                  createVNode('div', null, item, PatchFlags.TEXT)
+                  createVNode('div', null, item, PatchFlags.TEXT),
                 ],
-                PatchFlags.STABLE_FRAGMENT
+                PatchFlags.STABLE_FRAGMENT,
               )
             )
           }),
-          PatchFlags.KEYED_FRAGMENT
+          PatchFlags.KEYED_FRAGMENT,
         )
       )
     }
 
     render(renderFn(['one', 'two']), root)
     expect(serializeInner(root)).toBe(
-      `<!--comment--><span></span><div>one</div><!--comment--><span></span><div>two</div>`
+      `<!--comment--><span></span><div>one</div><!--comment--><span></span><div>two</div>`,
     )
 
     render(renderFn(['two', 'one']), root)
     expect(serializeInner(root)).toBe(
-      `<!--comment--><span></span><div>two</div><!--comment--><span></span><div>one</div>`
+      `<!--comment--><span></span><div>two</div><!--comment--><span></span><div>one</div>`,
     )
   })
 
@@ -334,13 +334,13 @@ describe('renderer: fragment', () => {
                 { key: item },
                 [
                   createTextVNode('text'),
-                  createVNode('div', null, item, PatchFlags.TEXT)
+                  createVNode('div', null, item, PatchFlags.TEXT),
                 ],
-                PatchFlags.STABLE_FRAGMENT
+                PatchFlags.STABLE_FRAGMENT,
               )
             )
           }),
-          PatchFlags.KEYED_FRAGMENT
+          PatchFlags.KEYED_FRAGMENT,
         )
       )
     }
@@ -351,4 +351,16 @@ describe('renderer: fragment', () => {
     render(renderFn(['two', 'one']), root)
     expect(serializeInner(root)).toBe(`text<div>two</div>text<div>one</div>`)
   })
+
+  // #10007
+  test('empty fragment', () => {
+    const root = nodeOps.createElement('div')
+
+    const renderFn = () => {
+      return openBlock(true), createBlock(Fragment, null)
+    }
+
+    render(renderFn(), root)
+    expect(serializeInner(root)).toBe('')
+  })
 })
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
index c2073b966a7..ef5bdbe0136 100644
--- a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
+++ b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -1,29 +1,29 @@
 import {
-  h,
   Fragment,
+  type FunctionalComponent,
+  type SetupContext,
   Teleport,
-  createVNode,
-  createCommentVNode,
-  openBlock,
+  type TestElement,
+  type VNode,
+  createApp,
   createBlock,
-  render,
-  nodeOps,
-  TestElement,
-  serialize,
+  createCommentVNode,
+  createTextVNode,
+  createVNode,
+  defineComponent,
+  h,
   serializeInner as inner,
-  VNode,
-  ref,
   nextTick,
-  defineComponent,
-  withCtx,
-  renderSlot,
+  nodeOps,
   onBeforeUnmount,
-  createTextVNode,
-  SetupContext,
-  createApp,
-  FunctionalComponent,
+  onUnmounted,
+  openBlock,
+  ref,
+  render,
   renderList,
-  onUnmounted
+  renderSlot,
+  serialize,
+  withCtx,
 } from '@vue/runtime-test'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { SuspenseImpl } from '../src/components/Suspense'
@@ -40,7 +40,7 @@ describe('renderer: optimized mode', () => {
   const renderWithBlock = (renderChildren: () => VNode[]) => {
     render(
       (openBlock(), (block = createBlock('div', null, renderChildren()))),
-      root
+      root,
     )
   }
 
@@ -54,7 +54,7 @@ describe('renderer: optimized mode', () => {
   test('block can appear anywhere in the vdom tree', () => {
     render(
       h('div', (openBlock(), (block = createBlock('p', null, 'foo')))),
-      root
+      root,
     )
 
     expect(block.dynamicChildren!.length).toBe(0)
@@ -64,12 +64,12 @@ describe('renderer: optimized mode', () => {
   test('block should collect dynamic vnodes', () => {
     renderWithBlock(() => [
       createVNode('p', null, 'foo', PatchFlags.TEXT),
-      createVNode('i')
+      createVNode('i'),
     ])
 
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foo</p>'
+      '<p>foo</p>',
     )
   })
 
@@ -78,9 +78,9 @@ describe('renderer: optimized mode', () => {
       // disable tracking
       (openBlock(true),
       (block = createBlock('div', null, [
-        createVNode('p', null, 'foo', PatchFlags.TEXT)
+        createVNode('p', null, 'foo', PatchFlags.TEXT),
       ]))),
-      root
+      root,
     )
 
     expect(block.dynamicChildren!.length).toBe(0)
@@ -88,23 +88,23 @@ describe('renderer: optimized mode', () => {
 
   test('block as dynamic children', () => {
     renderWithBlock(() => [
-      (openBlock(), createBlock('div', { key: 0 }, [h('p')]))
+      (openBlock(), createBlock('div', { key: 0 }, [h('p')])),
     ])
 
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(0)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<div><p></p></div>'
+      '<div><p></p></div>',
     )
 
     renderWithBlock(() => [
-      (openBlock(), createBlock('div', { key: 1 }, [h('i')]))
+      (openBlock(), createBlock('div', { key: 1 }, [h('i')])),
     ])
 
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(0)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<div><i></i></div>'
+      '<div><i></i></div>',
     )
   })
 
@@ -114,7 +114,7 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p>foo</p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foo</p>'
+      '<p>foo</p>',
     )
 
     renderWithBlock(() => [createVNode('p', null, 'bar', PatchFlags.TEXT)])
@@ -122,73 +122,73 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p>bar</p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>bar</p>'
+      '<p>bar</p>',
     )
   })
 
   test('PatchFlags: PatchFlags.CLASS', async () => {
     renderWithBlock(() => [
-      createVNode('p', { class: 'foo' }, '', PatchFlags.CLASS)
+      createVNode('p', { class: 'foo' }, '', PatchFlags.CLASS),
     ])
 
     expect(inner(root)).toBe('<div><p class="foo"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p class="foo"></p>'
+      '<p class="foo"></p>',
     )
 
     renderWithBlock(() => [
-      createVNode('p', { class: 'bar' }, '', PatchFlags.CLASS)
+      createVNode('p', { class: 'bar' }, '', PatchFlags.CLASS),
     ])
 
     expect(inner(root)).toBe('<div><p class="bar"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p class="bar"></p>'
+      '<p class="bar"></p>',
     )
   })
 
   test('PatchFlags: PatchFlags.STYLE', async () => {
     renderWithBlock(() => [
-      createVNode('p', { style: 'color: red' }, '', PatchFlags.STYLE)
+      createVNode('p', { style: 'color: red' }, '', PatchFlags.STYLE),
     ])
 
     expect(inner(root)).toBe('<div><p style="color: red"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p style="color: red"></p>'
+      '<p style="color: red"></p>',
     )
 
     renderWithBlock(() => [
-      createVNode('p', { style: 'color: green' }, '', PatchFlags.STYLE)
+      createVNode('p', { style: 'color: green' }, '', PatchFlags.STYLE),
     ])
 
     expect(inner(root)).toBe('<div><p style="color: green"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p style="color: green"></p>'
+      '<p style="color: green"></p>',
     )
   })
 
   test('PatchFlags: PatchFlags.PROPS', async () => {
     renderWithBlock(() => [
-      createVNode('p', { id: 'foo' }, '', PatchFlags.PROPS, ['id'])
+      createVNode('p', { id: 'foo' }, '', PatchFlags.PROPS, ['id']),
     ])
 
     expect(inner(root)).toBe('<div><p id="foo"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p id="foo"></p>'
+      '<p id="foo"></p>',
     )
 
     renderWithBlock(() => [
-      createVNode('p', { id: 'bar' }, '', PatchFlags.PROPS, ['id'])
+      createVNode('p', { id: 'bar' }, '', PatchFlags.PROPS, ['id']),
     ])
 
     expect(inner(root)).toBe('<div><p id="bar"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p id="bar"></p>'
+      '<p id="bar"></p>',
     )
   })
 
@@ -196,24 +196,24 @@ describe('renderer: optimized mode', () => {
     let propName = 'foo'
 
     renderWithBlock(() => [
-      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS)
+      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS),
     ])
 
     expect(inner(root)).toBe('<div><p foo="dynamic"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p foo="dynamic"></p>'
+      '<p foo="dynamic"></p>',
     )
 
     propName = 'bar'
     renderWithBlock(() => [
-      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS)
+      createVNode('p', { [propName]: 'dynamic' }, '', PatchFlags.FULL_PROPS),
     ])
 
     expect(inner(root)).toBe('<div><p bar="dynamic"></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p bar="dynamic"></p>'
+      '<p bar="dynamic"></p>',
     )
   })
 
@@ -228,18 +228,18 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode('p', null, item, PatchFlags.TEXT)
         }),
-        PatchFlags.STABLE_FRAGMENT
+        PatchFlags.STABLE_FRAGMENT,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foo</p><p>bar</p>')
     expect(block.dynamicChildren!.length).toBe(2)
     expect(serialize(block.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foo</p>'
+      '<p>foo</p>',
     )
     expect(serialize(block.dynamicChildren![1].el as TestElement)).toBe(
-      '<p>bar</p>'
+      '<p>bar</p>',
     )
 
     list = list.map(item => item.repeat(2))
@@ -251,18 +251,18 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode('p', null, item, PatchFlags.TEXT)
         }),
-        PatchFlags.STABLE_FRAGMENT
+        PatchFlags.STABLE_FRAGMENT,
       )),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foofoo</p><p>barbar</p>')
     expect(block.dynamicChildren!.length).toBe(2)
     expect(serialize(block.dynamicChildren![0].el as TestElement)).toBe(
-      '<p>foofoo</p>'
+      '<p>foofoo</p>',
     )
     expect(serialize(block.dynamicChildren![1].el as TestElement)).toBe(
-      '<p>barbar</p>'
+      '<p>barbar</p>',
     )
   })
 
@@ -278,9 +278,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, null, item.text)
         }),
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foo</p>')
@@ -295,9 +295,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, null, item.text)
         }),
-        PatchFlags.UNKEYED_FRAGMENT
+        PatchFlags.UNKEYED_FRAGMENT,
       )),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<i>bar</i><p>foo</p>')
@@ -316,9 +316,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, { key: item.tag }, item.text)
         }),
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<p>foo</p>')
@@ -333,9 +333,9 @@ describe('renderer: optimized mode', () => {
         list.map(item => {
           return createVNode(item.tag, { key: item.tag }, item.text)
         }),
-        PatchFlags.KEYED_FRAGMENT
+        PatchFlags.KEYED_FRAGMENT,
       )),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<i>bar</i><p>foo</p>')
@@ -357,12 +357,12 @@ describe('renderer: optimized mode', () => {
                 'p',
                 { onVnodeMounted: spyMounted, onVnodeBeforeUpdate: spyUpdated },
                 '',
-                PatchFlags.NEED_PATCH
-              )
+                PatchFlags.NEED_PATCH,
+              ),
             ]))
           )
         }
-      }
+      },
     }
 
     render(h(Comp), root)
@@ -370,7 +370,7 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p></p>'
+      '<p></p>',
     )
     expect(spyMounted).toHaveBeenCalledTimes(1)
     expect(spyUpdated).toHaveBeenCalledTimes(0)
@@ -381,7 +381,7 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div><p></p></div>')
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(serialize(block!.dynamicChildren![0].el as TestElement)).toBe(
-      '<p></p>'
+      '<p></p>',
     )
     expect(spyMounted).toHaveBeenCalledTimes(1)
     expect(spyUpdated).toHaveBeenCalledTimes(1)
@@ -391,7 +391,7 @@ describe('renderer: optimized mode', () => {
     render(
       (openBlock(),
       (block = createBlock('div', null, [createVNode('p', null, 'foo')]))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<div><p>foo</p></div>')
@@ -403,9 +403,9 @@ describe('renderer: optimized mode', () => {
         'div',
         null,
         [createVNode('i', null, 'bar')],
-        PatchFlags.BAIL
+        PatchFlags.BAIL,
       ))),
-      root
+      root,
     )
 
     expect(inner(root)).toBe('<div><i>bar</i></div>')
@@ -422,12 +422,12 @@ describe('renderer: optimized mode', () => {
             (openBlock(),
             (block = createBlock('div', null, {
               default: withCtx(() => [renderSlot(slots, 'default')]),
-              _: SlotFlags.FORWARDED
+              _: SlotFlags.FORWARDED,
             })))
 
           return vnode
         }
-      }
+      },
     })
 
     const foo = ref(0)
@@ -436,13 +436,13 @@ describe('renderer: optimized mode', () => {
         return () => {
           return createVNode(Comp, null, {
             default: withCtx(() => [
-              createVNode('p', null, foo.value, PatchFlags.TEXT)
+              createVNode('p', null, foo.value, PatchFlags.TEXT),
             ]),
             // Indicates that this is a stable slot to avoid bail out
-            _: SlotFlags.STABLE
+            _: SlotFlags.STABLE,
           })
         }
-      }
+      },
     }
 
     render(h(App), root)
@@ -452,8 +452,8 @@ describe('renderer: optimized mode', () => {
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(1)
     expect(
       serialize(
-        block!.dynamicChildren![0].dynamicChildren![0].el as TestElement
-      )
+        block!.dynamicChildren![0].dynamicChildren![0].el as TestElement,
+      ),
     ).toBe('<p>0</p>')
 
     foo.value++
@@ -474,12 +474,12 @@ describe('renderer: optimized mode', () => {
       setup() {
         onBeforeUnmount(spy)
         return () => 'child'
-      }
+      },
     }
     const Parent = () => (
       openBlock(),
       createBlock('div', null, [
-        createVNode('div', { style: {} }, [createVNode(Child)], 4 /* STYLE */)
+        createVNode('div', { style: {} }, [createVNode(Child)], 4 /* STYLE */),
       ])
     )
     render(h(Parent), root)
@@ -496,13 +496,13 @@ describe('renderer: optimized mode', () => {
       setup() {
         onBeforeUnmount(spyA)
         return () => 'child'
-      }
+      },
     }
     const ChildB = {
       setup() {
         onBeforeUnmount(spyB)
         return () => 'child'
-      }
+      },
     }
     const Parent = () => (
       openBlock(),
@@ -512,15 +512,15 @@ describe('renderer: optimized mode', () => {
           Fragment,
           null,
           [createVNode(ChildA, { key: 0 })],
-          128 /* KEYED_FRAGMENT */
+          128 /* KEYED_FRAGMENT */,
         )),
         (openBlock(true),
         createBlock(
           Fragment,
           null,
           [createVNode(ChildB)],
-          256 /* UNKEYED_FRAGMENT */
-        ))
+          256 /* UNKEYED_FRAGMENT */,
+        )),
       ])
     )
     render(h(Parent), root)
@@ -541,7 +541,7 @@ describe('renderer: optimized mode', () => {
             createBlock('div', null, [renderSlot(slots, 'default')])
           )
         }
-      }
+      },
     }
 
     const Wrapper = {
@@ -551,7 +551,7 @@ describe('renderer: optimized mode', () => {
         return () => {
           return slots.default!()[state.value]
         }
-      }
+      },
     }
 
     const app = createApp({
@@ -563,18 +563,18 @@ describe('renderer: optimized mode', () => {
               default: withCtx(() => [
                 createVNode(CompA, null, {
                   default: withCtx(() => [createTextVNode('Hello')]),
-                  _: 1 /* STABLE */
+                  _: 1 /* STABLE */,
                 }),
                 createVNode(CompA, null, {
                   default: withCtx(() => [createTextVNode('World')]),
-                  _: 1 /* STABLE */
-                })
+                  _: 1 /* STABLE */,
+                }),
               ]),
-              _: 1 /* STABLE */
+              _: 1 /* STABLE */,
             })
           )
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -597,7 +597,7 @@ describe('renderer: optimized mode', () => {
         createBlock(
           Teleport as any,
           {
-            to: target
+            to: target,
           },
           [
             createVNode('div', null, [
@@ -605,21 +605,21 @@ describe('renderer: optimized mode', () => {
               createBlock(
                 Teleport as any,
                 {
-                  to: target
+                  to: target,
                 },
-                [createVNode('div', null, 'foo')]
-              ))
-            ])
-          ]
-        ))
+                [createVNode('div', null, 'foo')],
+              )),
+            ]),
+          ],
+        )),
       ])),
-      root
+      root,
     )
     expect(inner(target)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--></div><div>foo</div>"`
+      `"<div><!--teleport start--><!--teleport end--></div><div>foo</div>"`,
     )
     expect(inner(root)).toMatchInlineSnapshot(
-      `"<div><!--teleport start--><!--teleport end--></div>"`
+      `"<div><!--teleport start--><!--teleport end--></div>"`,
     )
 
     render(null, root)
@@ -634,11 +634,11 @@ describe('renderer: optimized mode', () => {
           return (
             openBlock(),
             (block = createBlock('section', null, [
-              renderSlot(slots, 'default')
+              renderSlot(slots, 'default'),
             ]))
           )
         }
-      }
+      },
     }
 
     let dynamicVNode: VNode
@@ -654,19 +654,19 @@ describe('renderer: optimized mode', () => {
                     'div',
                     {
                       class: {
-                        foo: !!slots.default!()
-                      }
+                        foo: !!slots.default!(),
+                      },
                     },
                     null,
-                    PatchFlags.CLASS
-                  ))
+                    PatchFlags.CLASS,
+                  )),
                 ]
               }),
-              _: 1
+              _: 1,
             })
           )
         }
-      }
+      },
     }
     const app = createApp({
       render() {
@@ -676,10 +676,10 @@ describe('renderer: optimized mode', () => {
             default: withCtx(() => {
               return [createVNode({}) /* component */]
             }),
-            _: 1
+            _: 1,
           })
         )
-      }
+      },
     })
 
     app.mount(root)
@@ -693,7 +693,7 @@ describe('renderer: optimized mode', () => {
     expect(block!.dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren!.length).toBe(1)
     expect(block!.dynamicChildren![0].dynamicChildren![0]).toEqual(
-      dynamicVNode!
+      dynamicVNode!,
     )
   })
 
@@ -705,7 +705,7 @@ describe('renderer: optimized mode', () => {
         return () => {
           return slots.default!()[index.value]
         }
-      }
+      },
     }
 
     const app = createApp({
@@ -720,13 +720,13 @@ describe('renderer: optimized mode', () => {
                   : createCommentVNode('v-if', true),
                 true
                   ? (openBlock(), createBlock('p', { key: 0 }, '2'))
-                  : createCommentVNode('v-if', true)
+                  : createCommentVNode('v-if', true),
               ]),
-              _: 1 /* STABLE */
+              _: 1 /* STABLE */,
             })
           )
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -746,7 +746,7 @@ describe('renderer: optimized mode', () => {
     const Middle = {
       setup(props: any, { slots }: any) {
         return slots.default!
-      }
+      },
     }
 
     const Comp = {
@@ -758,16 +758,16 @@ describe('renderer: optimized mode', () => {
               createVNode(Middle, null, {
                 default: withCtx(
                   () => [
-                    createVNode('div', null, [renderSlot(slots, 'default')])
+                    createVNode('div', null, [renderSlot(slots, 'default')]),
                   ],
-                  undefined
+                  undefined,
                 ),
-                _: 3 /* FORWARDED */
-              })
+                _: 3 /* FORWARDED */,
+              }),
             ])
           )
         }
-      }
+      },
     }
 
     const loading = ref(false)
@@ -777,10 +777,10 @@ describe('renderer: optimized mode', () => {
           // important: write the slot content here
           const content = h('span', loading.value ? 'loading' : 'loaded')
           return h(Comp, null, {
-            default: () => content
+            default: () => content,
           })
         }
-      }
+      },
     })
 
     app.mount(root)
@@ -807,16 +807,16 @@ describe('renderer: optimized mode', () => {
               createBlock(SuspenseImpl, null, {
                 default: withCtx(() => [
                   createVNode('div', null, [
-                    createVNode('div', null, show.value, PatchFlags.TEXT)
-                  ])
+                    createVNode('div', null, show.value, PatchFlags.TEXT),
+                  ]),
                 ]),
-                _: SlotFlags.STABLE
-              }))
+                _: SlotFlags.STABLE,
+              })),
             ],
-            PatchFlags.STABLE_FRAGMENT
+            PatchFlags.STABLE_FRAGMENT,
           )
         )
-      }
+      },
     })
 
     app.mount(root)
@@ -838,17 +838,17 @@ describe('renderer: optimized mode', () => {
           openBlock(),
           createBlock(SuspenseImpl, null, {
             default: withCtx(() => [renderSlot(slots, 'default')]),
-            _: SlotFlags.FORWARDED
+            _: SlotFlags.FORWARDED,
           })
         )
-      }
+      },
     }
 
     const Child = {
       setup() {
         onUnmounted(spyUnmounted)
         return () => createVNode('div', null, show.value, PatchFlags.TEXT)
-      }
+      },
     }
 
     const app = createApp({
@@ -860,11 +860,11 @@ describe('renderer: optimized mode', () => {
               { key: 0 },
               {
                 default: withCtx(() => [createVNode(Child)]),
-                _: SlotFlags.STABLE
-              }
+                _: SlotFlags.STABLE,
+              },
             ))
           : createCommentVNode('v-if', true)
-      }
+      },
     })
 
     app.mount(root)
@@ -907,17 +907,17 @@ describe('renderer: optimized mode', () => {
                     renderList(1, item => {
                       return createVNode('li', null, [createVNode(Dummy)])
                     }),
-                    64 /* STABLE_FRAGMENT */
-                  ))
-                ])
+                    64 /* STABLE_FRAGMENT */,
+                  )),
+                ]),
               ],
               undefined,
-              true
+              true,
             ),
-            _: 1 /* STABLE */
-          }
+            _: 1 /* STABLE */,
+          },
         )
-      }
+      },
     })
 
     app.mount(root)
diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
index 28d7a95eb0b..9f26bf9bdf8 100644
--- a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
+++ b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
@@ -1,13 +1,13 @@
 import {
-  ref,
-  nodeOps,
+  defineComponent,
   h,
-  render,
   nextTick,
-  defineComponent,
+  nodeOps,
   reactive,
+  ref,
+  render,
   serializeInner,
-  shallowRef
+  shallowRef,
 } from '@vue/runtime-test'
 
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#template-refs
@@ -20,12 +20,12 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return {
-          refKey: el
+          refKey: el,
         }
       },
       render() {
         return h('div', { ref: 'refKey' })
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -41,12 +41,12 @@ describe('api: template refs', () => {
       setup() {
         return {
           foo: fooEl,
-          bar: barEl
+          bar: barEl,
         }
       },
       render() {
         return h('div', { ref: refKey.value })
-      }
+      },
     }
     render(h(Comp), root)
     expect(fooEl.value).toBe(root.children[0])
@@ -66,12 +66,12 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return {
-          refKey: el
+          refKey: el,
         }
       },
       render() {
         return toggle.value ? h('div', { ref: 'refKey' }) : null
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -116,7 +116,7 @@ describe('api: template refs', () => {
     const toggle = ref(true)
 
     const Comp = defineComponent(
-      () => () => (toggle.value ? h('div', { ref: fn }) : null)
+      () => () => (toggle.value ? h('div', { ref: fn }) : null),
     )
     render(h(Comp), root)
     expect(fn.mock.calls[0][0]).toBe(root.children[0])
@@ -132,7 +132,7 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return () => h('div', { ref: el })
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -142,14 +142,14 @@ describe('api: template refs', () => {
     const root = nodeOps.createElement('div')
     const refs = {
       foo: ref(null),
-      bar: ref(null)
+      bar: ref(null),
     }
     const refKey = ref<keyof typeof refs>('foo')
 
     const Comp = {
       setup() {
         return () => h('div', { ref: refs[refKey.value] })
-      }
+      },
     }
     render(h(Comp), root)
     expect(refs.foo.value).toBe(root.children[0])
@@ -169,7 +169,7 @@ describe('api: template refs', () => {
     const Comp = {
       setup() {
         return () => (toggle.value ? h('div', { ref: el }) : null)
-      }
+      },
     }
     render(h(Comp), root)
     expect(el.value).toBe(root.children[0])
@@ -185,7 +185,7 @@ describe('api: template refs', () => {
     const Child = {
       render(this: any) {
         return this.$slots.default()
-      }
+      },
     }
 
     const Comp = {
@@ -196,7 +196,7 @@ describe('api: template refs', () => {
       },
       mounted(this: any) {
         spy(this.$refs.foo.tag)
-      }
+      },
     }
     render(h(Comp), root)
 
@@ -206,7 +206,7 @@ describe('api: template refs', () => {
   it('should work with direct reactive property', () => {
     const root = nodeOps.createElement('div')
     const state = reactive({
-      refKey: null
+      refKey: null,
     })
 
     const Comp = {
@@ -215,7 +215,7 @@ describe('api: template refs', () => {
       },
       render() {
         return h('div', { ref: 'refKey' })
-      }
+      },
     }
     render(h(Comp), root)
     expect(state.refKey).toBe(root.children[0])
@@ -232,16 +232,16 @@ describe('api: template refs', () => {
         return {
           refKey1,
           refKey2,
-          refKey3
+          refKey3,
         }
       },
       render() {
         return [
           h('div', { ref: 'refKey1' }),
           h('div', { ref: 'refKey2' }),
-          h('div', { ref: 'refKey3' })
+          h('div', { ref: 'refKey3' }),
         ]
-      }
+      },
     }
     render(h(Comp), root)
     expect(refKey1.value).toBe(root.children[1])
@@ -258,7 +258,7 @@ describe('api: template refs', () => {
       },
       render(this: any) {
         return h('div', { id: 'foo', ref: 'el' }, this.el && this.el.props.id)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -279,7 +279,7 @@ describe('api: template refs', () => {
       render(this: any) {
         return [
           h('p', { ref: refToggle.value ? 'foo' : 'bar' }),
-          h('i', { ref: refToggle.value ? 'bar' : 'foo' })
+          h('i', { ref: refToggle.value ? 'bar' : 'foo' }),
         ]
       },
       mounted(this: any) {
@@ -287,7 +287,7 @@ describe('api: template refs', () => {
       },
       updated(this: any) {
         spy(this.$refs.foo.tag, this.$refs.bar.tag)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -315,7 +315,7 @@ describe('api: template refs', () => {
       },
       updated(this: any) {
         spy(this.$refs.foo.tag)
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -330,10 +330,10 @@ describe('api: template refs', () => {
   // #2078
   test('handling multiple merged refs', async () => {
     const Foo = {
-      render: () => h('div', 'foo')
+      render: () => h('div', 'foo'),
     }
     const Bar = {
-      render: () => h('div', 'bar')
+      render: () => h('div', 'bar'),
     }
 
     const viewRef = shallowRef<any>(Foo)
@@ -347,7 +347,7 @@ describe('api: template refs', () => {
         }
         const view = h(viewRef.value, { ref: elRef1 })
         return h(view, { ref: elRef2 })
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -381,11 +381,11 @@ describe('api: template refs', () => {
           'div',
           {
             ref: el,
-            ref_key: 'el'
+            ref_key: 'el',
           },
-          'hello'
+          'hello',
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -411,14 +411,14 @@ describe('api: template refs', () => {
                   'li',
                   {
                     ref: listRefs,
-                    ref_for: true
+                    ref_for: true,
                   },
-                  i
-                )
-              )
+                  i,
+                ),
+              ),
             )
           : null
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -462,14 +462,14 @@ describe('api: template refs', () => {
                   'li',
                   {
                     ref: 'listRefs',
-                    ref_for: true
+                    ref_for: true,
                   },
-                  i
-                )
-              )
+                  i,
+                ),
+              ),
             )
           : null
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -512,31 +512,31 @@ describe('api: template refs', () => {
                 'li',
                 {
                   ref: 'listRefs',
-                  ref_for: true
+                  ref_for: true,
                 },
-                i
-              )
-            )
-          )
+                i,
+              ),
+            ),
+          ),
         ])
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
 
     await nextTick()
     expect(String(listRefs.value)).toBe(
-      '[object Object],[object Object],[object Object]'
+      '[object Object],[object Object],[object Object]',
     )
     expect(serializeInner(root)).toBe(
-      '<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>'
+      '<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>',
     )
 
     list.value.splice(0, 1)
     await nextTick()
     expect(String(listRefs.value)).toBe('[object Object],[object Object]')
     expect(serializeInner(root)).toBe(
-      '<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>'
+      '<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>',
     )
   })
 })
diff --git a/packages/runtime-core/__tests__/scheduler.spec.ts b/packages/runtime-core/__tests__/scheduler.spec.ts
index 6246a87e8f7..781aa6eb0b7 100644
--- a/packages/runtime-core/__tests__/scheduler.spec.ts
+++ b/packages/runtime-core/__tests__/scheduler.spec.ts
@@ -1,10 +1,10 @@
 import {
-  queueJob,
+  flushPostFlushCbs,
+  flushPreFlushCbs,
+  invalidateJob,
   nextTick,
+  queueJob,
   queuePostFlushCb,
-  invalidateJob,
-  flushPostFlushCbs,
-  flushPreFlushCbs
 } from '../src/scheduler'
 
 describe('scheduler', () => {
@@ -143,6 +143,7 @@ describe('scheduler', () => {
         queueJob(job1)
         // cb2 should execute before the job
         queueJob(cb2)
+        queueJob(cb3)
       }
       cb1.pre = true
 
@@ -152,9 +153,60 @@ describe('scheduler', () => {
       cb2.pre = true
       cb2.id = 1
 
+      const cb3 = () => {
+        calls.push('cb3')
+      }
+      cb3.pre = true
+      cb3.id = 1
+
       queueJob(cb1)
       await nextTick()
-      expect(calls).toEqual(['cb1', 'cb2', 'job1'])
+      expect(calls).toEqual(['cb1', 'cb2', 'cb3', 'job1'])
+    })
+
+    it('should insert jobs after pre jobs with the same id', async () => {
+      const calls: string[] = []
+      const job1 = () => {
+        calls.push('job1')
+      }
+      job1.id = 1
+      job1.pre = true
+      const job2 = () => {
+        calls.push('job2')
+        queueJob(job5)
+        queueJob(job6)
+      }
+      job2.id = 2
+      job2.pre = true
+      const job3 = () => {
+        calls.push('job3')
+      }
+      job3.id = 2
+      job3.pre = true
+      const job4 = () => {
+        calls.push('job4')
+      }
+      job4.id = 3
+      job4.pre = true
+      const job5 = () => {
+        calls.push('job5')
+      }
+      job5.id = 2
+      const job6 = () => {
+        calls.push('job6')
+      }
+      job6.id = 2
+      job6.pre = true
+
+      // We need several jobs to test this properly, otherwise
+      // findInsertionIndex can yield the correct index by chance
+      queueJob(job4)
+      queueJob(job2)
+      queueJob(job3)
+      queueJob(job1)
+
+      await nextTick()
+      expect(calls).toEqual(['job1', 'job2', 'job3', 'job6', 'job5', 'job4'])
     })
 
     it('preFlushCb inside queueJob', async () => {
@@ -445,7 +497,7 @@ describe('scheduler', () => {
       expect(e).toBe(err)
     }
     expect(
-      `Unhandled error during execution of scheduler flush`
+      `Unhandled error during execution of scheduler flush`,
     ).toHaveBeenWarned()
 
     // this one should no longer error
@@ -519,7 +571,7 @@ describe('scheduler', () => {
 
     // simulate parent component that toggles child
     const job1 = () => {
-      // @ts-ignore
+      // @ts-expect-error
       job2.active = false
     }
     // simulate child that's triggered by the same reactive change that
@@ -558,4 +610,25 @@ describe('scheduler', () => {
     expect(await p).toBe(1)
     expect(fn).toHaveBeenCalledTimes(1)
   })
+
+  // #10003
+  test('nested flushPostFlushCbs', async () => {
+    const calls: string[] = []
+    const cb1 = () => calls.push('cb1')
+    // cb1 has no id
+    const cb2 = () => calls.push('cb2')
+    cb2.id = -1
+    const queueAndFlush = (hook: Function) => {
+      queuePostFlushCb(hook)
+      flushPostFlushCbs()
+    }
+
+    queueAndFlush(() => {
+      queuePostFlushCb([cb1, cb2])
+      flushPostFlushCbs()
+    })
+
+    await nextTick()
+    expect(calls).toEqual(['cb2', 'cb1'])
+  })
 })
diff --git a/packages/runtime-core/__tests__/scopeId.spec.ts b/packages/runtime-core/__tests__/scopeId.spec.ts
index cdbb81c4191..08753e023a1 100644
--- a/packages/runtime-core/__tests__/scopeId.spec.ts
+++ b/packages/runtime-core/__tests__/scopeId.spec.ts
@@ -1,20 +1,29 @@
 import {
+  Fragment,
+  createBlock,
+  createCommentVNode,
+  createVNode,
+  defineComponent,
   h,
-  render,
+  nextTick,
   nodeOps,
-  serializeInner,
+  openBlock,
+  popScopeId,
+  pushScopeId,
+  ref,
+  render,
   renderSlot,
+  serializeInner,
   withScopeId,
-  pushScopeId,
-  popScopeId
 } from '@vue/runtime-test'
 import { withCtx } from '../src/componentRenderContext'
+import { PatchFlags } from '@vue/shared'
 
 describe('scopeId runtime support', () => {
   test('should attach scopeId', () => {
     const App = {
       __scopeId: 'parent',
-      render: () => h('div', [h('div')])
+      render: () => h('div', [h('div')]),
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -24,17 +33,17 @@ describe('scopeId runtime support', () => {
   test('should attach scopeId to components in parent component', () => {
     const Child = {
       __scopeId: 'child',
-      render: () => h('div')
+      render: () => h('div'),
     }
     const App = {
       __scopeId: 'parent',
-      render: () => h('div', [h(Child)])
+      render: () => h('div', [h(Child)]),
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
     expect(serializeInner(root)).toBe(
-      `<div parent><div child parent></div></div>`
+      `<div parent><div child parent></div></div>`,
     )
   })
 
@@ -44,11 +53,11 @@ describe('scopeId runtime support', () => {
       __scopeId: 'child',
       render(this: any) {
         return h('div', renderSlot(this.$slots, 'default'))
-      }
+      },
     }
     const Child2 = {
       __scopeId: 'child2',
-      render: () => h('span')
+      render: () => h('span'),
     }
     const App = {
       __scopeId: 'parent',
@@ -57,9 +66,9 @@ describe('scopeId runtime support', () => {
           Child,
           withCtx(() => {
             return [h('div'), h(Child2)]
-          })
+          }),
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -74,7 +83,7 @@ describe('scopeId runtime support', () => {
         // - slotted scopeId from slot owner
         // - its own scopeId
         `<span child2 parent child-s></span>` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -90,10 +99,10 @@ describe('scopeId runtime support', () => {
             'default',
             {},
             undefined,
-            true /* noSlotted */
-          )
+            true /* noSlotted */,
+          ),
         ])
-      }
+      },
     }
 
     const Slotted = {
@@ -101,9 +110,9 @@ describe('scopeId runtime support', () => {
       render(this: any) {
         // <Wrapper><slot/></Wrapper>
         return h(Wrapper, null, {
-          default: withCtx(() => [renderSlot(this.$slots, 'default')])
+          default: withCtx(() => [renderSlot(this.$slots, 'default')]),
         })
-      }
+      },
     }
 
     // simulate hoisted node
@@ -118,9 +127,9 @@ describe('scopeId runtime support', () => {
         return h(Slotted, null, {
           default: withCtx(() => {
             return [hoisted, h('div', 'dynamic')]
-          })
+          }),
         })
-      }
+      },
     }
 
     const root = nodeOps.createElement('div')
@@ -129,7 +138,7 @@ describe('scopeId runtime support', () => {
       `<div wrapper slotted root class="wrapper">` +
         `<div root slotted-s>hoisted</div>` +
         `<div root slotted-s>dynamic</div>` +
-        `</div>`
+        `</div>`,
     )
 
     const Root2 = {
@@ -143,11 +152,11 @@ describe('scopeId runtime support', () => {
         return h(Slotted, null, {
           default: withCtx(() => [
             h(Wrapper, null, {
-              default: withCtx(() => [hoisted, h('div', 'dynamic')])
-            })
-          ])
+              default: withCtx(() => [hoisted, h('div', 'dynamic')]),
+            }),
+          ]),
         })
-      }
+      },
     }
     const root2 = nodeOps.createElement('div')
     render(h(Root2), root2)
@@ -157,7 +166,7 @@ describe('scopeId runtime support', () => {
         `<div root>hoisted</div>` +
         `<div root>dynamic</div>` +
         `</div>` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -167,7 +176,7 @@ describe('scopeId runtime support', () => {
       __scopeId: 'parent',
       render: () => {
         return h(Child)
-      }
+      },
     }
 
     function Child() {
@@ -184,6 +193,55 @@ describe('scopeId runtime support', () => {
 
     expect(serializeInner(root)).toBe(`<div parent></div>`)
   })
+
+  test('should inherit scopeId through nested DEV_ROOT_FRAGMENT with inheritAttrs: false', async () => {
+    const Parent = {
+      __scopeId: 'parent',
+      render() {
+        return h(Child, { class: 'foo' })
+      },
+    }
+
+    const ok = ref(true)
+    const Child = defineComponent({
+      inheritAttrs: false,
+      render() {
+        return (
+          openBlock(),
+          createBlock(
+            Fragment,
+            null,
+            [
+              createCommentVNode('comment1'),
+              ok.value
+                ? (openBlock(), createBlock('div', { key: 0 }, 'div1'))
+                : (openBlock(),
+                  createBlock(
+                    Fragment,
+                    { key: 1 },
+                    [
+                      createCommentVNode('comment2'),
+                      createVNode('div', null, 'div2'),
+                    ],
+                    PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+                  )),
+            ],
+            PatchFlags.STABLE_FRAGMENT | PatchFlags.DEV_ROOT_FRAGMENT,
+          )
+        )
+      },
+    })
+
+    const root = nodeOps.createElement('div')
+    render(h(Parent), root)
+    expect(serializeInner(root)).toBe(`<!--comment1--><div parent>div1</div>`)
+
+    ok.value = false
+    await nextTick()
+    expect(serializeInner(root)).toBe(
+      `<!--comment1--><!--comment2--><div parent>div2</div>`,
+    )
+  })
 })
 
 describe('backwards compat with <=3.0.7', () => {
@@ -195,7 +253,7 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h('div', [h('div')])
-      })
+      }),
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -207,19 +265,19 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'child',
       render: withChildId(() => {
         return h('div')
-      })
+      }),
     }
     const App = {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h('div', [h(Child)])
-      })
+      }),
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
     expect(serializeInner(root)).toBe(
-      `<div parent><div child parent></div></div>`
+      `<div parent><div child parent></div></div>`,
     )
   })
 
@@ -228,12 +286,12 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'child',
       render: withChildId(function (this: any) {
         return h('div', renderSlot(this.$slots, 'default'))
-      })
+      }),
     }
     const withChild2Id = withScopeId('child2')
     const Child2 = {
       __scopeId: 'child2',
-      render: withChild2Id(() => h('span'))
+      render: withChild2Id(() => h('span')),
     }
     const App = {
       __scopeId: 'parent',
@@ -242,9 +300,9 @@ describe('backwards compat with <=3.0.7', () => {
           Child,
           withParentId(() => {
             return [h('div'), h(Child2)]
-          })
+          }),
         )
-      })
+      }),
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
@@ -259,7 +317,7 @@ describe('backwards compat with <=3.0.7', () => {
         // - slotted scopeId from slot owner
         // - its own scopeId
         `<span child2 parent child-s></span>` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -270,7 +328,7 @@ describe('backwards compat with <=3.0.7', () => {
       __scopeId: 'parent',
       render: withParentId(() => {
         return h(Child)
-      })
+      }),
     }
 
     function Child() {
@@ -295,14 +353,14 @@ describe('backwards compat with <=3.0.7', () => {
 
     const App = {
       __scopeId: 'foobar',
-      render: () => h('div', [hoisted])
+      render: () => h('div', [hoisted]),
     }
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
 
     expect(serializeInner(root)).toBe(
-      `<div foobar><div foobar>hello</div></div>`
+      `<div foobar><div foobar>hello</div></div>`,
     )
   })
 })
diff --git a/packages/runtime-core/__tests__/vnode.spec.ts b/packages/runtime-core/__tests__/vnode.spec.ts
index 02774aafee4..653613ddb2e 100644
--- a/packages/runtime-core/__tests__/vnode.spec.ts
+++ b/packages/runtime-core/__tests__/vnode.spec.ts
@@ -1,19 +1,19 @@
 import {
-  createBlock,
-  createVNode,
-  openBlock,
   Comment,
   Fragment,
   Text,
   cloneVNode,
+  createBlock,
+  createVNode,
+  isBlockTreeEnabled,
   mergeProps,
   normalizeVNode,
+  openBlock,
   transformVNodeArgs,
-  isBlockTreeEnabled
 } from '../src/vnode'
-import { Data } from '../src/component'
-import { ShapeFlags, PatchFlags } from '@vue/shared'
-import { h, reactive, isReactive, setBlockTracking, ref, withCtx } from '../src'
+import type { Data } from '../src/component'
+import { PatchFlags, ShapeFlags } from '@vue/shared'
+import { h, isReactive, reactive, ref, setBlockTracking, withCtx } from '../src'
 import { createApp, nodeOps, serializeInner } from '@vue/runtime-test'
 import { setCurrentRenderingInstance } from '../src/componentRenderContext'
 
@@ -56,10 +56,10 @@ describe('vnode', () => {
       type: 'p',
       props: {
         id: 'foo',
-        class: 'bar'
+        class: 'bar',
       },
       children: 'baz',
-      shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+      shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
     })
   })
 
@@ -94,7 +94,7 @@ describe('vnode', () => {
 
     test('array<object>', () => {
       const vnode = createVNode('p', {
-        class: [{ foo: 'foo' }, { baz: 'baz' }]
+        class: [{ foo: 'foo' }, { baz: 'baz' }],
       })
       expect(vnode.props).toMatchObject({ class: 'foo baz' })
     })
@@ -108,7 +108,7 @@ describe('vnode', () => {
   describe('style normalization', () => {
     test('array', () => {
       const vnode = createVNode('p', {
-        style: [{ foo: 'foo' }, { baz: 'baz' }]
+        style: [{ foo: 'foo' }, { baz: 'baz' }],
       })
       expect(vnode.props).toMatchObject({ style: { foo: 'foo', baz: 'baz' } })
     })
@@ -132,7 +132,7 @@ describe('vnode', () => {
       const vnode = createVNode('p', null, ['foo'])
       expect(vnode.children).toMatchObject(['foo'])
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN,
       )
     })
 
@@ -140,7 +140,7 @@ describe('vnode', () => {
       const vnode = createVNode({}, null, { foo: 'foo' })
       expect(vnode.children).toMatchObject({ foo: 'foo' })
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.SLOTS_CHILDREN
+        ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.SLOTS_CHILDREN,
       )
     })
 
@@ -148,7 +148,7 @@ describe('vnode', () => {
       const vnode = createVNode('p', null, nop)
       expect(vnode.children).toMatchObject({ default: nop })
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.SLOTS_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.SLOTS_CHILDREN,
       )
     })
 
@@ -156,19 +156,19 @@ describe('vnode', () => {
       const vnode = createVNode('p', null, 'foo')
       expect(vnode.children).toBe('foo')
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
       )
     })
 
     test('element with slots', () => {
       const children = [createVNode('span', null, 'hello')]
       const vnode = createVNode('div', null, {
-        default: () => children
+        default: () => children,
       })
 
       expect(vnode.children).toBe(children)
       expect(vnode.shapeFlag).toBe(
-        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN
+        ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN,
       )
     })
   })
@@ -207,7 +207,7 @@ describe('vnode', () => {
     expect(createVNode('div').shapeFlag).toBe(ShapeFlags.ELEMENT)
     expect(createVNode({}).shapeFlag).toBe(ShapeFlags.STATEFUL_COMPONENT)
     expect(createVNode(() => {}).shapeFlag).toBe(
-      ShapeFlags.FUNCTIONAL_COMPONENT
+      ShapeFlags.FUNCTIONAL_COMPONENT,
     )
     expect(createVNode(Text).shapeFlag).toBe(0)
   })
@@ -239,7 +239,7 @@ describe('vnode', () => {
     expect(original.ref).toMatchObject({
       i: mockInstance1,
       r: 'foo',
-      f: false
+      f: false,
     })
 
     // clone and preserve original ref
@@ -276,7 +276,7 @@ describe('vnode', () => {
     expect(original3.ref).toMatchObject({
       i: mockInstance2,
       r: 'foo',
-      f: true
+      f: true,
     })
     const cloned7 = cloneVNode(original3, { ref: 'bar', ref_for: true })
     expect(cloned7.ref).toMatchObject({ i: mockInstance2, r: 'bar', f: true })
@@ -286,7 +286,7 @@ describe('vnode', () => {
     expect(original4.ref).toMatchObject({
       i: mockInstance2,
       r,
-      k: 'foo'
+      k: 'foo',
     })
     const cloned8 = cloneVNode(original4)
     expect(cloned8.ref).toMatchObject({ i: mockInstance2, r, k: 'foo' })
@@ -307,7 +307,7 @@ describe('vnode', () => {
     const cloned1 = cloneVNode(original, { ref: 'bar' }, true)
     expect(cloned1.ref).toMatchObject([
       { i: mockInstance1, r: 'foo', f: false },
-      { i: mockInstance2, r: 'bar', f: false }
+      { i: mockInstance2, r: 'bar', f: false },
     ])
 
     setCurrentRenderingInstance(null)
@@ -316,19 +316,19 @@ describe('vnode', () => {
   test('cloneVNode class normalization', () => {
     const vnode = createVNode('div')
     const expectedProps = {
-      class: 'a b'
+      class: 'a b',
     }
     expect(cloneVNode(vnode, { class: 'a b' }).props).toMatchObject(
-      expectedProps
+      expectedProps,
     )
     expect(cloneVNode(vnode, { class: ['a', 'b'] }).props).toMatchObject(
-      expectedProps
+      expectedProps,
     )
     expect(
-      cloneVNode(vnode, { class: { a: true, b: true } }).props
+      cloneVNode(vnode, { class: { a: true, b: true } }).props,
     ).toMatchObject(expectedProps)
     expect(
-      cloneVNode(vnode, { class: [{ a: true, b: true }] }).props
+      cloneVNode(vnode, { class: [{ a: true, b: true }] }).props,
     ).toMatchObject(expectedProps)
   })
 
@@ -337,29 +337,29 @@ describe('vnode', () => {
     const expectedProps = {
       style: {
         color: 'blue',
-        width: '300px'
-      }
+        width: '300px',
+      },
     }
     expect(
-      cloneVNode(vnode, { style: 'color: blue; width: 300px;' }).props
+      cloneVNode(vnode, { style: 'color: blue; width: 300px;' }).props,
     ).toMatchObject(expectedProps)
     expect(
       cloneVNode(vnode, {
         style: {
           color: 'blue',
-          width: '300px'
-        }
-      }).props
+          width: '300px',
+        },
+      }).props,
     ).toMatchObject(expectedProps)
     expect(
       cloneVNode(vnode, {
         style: [
           {
             color: 'blue',
-            width: '300px'
-          }
-        ]
-      }).props
+            width: '300px',
+          },
+        ],
+      }).props,
     ).toMatchObject(expectedProps)
   })
 
@@ -370,7 +370,7 @@ describe('vnode', () => {
       let props3: Data = { class: [{ ccc: true }] }
       let props4: Data = { class: { cccc: true } }
       expect(mergeProps(props1, props2, props3, props4)).toMatchObject({
-        class: 'c cc ccc cccc'
+        class: 'c cc ccc cccc',
       })
     })
 
@@ -379,49 +379,49 @@ describe('vnode', () => {
         style: [
           {
             color: 'red',
-            fontSize: 10
-          }
-        ]
+            fontSize: 10,
+          },
+        ],
       }
       let props2: Data = {
         style: [
           {
             color: 'blue',
-            width: '200px'
+            width: '200px',
           },
           {
             width: '300px',
             height: '300px',
-            fontSize: 30
-          }
-        ]
+            fontSize: 30,
+          },
+        ],
       }
       expect(mergeProps(props1, props2)).toMatchObject({
         style: {
           color: 'blue',
           width: '300px',
           height: '300px',
-          fontSize: 30
-        }
+          fontSize: 30,
+        },
       })
     })
 
     test('style w/ strings', () => {
       let props1: Data = {
-        style: 'width:100px;right:10;top:10'
+        style: 'width:100px;right:10;top:10',
       }
       let props2: Data = {
         style: [
           {
             color: 'blue',
-            width: '200px'
+            width: '200px',
           },
           {
             width: '300px',
             height: '300px',
-            fontSize: 30
-          }
-        ]
+            fontSize: 30,
+          },
+        ],
       }
       expect(mergeProps(props1, props2)).toMatchObject({
         style: {
@@ -430,8 +430,8 @@ describe('vnode', () => {
           height: '300px',
           fontSize: 30,
           right: '10',
-          top: '10'
-        }
+          top: '10',
+        },
       })
     })
 
@@ -444,11 +444,11 @@ describe('vnode', () => {
       let props2: Data = { onClick: clickHandler2, onFocus: focusHandler2 }
       expect(mergeProps(props1, props2)).toMatchObject({
         onClick: [clickHandler1, clickHandler2],
-        onFocus: focusHandler2
+        onFocus: focusHandler2,
       })
       let props3: Data = { onClick: undefined }
       expect(mergeProps(props1, props3)).toMatchObject({
-        onClick: clickHandler1
+        onClick: clickHandler1,
       })
     })
 
@@ -459,7 +459,7 @@ describe('vnode', () => {
       expect(mergeProps(props1, props2, props3)).toMatchObject({
         foo: {},
         bar: ['cc'],
-        baz: { ccc: true }
+        baz: { ccc: true },
       })
     })
   })
@@ -472,18 +472,18 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT))
+          (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
 
-    test('should not track vnodes with only HYDRATE_EVENTS flag', () => {
+    test('should not track vnodes with only NEED_HYDRATION flag', () => {
       const hoist = createVNode('div')
       const vnode =
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          createVNode('div', null, 'text', PatchFlags.HYDRATE_EVENTS)
+          createVNode('div', null, 'text', PatchFlags.NEED_HYDRATION),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([])
     })
@@ -500,8 +500,8 @@ describe('vnode', () => {
             (openBlock(),
             createBlock('div', null, [
               hoist,
-              (vnode3 = createVNode('div', null, 'text', PatchFlags.TEXT))
-            ])))
+              (vnode3 = createVNode('div', null, 'text', PatchFlags.TEXT)),
+            ]))),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1, vnode2])
       expect(vnode2.dynamicChildren).toStrictEqual([vnode3])
@@ -514,7 +514,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode({}, null, 'text'))
+          (vnode1 = createVNode({}, null, 'text')),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -526,7 +526,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode(() => {}, null, 'text'))
+          (vnode1 = createVNode(() => {}, null, 'text')),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -538,7 +538,7 @@ describe('vnode', () => {
         (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode1 = createVNode(() => {}, null, 'text'))
+          (vnode1 = createVNode(() => {}, null, 'text')),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -558,9 +558,9 @@ describe('vnode', () => {
           default: () => {
             return [
               hoist,
-              (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT))
+              (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)),
             ]
-          }
+          },
         }))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
@@ -578,8 +578,8 @@ describe('vnode', () => {
             (openBlock(true),
             createBlock(Fragment, null, [
               hoist,
-              /*vnode2*/ createVNode(() => {}, null, 'text')
-            ])))
+              /*vnode2*/ createVNode(() => {}, null, 'text'),
+            ]))),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
       expect(vnode1.dynamicChildren).toStrictEqual([])
@@ -595,8 +595,8 @@ describe('vnode', () => {
             (openBlock(),
             createBlock(Fragment, null, [
               hoist,
-              (vnode2 = createVNode(() => {}, null, 'text'))
-            ])))
+              (vnode2 = createVNode(() => {}, null, 'text')),
+            ]))),
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
       expect(vnode1.dynamicChildren).toStrictEqual([vnode2])
@@ -610,7 +610,7 @@ describe('vnode', () => {
           setBlockTracking(-1),
           (vnode1 = (openBlock(), createBlock('div'))),
           setBlockTracking(1),
-          vnode1
+          vnode1,
         ]))
       expect(vnode.dynamicChildren).toStrictEqual([])
     })
@@ -621,7 +621,7 @@ describe('vnode', () => {
         () => {
           throw new Error('slot execution error')
         },
-        { type: {}, appContext: {} } as any
+        { type: {}, appContext: {} } as any,
       )
       const Parent = {
         setup(_: any, { slots }: any) {
@@ -630,7 +630,7 @@ describe('vnode', () => {
               slots.default()
             } catch (e) {}
           }
-        }
+        },
       }
       const vnode =
         (openBlock(), createBlock(Parent, null, { default: slotFn }))
@@ -652,7 +652,7 @@ describe('vnode', () => {
         type: 'div',
         props: { id: 'foo' },
         children: 'hello',
-        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
       })
     })
 
@@ -663,7 +663,7 @@ describe('vnode', () => {
         type: 'div',
         props: { id: 'foo' },
         children: 'hello',
-        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN
+        shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN,
       })
     })
 
@@ -680,7 +680,7 @@ describe('vnode', () => {
         name: 'Root Component',
         render() {
           return h('p') // this will be overwritten by the transform
-        }
+        },
       }
       const root = nodeOps.createElement('div')
       createApp(App).mount(root)
diff --git a/packages/runtime-core/__tests__/vnodeHooks.spec.ts b/packages/runtime-core/__tests__/vnodeHooks.spec.ts
index 15478bfd743..bd3a8a378fe 100644
--- a/packages/runtime-core/__tests__/vnodeHooks.spec.ts
+++ b/packages/runtime-core/__tests__/vnodeHooks.spec.ts
@@ -1,11 +1,11 @@
 import {
+  type TestElement,
+  TestNodeTypes,
+  type VNode,
+  type VNodeProps,
   h,
-  render,
   nodeOps,
-  VNodeProps,
-  TestElement,
-  TestNodeTypes,
-  VNode
+  render,
 } from '@vue/runtime-test'
 
 describe('renderer: vnode hooks', () => {
@@ -45,17 +45,17 @@ describe('renderer: vnode hooks', () => {
       onVnodeBeforeUpdate: vi.fn(vnode => {
         expect((vnode.el as TestElement).children[0]).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'foo'
+          text: 'foo',
         })
       }),
       onVnodeUpdated: vi.fn(vnode => {
         expect((vnode.el as TestElement).children[0]).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'bar'
+          text: 'bar',
         })
       }),
       onVnodeBeforeUnmount: vi.fn(),
-      onVnodeUnmounted: vi.fn()
+      onVnodeUnmounted: vi.fn(),
     }
 
     assertHooks(hooks, h('div', hooks, 'foo'), h('div', hooks, 'bar'))
@@ -70,29 +70,29 @@ describe('renderer: vnode hooks', () => {
       onVnodeBeforeUpdate: vi.fn(vnode => {
         expect(vnode.el as TestElement).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'foo'
+          text: 'foo',
         })
       }),
       onVnodeUpdated: vi.fn(vnode => {
         expect(vnode.el as TestElement).toMatchObject({
           type: TestNodeTypes.TEXT,
-          text: 'bar'
+          text: 'bar',
         })
       }),
       onVnodeBeforeUnmount: vi.fn(),
-      onVnodeUnmounted: vi.fn()
+      onVnodeUnmounted: vi.fn(),
     }
 
     assertHooks(
       hooks,
       h(Comp, {
         ...hooks,
-        msg: 'foo'
+        msg: 'foo',
       }),
       h(Comp, {
         ...hooks,
-        msg: 'bar'
-      })
+        msg: 'bar',
+      }),
     )
   })
 })
diff --git a/packages/runtime-core/package.json b/packages/runtime-core/package.json
index 946420ebf5a..ae8d911bc8f 100644
--- a/packages/runtime-core/package.json
+++ b/packages/runtime-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/runtime-core.d.ts",
+      "node": {
+        "production": "./dist/runtime-core.cjs.prod.js",
+        "development": "./dist/runtime-core.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/runtime-core.esm-bundler.js",
+      "import": "./dist/runtime-core.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueRuntimeCore",
     "formats": [
@@ -32,7 +46,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-core#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/reactivity": "3.3.5"
+    "@vue/shared": "workspace:*",
+    "@vue/reactivity": "workspace:*"
   }
 }
diff --git a/packages/runtime-core/src/apiAsyncComponent.ts b/packages/runtime-core/src/apiAsyncComponent.ts
index 342339042ef..4c6e4bad11b 100644
--- a/packages/runtime-core/src/apiAsyncComponent.ts
+++ b/packages/runtime-core/src/apiAsyncComponent.ts
@@ -1,18 +1,18 @@
 import {
-  Component,
-  ConcreteComponent,
+  type Component,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
   currentInstance,
-  ComponentInternalInstance,
   isInSSRComponentSetup,
-  ComponentOptions
 } from './component'
 import { isFunction, isObject } from '@vue/shared'
-import { ComponentPublicInstance } from './componentPublicInstance'
-import { createVNode, VNode } from './vnode'
+import type { ComponentPublicInstance } from './componentPublicInstance'
+import { type VNode, createVNode } from './vnode'
 import { defineComponent } from './apiDefineComponent'
 import { warn } from './warning'
 import { ref } from '@vue/reactivity'
-import { handleError, ErrorCodes } from './errorHandling'
+import { ErrorCodes, handleError } from './errorHandling'
 import { isKeepAlive } from './components/KeepAlive'
 import { queueJob } from './scheduler'
 
@@ -33,7 +33,7 @@ export interface AsyncComponentOptions<T = any> {
     error: Error,
     retry: () => void,
     fail: () => void,
-    attempts: number
+    attempts: number,
   ) => any
 }
 
@@ -42,7 +42,7 @@ export const isAsyncWrapper = (i: ComponentInternalInstance | VNode): boolean =>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineAsyncComponent<
-  T extends Component = { new (): ComponentPublicInstance }
+  T extends Component = { new (): ComponentPublicInstance },
 >(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
   if (isFunction(source)) {
     source = { loader: source }
@@ -55,7 +55,7 @@ export function defineAsyncComponent<
     delay = 200,
     timeout, // undefined = never times out
     suspensible = true,
-    onError: userOnError
+    onError: userOnError,
   } = source
 
   let pendingRequest: Promise<ConcreteComponent> | null = null
@@ -93,7 +93,7 @@ export function defineAsyncComponent<
             if (__DEV__ && !comp) {
               warn(
                 `Async component loader resolved to undefined. ` +
-                  `If you are using retry(), make sure to return its return value.`
+                  `If you are using retry(), make sure to return its return value.`,
               )
             }
             // interop module default
@@ -135,7 +135,7 @@ export function defineAsyncComponent<
           err,
           instance,
           ErrorCodes.ASYNC_COMPONENT_LOADER,
-          !errorComponent /* do not throw in dev if user provided error component */
+          !errorComponent /* do not throw in dev if user provided error component */,
         )
       }
 
@@ -153,7 +153,7 @@ export function defineAsyncComponent<
             return () =>
               errorComponent
                 ? createVNode(errorComponent as ConcreteComponent, {
-                    error: err
+                    error: err,
                   })
                 : null
           })
@@ -173,7 +173,7 @@ export function defineAsyncComponent<
         setTimeout(() => {
           if (!loaded.value && !error.value) {
             const err = new Error(
-              `Async component timed out after ${timeout}ms.`
+              `Async component timed out after ${timeout}ms.`,
             )
             onError(err)
             error.value = err
@@ -187,6 +187,7 @@ export function defineAsyncComponent<
           if (instance.parent && isKeepAlive(instance.parent.vnode)) {
             // parent is keep-alive, force update so the loaded component's
             // name is taken into account
+            instance.parent.effect.dirty = true
             queueJob(instance.parent.update)
           }
         })
@@ -200,19 +201,19 @@ export function defineAsyncComponent<
           return createInnerComp(resolvedComp, instance)
         } else if (error.value && errorComponent) {
           return createVNode(errorComponent, {
-            error: error.value
+            error: error.value,
           })
         } else if (loadingComponent && !delayed.value) {
           return createVNode(loadingComponent)
         }
       }
-    }
+    },
   }) as T
 }
 
 function createInnerComp(
   comp: ConcreteComponent,
-  parent: ComponentInternalInstance
+  parent: ComponentInternalInstance,
 ) {
   const { ref, props, children, ce } = parent.vnode
   const vnode = createVNode(comp, props, children)
diff --git a/packages/runtime-core/src/apiComputed.ts b/packages/runtime-core/src/apiComputed.ts
index 1cd9c2ec218..97db0da453c 100644
--- a/packages/runtime-core/src/apiComputed.ts
+++ b/packages/runtime-core/src/apiComputed.ts
@@ -3,8 +3,8 @@ import { isInSSRComponentSetup } from './component'
 
 export const computed: typeof _computed = (
   getterOrOptions: any,
-  debugOptions?: any
+  debugOptions?: any,
 ) => {
-  // @ts-ignore
+  // @ts-expect-error
   return _computed(getterOrOptions, debugOptions, isInSSRComponentSetup)
 }
diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index c5ac9d68a52..c476cdbe701 100644
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -1,32 +1,33 @@
 import {
-  ConcreteComponent,
-  Data,
+  type Component,
+  type ComponentInternalInstance,
+  type ConcreteComponent,
+  type Data,
+  getExposeProxy,
   validateComponentName,
-  Component,
-  ComponentInternalInstance,
-  getExposeProxy
 } from './component'
-import {
+import type {
   ComponentOptions,
   MergedComponentOptions,
-  RuntimeCompilerOptions
+  RuntimeCompilerOptions,
 } from './componentOptions'
-import {
+import type {
   ComponentCustomProperties,
-  ComponentPublicInstance
+  ComponentPublicInstance,
 } from './componentPublicInstance'
-import { Directive, validateDirectiveName } from './directives'
-import { RootRenderFunction } from './renderer'
-import { InjectionKey } from './apiInject'
+import { type Directive, validateDirectiveName } from './directives'
+import type { ElementNamespace, RootRenderFunction } from './renderer'
+import type { InjectionKey } from './apiInject'
 import { warn } from './warning'
-import { createVNode, cloneVNode, VNode } from './vnode'
-import { RootHydrateFunction } from './hydration'
+import { type VNode, cloneVNode, createVNode } from './vnode'
+import type { RootHydrateFunction } from './hydration'
 import { devtoolsInitApp, devtoolsUnmountApp } from './devtools'
-import { isFunction, NO, isObject, extend } from '@vue/shared'
+import { NO, extend, isFunction, isObject } from '@vue/shared'
 import { version } from '.'
 import { installAppCompatProperties } from './compat/global'
-import { NormalizedPropsOptions } from './componentProps'
-import { ObjectEmitsOptions } from './componentEmits'
+import type { NormalizedPropsOptions } from './componentProps'
+import type { ObjectEmitsOptions } from './componentEmits'
+import type { DefineComponent } from './apiDefineComponent'
 
 export interface App<HostElement = any> {
   version: string
@@ -40,13 +41,13 @@ export interface App<HostElement = any> {
 
   mixin(mixin: ComponentOptions): this
   component(name: string): Component | undefined
-  component(name: string, component: Component): this
-  directive(name: string): Directive | undefined
-  directive(name: string, directive: Directive): this
+  component(name: string, component: Component | DefineComponent): this
+  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
+  directive<T = any, V = any>(name: string, directive: Directive<T, V>): this
   mount(
     rootContainer: HostElement | string,
     isHydrate?: boolean,
-    isSVG?: boolean
+    namespace?: boolean | ElementNamespace,
   ): ComponentPublicInstance
   unmount(): void
   provide<T>(key: InjectionKey<T> | string, value: T): this
@@ -91,12 +92,12 @@ export interface AppConfig {
   errorHandler?: (
     err: unknown,
     instance: ComponentPublicInstance | null,
-    info: string
+    info: string,
   ) => void
   warnHandler?: (
     msg: string,
     instance: ComponentPublicInstance | null,
-    trace: string
+    trace: string,
   ) => void
 
   /**
@@ -109,13 +110,6 @@ export interface AppConfig {
    * @deprecated use config.compilerOptions.isCustomElement
    */
   isCustomElement?: (tag: string) => boolean
-
-  // TODO remove in 3.4
-  /**
-   * Temporary config for opt-in to unwrap injected refs.
-   * @deprecated this no longer has effect. 3.3 always unwraps injected refs.
-   */
-  unwrapInjectedRef?: boolean
 }
 
 export interface AppContext {
@@ -155,17 +149,19 @@ export interface AppContext {
   filters?: Record<string, Function>
 }
 
-type PluginInstallFunction<Options> = Options extends unknown[]
+type PluginInstallFunction<Options = any[]> = Options extends unknown[]
   ? (app: App, ...options: Options) => any
   : (app: App, options: Options) => any
 
+export type ObjectPlugin<Options = any[]> = {
+  install: PluginInstallFunction<Options>
+}
+export type FunctionPlugin<Options = any[]> = PluginInstallFunction<Options> &
+  Partial<ObjectPlugin<Options>>
+
 export type Plugin<Options = any[]> =
-  | (PluginInstallFunction<Options> & {
-      install?: PluginInstallFunction<Options>
-    })
-  | {
-      install: PluginInstallFunction<Options>
-    }
+  | FunctionPlugin<Options>
+  | ObjectPlugin<Options>
 
 export function createAppContext(): AppContext {
   return {
@@ -177,7 +173,7 @@ export function createAppContext(): AppContext {
       optionMergeStrategies: {},
       errorHandler: undefined,
       warnHandler: undefined,
-      compilerOptions: {}
+      compilerOptions: {},
     },
     mixins: [],
     components: {},
@@ -185,20 +181,20 @@ export function createAppContext(): AppContext {
     provides: Object.create(null),
     optionsCache: new WeakMap(),
     propsCache: new WeakMap(),
-    emitsCache: new WeakMap()
+    emitsCache: new WeakMap(),
   }
 }
 
 export type CreateAppFunction<HostElement> = (
   rootComponent: Component,
-  rootProps?: Data | null
+  rootProps?: Data | null,
 ) => App<HostElement>
 
 let uid = 0
 
 export function createAppAPI<HostElement>(
   render: RootRenderFunction<HostElement>,
-  hydrate?: RootHydrateFunction
+  hydrate?: RootHydrateFunction,
 ): CreateAppFunction<HostElement> {
   return function createApp(rootComponent, rootProps = null) {
     if (!isFunction(rootComponent)) {
@@ -211,23 +207,7 @@ export function createAppAPI<HostElement>(
     }
 
     const context = createAppContext()
-
-    // TODO remove in 3.4
-    if (__DEV__) {
-      Object.defineProperty(context.config, 'unwrapInjectedRef', {
-        get() {
-          return true
-        },
-        set() {
-          warn(
-            `app.config.unwrapInjectedRef has been deprecated. ` +
-              `3.3 now always unwraps injected refs in Options API.`
-          )
-        }
-      })
-    }
-
-    const installedPlugins = new Set()
+    const installedPlugins = new WeakSet()
 
     let isMounted = false
 
@@ -248,7 +228,7 @@ export function createAppAPI<HostElement>(
       set config(v) {
         if (__DEV__) {
           warn(
-            `app.config cannot be replaced. Modify individual options instead.`
+            `app.config cannot be replaced. Modify individual options instead.`,
           )
         }
       },
@@ -265,7 +245,7 @@ export function createAppAPI<HostElement>(
         } else if (__DEV__) {
           warn(
             `A plugin must either be a function or an object with an "install" ` +
-              `function.`
+              `function.`,
           )
         }
         return app
@@ -278,7 +258,7 @@ export function createAppAPI<HostElement>(
           } else if (__DEV__) {
             warn(
               'Mixin has already been applied to target app' +
-                (mixin.name ? `: ${mixin.name}` : '')
+                (mixin.name ? `: ${mixin.name}` : ''),
             )
           }
         } else if (__DEV__) {
@@ -319,7 +299,7 @@ export function createAppAPI<HostElement>(
       mount(
         rootContainer: HostElement,
         isHydrate?: boolean,
-        isSVG?: boolean
+        namespace?: boolean | ElementNamespace,
       ): any {
         if (!isMounted) {
           // #5571
@@ -327,7 +307,7 @@ export function createAppAPI<HostElement>(
             warn(
               `There is already an app instance mounted on the host container.\n` +
                 ` If you want to mount another app on the same host container,` +
-                ` you need to unmount the previous app by calling \`app.unmount()\` first.`
+                ` you need to unmount the previous app by calling \`app.unmount()\` first.`,
             )
           }
           const vnode = createVNode(rootComponent, rootProps)
@@ -335,17 +315,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
@@ -363,7 +355,7 @@ export function createAppAPI<HostElement>(
             `App has already been mounted.\n` +
               `If you want to remount the same app, move your app creation logic ` +
               `into a factory function and create fresh app instances for each ` +
-              `mount - e.g. \`const createMyApp = () => createApp(App)\``
+              `mount - e.g. \`const createMyApp = () => createApp(App)\``,
           )
         }
       },
@@ -385,7 +377,7 @@ export function createAppAPI<HostElement>(
         if (__DEV__ && (key as string | symbol) in context.provides) {
           warn(
             `App already provides property with key "${String(key)}". ` +
-              `It will be overwritten with the new value.`
+              `It will be overwritten with the new value.`,
           )
         }
 
@@ -395,13 +387,14 @@ export function createAppAPI<HostElement>(
       },
 
       runWithContext(fn) {
+        const lastApp = currentApp
         currentApp = app
         try {
           return fn()
         } finally {
-          currentApp = null
+          currentApp = lastApp
         }
-      }
+      },
     })
 
     if (__COMPAT__) {
diff --git a/packages/runtime-core/src/apiDefineComponent.ts b/packages/runtime-core/src/apiDefineComponent.ts
index 272bb548751..47bcf9f2acb 100644
--- a/packages/runtime-core/src/apiDefineComponent.ts
+++ b/packages/runtime-core/src/apiDefineComponent.ts
@@ -1,34 +1,34 @@
-import {
-  ComputedOptions,
-  MethodOptions,
-  ComponentOptionsWithoutProps,
+import type {
+  ComponentInjectOptions,
+  ComponentOptions,
+  ComponentOptionsBase,
+  ComponentOptionsMixin,
   ComponentOptionsWithArrayProps,
   ComponentOptionsWithObjectProps,
-  ComponentOptionsMixin,
+  ComponentOptionsWithoutProps,
+  ComputedOptions,
+  MethodOptions,
   RenderFunction,
-  ComponentOptionsBase,
-  ComponentInjectOptions,
-  ComponentOptions
 } from './componentOptions'
-import {
-  SetupContext,
+import type {
   AllowedComponentProps,
-  ComponentCustomProps
+  ComponentCustomProps,
+  SetupContext,
 } from './component'
-import {
-  ExtractPropTypes,
+import type {
+  ComponentObjectPropsOptions,
   ComponentPropsOptions,
   ExtractDefaultPropTypes,
-  ComponentObjectPropsOptions
+  ExtractPropTypes,
 } from './componentProps'
-import { EmitsOptions, EmitsToProps } from './componentEmits'
+import type { EmitsOptions, EmitsToProps } from './componentEmits'
 import { extend, isFunction } from '@vue/shared'
-import { VNodeProps } from './vnode'
-import {
+import type { VNodeProps } from './vnode'
+import type {
+  ComponentPublicInstanceConstructor,
   CreateComponentPublicInstance,
-  ComponentPublicInstanceConstructor
 } from './componentPublicInstance'
-import { SlotsType } from './componentSlots'
+import type { SlotsType } from './componentSlots'
 
 export type PublicProps = VNodeProps &
   AllowedComponentProps &
@@ -54,7 +54,7 @@ export type DefineComponent<
   PP = PublicProps,
   Props = ResolveProps<PropsOrPropOptions, E>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 > = ComponentPublicInstanceConstructor<
   CreateComponentPublicInstance<
     Props,
@@ -70,8 +70,7 @@ export type DefineComponent<
     true,
     {},
     S
-  > &
-    Props
+  >
 > &
   ComponentOptionsBase<
     Props,
@@ -101,33 +100,33 @@ export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   setup: (
     props: Props,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S>,
   ) => RenderFunction | Promise<RenderFunction>,
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: (keyof Props)[]
     emits?: E | EE[]
     slots?: S
-  }
+  },
 ): (props: Props & EmitsToProps<E>) => any
 export function defineComponent<
   Props extends Record<string, any>,
   E extends EmitsOptions = {},
   EE extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   setup: (
     props: Props,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S>,
   ) => RenderFunction | Promise<RenderFunction>,
   options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
     props?: ComponentObjectPropsOptions<Props>
     emits?: E | EE[]
     slots?: S
-  }
+  },
 ): (props: Props & EmitsToProps<E>) => any
 
 // overload 2: object format with no props
@@ -145,7 +144,7 @@ export function defineComponent<
   EE extends string = string,
   S extends SlotsType = {},
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
 >(
   options: ComponentOptionsWithoutProps<
     Props,
@@ -160,7 +159,7 @@ export function defineComponent<
     I,
     II,
     S
-  >
+  >,
 ): DefineComponent<
   Props,
   RawBindings,
@@ -193,7 +192,7 @@ export function defineComponent<
   S extends SlotsType = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  Props = Readonly<{ [key in PropNames]?: any }>
+  Props = Readonly<{ [key in PropNames]?: any }>,
 >(
   options: ComponentOptionsWithArrayProps<
     PropNames,
@@ -208,7 +207,7 @@ export function defineComponent<
     I,
     II,
     S
-  >
+  >,
 ): DefineComponent<
   Props,
   RawBindings,
@@ -241,7 +240,7 @@ export function defineComponent<
   EE extends string = string,
   S extends SlotsType = {},
   I extends ComponentInjectOptions = {},
-  II extends string = string
+  II extends string = string,
 >(
   options: ComponentOptionsWithObjectProps<
     PropsOptions,
@@ -256,7 +255,7 @@ export function defineComponent<
     I,
     II,
     S
-  >
+  >,
 ): DefineComponent<
   PropsOptions,
   RawBindings,
@@ -277,7 +276,7 @@ export function defineComponent<
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineComponent(
   options: unknown,
-  extraOptions?: ComponentOptions
+  extraOptions?: ComponentOptions,
 ) {
   return isFunction(options)
     ? // #8326: extend call and options.name access are considered side-effects
diff --git a/packages/runtime-core/src/apiInject.ts b/packages/runtime-core/src/apiInject.ts
index bbf925102d8..f15983604bb 100644
--- a/packages/runtime-core/src/apiInject.ts
+++ b/packages/runtime-core/src/apiInject.ts
@@ -8,7 +8,7 @@ export interface InjectionKey<T> extends Symbol {}
 
 export function provide<T, K = InjectionKey<T> | string | number>(
   key: K,
-  value: K extends InjectionKey<infer V> ? V : T
+  value: K extends InjectionKey<infer V> ? V : T,
 ) {
   if (!currentInstance) {
     if (__DEV__) {
@@ -35,17 +35,17 @@ export function inject<T>(key: InjectionKey<T> | string): T | undefined
 export function inject<T>(
   key: InjectionKey<T> | string,
   defaultValue: T,
-  treatDefaultAsFactory?: false
+  treatDefaultAsFactory?: false,
 ): T
 export function inject<T>(
   key: InjectionKey<T> | string,
   defaultValue: T | (() => T),
-  treatDefaultAsFactory: true
+  treatDefaultAsFactory: true,
 ): T
 export function inject(
   key: InjectionKey<any> | string,
   defaultValue?: unknown,
-  treatDefaultAsFactory = false
+  treatDefaultAsFactory = false,
 ) {
   // fallback to `currentRenderingInstance` so that this can be called in
   // a functional component
diff --git a/packages/runtime-core/src/apiLifecycle.ts b/packages/runtime-core/src/apiLifecycle.ts
index 0cd88846354..741d43ec45c 100644
--- a/packages/runtime-core/src/apiLifecycle.ts
+++ b/packages/runtime-core/src/apiLifecycle.ts
@@ -1,15 +1,18 @@
 import {
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
   currentInstance,
   isInSSRComponentSetup,
   setCurrentInstance,
-  unsetCurrentInstance
 } from './component'
-import { ComponentPublicInstance } from './componentPublicInstance'
-import { callWithAsyncErrorHandling, ErrorTypeStrings } from './errorHandling'
+import type { ComponentPublicInstance } from './componentPublicInstance'
+import { ErrorTypeStrings, callWithAsyncErrorHandling } from './errorHandling'
 import { warn } from './warning'
 import { toHandlerKey } from '@vue/shared'
-import { DebuggerEvent, pauseTracking, resetTracking } from '@vue/reactivity'
+import {
+  type DebuggerEvent,
+  pauseTracking,
+  resetTracking,
+} from '@vue/reactivity'
 import { LifecycleHooks } from './enums'
 
 export { onActivated, onDeactivated } from './components/KeepAlive'
@@ -18,7 +21,7 @@ export function injectHook(
   type: LifecycleHooks,
   hook: Function & { __weh?: Function },
   target: ComponentInternalInstance | null = currentInstance,
-  prepend: boolean = false
+  prepend: boolean = false,
 ): Function | undefined {
   if (target) {
     const hooks = target[type] || (target[type] = [])
@@ -37,9 +40,9 @@ export function injectHook(
         // Set currentInstance during hook invocation.
         // This assumes the hook does not synchronously trigger other hooks, which
         // can only be false when the user does something really funky.
-        setCurrentInstance(target)
+        const reset = setCurrentInstance(target)
         const res = callWithAsyncErrorHandling(hook, target, type, args)
-        unsetCurrentInstance()
+        reset()
         resetTracking()
         return res
       })
@@ -58,7 +61,7 @@ export function injectHook(
         (__FEATURE_SUSPENSE__
           ? ` If you are using async setup(), make sure to register lifecycle ` +
             `hooks before the first await statement.`
-          : ``)
+          : ``),
     )
   }
 }
@@ -80,21 +83,21 @@ export const onServerPrefetch = createHook(LifecycleHooks.SERVER_PREFETCH)
 
 export type DebuggerHook = (e: DebuggerEvent) => void
 export const onRenderTriggered = createHook<DebuggerHook>(
-  LifecycleHooks.RENDER_TRIGGERED
+  LifecycleHooks.RENDER_TRIGGERED,
 )
 export const onRenderTracked = createHook<DebuggerHook>(
-  LifecycleHooks.RENDER_TRACKED
+  LifecycleHooks.RENDER_TRACKED,
 )
 
 export type ErrorCapturedHook<TError = unknown> = (
   err: TError,
   instance: ComponentPublicInstance | null,
-  info: string
+  info: string,
 ) => boolean | void
 
 export function onErrorCaptured<TError = Error>(
   hook: ErrorCapturedHook<TError>,
-  target: ComponentInternalInstance | null = currentInstance
+  target: ComponentInternalInstance | null = currentInstance,
 ) {
   injectHook(LifecycleHooks.ERROR_CAPTURED, hook, target)
 }
diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 93200667081..e5f79444da0 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -1,43 +1,42 @@
 import {
+  type LooseRequired,
+  type Prettify,
+  type UnionToIntersection,
+  extend,
   isArray,
-  isPromise,
   isFunction,
-  Prettify,
-  UnionToIntersection,
-  extend
+  isPromise,
 } from '@vue/shared'
 import {
+  type SetupContext,
+  createSetupContext,
   getCurrentInstance,
   setCurrentInstance,
-  SetupContext,
-  createSetupContext,
-  unsetCurrentInstance
+  unsetCurrentInstance,
 } from './component'
-import { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
-import {
+import type { EmitFn, EmitsOptions, ObjectEmitsOptions } from './componentEmits'
+import type {
   ComponentOptionsMixin,
   ComponentOptionsWithoutProps,
   ComputedOptions,
-  MethodOptions
+  MethodOptions,
 } from './componentOptions'
-import {
-  ComponentPropsOptions,
+import type {
   ComponentObjectPropsOptions,
+  ComponentPropsOptions,
   ExtractPropTypes,
-  NormalizedProps,
-  PropOptions
+  PropOptions,
 } from './componentProps'
 import { warn } from './warning'
-import { SlotsType, StrictUnwrapSlotsType } from './componentSlots'
-import { Ref, ref } from '@vue/reactivity'
-import { watch } from './apiWatch'
+import type { SlotsType, StrictUnwrapSlotsType } from './componentSlots'
+import type { Ref } from '@vue/reactivity'
 
 // dev only
 const warnRuntimeUsage = (method: string) =>
   warn(
     `${method}() is a compiler-hint helper that is only usable inside ` +
       `<script setup> of a single file component. Its arguments should be ` +
-      `compiled away and passing it at runtime has no effect.`
+      `compiled away and passing it at runtime has no effect.`,
   )
 
 /**
@@ -65,24 +64,24 @@ const warnRuntimeUsage = (method: string) =>
  *   foo?: string
  *   bar: number
  * }>()
+ * ```
  *
  * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits}
- * ```
  *
  * This is only usable inside `<script setup>`, is compiled away in the
  * output and should **not** be actually called at runtime.
  */
 // overload 1: runtime props w/ array
 export function defineProps<PropNames extends string = string>(
-  props: PropNames[]
+  props: PropNames[],
 ): Prettify<Readonly<{ [key in PropNames]?: any }>>
 // overload 2: runtime props w/ object
 export function defineProps<
-  PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions
+  PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions,
 >(props: PP): Prettify<Readonly<ExtractPropTypes<PP>>>
 // overload 3: typed-based declaration
 export function defineProps<TypeProps>(): DefineProps<
-  TypeProps,
+  LooseRequired<TypeProps>,
   BooleanKey<TypeProps>
 >
 // implementation
@@ -93,7 +92,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
 }
 
@@ -115,8 +114,9 @@ type BooleanKey<T, K extends keyof T = keyof T> = K extends any
  * Example type-based declaration:
  * ```ts
  * const emit = defineEmits<{
- *   (event: 'change'): void
- *   (event: 'update', id: number): void
+ *   // <eventName>: <expected arguments>
+ *   change: []
+ *   update: [value: string] // named tuple syntax
  * }>()
  *
  * emit('change')
@@ -130,13 +130,13 @@ type BooleanKey<T, K extends keyof T = keyof T> = K extends any
  */
 // overload 1: runtime emits w/ array
 export function defineEmits<EE extends string = string>(
-  emitOptions: EE[]
+  emitOptions: EE[],
 ): EmitFn<EE[]>
 export function defineEmits<E extends EmitsOptions = EmitsOptions>(
-  emitOptions: E
+  emitOptions: E,
 ): EmitFn<E>
 export function defineEmits<
-  T extends ((...args: any[]) => any) | Record<string, any[]>
+  T extends ((...args: any[]) => any) | Record<string, any[]>,
 >(): T extends (...args: any[]) => any ? T : ShortEmits<T>
 // implementation
 export function defineEmits() {
@@ -169,7 +169,7 @@ type ShortEmits<T extends Record<string, any>> = UnionToIntersection<
  * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineexpose}
  */
 export function defineExpose<
-  Exposed extends Record<string, any> = Record<string, any>
+  Exposed extends Record<string, any> = Record<string, any>,
 >(exposed?: Exposed) {
   if (__DEV__) {
     warnRuntimeUsage(`defineExpose`)
@@ -189,7 +189,7 @@ export function defineOptions<
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
   Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
-  Extends extends ComponentOptionsMixin = ComponentOptionsMixin
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
 >(
   options?: ComponentOptionsWithoutProps<
     {},
@@ -199,7 +199,7 @@ export function defineOptions<
     M,
     Mixin,
     Extends
-  > & { emits?: undefined; expose?: undefined; slots?: undefined }
+  > & { emits?: undefined; expose?: undefined; slots?: undefined },
 ): void {
   if (__DEV__) {
     warnRuntimeUsage(`defineOptions`)
@@ -207,7 +207,7 @@ export function defineOptions<
 }
 
 export function defineSlots<
-  S extends Record<string, any> = Record<string, any>
+  S extends Record<string, any> = Record<string, any>,
 >(): StrictUnwrapSlotsType<SlotsType<S>> {
   if (__DEV__) {
     warnRuntimeUsage(`defineSlots`)
@@ -215,8 +215,16 @@ export function defineSlots<
   return null as any
 }
 
+export type ModelRef<T, M extends string | number | symbol = string> = Ref<T> &
+  [ModelRef<T, M>, Record<M, true | undefined>]
+
+export type DefineModelOptions<T = any> = {
+  get?: (v: T) => any
+  set?: (v: T) => any
+}
+
 /**
- * (**Experimental**) Vue `<script setup>` compiler macro for declaring a
+ * Vue `<script setup>` compiler macro for declaring a
  * two-way binding prop that can be consumed via `v-model` from the parent
  * component. This will declare a prop with the same name and a corresponding
  * `update:propName` event.
@@ -225,9 +233,11 @@ export function defineSlots<
  * Otherwise the prop name will default to "modelValue". In both cases, you
  * can also pass an additional object which will be used as the prop's options.
  *
- * The options object can also specify an additional option, `local`. When set
- * to `true`, the ref can be locally mutated even if the parent did not pass
- * the matching `v-model`.
+ * The the returned ref behaves differently depending on whether the parent
+ * provided the corresponding v-model props or not:
+ * - If yes, the returned ref's value will always be in sync with the parent
+ *   prop.
+ * - If not, the returned ref will behave like a normal local ref.
  *
  * @example
  * ```ts
@@ -244,43 +254,35 @@ export function defineSlots<
  *
  * // with specified name and default value
  * const count = defineModel<number>('count', { default: 0 })
- *
- * // local mutable model, can be mutated locally
- * // even if the parent did not pass the matching `v-model`.
- * const count = defineModel<number>('count', { local: true, default: 0 })
  * ```
  */
-export function defineModel<T>(
-  options: { required: true } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
-  options: { default: any } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
-  options?: PropOptions<T> & DefineModelOptions
-): Ref<T | undefined>
-export function defineModel<T>(
+export function defineModel<T, M extends string | number | symbol = string>(
+  options: { required: true } & PropOptions<T> & DefineModelOptions<T>,
+): ModelRef<T, M>
+export function defineModel<T, M extends string | number | symbol = string>(
+  options: { default: any } & PropOptions<T> & DefineModelOptions<T>,
+): ModelRef<T, M>
+export function defineModel<T, M extends string | number | symbol = string>(
+  options?: PropOptions<T> & DefineModelOptions<T>,
+): ModelRef<T | undefined, M>
+export function defineModel<T, M extends string | number | symbol = string>(
   name: string,
-  options: { required: true } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
+  options: { required: true } & PropOptions<T> & DefineModelOptions<T>,
+): ModelRef<T, M>
+export function defineModel<T, M extends string | number | symbol = string>(
   name: string,
-  options: { default: any } & PropOptions<T> & DefineModelOptions
-): Ref<T>
-export function defineModel<T>(
+  options: { default: any } & PropOptions<T> & DefineModelOptions<T>,
+): ModelRef<T, M>
+export function defineModel<T, M extends string | number | symbol = string>(
   name: string,
-  options?: PropOptions<T> & DefineModelOptions
-): Ref<T | undefined>
+  options?: PropOptions<T> & DefineModelOptions<T>,
+): ModelRef<T | undefined, M>
 export function defineModel(): any {
   if (__DEV__) {
     warnRuntimeUsage('defineModel')
   }
 }
 
-interface DefineModelOptions {
-  local?: boolean
-}
-
 type NotUndefined<T> = T extends undefined ? never : T
 
 type InferDefaults<T> = {
@@ -296,9 +298,9 @@ type InferDefault<P, T> =
 type PropsWithDefaults<
   T,
   Defaults extends InferDefaults<T>,
-  BKeys extends keyof T
-> = Omit<T, keyof Defaults> & {
-  [K in keyof Defaults]-?: K extends keyof T
+  BKeys extends keyof T,
+> = Readonly<Omit<T, keyof Defaults>> & {
+  readonly [K in keyof Defaults]-?: K extends keyof T
     ? Defaults[K] extends undefined
       ? T[K]
       : NotUndefined<T[K]>
@@ -334,10 +336,10 @@ type PropsWithDefaults<
 export function withDefaults<
   T,
   BKeys extends keyof T,
-  Defaults extends InferDefaults<T>
+  Defaults extends InferDefaults<T>,
 >(
   props: DefineProps<T, BKeys>,
-  defaults: Defaults
+  defaults: Defaults,
 ): PropsWithDefaults<T, Defaults, BKeys> {
   if (__DEV__) {
     warnRuntimeUsage(`withDefaults`)
@@ -353,55 +355,6 @@ export function useAttrs(): SetupContext['attrs'] {
   return getContext().attrs
 }
 
-export function useModel<T extends Record<string, any>, K extends keyof T>(
-  props: T,
-  name: K,
-  options?: { local?: boolean }
-): Ref<T[K]>
-export function useModel(
-  props: Record<string, any>,
-  name: string,
-  options?: { local?: boolean }
-): Ref {
-  const i = getCurrentInstance()!
-  if (__DEV__ && !i) {
-    warn(`useModel() called without active instance.`)
-    return ref() as any
-  }
-
-  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
-    warn(`useModel() called with prop "${name}" which is not declared.`)
-    return ref() as any
-  }
-
-  if (options && options.local) {
-    const proxy = ref<any>(props[name])
-
-    watch(
-      () => props[name],
-      v => (proxy.value = v)
-    )
-
-    watch(proxy, value => {
-      if (value !== props[name]) {
-        i.emit(`update:${name}`, value)
-      }
-    })
-
-    return proxy
-  } else {
-    return {
-      __v_isRef: true,
-      get value() {
-        return props[name]
-      },
-      set value(value) {
-        i.emit(`update:${name}`, value)
-      }
-    } as any
-  }
-}
-
 function getContext(): SetupContext {
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
@@ -414,12 +367,12 @@ function getContext(): SetupContext {
  * @internal
  */
 export function normalizePropsOrEmits(
-  props: ComponentPropsOptions | EmitsOptions
+  props: ComponentPropsOptions | EmitsOptions,
 ) {
   return isArray(props)
     ? props.reduce(
         (normalized, p) => ((normalized[p] = null), normalized),
-        {} as ComponentObjectPropsOptions | ObjectEmitsOptions
+        {} as ComponentObjectPropsOptions | ObjectEmitsOptions,
       )
     : props
 }
@@ -431,7 +384,7 @@ export function normalizePropsOrEmits(
  */
 export function mergeDefaults(
   raw: ComponentPropsOptions,
-  defaults: Record<string, any>
+  defaults: Record<string, any>,
 ): ComponentObjectPropsOptions {
   const props = normalizePropsOrEmits(raw)
   for (const key in defaults) {
@@ -462,7 +415,7 @@ export function mergeDefaults(
  */
 export function mergeModels(
   a: ComponentPropsOptions | EmitsOptions,
-  b: ComponentPropsOptions | EmitsOptions
+  b: ComponentPropsOptions | EmitsOptions,
 ) {
   if (!a || !b) return a || b
   if (isArray(a) && isArray(b)) return a.concat(b)
@@ -476,14 +429,14 @@ export function mergeModels(
  */
 export function createPropsRestProxy(
   props: any,
-  excludedKeys: string[]
+  excludedKeys: string[],
 ): Record<string, any> {
   const ret: Record<string, any> = {}
   for (const key in props) {
     if (!excludedKeys.includes(key)) {
       Object.defineProperty(ret, key, {
         enumerable: true,
-        get: () => props[key]
+        get: () => props[key],
       })
     }
   }
@@ -513,7 +466,7 @@ export function withAsyncContext(getAwaitable: () => any) {
   if (__DEV__ && !ctx) {
     warn(
       `withAsyncContext called without active current instance. ` +
-        `This is likely a bug.`
+        `This is likely a bug.`,
     )
   }
   let awaitable = getAwaitable()
diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts
index 1b85ba12d19..bc10547824e 100644
--- a/packages/runtime-core/src/apiWatch.ts
+++ b/packages/runtime-core/src/apiWatch.ts
@@ -1,48 +1,47 @@
 import {
-  isRef,
-  isShallow,
-  Ref,
-  ComputedRef,
+  type ComputedRef,
+  type DebuggerOptions,
+  type EffectScheduler,
   ReactiveEffect,
-  isReactive,
   ReactiveFlags,
-  EffectScheduler,
-  DebuggerOptions,
-  getCurrentScope
+  type Ref,
+  getCurrentScope,
+  isReactive,
+  isRef,
+  isShallow,
 } from '@vue/reactivity'
-import { SchedulerJob, queueJob } from './scheduler'
+import { type SchedulerJob, queueJob } from './scheduler'
 import {
   EMPTY_OBJ,
-  isObject,
+  NOOP,
+  extend,
+  hasChanged,
   isArray,
   isFunction,
-  isString,
-  hasChanged,
-  NOOP,
-  remove,
   isMap,
-  isSet,
+  isObject,
   isPlainObject,
-  extend
+  isSet,
+  isString,
+  remove,
 } from '@vue/shared'
 import {
+  type ComponentInternalInstance,
   currentInstance,
-  ComponentInternalInstance,
   isInSSRComponentSetup,
   setCurrentInstance,
-  unsetCurrentInstance
 } from './component'
 import {
   ErrorCodes,
+  callWithAsyncErrorHandling,
   callWithErrorHandling,
-  callWithAsyncErrorHandling
 } from './errorHandling'
 import { queuePostRenderEffect } from './renderer'
 import { warn } from './warning'
 import { DeprecationTypes } from './compat/compatConfig'
 import { checkCompatEnabled, isCompatEnabled } from './compat/compatConfig'
-import { ObjectWatchOptionItem } from './componentOptions'
-import { useSSRContext } from '@vue/runtime-core'
+import type { ObjectWatchOptionItem } from './componentOptions'
+import { useSSRContext } from './helpers/useSsrContext'
 
 export type WatchEffect = (onCleanup: OnCleanup) => void
 
@@ -51,7 +50,7 @@ export type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T)
 export type WatchCallback<V = any, OV = any> = (
   value: V,
   oldValue: OV,
-  onCleanup: OnCleanup
+  onCleanup: OnCleanup,
 ) => any
 
 type MapSources<T, Immediate> = {
@@ -60,10 +59,10 @@ type MapSources<T, Immediate> = {
       ? V | undefined
       : V
     : T[K] extends object
-    ? Immediate extends true
-      ? T[K] | undefined
-      : T[K]
-    : never
+      ? Immediate extends true
+        ? T[K] | undefined
+        : T[K]
+      : never
 }
 
 type OnCleanup = (cleanupFn: () => void) => void
@@ -75,6 +74,7 @@ export interface WatchOptionsBase extends DebuggerOptions {
 export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
   immediate?: Immediate
   deep?: boolean
+  once?: boolean
 }
 
 export type WatchStopHandle = () => void
@@ -82,30 +82,30 @@ export type WatchStopHandle = () => void
 // Simple effect.
 export function watchEffect(
   effect: WatchEffect,
-  options?: WatchOptionsBase
+  options?: WatchOptionsBase,
 ): WatchStopHandle {
   return doWatch(effect, null, options)
 }
 
 export function watchPostEffect(
   effect: WatchEffect,
-  options?: DebuggerOptions
+  options?: DebuggerOptions,
 ) {
   return doWatch(
     effect,
     null,
-    __DEV__ ? extend({}, options as any, { flush: 'post' }) : { flush: 'post' }
+    __DEV__ ? extend({}, options as any, { flush: 'post' }) : { flush: 'post' },
   )
 }
 
 export function watchSyncEffect(
   effect: WatchEffect,
-  options?: DebuggerOptions
+  options?: DebuggerOptions,
 ) {
   return doWatch(
     effect,
     null,
-    __DEV__ ? extend({}, options as any, { flush: 'sync' }) : { flush: 'sync' }
+    __DEV__ ? extend({}, options as any, { flush: 'sync' }) : { flush: 'sync' },
   )
 }
 
@@ -114,14 +114,21 @@ const INITIAL_WATCHER_VALUE = {}
 
 type MultiWatchSources = (WatchSource<unknown> | object)[]
 
+// overload: single source + cb
+export function watch<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchOptions<Immediate>,
+): WatchStopHandle
+
 // overload: array of multiple sources + cb
 export function watch<
   T extends MultiWatchSources,
-  Immediate extends Readonly<boolean> = false
+  Immediate extends Readonly<boolean> = false,
 >(
   sources: [...T],
   cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
-  options?: WatchOptions<Immediate>
+  options?: WatchOptions<Immediate>,
 ): WatchStopHandle
 
 // overload: multiple sources w/ `as const`
@@ -129,41 +136,34 @@ export function watch<
 // somehow [...T] breaks when the type is readonly
 export function watch<
   T extends Readonly<MultiWatchSources>,
-  Immediate extends Readonly<boolean> = false
+  Immediate extends Readonly<boolean> = false,
 >(
   source: T,
   cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
-  options?: WatchOptions<Immediate>
-): WatchStopHandle
-
-// overload: single source + cb
-export function watch<T, Immediate extends Readonly<boolean> = false>(
-  source: WatchSource<T>,
-  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
-  options?: WatchOptions<Immediate>
+  options?: WatchOptions<Immediate>,
 ): WatchStopHandle
 
 // overload: watching reactive object w/ cb
 export function watch<
   T extends object,
-  Immediate extends Readonly<boolean> = false
+  Immediate extends Readonly<boolean> = false,
 >(
   source: T,
   cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
-  options?: WatchOptions<Immediate>
+  options?: WatchOptions<Immediate>,
 ): WatchStopHandle
 
 // implementation
 export function watch<T = any, Immediate extends Readonly<boolean> = false>(
   source: T | WatchSource<T>,
   cb: any,
-  options?: WatchOptions<Immediate>
+  options?: WatchOptions<Immediate>,
 ): WatchStopHandle {
   if (__DEV__ && !isFunction(cb)) {
     warn(
       `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
         `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
-        `supports \`watch(source, cb, options?) signature.`
+        `supports \`watch(source, cb, options?) signature.`,
     )
   }
   return doWatch(source as any, cb, options)
@@ -172,19 +172,48 @@ export function watch<T = any, Immediate extends Readonly<boolean> = false>(
 function doWatch(
   source: WatchSource | WatchSource[] | WatchEffect | object,
   cb: WatchCallback | null,
-  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
+  {
+    immediate,
+    deep,
+    flush,
+    once,
+    onTrack,
+    onTrigger,
+  }: WatchOptions = EMPTY_OBJ,
 ): WatchStopHandle {
+  if (cb && once) {
+    const _cb = cb
+    cb = (...args) => {
+      _cb(...args)
+      unwatch()
+    }
+  }
+
+  // TODO remove in 3.5
+  if (__DEV__ && deep !== void 0 && typeof deep === 'number') {
+    warn(
+      `watch() "deep" option with number value will be used as watch depth in future versions. ` +
+        `Please use a boolean instead to avoid potential breakage.`,
+    )
+  }
+
   if (__DEV__ && !cb) {
     if (immediate !== undefined) {
       warn(
         `watch() "immediate" option is only respected when using the ` +
-          `watch(source, callback, options?) signature.`
+          `watch(source, callback, options?) signature.`,
       )
     }
     if (deep !== undefined) {
       warn(
         `watch() "deep" option is only respected when using the ` +
-          `watch(source, callback, options?) signature.`
+          `watch(source, callback, options?) signature.`,
+      )
+    }
+    if (once !== undefined) {
+      warn(
+        `watch() "once" option is only respected when using the ` +
+          `watch(source, callback, options?) signature.`,
       )
     }
   }
@@ -194,13 +223,17 @@ function doWatch(
       `Invalid watch source: `,
       s,
       `A watch source can only be a getter/effect function, a ref, ` +
-        `a reactive object, or an array of these types.`
+        `a reactive object, or an array of these types.`,
     )
   }
 
-  const instance =
-    getCurrentScope() === currentInstance?.scope ? currentInstance : null
-  // const instance = currentInstance
+  const instance = currentInstance
+  const reactiveGetter = (source: object) =>
+    deep === true
+      ? source // traverse will happen in wrapped getter below
+      : // for deep: false, only traverse root-level properties
+        traverse(source, deep === false ? 1 : undefined)
+
   let getter: () => any
   let forceTrigger = false
   let isMultiSource = false
@@ -209,8 +242,8 @@ function doWatch(
     getter = () => source.value
     forceTrigger = isShallow(source)
   } else if (isReactive(source)) {
-    getter = () => source
-    deep = true
+    getter = () => reactiveGetter(source)
+    forceTrigger = true
   } else if (isArray(source)) {
     isMultiSource = true
     forceTrigger = source.some(s => isReactive(s) || isShallow(s))
@@ -219,7 +252,7 @@ function doWatch(
         if (isRef(s)) {
           return s.value
         } else if (isReactive(s)) {
-          return traverse(s)
+          return reactiveGetter(s)
         } else if (isFunction(s)) {
           return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)
         } else {
@@ -234,9 +267,6 @@ function doWatch(
     } else {
       // no cb -> simple effect
       getter = () => {
-        if (instance && instance.isUnmounted) {
-          return
-        }
         if (cleanup) {
           cleanup()
         }
@@ -244,7 +274,7 @@ function doWatch(
           source,
           instance,
           ErrorCodes.WATCH_CALLBACK,
-          [onCleanup]
+          [onCleanup],
         )
       }
     }
@@ -273,10 +303,11 @@ function doWatch(
     getter = () => traverse(baseGetter())
   }
 
-  let cleanup: () => void
+  let cleanup: (() => void) | undefined
   let onCleanup: OnCleanup = (fn: () => void) => {
     cleanup = effect.onStop = () => {
       callWithErrorHandling(fn, instance, ErrorCodes.WATCH_CLEANUP)
+      cleanup = effect.onStop = undefined
     }
   }
 
@@ -292,7 +323,7 @@ function doWatch(
       callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
         getter(),
         isMultiSource ? [] : undefined,
-        onCleanup
+        onCleanup,
       ])
     }
     if (flush === 'sync') {
@@ -307,7 +338,7 @@ function doWatch(
     ? new Array((source as []).length).fill(INITIAL_WATCHER_VALUE)
     : INITIAL_WATCHER_VALUE
   const job: SchedulerJob = () => {
-    if (!effect.active) {
+    if (!effect.active || !effect.dirty) {
       return
     }
     if (cb) {
@@ -333,9 +364,9 @@ function doWatch(
           oldValue === INITIAL_WATCHER_VALUE
             ? undefined
             : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
-            ? []
-            : oldValue,
-          onCleanup
+              ? []
+              : oldValue,
+          onCleanup,
         ])
         oldValue = newValue
       }
@@ -361,7 +392,15 @@ function doWatch(
     scheduler = () => queueJob(job)
   }
 
-  const effect = new ReactiveEffect(getter, scheduler)
+  const effect = new ReactiveEffect(getter, NOOP, scheduler)
+
+  const scope = getCurrentScope()
+  const unwatch = () => {
+    effect.stop()
+    if (scope) {
+      remove(scope.effects, effect)
+    }
+  }
 
   if (__DEV__) {
     effect.onTrack = onTrack
@@ -378,19 +417,12 @@ function doWatch(
   } else if (flush === 'post') {
     queuePostRenderEffect(
       effect.run.bind(effect),
-      instance && instance.suspense
+      instance && instance.suspense,
     )
   } else {
     effect.run()
   }
 
-  const unwatch = () => {
-    effect.stop()
-    if (instance && instance.scope) {
-      remove(instance.scope.effects!, effect)
-    }
-  }
-
   if (__SSR__ && ssrCleanup) ssrCleanup.push(unwatch)
   return unwatch
 }
@@ -400,7 +432,7 @@ export function instanceWatch(
   this: ComponentInternalInstance,
   source: string | Function,
   value: WatchCallback | ObjectWatchOptionItem,
-  options?: WatchOptions
+  options?: WatchOptions,
 ): WatchStopHandle {
   const publicThis = this.proxy as any
   const getter = isString(source)
@@ -415,14 +447,9 @@ export function instanceWatch(
     cb = value.handler as Function
     options = value
   }
-  const cur = currentInstance
-  setCurrentInstance(this)
+  const reset = setCurrentInstance(this)
   const res = doWatch(getter, cb.bind(publicThis), options)
-  if (cur) {
-    setCurrentInstance(cur)
-  } else {
-    unsetCurrentInstance()
-  }
+  reset()
   return res
 }
 
@@ -437,28 +464,41 @@ export function createPathGetter(ctx: any, path: string) {
   }
 }
 
-export function traverse(value: unknown, seen?: Set<unknown>) {
+export function traverse(
+  value: unknown,
+  depth?: number,
+  currentDepth = 0,
+  seen?: Set<unknown>,
+) {
   if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) {
     return value
   }
+
+  if (depth && depth > 0) {
+    if (currentDepth >= depth) {
+      return value
+    }
+    currentDepth++
+  }
+
   seen = seen || new Set()
   if (seen.has(value)) {
     return value
   }
   seen.add(value)
   if (isRef(value)) {
-    traverse(value.value, seen)
+    traverse(value.value, depth, currentDepth, seen)
   } else if (isArray(value)) {
     for (let i = 0; i < value.length; i++) {
-      traverse(value[i], seen)
+      traverse(value[i], depth, currentDepth, seen)
     }
   } else if (isSet(value) || isMap(value)) {
     value.forEach((v: any) => {
-      traverse(v, seen)
+      traverse(v, depth, currentDepth, seen)
     })
   } else if (isPlainObject(value)) {
     for (const key in value) {
-      traverse(value[key], seen)
+      traverse(value[key], depth, currentDepth, seen)
     }
   }
   return value
diff --git a/packages/runtime-core/src/compat/attrsFallthrough.ts b/packages/runtime-core/src/compat/attrsFallthrough.ts
index e2fc730e8a1..6c374dc3ce9 100644
--- a/packages/runtime-core/src/compat/attrsFallthrough.ts
+++ b/packages/runtime-core/src/compat/attrsFallthrough.ts
@@ -1,10 +1,10 @@
 import { isOn } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
+import type { ComponentInternalInstance } from '../component'
 import { DeprecationTypes, isCompatEnabled } from './compatConfig'
 
 export function shouldSkipAttr(
   key: string,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): boolean {
   if (key === 'is') {
     return true
diff --git a/packages/runtime-core/src/compat/compatConfig.ts b/packages/runtime-core/src/compat/compatConfig.ts
index 88b58fdfab0..d0a04d3af45 100644
--- a/packages/runtime-core/src/compat/compatConfig.ts
+++ b/packages/runtime-core/src/compat/compatConfig.ts
@@ -1,16 +1,16 @@
 import { extend, hasOwn, isArray, isFunction } from '@vue/shared'
 import {
-  Component,
-  ComponentInternalInstance,
-  ComponentOptions,
+  type Component,
+  type ComponentInternalInstance,
+  type ComponentOptions,
   formatComponentName,
   getComponentName,
   getCurrentInstance,
-  isRuntimeOnly
+  isRuntimeOnly,
 } from '../component'
 import { warn } from '../warning'
 
-export const enum DeprecationTypes {
+export enum DeprecationTypes {
   GLOBAL_MOUNT = 'GLOBAL_MOUNT',
   GLOBAL_MOUNT_CONTAINER = 'GLOBAL_MOUNT_CONTAINER',
   GLOBAL_EXTEND = 'GLOBAL_EXTEND',
@@ -63,7 +63,7 @@ export const enum DeprecationTypes {
 
   FILTERS = 'FILTERS',
 
-  PRIVATE_APIS = 'PRIVATE_APIS'
+  PRIVATE_APIS = 'PRIVATE_APIS',
 }
 
 type DeprecationData = {
@@ -76,7 +76,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
     message:
       `The global app bootstrapping API has changed: vm.$mount() and the "el" ` +
       `option have been removed. Use createApp(RootComponent).mount() instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance`,
   },
 
   [DeprecationTypes.GLOBAL_MOUNT_CONTAINER]: {
@@ -84,72 +84,72 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `Vue detected directives on the mount container. ` +
       `In Vue 3, the container is no longer considered part of the template ` +
       `and will not be processed/replaced.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/mount-changes.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/mount-changes.html`,
   },
 
   [DeprecationTypes.GLOBAL_EXTEND]: {
     message:
       `Vue.extend() has been removed in Vue 3. ` +
       `Use defineComponent() instead.`,
-    link: `https://vuejs.org/api/general.html#definecomponent`
+    link: `https://vuejs.org/api/general.html#definecomponent`,
   },
 
   [DeprecationTypes.GLOBAL_PROTOTYPE]: {
     message:
       `Vue.prototype is no longer available in Vue 3. ` +
       `Use app.config.globalProperties instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#vue-prototype-replaced-by-config-globalproperties`,
   },
 
   [DeprecationTypes.GLOBAL_SET]: {
     message:
       `Vue.set() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.GLOBAL_DELETE]: {
     message:
       `Vue.delete() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.GLOBAL_OBSERVABLE]: {
     message:
       `Vue.observable() has been removed. ` +
       `Use \`import { reactive } from "vue"\` from Composition API instead.`,
-    link: `https://vuejs.org/api/reactivity-core.html#reactive`
+    link: `https://vuejs.org/api/reactivity-core.html#reactive`,
   },
 
   [DeprecationTypes.GLOBAL_PRIVATE_UTIL]: {
     message:
       `Vue.util has been removed. Please refactor to avoid its usage ` +
-      `since it was an internal API even in Vue 2.`
+      `since it was an internal API even in Vue 2.`,
   },
 
   [DeprecationTypes.CONFIG_SILENT]: {
     message:
       `config.silent has been removed because it is not good practice to ` +
       `intentionally suppress warnings. You can use your browser console's ` +
-      `filter features to focus on relevant messages.`
+      `filter features to focus on relevant messages.`,
   },
 
   [DeprecationTypes.CONFIG_DEVTOOLS]: {
     message:
       `config.devtools has been removed. To enable devtools for ` +
       `production, configure the __VUE_PROD_DEVTOOLS__ compile-time flag.`,
-    link: `https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags`
+    link: `https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags`,
   },
 
   [DeprecationTypes.CONFIG_KEY_CODES]: {
     message:
       `config.keyCodes has been removed. ` +
       `In Vue 3, you can directly use the kebab-case key names as v-on modifiers.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`,
   },
 
   [DeprecationTypes.CONFIG_PRODUCTION_TIP]: {
     message: `config.productionTip has been removed.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-productiontip-removed`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-productiontip-removed`,
   },
 
   [DeprecationTypes.CONFIG_IGNORED_ELEMENTS]: {
@@ -162,7 +162,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       }
       return msg
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-ignoredelements-is-now-config-iscustomelement`
+    link: `https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-ignoredelements-is-now-config-iscustomelement`,
   },
 
   [DeprecationTypes.CONFIG_WHITESPACE]: {
@@ -171,37 +171,37 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
     message:
       `Vue 3 compiler's whitespace option will default to "condense" instead of ` +
       `"preserve". To suppress this warning, provide an explicit value for ` +
-      `\`config.compilerOptions.whitespace\`.`
+      `\`config.compilerOptions.whitespace\`.`,
   },
 
   [DeprecationTypes.CONFIG_OPTION_MERGE_STRATS]: {
     message:
       `config.optionMergeStrategies no longer exposes internal strategies. ` +
-      `Use custom merge functions instead.`
+      `Use custom merge functions instead.`,
   },
 
   [DeprecationTypes.INSTANCE_SET]: {
     message:
       `vm.$set() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.INSTANCE_DELETE]: {
     message:
       `vm.$delete() has been removed as it is no longer needed in Vue 3. ` +
-      `Simply use native JavaScript mutations.`
+      `Simply use native JavaScript mutations.`,
   },
 
   [DeprecationTypes.INSTANCE_DESTROY]: {
     message: `vm.$destroy() has been removed. Use app.unmount() instead.`,
-    link: `https://vuejs.org/api/application.html#app-unmount`
+    link: `https://vuejs.org/api/application.html#app-unmount`,
   },
 
   [DeprecationTypes.INSTANCE_EVENT_EMITTER]: {
     message:
       `vm.$on/$once/$off() have been removed. ` +
       `Use an external event emitter library instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/events-api.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/events-api.html`,
   },
 
   [DeprecationTypes.INSTANCE_EVENT_HOOKS]: {
@@ -211,14 +211,14 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `should be changed to @vue:${event.slice(5)}. ` +
       `From JavaScript, use Composition API to dynamically register lifecycle ` +
       `hooks.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html`,
   },
 
   [DeprecationTypes.INSTANCE_CHILDREN]: {
     message:
       `vm.$children has been removed. Consider refactoring your logic ` +
       `to avoid relying on direct access to child components.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/children.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/children.html`,
   },
 
   [DeprecationTypes.INSTANCE_LISTENERS]: {
@@ -227,12 +227,12 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `included in vm.$attrs and it is no longer necessary to separately use ` +
       `v-on="$listeners" if you are already using v-bind="$attrs". ` +
       `(Note: the Vue 3 behavior only applies if this compat config is disabled)`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html`,
   },
 
   [DeprecationTypes.INSTANCE_SCOPED_SLOTS]: {
     message: `vm.$scopedSlots has been removed. Use vm.$slots instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/slots-unification.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/slots-unification.html`,
   },
 
   [DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE]: {
@@ -247,29 +247,29 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `If you are binding $attrs to a non-root element and expecting ` +
       `class/style to fallthrough on root, you will need to now manually bind ` +
       `them on root via :class="$attrs.class".`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html`,
   },
 
   [DeprecationTypes.OPTIONS_DATA_FN]: {
     message:
       `The "data" option can no longer be a plain object. ` +
       `Always use a function.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html`,
   },
 
   [DeprecationTypes.OPTIONS_DATA_MERGE]: {
     message: (key: string) =>
       `Detected conflicting key "${key}" when merging data option values. ` +
       `In Vue 3, data keys are merged shallowly and will override one another.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html#mixin-merge-behavior-change`
+    link: `https://v3-migration.vuejs.org/breaking-changes/data-option.html#mixin-merge-behavior-change`,
   },
 
   [DeprecationTypes.OPTIONS_BEFORE_DESTROY]: {
-    message: `\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`
+    message: `\`beforeDestroy\` has been renamed to \`beforeUnmount\`.`,
   },
 
   [DeprecationTypes.OPTIONS_DESTROYED]: {
-    message: `\`destroyed\` has been renamed to \`unmounted\`.`
+    message: `\`destroyed\` has been renamed to \`unmounted\`.`,
   },
 
   [DeprecationTypes.WATCH_ARRAY]: {
@@ -279,7 +279,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `If current usage is intended, you can disable the compat behavior and ` +
       `suppress this warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.WATCH_ARRAY}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/watch.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/watch.html`,
   },
 
   [DeprecationTypes.PROPS_DEFAULT_THIS]: {
@@ -287,21 +287,21 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `props default value function no longer has access to "this". The compat ` +
       `build only offers access to this.$options.` +
       `(found in prop "${key}")`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/props-default-this.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/props-default-this.html`,
   },
 
   [DeprecationTypes.CUSTOM_DIR]: {
     message: (legacyHook: string, newHook: string) =>
       `Custom directive hook "${legacyHook}" has been removed. ` +
       `Use "${newHook}" instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/custom-directives.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/custom-directives.html`,
   },
 
   [DeprecationTypes.V_ON_KEYCODE_MODIFIER]: {
     message:
       `Using keyCode as v-on modifier is no longer supported. ` +
       `Use kebab-case key name modifiers instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html`,
   },
 
   [DeprecationTypes.ATTR_FALSE_VALUE]: {
@@ -311,7 +311,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `use \`null\` or \`undefined\` instead. If the usage is intended, ` +
       `you can disable the compat behavior and suppress this warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.ATTR_FALSE_VALUE}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`,
   },
 
   [DeprecationTypes.ATTR_ENUMERATED_COERCION]: {
@@ -324,11 +324,11 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `If the usage is intended, ` +
       `you can disable the compat behavior and suppress this warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.ATTR_ENUMERATED_COERCION}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html`,
   },
 
   [DeprecationTypes.TRANSITION_CLASSES]: {
-    message: `` // this feature cannot be runtime-detected
+    message: ``, // this feature cannot be runtime-detected
   },
 
   [DeprecationTypes.TRANSITION_GROUP_ROOT]: {
@@ -338,7 +338,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `for styling, you can disable the compat behavior and suppress this ` +
       `warning with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.TRANSITION_GROUP_ROOT}: false })\n`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/transition-group.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/transition-group.html`,
   },
 
   [DeprecationTypes.COMPONENT_ASYNC]: {
@@ -356,7 +356,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
         `\n\n  configureCompat({ ${DeprecationTypes.COMPONENT_ASYNC}: false })\n`
       )
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/async-components.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/async-components.html`,
   },
 
   [DeprecationTypes.COMPONENT_FUNCTIONAL]: {
@@ -372,7 +372,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
         `been disabled.`
       )
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/functional-components.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/functional-components.html`,
   },
 
   [DeprecationTypes.COMPONENT_V_MODEL]: {
@@ -397,7 +397,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
         `"update:modelValue" event. You can update the usage and then ${configMsg}`
       )
     },
-    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`,
   },
 
   [DeprecationTypes.RENDER_FUNCTION]: {
@@ -406,7 +406,7 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `You can opt-in to the new API with:` +
       `\n\n  configureCompat({ ${DeprecationTypes.RENDER_FUNCTION}: false })\n` +
       `\n  (This can also be done per-component via the "compatConfig" option.)`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/render-function-api.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/render-function-api.html`,
   },
 
   [DeprecationTypes.FILTERS]: {
@@ -414,15 +414,15 @@ export const deprecationData: Record<DeprecationTypes, DeprecationData> = {
       `filters have been removed in Vue 3. ` +
       `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
       `Use method calls or computed properties instead.`,
-    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`
+    link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`,
   },
 
   [DeprecationTypes.PRIVATE_APIS]: {
     message: name =>
       `"${name}" is a Vue 2 private API that no longer exists in Vue 3. ` +
       `If you are seeing this warning only due to a dependency, you can ` +
-      `suppress this warning via { PRIVATE_APIS: 'suppress-warning' }.`
-  }
+      `suppress this warning via { PRIVATE_APIS: 'suppress-warning' }.`,
+  },
 }
 
 const instanceWarned: Record<string, true> = Object.create(null)
@@ -482,12 +482,12 @@ export function warnDeprecation(
   warn(
     `(deprecation ${key}) ${
       typeof message === 'function' ? message(...args) : message
-    }${link ? `\n  Details: ${link}` : ``}`
+    }${link ? `\n  Details: ${link}` : ``}`,
   )
   if (!isCompatEnabled(key, instance, true)) {
     console.error(
       `^ The above deprecation's compat behavior is disabled and will likely ` +
-        `lead to runtime errors.`
+        `lead to runtime errors.`,
     )
   }
 }
@@ -499,7 +499,7 @@ export type CompatConfig = Partial<
 }
 
 export const globalCompatConfig: CompatConfig = {
-  MODE: 2
+  MODE: 2,
 }
 
 export function configureCompat(config: CompatConfig) {
@@ -515,7 +515,7 @@ const warnedInvalidKeys: Record<string, boolean> = {}
 // dev only
 export function validateCompatConfig(
   config: CompatConfig,
-  instance?: ComponentInternalInstance
+  instance?: ComponentInternalInstance,
 ) {
   if (seenConfigObjects.has(config)) {
     return
@@ -534,7 +534,7 @@ export function validateCompatConfig(
             `Deprecation config "${key}" is compiler-specific and you are ` +
               `running a runtime-only build of Vue. This deprecation should be ` +
               `configured via compiler options in your build setup instead.\n` +
-              `Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
+              `Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`,
           )
         }
       } else {
@@ -546,14 +546,14 @@ export function validateCompatConfig(
 
   if (instance && config[DeprecationTypes.OPTIONS_DATA_MERGE] != null) {
     warn(
-      `Deprecation config "${DeprecationTypes.OPTIONS_DATA_MERGE}" can only be configured globally.`
+      `Deprecation config "${DeprecationTypes.OPTIONS_DATA_MERGE}" can only be configured globally.`,
     )
   }
 }
 
 export function getCompatConfigForKey(
   key: DeprecationTypes | 'MODE',
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ) {
   const instanceConfig =
     instance && (instance.type as ComponentOptions).compatConfig
@@ -566,7 +566,7 @@ export function getCompatConfigForKey(
 export function isCompatEnabled(
   key: DeprecationTypes,
   instance: ComponentInternalInstance | null,
-  enableForBuiltIn = false
+  enableForBuiltIn = false,
 ): boolean {
   // skip compat for built-in components
   if (!enableForBuiltIn && instance && instance.type.__isBuiltIn) {
@@ -637,6 +637,6 @@ export function checkCompatEnabled(
 // run tests in v3 mode by default
 if (__TEST__) {
   configureCompat({
-    MODE: 3
+    MODE: 3,
   })
 }
diff --git a/packages/runtime-core/src/compat/component.ts b/packages/runtime-core/src/compat/component.ts
index b09d579a59a..84a76eb73a1 100644
--- a/packages/runtime-core/src/compat/component.ts
+++ b/packages/runtime-core/src/compat/component.ts
@@ -1,16 +1,16 @@
 import { isFunction, isObject } from '@vue/shared'
-import { Component, ComponentInternalInstance } from '../component'
+import type { Component, ComponentInternalInstance } from '../component'
 import {
-  checkCompatEnabled,
   DeprecationTypes,
-  softAssertCompatEnabled
+  checkCompatEnabled,
+  softAssertCompatEnabled,
 } from './compatConfig'
 import { convertLegacyAsyncComponent } from './componentAsync'
 import { convertLegacyFunctionalComponent } from './componentFunctional'
 
 export function convertLegacyComponent(
   comp: any,
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ): Component {
   if (comp.__isBuiltIn) {
     return comp
@@ -38,7 +38,7 @@ export function convertLegacyComponent(
     softAssertCompatEnabled(
       DeprecationTypes.COMPONENT_FUNCTIONAL,
       instance,
-      comp
+      comp,
     )
   ) {
     return convertLegacyFunctionalComponent(comp)
diff --git a/packages/runtime-core/src/compat/componentAsync.ts b/packages/runtime-core/src/compat/componentAsync.ts
index 0a0dee72b63..4621cd2e878 100644
--- a/packages/runtime-core/src/compat/componentAsync.ts
+++ b/packages/runtime-core/src/compat/componentAsync.ts
@@ -1,6 +1,6 @@
 import { isArray, isObject, isPromise } from '@vue/shared'
 import { defineAsyncComponent } from '../apiAsyncComponent'
-import { Component } from '../component'
+import type { Component } from '../component'
 import { isVNode } from '../vnode'
 
 interface LegacyAsyncOptions {
@@ -15,10 +15,13 @@ type LegacyAsyncReturnValue = Promise<Component> | LegacyAsyncOptions
 
 type LegacyAsyncComponent = (
   resolve?: (res: LegacyAsyncReturnValue) => void,
-  reject?: (reason?: any) => void
+  reject?: (reason?: any) => void,
 ) => LegacyAsyncReturnValue | undefined
 
-const normalizedAsyncComponentMap = new Map<LegacyAsyncComponent, Component>()
+const normalizedAsyncComponentMap = new WeakMap<
+  LegacyAsyncComponent,
+  Component
+>()
 
 export function convertLegacyAsyncComponent(comp: LegacyAsyncComponent) {
   if (normalizedAsyncComponentMap.has(comp)) {
@@ -44,7 +47,7 @@ export function convertLegacyAsyncComponent(comp: LegacyAsyncComponent) {
       loadingComponent: res.loading,
       errorComponent: res.error,
       delay: res.delay,
-      timeout: res.timeout
+      timeout: res.timeout,
     })
   } else if (res == null) {
     converted = defineAsyncComponent(() => fallbackPromise)
diff --git a/packages/runtime-core/src/compat/componentFunctional.ts b/packages/runtime-core/src/compat/componentFunctional.ts
index 1b1146bbab9..c2fbcbe2564 100644
--- a/packages/runtime-core/src/compat/componentFunctional.ts
+++ b/packages/runtime-core/src/compat/componentFunctional.ts
@@ -1,23 +1,22 @@
 import {
-  ComponentOptions,
-  FunctionalComponent,
-  getCurrentInstance
+  type ComponentOptions,
+  type FunctionalComponent,
+  getCurrentInstance,
 } from '../component'
 import { resolveInjections } from '../componentOptions'
-import { InternalSlots } from '../componentSlots'
+import type { InternalSlots } from '../componentSlots'
 import { getCompatListeners } from './instanceListeners'
 import { compatH } from './renderFn'
 
-const normalizedFunctionalComponentMap = new Map<
+const normalizedFunctionalComponentMap = new WeakMap<
   ComponentOptions,
   FunctionalComponent
 >()
-
 export const legacySlotProxyHandlers: ProxyHandler<InternalSlots> = {
   get(target, key: string) {
     const slot = target[key]
     return slot && slot()
-  }
+  },
 }
 
 export function convertLegacyFunctionalComponent(comp: ComponentOptions) {
@@ -49,7 +48,7 @@ export function convertLegacyFunctionalComponent(comp: ComponentOptions) {
           return injections
         }
         return {}
-      }
+      },
     }
     return legacyFn(compatH, legacyCtx)
   }
diff --git a/packages/runtime-core/src/compat/componentVModel.ts b/packages/runtime-core/src/compat/componentVModel.ts
index b446fb4274d..e8523496ee3 100644
--- a/packages/runtime-core/src/compat/componentVModel.ts
+++ b/packages/runtime-core/src/compat/componentVModel.ts
@@ -1,12 +1,12 @@
-import { extend, ShapeFlags } from '@vue/shared'
-import { ComponentInternalInstance, ComponentOptions } from '../component'
-import { callWithErrorHandling, ErrorCodes } from '../errorHandling'
-import { VNode } from '../vnode'
+import { ShapeFlags, extend } from '@vue/shared'
+import type { ComponentInternalInstance, ComponentOptions } from '../component'
+import { ErrorCodes, callWithErrorHandling } from '../errorHandling'
+import type { VNode } from '../vnode'
 import { popWarningContext, pushWarningContext } from '../warning'
 import {
   DeprecationTypes,
+  isCompatEnabled,
   warnDeprecation,
-  isCompatEnabled
 } from './compatConfig'
 
 export const compatModelEventPrefix = `onModelCompat:`
@@ -23,7 +23,7 @@ export function convertLegacyVModelProps(vnode: VNode) {
         // this is a special case where we want to use the vnode component's
         // compat config instead of the current rendering instance (which is the
         // parent of the component that exposes v-model)
-        { type } as any
+        { type } as any,
       )
     ) {
       return
@@ -67,7 +67,7 @@ function applyModelFromMixins(model: any, mixins?: ComponentOptions[]) {
 export function compatModelEmit(
   instance: ComponentInternalInstance,
   event: string,
-  args: any[]
+  args: any[],
 ) {
   if (!isCompatEnabled(DeprecationTypes.COMPONENT_V_MODEL, instance)) {
     return
@@ -79,7 +79,7 @@ export function compatModelEmit(
       modelHandler,
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
 }
diff --git a/packages/runtime-core/src/compat/customDirective.ts b/packages/runtime-core/src/compat/customDirective.ts
index da351eb0812..d5ce1d78e3d 100644
--- a/packages/runtime-core/src/compat/customDirective.ts
+++ b/packages/runtime-core/src/compat/customDirective.ts
@@ -1,7 +1,7 @@
 import { isArray } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { ObjectDirective, DirectiveHook } from '../directives'
-import { softAssertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import type { DirectiveHook, ObjectDirective } from '../directives'
+import { DeprecationTypes, softAssertCompatEnabled } from './compatConfig'
 
 export interface LegacyDirective {
   bind?: DirectiveHook
@@ -20,13 +20,13 @@ const legacyDirectiveHookMap: Partial<
   beforeMount: 'bind',
   mounted: 'inserted',
   updated: ['update', 'componentUpdated'],
-  unmounted: 'unbind'
+  unmounted: 'unbind',
 }
 
 export function mapCompatDirectiveHook(
   name: keyof ObjectDirective,
   dir: ObjectDirective & LegacyDirective,
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ): DirectiveHook | DirectiveHook[] | undefined {
   const mappedName = legacyDirectiveHookMap[name]
   if (mappedName) {
@@ -39,7 +39,7 @@ export function mapCompatDirectiveHook(
             DeprecationTypes.CUSTOM_DIR,
             instance,
             mapped,
-            name
+            name,
           )
           hook.push(mappedHook)
         }
@@ -51,7 +51,7 @@ export function mapCompatDirectiveHook(
           DeprecationTypes.CUSTOM_DIR,
           instance,
           mappedName,
-          name
+          name,
         )
       }
       return dir[mappedName]
diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 9f1a6d1cd12..5bf234fcf45 100644
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -1,63 +1,63 @@
 import {
+  TrackOpTypes,
+  TriggerOpTypes,
   isReactive,
   reactive,
   track,
-  TrackOpTypes,
   trigger,
-  TriggerOpTypes
 } from '@vue/reactivity'
 import {
-  isFunction,
-  extend,
   NOOP,
+  extend,
+  invokeArrayFns,
   isArray,
+  isFunction,
   isObject,
   isString,
-  invokeArrayFns
 } from '@vue/shared'
 import { warn } from '../warning'
 import { cloneVNode, createVNode } from '../vnode'
-import { RootRenderFunction } from '../renderer'
-import {
+import type { ElementNamespace, RootRenderFunction } from '../renderer'
+import type {
   App,
   AppConfig,
   AppContext,
   CreateAppFunction,
-  Plugin
+  Plugin,
 } from '../apiCreateApp'
 import {
-  Component,
-  ComponentOptions,
+  type Component,
+  type ComponentOptions,
   createComponentInstance,
   finishComponentSetup,
   isRuntimeOnly,
-  setupComponent
+  setupComponent,
 } from '../component'
 import {
-  RenderFunction,
+  type RenderFunction,
+  internalOptionMergeStrats,
   mergeOptions,
-  internalOptionMergeStrats
 } from '../componentOptions'
-import { ComponentPublicInstance } from '../componentPublicInstance'
+import type { ComponentPublicInstance } from '../componentPublicInstance'
 import { devtoolsInitApp, devtoolsUnmountApp } from '../devtools'
-import { Directive } from '../directives'
+import type { Directive } from '../directives'
 import { nextTick } from '../scheduler'
 import { version } from '..'
 import {
+  type LegacyConfig,
   installLegacyConfigWarnings,
   installLegacyOptionMergeStrats,
-  LegacyConfig
 } from './globalConfig'
-import { LegacyDirective } from './customDirective'
+import type { LegacyDirective } from './customDirective'
 import {
-  warnDeprecation,
   DeprecationTypes,
   assertCompatEnabled,
   configureCompat,
   isCompatEnabled,
-  softAssertCompatEnabled
+  softAssertCompatEnabled,
+  warnDeprecation,
 } from './compatConfig'
-import { LegacyPublicInstance } from './instance'
+import type { LegacyPublicInstance } from './instance'
 
 /**
  * @deprecated the default `Vue` export has been removed in Vue 3. The type for
@@ -82,8 +82,11 @@ export type CompatVue = Pick<App, 'version' | 'component' | 'directive'> & {
 
   component(name: string): Component | undefined
   component(name: string, component: Component): CompatVue
-  directive(name: string): Directive | undefined
-  directive(name: string, directive: Directive): CompatVue
+  directive<T = any, V = any>(name: string): Directive<T, V> | undefined
+  directive<T = any, V = any>(
+    name: string,
+    directive: Directive<T, V>,
+  ): CompatVue
 
   compile(template: string): RenderFunction
 
@@ -134,12 +137,12 @@ let singletonCtor: CompatVue
 // Legacy global Vue constructor
 export function createCompatVue(
   createApp: CreateAppFunction<Element>,
-  createSingletonApp: CreateAppFunction<Element>
+  createSingletonApp: CreateAppFunction<Element>,
 ): CompatVue {
   singletonApp = createSingletonApp({})
 
   const Vue: CompatVue = (singletonCtor = function Vue(
-    options: ComponentOptions = {}
+    options: ComponentOptions = {},
   ) {
     return createCompatApp(options, Vue)
   } as any)
@@ -233,9 +236,9 @@ export function createCompatVue(
           mergeOptions(
             extend({}, SubVue.options),
             inlineOptions,
-            internalOptionMergeStrats as any
+            internalOptionMergeStrats as any,
           ),
-          SubVue
+          SubVue,
         )
       }
     }
@@ -251,14 +254,14 @@ export function createCompatVue(
       mergeBase[key] = isArray(superValue)
         ? superValue.slice()
         : isObject(superValue)
-        ? extend(Object.create(null), superValue)
-        : superValue
+          ? extend(Object.create(null), superValue)
+          : superValue
     }
 
     SubVue.options = mergeOptions(
       mergeBase,
       extendOptions,
-      internalOptionMergeStrats as any
+      internalOptionMergeStrats as any,
     )
 
     SubVue.options._base = SubVue
@@ -305,15 +308,15 @@ export function createCompatVue(
       mergeOptions(
         parent,
         child,
-        vm ? undefined : (internalOptionMergeStrats as any)
+        vm ? undefined : (internalOptionMergeStrats as any),
       ),
-    defineReactive
+    defineReactive,
   }
   Object.defineProperty(Vue, 'util', {
     get() {
       assertCompatEnabled(DeprecationTypes.GLOBAL_PRIVATE_UTIL, null)
       return util
-    }
+    },
   })
 
   Vue.configureCompat = configureCompat
@@ -324,7 +327,7 @@ export function createCompatVue(
 export function installAppCompatProperties(
   app: App,
   context: AppContext,
-  render: RootRenderFunction<any>
+  render: RootRenderFunction<any>,
 ) {
   installFilterMethod(app, context)
   installLegacyOptionMergeStrats(app.config)
@@ -364,7 +367,7 @@ function installLegacyAPIs(app: App) {
       get() {
         __DEV__ && warnDeprecation(DeprecationTypes.GLOBAL_PROTOTYPE, null)
         return app.config.globalProperties
-      }
+      },
     },
     nextTick: { value: nextTick },
     extend: { value: singletonCtor.extend },
@@ -374,8 +377,8 @@ function installLegacyAPIs(app: App) {
     util: {
       get() {
         return singletonCtor.util
-      }
-    }
+      },
+    },
   })
 }
 
@@ -383,7 +386,7 @@ function applySingletonAppMutations(app: App) {
   // copy over asset registries and deopt flag
   app._context.mixins = [...singletonApp._context.mixins]
   ;['components', 'directives', 'filters'].forEach(key => {
-    // @ts-ignore
+    // @ts-expect-error
     app._context[key] = Object.create(singletonApp._context[key])
   })
 
@@ -398,7 +401,7 @@ function applySingletonAppMutations(app: App) {
       continue
     }
     const val = singletonApp.config[key as keyof AppConfig]
-    // @ts-ignore
+    // @ts-expect-error
     app.config[key] = isObject(val) ? Object.create(val) : val
 
     // compat for runtime ignoredElements -> isCustomElement
@@ -432,7 +435,7 @@ function applySingletonPrototype(app: App, Ctor: Function) {
         Object.defineProperty(
           app.config.globalProperties,
           key,
-          descriptors[key]
+          descriptors[key],
         )
       }
     }
@@ -445,7 +448,7 @@ function applySingletonPrototype(app: App, Ctor: Function) {
 function installCompatMount(
   app: App,
   context: AppContext,
-  render: RootRenderFunction
+  render: RootRenderFunction,
 ) {
   let isMounted = false
 
@@ -493,7 +496,7 @@ function installCompatMount(
         if (!result) {
           __DEV__ &&
             warn(
-              `Failed to mount root instance: selector "${selectorOrEl}" returned null.`
+              `Failed to mount root instance: selector "${selectorOrEl}" returned null.`,
             )
           return
         }
@@ -503,7 +506,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 +520,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 +547,7 @@ function installCompatMount(
       container.innerHTML = ''
 
       // TODO hydration
-      render(vnode, container, isSVG)
+      render(vnode, container, namespace)
 
       if (container instanceof Element) {
         container.removeAttribute('v-cloak')
@@ -597,7 +606,7 @@ const methodsToPatch = [
   'unshift',
   'splice',
   'sort',
-  'reverse'
+  'reverse',
 ]
 
 const patched = new WeakSet<object>()
@@ -610,9 +619,9 @@ function defineReactive(obj: any, key: string, val: any) {
     const reactiveVal = reactive(val)
     if (isArray(val)) {
       methodsToPatch.forEach(m => {
-        // @ts-ignore
+        // @ts-expect-error
         val[m] = (...args: any[]) => {
-          // @ts-ignore
+          // @ts-expect-error
           Array.prototype[m].call(reactiveVal, ...args)
         }
       })
@@ -649,6 +658,6 @@ function defineReactiveSimple(obj: any, key: string, val: any) {
     set(newVal) {
       val = isObject(newVal) ? reactive(newVal) : newVal
       trigger(obj, TriggerOpTypes.SET, key, newVal)
-    }
+    },
   })
 }
diff --git a/packages/runtime-core/src/compat/globalConfig.ts b/packages/runtime-core/src/compat/globalConfig.ts
index 03a4699aa55..8c4afa7a766 100644
--- a/packages/runtime-core/src/compat/globalConfig.ts
+++ b/packages/runtime-core/src/compat/globalConfig.ts
@@ -1,8 +1,8 @@
-import { AppConfig } from '../apiCreateApp'
+import type { AppConfig } from '../apiCreateApp'
 import {
   DeprecationTypes,
   softAssertCompatEnabled,
-  warnDeprecation
+  warnDeprecation,
 } from './compatConfig'
 import { isCopyingConfig } from './global'
 import { internalOptionMergeStrats } from '../componentOptions'
@@ -42,7 +42,7 @@ export function installLegacyConfigWarnings(config: AppConfig) {
     devtools: DeprecationTypes.CONFIG_DEVTOOLS,
     ignoredElements: DeprecationTypes.CONFIG_IGNORED_ELEMENTS,
     keyCodes: DeprecationTypes.CONFIG_KEY_CODES,
-    productionTip: DeprecationTypes.CONFIG_PRODUCTION_TIP
+    productionTip: DeprecationTypes.CONFIG_PRODUCTION_TIP,
   }
 
   Object.keys(legacyConfigOptions).forEach(key => {
@@ -57,7 +57,7 @@ export function installLegacyConfigWarnings(config: AppConfig) {
           warnDeprecation(legacyConfigOptions[key], null)
         }
         val = newVal
-      }
+      },
     })
   })
 }
@@ -72,13 +72,13 @@ export function installLegacyOptionMergeStrats(config: AppConfig) {
         key in internalOptionMergeStrats &&
         softAssertCompatEnabled(
           DeprecationTypes.CONFIG_OPTION_MERGE_STRATS,
-          null
+          null,
         )
       ) {
         return internalOptionMergeStrats[
           key as keyof typeof internalOptionMergeStrats
         ]
       }
-    }
+    },
   })
 }
diff --git a/packages/runtime-core/src/compat/instance.ts b/packages/runtime-core/src/compat/instance.ts
index e6baeda6a8e..5beaf5f5ebb 100644
--- a/packages/runtime-core/src/compat/instance.ts
+++ b/packages/runtime-core/src/compat/instance.ts
@@ -1,20 +1,20 @@
 import {
+  NOOP,
   extend,
   looseEqual,
   looseIndexOf,
   looseToNumber,
-  NOOP,
-  toDisplayString
+  toDisplayString,
 } from '@vue/shared'
-import {
+import type {
   ComponentPublicInstance,
-  PublicPropertiesMap
+  PublicPropertiesMap,
 } from '../componentPublicInstance'
 import { getCompatChildren } from './instanceChildren'
 import {
   DeprecationTypes,
   assertCompatEnabled,
-  isCompatEnabled
+  isCompatEnabled,
 } from './compatConfig'
 import { off, on, once } from './instanceEventEmitter'
 import { getCompatListeners } from './instanceListeners'
@@ -32,11 +32,11 @@ import {
   legacyPrependModifier,
   legacyRenderSlot,
   legacyRenderStatic,
-  legacyresolveScopedSlots
+  legacyresolveScopedSlots,
 } from './renderHelpers'
 import { resolveFilter } from '../helpers/resolveAssets'
-import { InternalSlots, Slots } from '../componentSlots'
-import { ContextualRenderFn } from '../componentRenderContext'
+import type { InternalSlots, Slots } from '../componentSlots'
+import type { ContextualRenderFn } from '../componentRenderContext'
 import { resolveMergedOptions } from '../componentOptions'
 
 export type LegacyPublicInstance = ComponentPublicInstance &
@@ -79,7 +79,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
     $mount: i => {
       assertCompatEnabled(
         DeprecationTypes.GLOBAL_MOUNT,
-        null /* this warning is global */
+        null /* this warning is global */,
       )
       // root mount override from ./global.ts in installCompatMount
       return i.ctx._compat_mount || NOOP
@@ -120,7 +120,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
     $off: i => off.bind(null, i),
 
     $children: getCompatChildren,
-    $listeners: getCompatListeners
+    $listeners: getCompatListeners,
   } as PublicPropertiesMap)
 
   /* istanbul ignore if */
@@ -164,7 +164,7 @@ export function installCompatInstanceProperties(map: PublicPropertiesMap) {
       _u: () => legacyresolveScopedSlots,
       _g: () => legacyBindObjectListeners,
       _d: () => legacyBindDynamicKeys,
-      _p: () => legacyPrependModifier
+      _p: () => legacyPrependModifier,
     } as PublicPropertiesMap)
   }
 }
diff --git a/packages/runtime-core/src/compat/instanceChildren.ts b/packages/runtime-core/src/compat/instanceChildren.ts
index 7524e53b7f1..415275342ab 100644
--- a/packages/runtime-core/src/compat/instanceChildren.ts
+++ b/packages/runtime-core/src/compat/instanceChildren.ts
@@ -1,11 +1,11 @@
 import { ShapeFlags } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { ComponentPublicInstance } from '../componentPublicInstance'
-import { VNode } from '../vnode'
-import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import type { ComponentPublicInstance } from '../componentPublicInstance'
+import type { VNode } from '../vnode'
+import { DeprecationTypes, assertCompatEnabled } from './compatConfig'
 
 export function getCompatChildren(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): ComponentPublicInstance[] {
   assertCompatEnabled(DeprecationTypes.INSTANCE_CHILDREN, instance)
   const root = instance.subTree
diff --git a/packages/runtime-core/src/compat/instanceEventEmitter.ts b/packages/runtime-core/src/compat/instanceEventEmitter.ts
index b314f686c4e..a8d3f52518b 100644
--- a/packages/runtime-core/src/compat/instanceEventEmitter.ts
+++ b/packages/runtime-core/src/compat/instanceEventEmitter.ts
@@ -1,7 +1,7 @@
 import { isArray } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
-import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
+import { DeprecationTypes, assertCompatEnabled } from './compatConfig'
 
 interface EventRegistry {
   [event: string]: Function[] | undefined
@@ -13,7 +13,7 @@ const eventRegistryMap = /*#__PURE__*/ new WeakMap<
 >()
 
 export function getRegistry(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): EventRegistry {
   let events = eventRegistryMap.get(instance)
   if (!events) {
@@ -25,7 +25,7 @@ export function getRegistry(
 export function on(
   instance: ComponentInternalInstance,
   event: string | string[],
-  fn: Function
+  fn: Function,
 ) {
   if (isArray(event)) {
     event.forEach(e => on(instance, e, fn))
@@ -34,7 +34,7 @@ export function on(
       assertCompatEnabled(
         DeprecationTypes.INSTANCE_EVENT_HOOKS,
         instance,
-        event
+        event,
       )
     } else {
       assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
@@ -48,7 +48,7 @@ export function on(
 export function once(
   instance: ComponentInternalInstance,
   event: string,
-  fn: Function
+  fn: Function,
 ) {
   const wrapped = (...args: any[]) => {
     off(instance, event, wrapped)
@@ -62,7 +62,7 @@ export function once(
 export function off(
   instance: ComponentInternalInstance,
   event?: string | string[],
-  fn?: Function
+  fn?: Function,
 ) {
   assertCompatEnabled(DeprecationTypes.INSTANCE_EVENT_EMITTER, instance)
   const vm = instance.proxy
@@ -93,7 +93,7 @@ export function off(
 export function emit(
   instance: ComponentInternalInstance,
   event: string,
-  args: any[]
+  args: any[],
 ) {
   const cbs = getRegistry(instance)[event]
   if (cbs) {
@@ -101,7 +101,7 @@ export function emit(
       cbs.map(cb => cb.bind(instance.proxy)),
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
   return instance.proxy
diff --git a/packages/runtime-core/src/compat/instanceListeners.ts b/packages/runtime-core/src/compat/instanceListeners.ts
index 973d440b10c..e01b72411d3 100644
--- a/packages/runtime-core/src/compat/instanceListeners.ts
+++ b/packages/runtime-core/src/compat/instanceListeners.ts
@@ -1,6 +1,6 @@
 import { isOn } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { assertCompatEnabled, DeprecationTypes } from './compatConfig'
+import type { ComponentInternalInstance } from '../component'
+import { DeprecationTypes, assertCompatEnabled } from './compatConfig'
 
 export function getCompatListeners(instance: ComponentInternalInstance) {
   assertCompatEnabled(DeprecationTypes.INSTANCE_LISTENERS, instance)
diff --git a/packages/runtime-core/src/compat/props.ts b/packages/runtime-core/src/compat/props.ts
index e2fccb6675f..0330e33aa15 100644
--- a/packages/runtime-core/src/compat/props.ts
+++ b/packages/runtime-core/src/compat/props.ts
@@ -1,13 +1,16 @@
 import { isArray } from '@vue/shared'
 import { inject } from '../apiInject'
-import { ComponentInternalInstance, Data } from '../component'
-import { ComponentOptions, resolveMergedOptions } from '../componentOptions'
+import type { ComponentInternalInstance, Data } from '../component'
+import {
+  type ComponentOptions,
+  resolveMergedOptions,
+} from '../componentOptions'
 import { DeprecationTypes, warnDeprecation } from './compatConfig'
 
 export function createPropsDefaultThis(
   instance: ComponentInternalInstance,
   rawProps: Data,
-  propKey: string
+  propKey: string,
 ) {
   return new Proxy(
     {},
@@ -34,7 +37,7 @@ export function createPropsDefaultThis(
             return inject(key)
           }
         }
-      }
-    }
+      },
+    },
   )
 }
diff --git a/packages/runtime-core/src/compat/renderFn.ts b/packages/runtime-core/src/compat/renderFn.ts
index 4cf2fc226cf..52a19d08f8e 100644
--- a/packages/runtime-core/src/compat/renderFn.ts
+++ b/packages/runtime-core/src/compat/renderFn.ts
@@ -1,4 +1,5 @@
 import {
+  ShapeFlags,
   extend,
   hyphenate,
   isArray,
@@ -7,35 +8,34 @@ import {
   makeMap,
   normalizeClass,
   normalizeStyle,
-  ShapeFlags,
-  toHandlerKey
+  toHandlerKey,
 } from '@vue/shared'
-import {
+import type {
   Component,
   ComponentInternalInstance,
   ComponentOptions,
   Data,
-  InternalRenderFunction
+  InternalRenderFunction,
 } from '../component'
 import { currentRenderingInstance } from '../componentRenderContext'
-import { DirectiveArguments, withDirectives } from '../directives'
+import { type DirectiveArguments, withDirectives } from '../directives'
 import {
   resolveDirective,
-  resolveDynamicComponent
+  resolveDynamicComponent,
 } from '../helpers/resolveAssets'
 import {
   Comment,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
   createVNode,
   isVNode,
   normalizeChildren,
-  VNode,
-  VNodeArrayChildren,
-  VNodeProps
 } from '../vnode'
 import {
-  checkCompatEnabled,
   DeprecationTypes,
-  isCompatEnabled
+  checkCompatEnabled,
+  isCompatEnabled,
 } from './compatConfig'
 import { compatModelEventPrefix } from './componentVModel'
 
@@ -59,10 +59,10 @@ export function convertLegacyRenderFn(instance: ComponentInternalInstance) {
   // v2 render function, try to provide compat
   if (checkCompatEnabled(DeprecationTypes.RENDER_FUNCTION, instance)) {
     const wrapped = (Component.render = function compatRender() {
-      // @ts-ignore
+      // @ts-expect-error
       return render.call(this, compatH)
     })
-    // @ts-ignore
+    // @ts-expect-error
     wrapped._compatWrapped = true
   }
 }
@@ -109,18 +109,18 @@ type LegacyVNodeChildren =
 
 export function compatH(
   type: string | Component,
-  children?: LegacyVNodeChildren
+  children?: LegacyVNodeChildren,
 ): VNode
 export function compatH(
   type: string | Component,
   props?: Data & LegacyVNodeProps,
-  children?: LegacyVNodeChildren
+  children?: LegacyVNodeChildren,
 ): VNode
 
 export function compatH(
   type: any,
   propsOrChildren?: any,
-  children?: any
+  children?: any,
 ): VNode {
   if (!type) {
     type = Comment
@@ -150,8 +150,8 @@ export function compatH(
       return convertLegacySlots(
         convertLegacyDirectives(
           createVNode(type, convertLegacyProps(propsOrChildren, type)),
-          propsOrChildren
-        )
+          propsOrChildren,
+        ),
       )
     } else {
       // omit props
@@ -164,19 +164,19 @@ export function compatH(
     return convertLegacySlots(
       convertLegacyDirectives(
         createVNode(type, convertLegacyProps(propsOrChildren, type), children),
-        propsOrChildren
-      )
+        propsOrChildren,
+      ),
     )
   }
 }
 
 const skipLegacyRootLevelProps = /*#__PURE__*/ makeMap(
-  'staticStyle,staticClass,directives,model,hook'
+  'staticStyle,staticClass,directives,model,hook',
 )
 
 function convertLegacyProps(
   legacyProps: LegacyVNodeProps | undefined,
-  type: any
+  type: any,
 ): (Data & VNodeProps) | null {
   if (!legacyProps) {
     return null
@@ -240,7 +240,7 @@ function convertLegacyEventKey(event: string): string {
 
 function convertLegacyDirectives(
   vnode: VNode,
-  props?: LegacyVNodeProps
+  props?: LegacyVNodeProps,
 ): VNode {
   if (props && props.directives) {
     return withDirectives(
@@ -250,9 +250,9 @@ function convertLegacyDirectives(
           resolveDirective(name)!,
           value,
           arg,
-          modifiers
+          modifiers,
         ] as DirectiveArguments[number]
-      })
+      }),
     )
   }
   return vnode
@@ -309,12 +309,12 @@ export function defineLegacyVNodeProperties(vnode: VNode) {
     isCompatEnabled(
       DeprecationTypes.RENDER_FUNCTION,
       currentRenderingInstance,
-      true /* enable for built-ins */
+      true /* enable for built-ins */,
     ) &&
     isCompatEnabled(
       DeprecationTypes.PRIVATE_APIS,
       currentRenderingInstance,
-      true /* enable for built-ins */
+      true /* enable for built-ins */,
     )
   ) {
     const context = currentRenderingInstance
@@ -337,11 +337,11 @@ export function defineLegacyVNodeProperties(vnode: VNode) {
             return (componentOptions = {
               Ctor: vnode.type,
               propsData: vnode.props,
-              children: vnode.children
+              children: vnode.children,
             })
           }
-        }
-      }
+        },
+      },
     })
   }
 }
diff --git a/packages/runtime-core/src/compat/renderHelpers.ts b/packages/runtime-core/src/compat/renderHelpers.ts
index aa156c11a40..56dad6238c8 100644
--- a/packages/runtime-core/src/compat/renderHelpers.ts
+++ b/packages/runtime-core/src/compat/renderHelpers.ts
@@ -5,14 +5,14 @@ import {
   isArray,
   isObject,
   isReservedProp,
-  normalizeClass
+  normalizeClass,
 } from '@vue/shared'
-import { ComponentInternalInstance } from '../component'
-import { Slot } from '../componentSlots'
+import type { ComponentInternalInstance } from '../component'
+import type { Slot } from '../componentSlots'
 import { createSlots } from '../helpers/createSlots'
 import { renderSlot } from '../helpers/renderSlot'
 import { toHandlers } from '../helpers/toHandlers'
-import { mergeProps, VNode } from '../vnode'
+import { type VNode, mergeProps } from '../vnode'
 
 function toObject(arr: Array<any>): Object {
   const res = {}
@@ -29,7 +29,7 @@ export function legacyBindObjectProps(
   _tag: string,
   value: any,
   _asProp: boolean,
-  isSync?: boolean
+  isSync?: boolean,
 ) {
   if (value && isObject(value)) {
     if (isArray(value)) {
@@ -71,7 +71,7 @@ export function legacyRenderSlot(
   name: string,
   fallback?: VNode[],
   props?: any,
-  bindObject?: any
+  bindObject?: any,
 ) {
   if (bindObject) {
     props = mergeProps(props, bindObject)
@@ -91,12 +91,12 @@ export function legacyresolveScopedSlots(
   fns: LegacyScopedSlotsData,
   raw?: Record<string, Slot>,
   // the following are added in 2.6
-  hasDynamicKeys?: boolean
+  hasDynamicKeys?: boolean,
 ) {
   // v2 default slot doesn't have name
   return createSlots(
     raw || ({ $stable: !hasDynamicKeys } as any),
-    mapKeyToName(fns)
+    mapKeyToName(fns),
   )
 }
 
@@ -121,7 +121,7 @@ const staticCacheMap = /*#__PURE__*/ new WeakMap<
 
 export function legacyRenderStatic(
   instance: ComponentInternalInstance,
-  index: number
+  index: number,
 ) {
   let cache = staticCacheMap.get(instance)
   if (!cache) {
@@ -141,7 +141,7 @@ export function legacyCheckKeyCodes(
   key: string,
   builtInKeyCode?: number | number[],
   eventKeyName?: string,
-  builtInKeyName?: string | string[]
+  builtInKeyName?: string | string[],
 ) {
   const config = instance.appContext.config as any
   const configKeyCodes = config.keyCodes || {}
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index 57a53a39b76..ed1f8efee52 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -1,87 +1,126 @@
-import { VNode, VNodeChild, isVNode } from './vnode'
+import { type VNode, type VNodeChild, isVNode } from './vnode'
 import {
+  EffectScope,
+  type ReactiveEffect,
+  TrackOpTypes,
   isRef,
+  markRaw,
   pauseTracking,
+  proxyRefs,
   resetTracking,
   shallowReadonly,
-  proxyRefs,
-  EffectScope,
-  markRaw,
   track,
-  TrackOpTypes,
-  ReactiveEffect
 } from '@vue/reactivity'
 import {
-  ComponentPublicInstance,
+  type ComponentPublicInstance,
+  type ComponentPublicInstanceConstructor,
   PublicInstanceProxyHandlers,
+  RuntimeCompiledPublicInstanceProxyHandlers,
   createDevRenderContext,
   exposePropsOnRenderContext,
   exposeSetupStateOnRenderContext,
-  ComponentPublicInstanceConstructor,
   publicPropertiesMap,
-  RuntimeCompiledPublicInstanceProxyHandlers
 } from './componentPublicInstance'
 import {
-  ComponentPropsOptions,
-  NormalizedPropsOptions,
+  type ComponentPropsOptions,
+  type NormalizedPropsOptions,
   initProps,
-  normalizePropsOptions
+  normalizePropsOptions,
 } from './componentProps'
 import {
+  type InternalSlots,
+  type Slots,
+  type SlotsType,
+  type UnwrapSlotsType,
   initSlots,
-  InternalSlots,
-  Slots,
-  SlotsType,
-  UnwrapSlotsType
 } from './componentSlots'
 import { warn } from './warning'
 import { ErrorCodes, callWithErrorHandling, handleError } from './errorHandling'
-import { AppContext, createAppContext, AppConfig } from './apiCreateApp'
-import { Directive, validateDirectiveName } from './directives'
 import {
+  type AppConfig,
+  type AppContext,
+  createAppContext,
+} from './apiCreateApp'
+import { type Directive, validateDirectiveName } from './directives'
+import {
+  type ComponentOptions,
+  type ComputedOptions,
+  type MethodOptions,
   applyOptions,
-  ComponentOptions,
-  ComputedOptions,
-  MethodOptions,
-  resolveMergedOptions
+  resolveMergedOptions,
 } from './componentOptions'
 import {
-  EmitsOptions,
-  ObjectEmitsOptions,
-  EmitFn,
+  type EmitFn,
+  type EmitsOptions,
+  type EmitsToProps,
+  type ObjectEmitsOptions,
+  type ShortEmitsToObject,
   emit,
-  normalizeEmitsOptions
+  normalizeEmitsOptions,
 } from './componentEmits'
 import {
   EMPTY_OBJ,
-  isArray,
-  isFunction,
-  NOOP,
-  isObject,
+  type IfAny,
   NO,
-  makeMap,
-  isPromise,
+  NOOP,
   ShapeFlags,
   extend,
   getGlobalThis,
-  IfAny
+  isArray,
+  isFunction,
+  isObject,
+  isPromise,
+  makeMap,
 } from '@vue/shared'
-import { SuspenseBoundary } from './components/Suspense'
-import { CompilerOptions } from '@vue/compiler-core'
+import type { SuspenseBoundary } from './components/Suspense'
+import type { CompilerOptions } from '@vue/compiler-core'
 import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
-import { startMeasure, endMeasure } from './profiling'
+import { endMeasure, startMeasure } from './profiling'
 import { convertLegacyRenderFn } from './compat/renderFn'
 import {
-  CompatConfig,
+  type CompatConfig,
   globalCompatConfig,
-  validateCompatConfig
+  validateCompatConfig,
 } from './compat/compatConfig'
-import { SchedulerJob } from './scheduler'
-import { LifecycleHooks } from './enums'
+import type { SchedulerJob } from './scheduler'
+import type { 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, {}, {}, {}, {}, 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
  */
@@ -126,16 +165,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,
-    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
@@ -158,10 +198,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.
@@ -172,9 +214,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 }
@@ -184,7 +228,7 @@ type LifecycleHook<TFn = Function> = TFn[] | null
 // use `E extends any` to force evaluating type to fix #2362
 export type SetupContext<
   E = EmitsOptions,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 > = E extends any
   ? {
       attrs: Data
@@ -205,7 +249,7 @@ export type InternalRenderFunction = {
     $props: ComponentInternalInstance['props'],
     $setup: ComponentInternalInstance['setupState'],
     $data: ComponentInternalInstance['data'],
-    $options: ComponentInternalInstance['ctx']
+    $options: ComponentInternalInstance['ctx'],
   ): VNodeChild
   _rc?: boolean // isRuntimeCompiled
 
@@ -475,6 +519,12 @@ export interface ComponentInternalInstance {
    * @internal
    */
   ut?: (vars?: Record<string, string>) => void
+
+  /**
+   * dev only. For style v-bind hydration mismatch checks
+   * @internal
+   */
+  getCssVars?: () => Record<string, string>
 }
 
 const emptyAppContext = createAppContext()
@@ -484,7 +534,7 @@ let uid = 0
 export function createComponentInstance(
   vnode: VNode,
   parent: ComponentInternalInstance | null,
-  suspense: SuspenseBoundary | null
+  suspense: SuspenseBoundary | null,
 ) {
   const type = vnode.type as ConcreteComponent
   // inherit parent app context - or - if root, adopt from root vnode
@@ -567,7 +617,7 @@ export function createComponentInstance(
     rtg: null,
     rtc: null,
     ec: null,
-    sp: null
+    sp: null,
   }
   if (__DEV__) {
     instance.ctx = createDevRenderContext(instance)
@@ -590,13 +640,10 @@ export let currentInstance: ComponentInternalInstance | null = null
 export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
   currentInstance || currentRenderingInstance
 
-type GlobalInstanceSetter = ((
-  instance: ComponentInternalInstance | null
-) => void) & { version?: string }
-
-let internalSetCurrentInstance: GlobalInstanceSetter
-let globalCurrentInstanceSetters: GlobalInstanceSetter[]
-let settersKey = '__VUE_INSTANCE_SETTERS__'
+let internalSetCurrentInstance: (
+  instance: ComponentInternalInstance | null,
+) => void
+let setInSSRSetupState: (state: boolean) => void
 
 /**
  * The following makes getCurrentInstance() usage across multiple copies of Vue
@@ -611,26 +658,46 @@ let settersKey = '__VUE_INSTANCE_SETTERS__'
  * found during browser execution.
  */
 if (__SSR__) {
-  if (!(globalCurrentInstanceSetters = getGlobalThis()[settersKey])) {
-    globalCurrentInstanceSetters = getGlobalThis()[settersKey] = []
-  }
-  globalCurrentInstanceSetters.push(i => (currentInstance = i))
-  internalSetCurrentInstance = instance => {
-    if (globalCurrentInstanceSetters.length > 1) {
-      globalCurrentInstanceSetters.forEach(s => s(instance))
-    } else {
-      globalCurrentInstanceSetters[0](instance)
+  type Setter = (v: any) => void
+  const g = getGlobalThis()
+  const registerGlobalSetter = (key: string, setter: Setter) => {
+    let setters: Setter[]
+    if (!(setters = g[key])) setters = g[key] = []
+    setters.push(setter)
+    return (v: any) => {
+      if (setters.length > 1) setters.forEach(set => set(v))
+      else setters[0](v)
     }
   }
+  internalSetCurrentInstance = registerGlobalSetter(
+    `__VUE_INSTANCE_SETTERS__`,
+    v => (currentInstance = v),
+  )
+  // also make `isInSSRComponentSetup` sharable across copies of Vue.
+  // this is needed in the SFC playground when SSRing async components, since
+  // we have to load both the runtime and the server-renderer from CDNs, they
+  // contain duplicated copies of Vue runtime code.
+  setInSSRSetupState = registerGlobalSetter(
+    `__VUE_SSR_SETTERS__`,
+    v => (isInSSRComponentSetup = v),
+  )
 } else {
   internalSetCurrentInstance = i => {
     currentInstance = i
   }
+  setInSSRSetupState = v => {
+    isInSSRComponentSetup = v
+  }
 }
 
 export const setCurrentInstance = (instance: ComponentInternalInstance) => {
+  const prev = currentInstance
   internalSetCurrentInstance(instance)
   instance.scope.on()
+  return () => {
+    instance.scope.off()
+    internalSetCurrentInstance(prev)
+  }
 }
 
 export const unsetCurrentInstance = () => {
@@ -644,7 +711,7 @@ export function validateComponentName(name: string, config: AppConfig) {
   const appIsNativeTag = config.isNativeTag || NO
   if (isBuiltInTag(name) || appIsNativeTag(name)) {
     warn(
-      'Do not use built-in or reserved HTML elements as component id: ' + name
+      'Do not use built-in or reserved HTML elements as component id: ' + name,
     )
   }
 }
@@ -657,9 +724,9 @@ export let isInSSRComponentSetup = false
 
 export function setupComponent(
   instance: ComponentInternalInstance,
-  isSSR = false
+  isSSR = false,
 ) {
-  isInSSRComponentSetup = isSSR
+  isSSR && setInSSRSetupState(isSSR)
 
   const { props, children } = instance.vnode
   const isStateful = isStatefulComponent(instance)
@@ -669,13 +736,14 @@ export function setupComponent(
   const setupResult = isStateful
     ? setupStatefulComponent(instance, isSSR)
     : undefined
-  isInSSRComponentSetup = false
+
+  isSSR && setInSSRSetupState(false)
   return setupResult
 }
 
 function setupStatefulComponent(
   instance: ComponentInternalInstance,
-  isSSR: boolean
+  isSSR: boolean,
 ) {
   const Component = instance.type as ComponentOptions
 
@@ -699,7 +767,7 @@ function setupStatefulComponent(
       warn(
         `"compilerOptions" is only supported when using a build of Vue that ` +
           `includes the runtime compiler. Since you are using a runtime-only ` +
-          `build, the options should be passed via your build tool config instead.`
+          `build, the options should be passed via your build tool config instead.`,
       )
     }
   }
@@ -717,16 +785,19 @@ function setupStatefulComponent(
     const setupContext = (instance.setupContext =
       setup.length > 1 ? createSetupContext(instance) : null)
 
-    setCurrentInstance(instance)
+    const reset = setCurrentInstance(instance)
     pauseTracking()
     const setupResult = callWithErrorHandling(
       setup,
       instance,
       ErrorCodes.SETUP_FUNCTION,
-      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
+      [
+        __DEV__ ? shallowReadonly(instance.props) : instance.props,
+        setupContext,
+      ],
     )
     resetTracking()
-    unsetCurrentInstance()
+    reset()
 
     if (isPromise(setupResult)) {
       setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
@@ -749,13 +820,13 @@ function setupStatefulComponent(
             `Component <${name}>: setup function returned a promise, but no ` +
               `<Suspense> boundary was found in the parent component tree. ` +
               `A component with async setup() must be nested in a <Suspense> ` +
-              `in order to be rendered.`
+              `in order to be rendered.`,
           )
         }
       } else if (__DEV__) {
         warn(
           `setup() returned a Promise, but the version of Vue you are using ` +
-            `does not support it yet.`
+            `does not support it yet.`,
         )
       }
     } else {
@@ -769,7 +840,7 @@ function setupStatefulComponent(
 export function handleSetupResult(
   instance: ComponentInternalInstance,
   setupResult: unknown,
-  isSSR: boolean
+  isSSR: boolean,
 ) {
   if (isFunction(setupResult)) {
     // setup returned an inline render function
@@ -784,7 +855,7 @@ export function handleSetupResult(
     if (__DEV__ && isVNode(setupResult)) {
       warn(
         `setup() should not return VNodes directly - ` +
-          `return a render function instead.`
+          `return a render function instead.`,
       )
     }
     // setup returned bindings.
@@ -800,7 +871,7 @@ export function handleSetupResult(
     warn(
       `setup() should return an object. Received: ${
         setupResult === null ? 'null' : typeof setupResult
-      }`
+      }`,
     )
   }
   finishComponentSetup(instance, isSSR)
@@ -808,7 +879,7 @@ export function handleSetupResult(
 
 type CompileFunction = (
   template: string | object,
-  options?: CompilerOptions
+  options?: CompilerOptions,
 ) => InternalRenderFunction
 
 let compile: CompileFunction | undefined
@@ -833,7 +904,7 @@ export const isRuntimeOnly = () => !compile
 export function finishComponentSetup(
   instance: ComponentInternalInstance,
   isSSR: boolean,
-  skipOptions?: boolean
+  skipOptions?: boolean,
 ) {
   const Component = instance.type as ComponentOptions
 
@@ -868,11 +939,11 @@ export function finishComponentSetup(
           extend(
             {
               isCustomElement,
-              delimiters
+              delimiters,
             },
-            compilerOptions
+            compilerOptions,
           ),
-          componentCompilerOptions
+          componentCompilerOptions,
         )
         if (__COMPAT__) {
           // pass runtime compat config into the compiler
@@ -901,13 +972,13 @@ export function finishComponentSetup(
 
   // support for 2.x options
   if (__FEATURE_OPTIONS_API__ && !(__COMPAT__ && skipOptions)) {
-    setCurrentInstance(instance)
+    const reset = setCurrentInstance(instance)
     pauseTracking()
     try {
       applyOptions(instance)
     } finally {
       resetTracking()
-      unsetCurrentInstance()
+      reset()
     }
   }
 
@@ -922,10 +993,10 @@ export function finishComponentSetup(
           (__ESM_BUNDLER__
             ? ` Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
             : __ESM_BROWSER__
-            ? ` Use "vue.esm-browser.js" instead.`
-            : __GLOBAL__
-            ? ` Use "vue.global.js" instead.`
-            : ``) /* should not happen */
+              ? ` Use "vue.esm-browser.js" instead.`
+              : __GLOBAL__
+                ? ` Use "vue.global.js" instead.`
+                : ``) /* should not happen */,
       )
     } else {
       warn(`Component is missing template or render function.`)
@@ -952,14 +1023,14 @@ function getAttrsProxy(instance: ComponentInternalInstance): Data {
             deleteProperty() {
               warn(`setupContext.attrs is readonly.`)
               return false
-            }
+            },
           }
         : {
             get(target, key: string) {
               track(instance, TrackOpTypes.GET, '$attrs')
               return target[key]
-            }
-          }
+            },
+          },
     ))
   )
 }
@@ -974,13 +1045,13 @@ function getSlotsProxy(instance: ComponentInternalInstance): Slots {
       get(target, key: string) {
         track(instance, TrackOpTypes.GET, '$slots')
         return target[key]
-      }
+      },
     }))
   )
 }
 
 export function createSetupContext(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): SetupContext {
   const expose: SetupContext['expose'] = exposed => {
     if (__DEV__) {
@@ -998,7 +1069,7 @@ export function createSetupContext(
         }
         if (exposedType !== 'object') {
           warn(
-            `expose() should be passed a plain object, received ${exposedType}.`
+            `expose() should be passed a plain object, received ${exposedType}.`,
           )
         }
       }
@@ -1019,7 +1090,7 @@ export function createSetupContext(
       get emit() {
         return (event: string, ...args: any[]) => instance.emit(event, ...args)
       },
-      expose
+      expose,
     })
   } else {
     return {
@@ -1028,7 +1099,7 @@ export function createSetupContext(
       },
       slots: instance.slots,
       emit: instance.emit,
-      expose
+      expose,
     }
   }
 }
@@ -1047,7 +1118,7 @@ export function getExposeProxy(instance: ComponentInternalInstance) {
         },
         has(target, key: string) {
           return key in target || key in publicPropertiesMap
-        }
+        },
       }))
     )
   }
@@ -1059,7 +1130,7 @@ const classify = (str: string): string =>
 
 export function getComponentName(
   Component: ConcreteComponent,
-  includeInferred = true
+  includeInferred = true,
 ): string | false | undefined {
   return isFunction(Component)
     ? Component.displayName || Component.name
@@ -1070,7 +1141,7 @@ export function getComponentName(
 export function formatComponentName(
   instance: ComponentInternalInstance | null,
   Component: ConcreteComponent,
-  isRoot = false
+  isRoot = false,
 ): string {
   let name = getComponentName(Component)
   if (!name && Component.__file) {
@@ -1092,7 +1163,7 @@ export function formatComponentName(
     name =
       inferFromRegistry(
         instance.components ||
-          (instance.parent.type as ComponentOptions).components
+          (instance.parent.type as ComponentOptions).components,
       ) || inferFromRegistry(instance.appContext.components)
   }
 
diff --git a/packages/runtime-core/src/componentEmits.ts b/packages/runtime-core/src/componentEmits.ts
index 1bf122541d6..4551235bc5a 100644
--- a/packages/runtime-core/src/componentEmits.ts
+++ b/packages/runtime-core/src/componentEmits.ts
@@ -1,32 +1,32 @@
 import {
-  camelize,
   EMPTY_OBJ,
-  toHandlerKey,
+  type UnionToIntersection,
+  camelize,
   extend,
   hasOwn,
   hyphenate,
   isArray,
   isFunction,
   isObject,
-  isString,
   isOn,
-  UnionToIntersection,
-  looseToNumber
+  isString,
+  looseToNumber,
+  toHandlerKey,
 } from '@vue/shared'
 import {
-  ComponentInternalInstance,
-  ComponentOptions,
-  ConcreteComponent,
-  formatComponentName
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  formatComponentName,
 } from './component'
-import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 import { warn } from './warning'
 import { devtoolsComponentEmit } from './devtools'
-import { AppContext } from './apiCreateApp'
+import type { AppContext } from './apiCreateApp'
 import { emit as compatInstanceEmit } from './compat/instanceEventEmitter'
 import {
+  compatModelEmit,
   compatModelEventPrefix,
-  compatModelEmit
 } from './compat/componentVModel'
 
 export type ObjectEmitsOptions = Record<
@@ -38,37 +38,46 @@ export type EmitsOptions = ObjectEmitsOptions | string[]
 
 export type EmitsToProps<T extends EmitsOptions> = T extends string[]
   ? {
-      [K in string & `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
+      [K in `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
     }
   : T extends ObjectEmitsOptions
-  ? {
-      [K in string &
-        `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
-        ? T[Uncapitalize<C>] extends null
-          ? (...args: any[]) => any
-          : (
+    ? {
+        [K in `on${Capitalize<string & keyof T>}`]?: K extends `on${infer C}`
+          ? (
               ...args: T[Uncapitalize<C>] extends (...args: infer P) => any
                 ? P
-                : never
+                : T[Uncapitalize<C>] extends null
+                  ? any[]
+                  : never
             ) => any
-        : never
-    }
-  : {}
+          : never
+      }
+    : {}
+
+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
-> = Options extends Array<infer V>
-  ? (event: V, ...args: any[]) => void
-  : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
-  ? (event: string, ...args: any[]) => void
-  : UnionToIntersection<
-      {
-        [key in Event]: Options[key] extends (...args: infer Args) => any
-          ? (event: key, ...args: Args) => void
-          : (event: key, ...args: any[]) => void
-      }[Event]
-    >
+  Event extends keyof Options = keyof Options,
+> =
+  Options extends Array<infer V>
+    ? (event: V, ...args: any[]) => void
+    : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function
+      ? (event: string, ...args: any[]) => void
+      : UnionToIntersection<
+          {
+            [key in Event]: Options[key] extends (...args: infer Args) => any
+              ? (event: key, ...args: Args) => void
+              : Options[key] extends any[]
+                ? (event: key, ...args: Options[key]) => void
+                : (event: key, ...args: any[]) => void
+          }[Event]
+        >
 
 export function emit(
   instance: ComponentInternalInstance,
@@ -81,7 +90,7 @@ export function emit(
   if (__DEV__) {
     const {
       emitsOptions,
-      propsOptions: [propsOptions]
+      propsOptions: [propsOptions],
     } = instance
     if (emitsOptions) {
       if (
@@ -95,7 +104,7 @@ export function emit(
         if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
           warn(
             `Component emitted event "${event}" but it is neither declared in ` +
-              `the emits option nor as an "${toHandlerKey(event)}" prop.`
+              `the emits option nor as an "${toHandlerKey(event)}" prop.`,
           )
         }
       } else {
@@ -104,7 +113,7 @@ export function emit(
           const isValid = validator(...rawArgs)
           if (!isValid) {
             warn(
-              `Invalid event arguments: event validation failed for event "${event}".`
+              `Invalid event arguments: event validation failed for event "${event}".`,
             )
           }
         }
@@ -141,11 +150,13 @@ export function emit(
         `Event "${lowerCaseEvent}" is emitted in component ` +
           `${formatComponentName(
             instance,
-            instance.type
+            instance.type,
           )} but the handler is registered for "${event}". ` +
           `Note that HTML attributes are case-insensitive and you cannot use ` +
           `v-on to listen to camelCase events when using in-DOM templates. ` +
-          `You should probably use "${hyphenate(event)}" instead of "${event}".`
+          `You should probably use "${hyphenate(
+            event,
+          )}" instead of "${event}".`,
       )
     }
   }
@@ -166,7 +177,7 @@ export function emit(
       handler,
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
 
@@ -182,7 +193,7 @@ export function emit(
       onceHandler,
       instance,
       ErrorCodes.COMPONENT_EVENT_HANDLER,
-      args
+      args,
     )
   }
 
@@ -195,7 +206,7 @@ export function emit(
 export function normalizeEmitsOptions(
   comp: ConcreteComponent,
   appContext: AppContext,
-  asMixin = false
+  asMixin = false,
 ): ObjectEmitsOptions | null {
   const cache = appContext.emitsCache
   const cached = cache.get(comp)
@@ -251,7 +262,7 @@ export function normalizeEmitsOptions(
 // both considered matched listeners.
 export function isEmitListener(
   options: ObjectEmitsOptions | null,
-  key: string
+  key: string,
 ): boolean {
   if (!options || !isOn(key)) {
     return false
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index de4d304448a..65b952b0b51 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -1,81 +1,81 @@
-import {
+import type {
+  Component,
   ComponentInternalInstance,
-  Data,
-  SetupContext,
   ComponentInternalOptions,
-  Component,
   ConcreteComponent,
-  InternalRenderFunction
+  Data,
+  InternalRenderFunction,
+  SetupContext,
 } from './component'
 import {
-  isFunction,
+  type LooseRequired,
+  NOOP,
+  type Prettify,
   extend,
-  isString,
-  isObject,
   isArray,
-  NOOP,
+  isFunction,
+  isObject,
   isPromise,
-  LooseRequired,
-  Prettify
+  isString,
 } from '@vue/shared'
-import { isRef, Ref } from '@vue/reactivity'
+import { type Ref, isRef } from '@vue/reactivity'
 import { computed } from './apiComputed'
 import {
+  type WatchCallback,
+  type WatchOptions,
+  createPathGetter,
   watch,
-  WatchOptions,
-  WatchCallback,
-  createPathGetter
 } from './apiWatch'
-import { provide, inject } from './apiInject'
+import { inject, provide } from './apiInject'
 import {
+  type DebuggerHook,
+  type ErrorCapturedHook,
+  onActivated,
   onBeforeMount,
-  onMounted,
+  onBeforeUnmount,
   onBeforeUpdate,
-  onUpdated,
+  onDeactivated,
   onErrorCaptured,
+  onMounted,
   onRenderTracked,
-  onBeforeUnmount,
-  onUnmounted,
-  onActivated,
-  onDeactivated,
   onRenderTriggered,
-  DebuggerHook,
-  ErrorCapturedHook,
-  onServerPrefetch
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
 } from './apiLifecycle'
 import {
+  type ComputedGetter,
+  type WritableComputedOptions,
   reactive,
-  ComputedGetter,
-  WritableComputedOptions
 } from '@vue/reactivity'
-import {
+import type {
   ComponentObjectPropsOptions,
-  ExtractPropTypes,
+  ComponentPropsOptions,
   ExtractDefaultPropTypes,
-  ComponentPropsOptions
+  ExtractPropTypes,
 } from './componentProps'
-import { EmitsOptions, EmitsToProps } from './componentEmits'
-import { Directive } from './directives'
+import type { EmitsOptions, EmitsToProps } from './componentEmits'
+import type { Directive } from './directives'
 import {
-  CreateComponentPublicInstance,
-  ComponentPublicInstance,
+  type ComponentPublicInstance,
+  type CreateComponentPublicInstance,
+  type IntersectionMixin,
+  type UnwrapMixinsType,
   isReservedPrefix,
-  IntersectionMixin,
-  UnwrapMixinsType
 } from './componentPublicInstance'
 import { warn } from './warning'
-import { VNodeChild } from './vnode'
+import type { VNodeChild } from './vnode'
 import { callWithAsyncErrorHandling } from './errorHandling'
 import { deepMergeData } from './compat/data'
 import { DeprecationTypes } from './compat/compatConfig'
 import {
-  CompatConfig,
+  type CompatConfig,
   isCompatEnabled,
-  softAssertCompatEnabled
+  softAssertCompatEnabled,
 } from './compat/compatConfig'
-import { OptionMergeFunction } from './apiCreateApp'
+import type { OptionMergeFunction } from './apiCreateApp'
 import { LifecycleHooks } from './enums'
-import { SlotsType } from './componentSlots'
+import type { SlotsType } from './componentSlots'
 import { normalizePropsOrEmits } from './apiSetupHelpers'
 
 /**
@@ -111,7 +111,7 @@ export interface ComponentOptionsBase<
   Defaults = {},
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 > extends LegacyOptions<Props, D, C, M, Mixin, Extends, I, II>,
     ComponentInternalOptions,
     ComponentCustomOptions {
@@ -126,7 +126,7 @@ export interface ComponentOptionsBase<
           >
         >
     >,
-    ctx: SetupContext<E, S>
+    ctx: SetupContext<E, S>,
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
   name?: string
   template?: string | object // can be a direct DOM node
@@ -164,7 +164,7 @@ export interface ComponentOptionsBase<
     $props: ComponentInternalInstance['props'],
     $setup: ComponentInternalInstance['setupState'],
     $data: ComponentInternalInstance['data'],
-    $options: ComponentInternalInstance['ctx']
+    $options: ComponentInternalInstance['ctx'],
   ) => void
 
   /**
@@ -224,7 +224,7 @@ export type ComponentOptionsWithoutProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  PE = Props & EmitsToProps<E>
+  PE = Props & EmitsToProps<E>,
 > = ComponentOptionsBase<
   PE,
   RawBindings,
@@ -272,7 +272,7 @@ export type ComponentOptionsWithArrayProps<
   I extends ComponentInjectOptions = {},
   II extends string = string,
   S extends SlotsType = {},
-  Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>
+  Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>,
 > = ComponentOptionsBase<
   Props,
   RawBindings,
@@ -321,7 +321,7 @@ export type ComponentOptionsWithObjectProps<
   II extends string = string,
   S extends SlotsType = {},
   Props = Prettify<Readonly<ExtractPropTypes<PropsOptions> & EmitsToProps<E>>>,
-  Defaults = ExtractDefaultPropTypes<PropsOptions>
+  Defaults = ExtractDefaultPropTypes<PropsOptions>,
 > = ComponentOptionsBase<
   Props,
   RawBindings,
@@ -365,7 +365,7 @@ export type ComponentOptions<
   Mixin extends ComponentOptionsMixin = any,
   Extends extends ComponentOptionsMixin = any,
   E extends EmitsOptions = any,
-  S extends SlotsType = any
+  S extends SlotsType = any,
 > = ComponentOptionsBase<
   Props,
   RawBindings,
@@ -419,8 +419,8 @@ export type ExtractComputedReturns<T extends any> = {
   [key in keyof T]: T[key] extends { get: (...args: any[]) => infer TReturn }
     ? TReturn
     : T[key] extends (...args: any[]) => infer TReturn
-    ? TReturn
-    : never
+      ? TReturn
+      : never
 }
 
 export type ObjectWatchOptionItem = {
@@ -450,10 +450,10 @@ export type InjectToObject<T extends ComponentInjectOptions> =
         [K in T[number]]?: unknown
       }
     : T extends ObjectInjectOptions
-    ? {
-        [K in keyof T]?: unknown
-      }
-    : never
+      ? {
+          [K in keyof T]?: unknown
+        }
+      : never
 
 interface LegacyOptions<
   Props,
@@ -463,7 +463,7 @@ interface LegacyOptions<
   Mixin extends ComponentOptionsMixin,
   Extends extends ComponentOptionsMixin,
   I extends ComponentInjectOptions,
-  II extends string
+  II extends string,
 > {
   compatConfig?: CompatConfig
 
@@ -492,7 +492,7 @@ interface LegacyOptions<
       MethodOptions,
       Mixin,
       Extends
-    >
+    >,
   ) => D
   computed?: C
   methods?: M
@@ -576,7 +576,7 @@ export type OptionTypesType<
   D = {},
   C extends ComputedOptions = {},
   M extends MethodOptions = {},
-  Defaults = {}
+  Defaults = {},
 > = {
   P: P
   B: B
@@ -586,12 +586,12 @@ export type OptionTypesType<
   Defaults: Defaults
 }
 
-const enum OptionTypes {
+enum OptionTypes {
   PROPS = 'Props',
   DATA = 'Data',
   COMPUTED = 'Computed',
   METHODS = 'Methods',
-  INJECT = 'Inject'
+  INJECT = 'Inject',
 }
 
 function createDuplicateChecker() {
@@ -652,7 +652,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
     // assets
     components,
     directives,
-    filters
+    filters,
   } = options
 
   const checkDuplicateProperties = __DEV__ ? createDuplicateChecker() : null
@@ -690,7 +690,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
             value: methodHandler.bind(publicThis),
             configurable: true,
             enumerable: true,
-            writable: true
+            writable: true,
           })
         } else {
           ctx[key] = methodHandler.bind(publicThis)
@@ -701,7 +701,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
       } else if (__DEV__) {
         warn(
           `Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
-            `Did you reference the function correctly?`
+            `Did you reference the function correctly?`,
         )
       }
     }
@@ -711,7 +711,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
     if (__DEV__ && !isFunction(dataOptions)) {
       warn(
         `The data option must be a function. ` +
-          `Plain object usage is no longer supported.`
+          `Plain object usage is no longer supported.`,
       )
     }
     const data = dataOptions.call(publicThis, publicThis)
@@ -719,7 +719,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
       warn(
         `data() returned a Promise - note data() cannot be async; If you ` +
           `intend to perform data fetching before component renders, use ` +
-          `async setup() + <Suspense>.`
+          `async setup() + <Suspense>.`,
       )
     }
     if (!isObject(data)) {
@@ -735,7 +735,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
               configurable: true,
               enumerable: true,
               get: () => data[key],
-              set: NOOP
+              set: NOOP,
             })
           }
         }
@@ -752,8 +752,8 @@ export function applyOptions(instance: ComponentInternalInstance) {
       const get = isFunction(opt)
         ? opt.bind(publicThis, publicThis)
         : isFunction(opt.get)
-        ? opt.get.bind(publicThis, publicThis)
-        : NOOP
+          ? opt.get.bind(publicThis, publicThis)
+          : NOOP
       if (__DEV__ && get === NOOP) {
         warn(`Computed property "${key}" has no getter.`)
       }
@@ -761,21 +761,21 @@ export function applyOptions(instance: ComponentInternalInstance) {
         !isFunction(opt) && isFunction(opt.set)
           ? opt.set.bind(publicThis)
           : __DEV__
-          ? () => {
-              warn(
-                `Write operation failed: computed property "${key}" is readonly.`
-              )
-            }
-          : NOOP
+            ? () => {
+                warn(
+                  `Write operation failed: computed property "${key}" is readonly.`,
+                )
+              }
+            : NOOP
       const c = computed({
         get,
-        set
+        set,
       })
       Object.defineProperty(ctx, key, {
         enumerable: true,
         configurable: true,
         get: () => c.value,
-        set: v => (c.value = v)
+        set: v => (c.value = v),
       })
       if (__DEV__) {
         checkDuplicateProperties!(OptionTypes.COMPUTED, key)
@@ -804,7 +804,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
 
   function registerLifecycleHook(
     register: Function,
-    hook?: Function | Function[]
+    hook?: Function | Function[],
   ) {
     if (isArray(hook)) {
       hook.forEach(_hook => register(_hook.bind(publicThis)))
@@ -847,7 +847,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
       expose.forEach(key => {
         Object.defineProperty(exposed, key, {
           get: () => publicThis[key],
-          set: val => (publicThis[key] = val)
+          set: val => (publicThis[key] = val),
         })
       })
     } else if (!instance.exposed) {
@@ -879,7 +879,7 @@ export function applyOptions(instance: ComponentInternalInstance) {
 export function resolveInjections(
   injectOptions: ComponentInjectOptions,
   ctx: any,
-  checkDuplicateProperties = NOOP as any
+  checkDuplicateProperties = NOOP as any,
 ) {
   if (isArray(injectOptions)) {
     injectOptions = normalizeInject(injectOptions)!
@@ -892,7 +892,7 @@ export function resolveInjections(
         injected = inject(
           opt.from || key,
           opt.default,
-          true /* treat default function as factory */
+          true /* treat default function as factory */,
         )
       } else {
         injected = inject(opt.from || key)
@@ -906,7 +906,7 @@ export function resolveInjections(
         enumerable: true,
         configurable: true,
         get: () => (injected as Ref).value,
-        set: v => ((injected as Ref).value = v)
+        set: v => ((injected as Ref).value = v),
       })
     } else {
       ctx[key] = injected
@@ -920,14 +920,14 @@ export function resolveInjections(
 function callHook(
   hook: Function,
   instance: ComponentInternalInstance,
-  type: LifecycleHooks
+  type: LifecycleHooks,
 ) {
   callWithAsyncErrorHandling(
     isArray(hook)
       ? hook.map(h => h.bind(instance.proxy!))
       : hook.bind(instance.proxy!),
     instance,
-    type
+    type,
   )
 }
 
@@ -935,7 +935,7 @@ export function createWatcher(
   raw: ComponentWatchOptionItem,
   ctx: Data,
   publicThis: ComponentPublicInstance,
-  key: string
+  key: string,
 ) {
   const getter = key.includes('.')
     ? createPathGetter(publicThis, key)
@@ -973,14 +973,14 @@ export function createWatcher(
  * instances.
  */
 export function resolveMergedOptions(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): MergedComponentOptions {
   const base = instance.type as ComponentOptions
   const { mixins, extends: extendsOptions } = base
   const {
     mixins: globalMixins,
     optionsCache: cache,
-    config: { optionMergeStrategies }
+    config: { optionMergeStrategies },
   } = instance.appContext
   const cached = cache.get(base)
 
@@ -1003,7 +1003,7 @@ export function resolveMergedOptions(
     resolved = {}
     if (globalMixins.length) {
       globalMixins.forEach(m =>
-        mergeOptions(resolved, m, optionMergeStrategies, true)
+        mergeOptions(resolved, m, optionMergeStrategies, true),
       )
     }
     mergeOptions(resolved, base, optionMergeStrategies)
@@ -1018,7 +1018,7 @@ export function mergeOptions(
   to: any,
   from: any,
   strats: Record<string, OptionMergeFunction>,
-  asMixin = false
+  asMixin = false,
 ) {
   if (__COMPAT__ && isFunction(from)) {
     from = from.options
@@ -1031,7 +1031,7 @@ export function mergeOptions(
   }
   if (mixins) {
     mixins.forEach((m: ComponentOptionsMixin) =>
-      mergeOptions(to, m, strats, true)
+      mergeOptions(to, m, strats, true),
     )
   }
 
@@ -1040,7 +1040,7 @@ export function mergeOptions(
       __DEV__ &&
         warn(
           `"expose" option is ignored when declared in mixins or extends. ` +
-            `It should only be declared in the base component itself.`
+            `It should only be declared in the base component itself.`,
         )
     } else {
       const strat = internalOptionMergeStrats[key] || (strats && strats[key])
@@ -1079,7 +1079,7 @@ export const internalOptionMergeStrats: Record<string, Function> = {
   watch: mergeWatchOptions,
   // provide / inject
   provide: mergeDataFn,
-  inject: mergeInject
+  inject: mergeInject,
 }
 
 if (__COMPAT__) {
@@ -1100,20 +1100,20 @@ function mergeDataFn(to: any, from: any) {
         : extend
     )(
       isFunction(to) ? to.call(this, this) : to,
-      isFunction(from) ? from.call(this, this) : from
+      isFunction(from) ? from.call(this, this) : from,
     )
   }
 }
 
 function mergeInject(
   to: ComponentInjectOptions | undefined,
-  from: ComponentInjectOptions
+  from: ComponentInjectOptions,
 ) {
   return mergeObjectOptions(normalizeInject(to), normalizeInject(from))
 }
 
 function normalizeInject(
-  raw: ComponentInjectOptions | undefined
+  raw: ComponentInjectOptions | undefined,
 ): ObjectInjectOptions | undefined {
   if (isArray(raw)) {
     const res: ObjectInjectOptions = {}
@@ -1135,15 +1135,15 @@ function mergeObjectOptions(to: Object | undefined, from: Object | undefined) {
 
 function mergeEmitsOrPropsOptions(
   to: EmitsOptions | undefined,
-  from: EmitsOptions | undefined
+  from: EmitsOptions | undefined,
 ): EmitsOptions | undefined
 function mergeEmitsOrPropsOptions(
   to: ComponentPropsOptions | undefined,
-  from: ComponentPropsOptions | undefined
+  from: ComponentPropsOptions | undefined,
 ): ComponentPropsOptions | undefined
 function mergeEmitsOrPropsOptions(
   to: ComponentPropsOptions | EmitsOptions | undefined,
-  from: ComponentPropsOptions | EmitsOptions | undefined
+  from: ComponentPropsOptions | EmitsOptions | undefined,
 ) {
   if (to) {
     if (isArray(to) && isArray(from)) {
@@ -1152,7 +1152,7 @@ function mergeEmitsOrPropsOptions(
     return extend(
       Object.create(null),
       normalizePropsOrEmits(to),
-      normalizePropsOrEmits(from ?? {})
+      normalizePropsOrEmits(from ?? {}),
     )
   } else {
     return from
@@ -1161,7 +1161,7 @@ function mergeEmitsOrPropsOptions(
 
 function mergeWatchOptions(
   to: ComponentWatchOptions | undefined,
-  from: ComponentWatchOptions | undefined
+  from: ComponentWatchOptions | undefined,
 ) {
   if (!to) return from
   if (!from) return to
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index 4d402789555..2d91affe082 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -1,41 +1,41 @@
 import {
-  toRaw,
+  TriggerOpTypes,
   shallowReactive,
+  shallowReadonly,
+  toRaw,
   trigger,
-  TriggerOpTypes
 } from '@vue/reactivity'
 import {
+  EMPTY_ARR,
   EMPTY_OBJ,
+  type IfAny,
+  PatchFlags,
   camelize,
-  hyphenate,
   capitalize,
-  isString,
-  isFunction,
-  isArray,
-  isObject,
-  hasOwn,
-  toRawType,
-  PatchFlags,
-  makeMap,
-  isReservedProp,
-  EMPTY_ARR,
   def,
   extend,
+  hasOwn,
+  hyphenate,
+  isArray,
+  isFunction,
+  isObject,
   isOn,
-  IfAny
+  isReservedProp,
+  isString,
+  makeMap,
+  toRawType,
 } from '@vue/shared'
 import { warn } from './warning'
 import {
-  Data,
-  ComponentInternalInstance,
-  ComponentOptions,
-  ConcreteComponent,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  type Data,
   setCurrentInstance,
-  unsetCurrentInstance
 } from './component'
 import { isEmitListener } from './componentEmits'
 import { InternalObjectKey } from './vnode'
-import { AppContext } from './apiCreateApp'
+import type { AppContext } from './apiCreateApp'
 import { createPropsDefaultThis } from './compat/props'
 import { isCompatEnabled, softAssertCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
@@ -57,7 +57,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
    */
@@ -76,7 +76,7 @@ type PropConstructor<T = any> =
   | PropMethod<T>
 
 type PropMethod<T, TConstructor = any> = [T] extends [
-  ((...args: any) => any) | undefined
+  ((...args: any) => any) | undefined,
 ] // if is function with args, allowing non-required functions
   ? { new (): TConstructor; (): T; readonly prototype: TConstructor } // Create Function like constructor
   : never
@@ -111,22 +111,22 @@ type DefaultKeys<T> = {
 type InferPropType<T> = [T] extends [null]
   ? any // null & true would fail to infer
   : [T] extends [{ type: null | true }]
-  ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
-  : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
-  ? Record<string, any>
-  : [T] extends [BooleanConstructor | { type: BooleanConstructor }]
-  ? boolean
-  : [T] extends [DateConstructor | { type: DateConstructor }]
-  ? Date
-  : [T] extends [(infer U)[] | { type: (infer U)[] }]
-  ? U extends DateConstructor
-    ? Date | InferPropType<U>
-    : InferPropType<U>
-  : [T] extends [Prop<infer V, infer D>]
-  ? unknown extends V
-    ? IfAny<V, V, D>
-    : V
-  : T
+    ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
+    : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
+      ? Record<string, any>
+      : [T] extends [BooleanConstructor | { type: BooleanConstructor }]
+        ? boolean
+        : [T] extends [DateConstructor | { type: DateConstructor }]
+          ? Date
+          : [T] extends [(infer U)[] | { type: (infer U)[] }]
+            ? U extends DateConstructor
+              ? Date | InferPropType<U>
+              : InferPropType<U>
+            : [T] extends [Prop<infer V, infer D>]
+              ? unknown extends V
+                ? IfAny<V, V, D>
+                : V
+              : T
 
 /**
  * Extract prop types from a runtime props options object.
@@ -164,9 +164,9 @@ export type ExtractPublicPropTypes<O> = {
   [K in keyof Pick<O, PublicOptionalKeys<O>>]?: InferPropType<O[K]>
 }
 
-const enum BooleanFlags {
+enum BooleanFlags {
   shouldCast,
-  shouldCastTrue
+  shouldCastTrue,
 }
 
 // extract props which defined with default from prop options
@@ -191,7 +191,7 @@ export function initProps(
   instance: ComponentInternalInstance,
   rawProps: Data | null,
   isStateful: number, // result of bitwise flag comparison
-  isSSR = false
+  isSSR = false,
 ) {
   const props: Data = {}
   const attrs: Data = {}
@@ -239,12 +239,12 @@ export function updateProps(
   instance: ComponentInternalInstance,
   rawProps: Data | null,
   rawPrevProps: Data | null,
-  optimized: boolean
+  optimized: boolean,
 ) {
   const {
     props,
     attrs,
-    vnode: { patchFlag }
+    vnode: { patchFlag },
   } = instance
   const rawCurrentProps = toRaw(props)
   const [options] = instance.propsOptions
@@ -286,7 +286,7 @@ export function updateProps(
               camelizedKey,
               value,
               instance,
-              false /* isAbsent */
+              false /* isAbsent */,
             )
           }
         } else {
@@ -335,7 +335,7 @@ export function updateProps(
               key,
               undefined,
               instance,
-              true /* isAbsent */
+              true /* isAbsent */,
             )
           }
         } else {
@@ -373,7 +373,7 @@ function setFullProps(
   instance: ComponentInternalInstance,
   rawProps: Data | null,
   props: Data,
-  attrs: Data
+  attrs: Data,
 ) {
   const [options, needCastKeys] = instance.propsOptions
   let hasAttrsChanged = false
@@ -390,7 +390,7 @@ function setFullProps(
           softAssertCompatEnabled(
             DeprecationTypes.INSTANCE_EVENT_HOOKS,
             instance,
-            key.slice(2).toLowerCase()
+            key.slice(2).toLowerCase(),
           )
         }
         if (key === 'inline-template') {
@@ -438,7 +438,7 @@ function setFullProps(
         key,
         castValues[key],
         instance,
-        !hasOwn(castValues, key)
+        !hasOwn(castValues, key),
       )
     }
   }
@@ -452,7 +452,7 @@ function resolvePropValue(
   key: string,
   value: unknown,
   instance: ComponentInternalInstance,
-  isAbsent: boolean
+  isAbsent: boolean,
 ) {
   const opt = options[key]
   if (opt != null) {
@@ -469,15 +469,15 @@ function resolvePropValue(
         if (key in propsDefaults) {
           value = propsDefaults[key]
         } else {
-          setCurrentInstance(instance)
+          const reset = setCurrentInstance(instance)
           value = propsDefaults[key] = defaultValue.call(
             __COMPAT__ &&
               isCompatEnabled(DeprecationTypes.PROPS_DEFAULT_THIS, instance)
               ? createPropsDefaultThis(instance, props, key)
               : null,
-            props
+            props,
           )
-          unsetCurrentInstance()
+          reset()
         }
       } else {
         value = defaultValue
@@ -501,7 +501,7 @@ function resolvePropValue(
 export function normalizePropsOptions(
   comp: ConcreteComponent,
   appContext: AppContext,
-  asMixin = false
+  asMixin = false,
 ): NormalizedPropsOptions {
   const cache = appContext.propsCache
   const cached = cache.get(comp)
@@ -586,7 +586,7 @@ export function normalizePropsOptions(
 }
 
 function validatePropName(key: string) {
-  if (key[0] !== '$') {
+  if (key[0] !== '$' && !isReservedProp(key)) {
     return true
   } else if (__DEV__) {
     warn(`Invalid prop name: "${key}" is a reserved property.`)
@@ -597,8 +597,23 @@ function validatePropName(key: string) {
 // use function string name to check type constructors
 // so that it works across vms / iframes.
 function getType(ctor: Prop<any>): string {
-  const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/)
-  return match ? match[2] : ctor === null ? 'null' : ''
+  // Early return for null to avoid unnecessary computations
+  if (ctor === null) {
+    return 'null'
+  }
+
+  // Avoid using regex for common cases by checking the type directly
+  if (typeof ctor === 'function') {
+    // Using name property to avoid converting function to string
+    return ctor.name || ''
+  } else if (typeof ctor === 'object') {
+    // Attempting to directly access constructor name if possible
+    const name = ctor.constructor && ctor.constructor.name
+    return name || ''
+  }
+
+  // Fallback for other types (though they're less likely to have meaningful names here)
+  return ''
 }
 
 function isSameType(a: Prop<any>, b: Prop<any>): boolean {
@@ -607,7 +622,7 @@ function isSameType(a: Prop<any>, b: Prop<any>): boolean {
 
 function getTypeIndex(
   type: Prop<any>,
-  expectedTypes: PropType<any> | void | null | true
+  expectedTypes: PropType<any> | void | null | true,
 ): number {
   if (isArray(expectedTypes)) {
     return expectedTypes.findIndex(t => isSameType(t, type))
@@ -623,7 +638,7 @@ function getTypeIndex(
 function validateProps(
   rawProps: Data,
   props: Data,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ) {
   const resolvedValues = toRaw(props)
   const options = instance.propsOptions[0]
@@ -634,7 +649,8 @@ function validateProps(
       key,
       resolvedValues[key],
       opt,
-      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
+      __DEV__ ? shallowReadonly(resolvedValues) : resolvedValues,
+      !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key)),
     )
   }
 }
@@ -646,7 +662,8 @@ function validateProp(
   name: string,
   value: unknown,
   prop: PropOptions,
-  isAbsent: boolean
+  props: Data,
+  isAbsent: boolean,
 ) {
   const { type, required, validator, skipCheck } = prop
   // required!
@@ -675,13 +692,13 @@ function validateProp(
     }
   }
   // custom validator
-  if (validator && !validator(value)) {
+  if (validator && !validator(value, props)) {
     warn('Invalid prop: custom validator check failed for prop "' + name + '".')
   }
 }
 
 const isSimpleType = /*#__PURE__*/ makeMap(
-  'String,Number,Boolean,Function,Symbol,BigInt'
+  'String,Number,Boolean,Function,Symbol,BigInt',
 )
 
 type AssertionResult = {
@@ -713,7 +730,7 @@ function assertType(value: unknown, type: PropConstructor): AssertionResult {
   }
   return {
     valid,
-    expectedType
+    expectedType,
   }
 }
 
@@ -723,8 +740,14 @@ function assertType(value: unknown, type: PropConstructor): AssertionResult {
 function getInvalidTypeMessage(
   name: string,
   value: unknown,
-  expectedTypes: string[]
+  expectedTypes: string[],
 ): string {
+  if (expectedTypes.length === 0) {
+    return (
+      `Prop type [] for prop "${name}" won't match anything.` +
+      ` Did you mean to use type Array instead?`
+    )
+  }
   let message =
     `Invalid prop: type check failed for prop "${name}".` +
     ` Expected ${expectedTypes.map(capitalize).join(' | ')}`
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index dc575aafff9..5b2b4f2303d 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -1,46 +1,51 @@
 import {
-  ComponentInternalInstance,
-  Data,
+  type ComponentInternalInstance,
+  type Data,
   getExposeProxy,
-  isStatefulComponent
+  isStatefulComponent,
 } from './component'
 import { nextTick, queueJob } from './scheduler'
-import { instanceWatch, WatchOptions, WatchStopHandle } from './apiWatch'
+import {
+  type WatchOptions,
+  type WatchStopHandle,
+  instanceWatch,
+} from './apiWatch'
 import {
   EMPTY_OBJ,
-  hasOwn,
-  isGloballyAllowed,
+  type IfAny,
   NOOP,
+  type Prettify,
+  type UnionToIntersection,
   extend,
-  isString,
+  hasOwn,
   isFunction,
-  UnionToIntersection,
-  Prettify
+  isGloballyAllowed,
+  isString,
 } from '@vue/shared'
 import {
-  toRaw,
+  type ShallowUnwrapRef,
+  TrackOpTypes,
+  type UnwrapNestedRefs,
   shallowReadonly,
+  toRaw,
   track,
-  TrackOpTypes,
-  ShallowUnwrapRef,
-  UnwrapNestedRefs
 } from '@vue/reactivity'
 import {
-  ExtractComputedReturns,
-  ComponentOptionsBase,
-  ComputedOptions,
-  MethodOptions,
-  ComponentOptionsMixin,
-  OptionTypesType,
-  OptionTypesKeys,
+  type ComponentInjectOptions,
+  type ComponentOptionsBase,
+  type ComponentOptionsMixin,
+  type ComputedOptions,
+  type ExtractComputedReturns,
+  type InjectToObject,
+  type MergedComponentOptionsOverride,
+  type MethodOptions,
+  type OptionTypesKeys,
+  type OptionTypesType,
   resolveMergedOptions,
   shouldCacheAccess,
-  MergedComponentOptionsOverride,
-  InjectToObject,
-  ComponentInjectOptions
 } from './componentOptions'
-import { EmitsOptions, EmitFn } from './componentEmits'
-import { SlotsType, UnwrapSlotsType } from './componentSlots'
+import type { EmitFn, EmitsOptions } from './componentEmits'
+import type { SlotsType, UnwrapSlotsType } from './componentSlots'
 import { markAttrsAccessed } from './componentRenderUtils'
 import { currentRenderingInstance } from './componentRenderContext'
 import { warn } from './warning'
@@ -79,38 +84,40 @@ type IsDefaultMixinComponent<T> = T extends ComponentOptionsMixin
     : false
   : false
 
-type MixinToOptionTypes<T> = T extends ComponentOptionsBase<
-  infer P,
-  infer B,
-  infer D,
-  infer C,
-  infer M,
-  infer Mixin,
-  infer Extends,
-  any,
-  any,
-  infer Defaults,
-  any,
-  any,
-  any
->
-  ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
-      IntersectionMixin<Mixin> &
-      IntersectionMixin<Extends>
-  : never
+type MixinToOptionTypes<T> =
+  T extends ComponentOptionsBase<
+    infer P,
+    infer B,
+    infer D,
+    infer C,
+    infer M,
+    infer Mixin,
+    infer Extends,
+    any,
+    any,
+    infer Defaults,
+    any,
+    any,
+    any
+  >
+    ? OptionTypesType<P & {}, B & {}, D & {}, C & {}, M & {}, Defaults & {}> &
+        IntersectionMixin<Mixin> &
+        IntersectionMixin<Extends>
+    : never
 
 // ExtractMixin(map type) is used to resolve circularly references
 type ExtractMixin<T> = {
   Mixin: MixinToOptionTypes<T>
 }[T extends ComponentOptionsMixin ? 'Mixin' : never]
 
-export type IntersectionMixin<T> = IsDefaultMixinComponent<T> extends true
-  ? OptionTypesType
-  : UnionToIntersection<ExtractMixin<T>>
+export type IntersectionMixin<T> =
+  IsDefaultMixinComponent<T> extends true
+    ? OptionTypesType
+    : UnionToIntersection<ExtractMixin<T>>
 
 export type UnwrapMixinsType<
   T,
-  Type extends OptionTypesKeys
+  Type extends OptionTypesKeys,
 > = T extends OptionTypesType ? T[Type] : never
 
 type EnsureNonVoid<T> = T extends void ? {} : T
@@ -127,7 +134,7 @@ export type ComponentPublicInstanceConstructor<
   RawBindings = any,
   D = any,
   C extends ComputedOptions = ComputedOptions,
-  M extends MethodOptions = MethodOptions
+  M extends MethodOptions = MethodOptions,
 > = {
   __isFragment?: never
   __isTeleport?: never
@@ -158,7 +165,7 @@ export type CreateComponentPublicInstance<
   PublicM extends MethodOptions = UnwrapMixinsType<PublicMixin, 'M'> &
     EnsureNonVoid<M>,
   PublicDefaults = UnwrapMixinsType<PublicMixin, 'Defaults'> &
-    EnsureNonVoid<Defaults>
+    EnsureNonVoid<Defaults>,
 > = ComponentPublicInstance<
   PublicP,
   PublicB,
@@ -187,7 +194,6 @@ export type CreateComponentPublicInstance<
   I,
   S
 >
-
 // public properties exposed on the proxy, which is used as the render context
 // in templates (as `this` in the render option)
 export type ComponentPublicInstance<
@@ -202,15 +208,13 @@ export type ComponentPublicInstance<
   MakeDefaultsOptional extends boolean = false,
   Options = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>,
   I extends ComponentInjectOptions = {},
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 > = {
   $: ComponentInternalInstance
   $data: D
-  $props: Prettify<
-    MakeDefaultsOptional extends true
-      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-      : P & PublicProps
-  >
+  $props: MakeDefaultsOptional extends true
+    ? Partial<Defaults> & Omit<Prettify<P> & PublicProps, keyof Defaults>
+    : Prettify<P> & PublicProps
   $attrs: Data
   $refs: Data
   $slots: UnwrapSlotsType<S>
@@ -226,9 +230,9 @@ export type ComponentPublicInstance<
     cb: T extends (...args: any) => infer R
       ? (...args: [R, R]) => any
       : (...args: any) => any,
-    options?: WatchOptions
+    options?: WatchOptions,
   ): WatchStopHandle
-} & P &
+} & IfAny<P, P, Omit<P, keyof ShallowUnwrapRef<B>>> &
   ShallowUnwrapRef<B> &
   UnwrapNestedRefs<D> &
   ExtractComputedReturns<C> &
@@ -247,7 +251,7 @@ export type PublicPropertiesMap = Record<
  * public $parent chains, skip functional ones and go to the parent instead.
  */
 const getPublicInstance = (
-  i: ComponentInternalInstance | null
+  i: ComponentInternalInstance | null,
 ): ComponentPublicInstance | ComponentInternalInstance['exposed'] | null => {
   if (!i) return null
   if (isStatefulComponent(i)) return getExposeProxy(i) || i.proxy
@@ -269,21 +273,26 @@ export const publicPropertiesMap: PublicPropertiesMap =
     $root: i => getPublicInstance(i.root),
     $emit: i => i.emit,
     $options: i => (__FEATURE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type),
-    $forceUpdate: i => i.f || (i.f = () => queueJob(i.update)),
+    $forceUpdate: i =>
+      i.f ||
+      (i.f = () => {
+        i.effect.dirty = true
+        queueJob(i.update)
+      }),
     $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy!)),
-    $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP)
+    $watch: i => (__FEATURE_OPTIONS_API__ ? instanceWatch.bind(i) : NOOP),
   } as PublicPropertiesMap)
 
 if (__COMPAT__) {
   installCompatInstanceProperties(publicPropertiesMap)
 }
 
-const enum AccessTypes {
+enum AccessTypes {
   OTHER,
   SETUP,
   DATA,
   PROPS,
-  CONTEXT
+  CONTEXT,
 }
 
 export interface ComponentRenderContext {
@@ -399,14 +408,14 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       if (data !== EMPTY_OBJ && isReservedPrefix(key[0]) && hasOwn(data, key)) {
         warn(
           `Property ${JSON.stringify(
-            key
+            key,
           )} must be accessed via $data because it starts with a reserved ` +
-            `character ("$" or "_") and is not proxied on the render context.`
+            `character ("$" or "_") and is not proxied on the render context.`,
         )
       } else if (instance === currentRenderingInstance) {
         warn(
           `Property ${JSON.stringify(key)} was accessed during render ` +
-            `but is not defined on instance.`
+            `but is not defined on instance.`,
         )
       }
     }
@@ -415,7 +424,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   set(
     { _: instance }: ComponentRenderContext,
     key: string,
-    value: any
+    value: any,
   ): boolean {
     const { data, setupState, ctx } = instance
     if (hasSetupBinding(setupState, key)) {
@@ -439,7 +448,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       __DEV__ &&
         warn(
           `Attempting to mutate public property "${key}". ` +
-            `Properties starting with $ are reserved and readonly.`
+            `Properties starting with $ are reserved and readonly.`,
         )
       return false
     } else {
@@ -447,7 +456,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
         Object.defineProperty(ctx, key, {
           enumerable: true,
           configurable: true,
-          value
+          value,
         })
       } else {
         ctx[key] = value
@@ -458,9 +467,9 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
 
   has(
     {
-      _: { data, setupState, accessCache, ctx, appContext, propsOptions }
+      _: { data, setupState, accessCache, ctx, appContext, propsOptions },
     }: ComponentRenderContext,
-    key: string
+    key: string,
   ) {
     let normalizedProps
     return (
@@ -477,7 +486,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   defineProperty(
     target: ComponentRenderContext,
     key: string,
-    descriptor: PropertyDescriptor
+    descriptor: PropertyDescriptor,
   ) {
     if (descriptor.get != null) {
       // invalidate key cache of a getter based property #5417
@@ -486,14 +495,14 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       this.set!(target, key, descriptor.value, null)
     }
     return Reflect.defineProperty(target, key, descriptor)
-  }
+  },
 }
 
 if (__DEV__ && !__TEST__) {
   PublicInstanceProxyHandlers.ownKeys = (target: ComponentRenderContext) => {
     warn(
       `Avoid app logic that relies on enumerating keys on a component instance. ` +
-        `The keys will be empty in production mode to avoid performance overhead.`
+        `The keys will be empty in production mode to avoid performance overhead.`,
     )
     return Reflect.ownKeys(target)
   }
@@ -515,13 +524,13 @@ export const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ extend(
       if (__DEV__ && !has && PublicInstanceProxyHandlers.has!(_, key)) {
         warn(
           `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
+            key,
+          )} should not start with _ which is a reserved prefix for Vue internals.`,
         )
       }
       return has
-    }
-  }
+    },
+  },
 )
 
 // dev only
@@ -535,7 +544,7 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
   Object.defineProperty(target, `_`, {
     configurable: true,
     enumerable: false,
-    get: () => instance
+    get: () => instance,
   })
 
   // expose public properties
@@ -546,7 +555,7 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
       get: () => publicPropertiesMap[key](instance),
       // intercepted by the proxy so no need for implementation,
       // but needed to prevent set errors
-      set: NOOP
+      set: NOOP,
     })
   })
 
@@ -555,11 +564,11 @@ export function createDevRenderContext(instance: ComponentInternalInstance) {
 
 // dev only
 export function exposePropsOnRenderContext(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ) {
   const {
     ctx,
-    propsOptions: [propsOptions]
+    propsOptions: [propsOptions],
   } = instance
   if (propsOptions) {
     Object.keys(propsOptions).forEach(key => {
@@ -567,7 +576,7 @@ export function exposePropsOnRenderContext(
         enumerable: true,
         configurable: true,
         get: () => instance.props[key],
-        set: NOOP
+        set: NOOP,
       })
     })
   }
@@ -575,7 +584,7 @@ export function exposePropsOnRenderContext(
 
 // dev only
 export function exposeSetupStateOnRenderContext(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ) {
   const { ctx, setupState } = instance
   Object.keys(toRaw(setupState)).forEach(key => {
@@ -583,9 +592,9 @@ export function exposeSetupStateOnRenderContext(
       if (isReservedPrefix(key[0])) {
         warn(
           `setup() return property ${JSON.stringify(
-            key
+            key,
           )} should not start with "$" or "_" ` +
-            `which are reserved prefixes for Vue internals.`
+            `which are reserved prefixes for Vue internals.`,
         )
         return
       }
@@ -593,7 +602,7 @@ export function exposeSetupStateOnRenderContext(
         enumerable: true,
         configurable: true,
         get: () => setupState[key],
-        set: NOOP
+        set: NOOP,
       })
     }
   })
diff --git a/packages/runtime-core/src/componentRenderContext.ts b/packages/runtime-core/src/componentRenderContext.ts
index 8097dc5fe2b..d950e899808 100644
--- a/packages/runtime-core/src/componentRenderContext.ts
+++ b/packages/runtime-core/src/componentRenderContext.ts
@@ -1,4 +1,4 @@
-import { ComponentInternalInstance } from './component'
+import type { ComponentInternalInstance } from './component'
 import { devtoolsComponentUpdated } from './devtools'
 import { setBlockTracking } from './vnode'
 
@@ -20,7 +20,7 @@ export let currentScopeId: string | null = null
  * ```
  */
 export function setCurrentRenderingInstance(
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ): ComponentInternalInstance | null {
   const prev = currentRenderingInstance
   currentRenderingInstance = instance
@@ -70,7 +70,7 @@ export type ContextualRenderFn = {
 export function withCtx(
   fn: Function,
   ctx: ComponentInternalInstance | null = currentRenderingInstance,
-  isNonScopedSlot?: boolean // __COMPAT__ only
+  isNonScopedSlot?: boolean, // __COMPAT__ only
 ) {
   if (!ctx) return fn
 
diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index d9de968a074..4b83c699031 100644
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -1,30 +1,30 @@
 import {
-  ComponentInternalInstance,
-  FunctionalComponent,
-  Data,
-  getComponentName
+  type ComponentInternalInstance,
+  type Data,
+  type FunctionalComponent,
+  getComponentName,
 } from './component'
 import {
-  VNode,
-  normalizeVNode,
-  createVNode,
   Comment,
+  type VNode,
+  type VNodeArrayChildren,
+  blockStack,
   cloneVNode,
-  VNodeArrayChildren,
+  createVNode,
   isVNode,
-  blockStack
+  normalizeVNode,
 } from './vnode'
-import { handleError, ErrorCodes } from './errorHandling'
-import { PatchFlags, ShapeFlags, isOn, isModelListener } from '@vue/shared'
+import { ErrorCodes, handleError } from './errorHandling'
+import { PatchFlags, ShapeFlags, isModelListener, isOn } from '@vue/shared'
 import { warn } from './warning'
 import { isHmrUpdating } from './hmr'
-import { NormalizedProps } from './componentProps'
+import type { NormalizedProps } from './componentProps'
 import { isEmitListener } from './componentEmits'
 import { setCurrentRenderingInstance } from './componentRenderContext'
 import {
   DeprecationTypes,
   isCompatEnabled,
-  warnDeprecation
+  warnDeprecation,
 } from './compat/compatConfig'
 
 /**
@@ -41,7 +41,7 @@ export function markAttrsAccessed() {
 type SetRootFn = ((root: VNode) => void) | undefined
 
 export function renderComponentRoot(
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): VNode {
   const {
     type: Component,
@@ -58,7 +58,7 @@ export function renderComponentRoot(
     data,
     setupState,
     ctx,
-    inheritAttrs
+    inheritAttrs,
   } = instance
 
   let result
@@ -73,16 +73,31 @@ export function renderComponentRoot(
       // withProxy is a proxy with a different `has` trap only for
       // runtime-compiled render functions using `with` block.
       const proxyToUse = withProxy || proxy
+      // 'this' isn't available in production builds with `<script setup>`,
+      // so warn if it's used in dev.
+      const thisProxy =
+        __DEV__ && setupState.__isScriptSetup
+          ? new Proxy(proxyToUse!, {
+              get(target, key, receiver) {
+                warn(
+                  `Property '${String(
+                    key,
+                  )}' was accessed via 'this'. Avoid using 'this' in templates.`,
+                )
+                return Reflect.get(target, key, receiver)
+              },
+            })
+          : proxyToUse
       result = normalizeVNode(
         render!.call(
-          proxyToUse,
+          thisProxy,
           proxyToUse!,
           renderCache,
           props,
           setupState,
           data,
-          ctx
-        )
+          ctx,
+        ),
       )
       fallthroughAttrs = attrs
     } else {
@@ -103,11 +118,11 @@ export function renderComponentRoot(
                       return attrs
                     },
                     slots,
-                    emit
+                    emit,
                   }
-                : { attrs, slots, emit }
+                : { attrs, slots, emit },
             )
-          : render(props, null as any /* we know it doesn't need it */)
+          : render(props, null as any /* we know it doesn't need it */),
       )
       fallthroughAttrs = Component.props
         ? attrs
@@ -144,7 +159,7 @@ export function renderComponentRoot(
           // related: #1543, #1643, #1989
           fallthroughAttrs = filterModelListeners(
             fallthroughAttrs,
-            propsOptions
+            propsOptions,
           )
         }
         root = cloneVNode(root, fallthroughAttrs)
@@ -170,7 +185,7 @@ export function renderComponentRoot(
             `Extraneous non-props attributes (` +
               `${extraAttrs.join(', ')}) ` +
               `were passed to component but could not be automatically inherited ` +
-              `because component renders fragment or text root nodes.`
+              `because component renders fragment or text root nodes.`,
           )
         }
         if (eventAttrs.length) {
@@ -180,7 +195,7 @@ export function renderComponentRoot(
               `were passed to component but could not be automatically inherited ` +
               `because component renders fragment or text root nodes. ` +
               `If the listener is intended to be a component custom event listener only, ` +
-              `declare it using the "emits" option.`
+              `declare it using the "emits" option.`,
           )
         }
       }
@@ -199,12 +214,12 @@ export function renderComponentRoot(
         warnDeprecation(
           DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE,
           instance,
-          getComponentName(instance.type)
+          getComponentName(instance.type),
         )
       }
       root = cloneVNode(root, {
         class: cls,
-        style: style
+        style: style,
       })
     }
   }
@@ -214,7 +229,7 @@ export function renderComponentRoot(
     if (__DEV__ && !isElementRoot(root)) {
       warn(
         `Runtime directive used on component with non-element root node. ` +
-          `The directives will not function as intended.`
+          `The directives will not function as intended.`,
       )
     }
     // clone before mutating since the root may be a hoisted vnode
@@ -226,7 +241,7 @@ export function renderComponentRoot(
     if (__DEV__ && !isElementRoot(root)) {
       warn(
         `Component inside <Transition> renders non-element root node ` +
-          `that cannot be animated.`
+          `that cannot be animated.`,
       )
     }
     root.transition = vnode.transition
@@ -251,10 +266,17 @@ export function renderComponentRoot(
 const getChildRoot = (vnode: VNode): [VNode, SetRootFn] => {
   const rawChildren = vnode.children as VNodeArrayChildren
   const dynamicChildren = vnode.dynamicChildren
-  const childRoot = filterSingleRoot(rawChildren)
+  const childRoot = filterSingleRoot(rawChildren, false)
   if (!childRoot) {
     return [vnode, undefined]
+  } else if (
+    __DEV__ &&
+    childRoot.patchFlag > 0 &&
+    childRoot.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+  ) {
+    return getChildRoot(childRoot)
   }
+
   const index = rawChildren.indexOf(childRoot)
   const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1
   const setRoot: SetRootFn = (updatedRoot: VNode) => {
@@ -271,7 +293,8 @@ const getChildRoot = (vnode: VNode): [VNode, SetRootFn] => {
 }
 
 export function filterSingleRoot(
-  children: VNodeArrayChildren
+  children: VNodeArrayChildren,
+  recurse = true,
 ): VNode | undefined {
   let singleRoot
   for (let i = 0; i < children.length; i++) {
@@ -284,6 +307,14 @@ export function filterSingleRoot(
           return
         } else {
           singleRoot = child
+          if (
+            __DEV__ &&
+            recurse &&
+            singleRoot.patchFlag > 0 &&
+            singleRoot.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT
+          ) {
+            return filterSingleRoot(singleRoot.children as VNodeArrayChildren)
+          }
         }
       }
     } else {
@@ -323,7 +354,7 @@ const isElementRoot = (vnode: VNode) => {
 export function shouldUpdateComponent(
   prevVNode: VNode,
   nextVNode: VNode,
-  optimized?: boolean
+  optimized?: boolean,
 ): boolean {
   const { props: prevProps, children: prevChildren, component } = prevVNode
   const { props: nextProps, children: nextChildren, patchFlag } = nextVNode
@@ -391,7 +422,7 @@ export function shouldUpdateComponent(
 function hasPropsChanged(
   prevProps: Data,
   nextProps: Data,
-  emitsOptions: ComponentInternalInstance['emitsOptions']
+  emitsOptions: ComponentInternalInstance['emitsOptions'],
 ): boolean {
   const nextKeys = Object.keys(nextProps)
   if (nextKeys.length !== Object.keys(prevProps).length) {
@@ -411,10 +442,18 @@ function hasPropsChanged(
 
 export function updateHOCHostEl(
   { vnode, parent }: ComponentInternalInstance,
-  el: typeof vnode.el // HostNode
+  el: typeof vnode.el, // HostNode
 ) {
-  while (parent && parent.subTree === vnode) {
-    ;(vnode = parent.vnode).el = el
-    parent = parent.parent
+  while (parent) {
+    const root = parent.subTree
+    if (root.suspense && root.suspense.activeBranch === vnode) {
+      root.el = vnode.el
+    }
+    if (root === vnode) {
+      ;(vnode = parent.vnode).el = el
+      parent = parent.parent
+    } else {
+      break
+    }
   }
 }
diff --git a/packages/runtime-core/src/componentSlots.ts b/packages/runtime-core/src/componentSlots.ts
index afc5f03933b..61e1ecc072c 100644
--- a/packages/runtime-core/src/componentSlots.ts
+++ b/packages/runtime-core/src/componentSlots.ts
@@ -1,25 +1,25 @@
-import { ComponentInternalInstance, currentInstance } from './component'
+import { type ComponentInternalInstance, currentInstance } from './component'
 import {
-  VNode,
-  VNodeNormalizedChildren,
+  InternalObjectKey,
+  type VNode,
+  type VNodeChild,
+  type VNodeNormalizedChildren,
   normalizeVNode,
-  VNodeChild,
-  InternalObjectKey
 } from './vnode'
 import {
-  isArray,
-  isFunction,
   EMPTY_OBJ,
+  type IfAny,
+  type Prettify,
   ShapeFlags,
-  extend,
-  def,
   SlotFlags,
-  Prettify,
-  IfAny
+  def,
+  extend,
+  isArray,
+  isFunction,
 } from '@vue/shared'
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
-import { ContextualRenderFn, withCtx } from './componentRenderContext'
+import { type ContextualRenderFn, withCtx } from './componentRenderContext'
 import { isHmrUpdating } from './hmr'
 import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig'
 import { toRaw } from '@vue/reactivity'
@@ -43,12 +43,12 @@ export type SlotsType<T extends Record<string, any> = Record<string, any>> = {
 
 export type StrictUnwrapSlotsType<
   S extends SlotsType,
-  T = NonNullable<S[typeof SlotSymbol]>
-> = [keyof S] extends [never] ? Slots : Readonly<T>
+  T = NonNullable<S[typeof SlotSymbol]>,
+> = [keyof S] extends [never] ? Slots : Readonly<T> & T
 
 export type UnwrapSlotsType<
   S extends SlotsType,
-  T = NonNullable<S[typeof SlotSymbol]>
+  T = NonNullable<S[typeof SlotSymbol]>,
 > = [keyof S] extends [never]
   ? Slots
   : Readonly<
@@ -90,18 +90,22 @@ const normalizeSlotValue = (value: unknown): VNode[] =>
 const normalizeSlot = (
   key: string,
   rawSlot: Function,
-  ctx: ComponentInternalInstance | null | undefined
+  ctx: ComponentInternalInstance | null | undefined,
 ): Slot => {
   if ((rawSlot as any)._n) {
     // already normalized - #5353
     return rawSlot as Slot
   }
   const normalized = withCtx((...args: any[]) => {
-    if (__DEV__ && currentInstance) {
+    if (
+      __DEV__ &&
+      currentInstance &&
+      (!ctx || ctx.root === currentInstance.root)
+    ) {
       warn(
         `Slot "${key}" invoked outside of the render function: ` +
           `this will not track dependencies used in the slot. ` +
-          `Invoke the slot function inside the render function instead.`
+          `Invoke the slot function inside the render function instead.`,
       )
     }
     return normalizeSlotValue(rawSlot(...args))
@@ -114,7 +118,7 @@ const normalizeSlot = (
 const normalizeObjectSlots = (
   rawSlots: RawSlots,
   slots: InternalSlots,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ) => {
   const ctx = rawSlots._ctx
   for (const key in rawSlots) {
@@ -132,7 +136,7 @@ const normalizeObjectSlots = (
       ) {
         warn(
           `Non-function value encountered for slot "${key}". ` +
-            `Prefer function slots for better performance.`
+            `Prefer function slots for better performance.`,
         )
       }
       const normalized = normalizeSlotValue(value)
@@ -143,7 +147,7 @@ const normalizeObjectSlots = (
 
 const normalizeVNodeSlots = (
   instance: ComponentInternalInstance,
-  children: VNodeNormalizedChildren
+  children: VNodeNormalizedChildren,
 ) => {
   if (
     __DEV__ &&
@@ -152,7 +156,7 @@ const normalizeVNodeSlots = (
   ) {
     warn(
       `Non-function value encountered for default slot. ` +
-        `Prefer function slots for better performance.`
+        `Prefer function slots for better performance.`,
     )
   }
   const normalized = normalizeSlotValue(children)
@@ -161,7 +165,7 @@ const normalizeVNodeSlots = (
 
 export const initSlots = (
   instance: ComponentInternalInstance,
-  children: VNodeNormalizedChildren
+  children: VNodeNormalizedChildren,
 ) => {
   if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
     const type = (children as RawSlots)._
@@ -175,7 +179,7 @@ export const initSlots = (
       normalizeObjectSlots(
         children as RawSlots,
         (instance.slots = {}),
-        instance
+        instance,
       )
     }
   } else {
@@ -190,7 +194,7 @@ export const initSlots = (
 export const updateSlots = (
   instance: ComponentInternalInstance,
   children: VNodeNormalizedChildren,
-  optimized: boolean
+  optimized: boolean,
 ) => {
   const { vnode, slots } = instance
   let needDeletionCheck = true
@@ -234,7 +238,7 @@ export const updateSlots = (
   // delete stale slots
   if (needDeletionCheck) {
     for (const key in slots) {
-      if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {
+      if (!isInternalKey(key) && deletionComparisonTarget[key] == null) {
         delete slots[key]
       }
     }
diff --git a/packages/runtime-core/src/components/BaseTransition.ts b/packages/runtime-core/src/components/BaseTransition.ts
index 9cb80b94ef0..20da25848b6 100644
--- a/packages/runtime-core/src/components/BaseTransition.ts
+++ b/packages/runtime-core/src/components/BaseTransition.ts
@@ -1,24 +1,24 @@
 import {
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type SetupContext,
   getCurrentInstance,
-  SetupContext,
-  ComponentInternalInstance,
-  ComponentOptions
 } from '../component'
 import {
-  cloneVNode,
   Comment,
+  Fragment,
+  type VNode,
+  type VNodeArrayChildren,
+  cloneVNode,
   isSameVNodeType,
-  VNode,
-  VNodeArrayChildren,
-  Fragment
 } from '../vnode'
 import { warn } from '../warning'
 import { isKeepAlive } from './KeepAlive'
 import { toRaw } from '@vue/reactivity'
-import { callWithAsyncErrorHandling, ErrorCodes } from '../errorHandling'
-import { ShapeFlags, PatchFlags, isArray } from '@vue/shared'
+import { ErrorCodes, callWithAsyncErrorHandling } from '../errorHandling'
+import { PatchFlags, ShapeFlags, isArray } from '@vue/shared'
 import { onBeforeUnmount, onMounted } from '../apiLifecycle'
-import { RendererElement } from '../renderer'
+import type { RendererElement } from '../renderer'
 
 type Hook<T = () => void> = T | T[]
 
@@ -67,14 +67,14 @@ export interface TransitionHooks<HostElement = RendererElement> {
   delayLeave?(
     el: HostElement,
     earlyRemove: () => void,
-    delayedLeave: () => void
+    delayedLeave: () => void,
   ): void
   delayedLeave?(): void
 }
 
 export type TransitionHookCaller = <T extends any[] = [el: any]>(
   hook: Hook<(...args: T) => void> | undefined,
-  args?: T
+  args?: T,
 ) => void
 
 export type PendingCallback = (cancelled?: boolean) => void
@@ -101,7 +101,7 @@ export function useTransitionState(): TransitionState {
     isMounted: false,
     isLeaving: false,
     isUnmounting: false,
-    leavingVNodes: new Map()
+    leavingVNodes: new Map(),
   }
   onMounted(() => {
     state.isMounted = true
@@ -132,7 +132,7 @@ export const BaseTransitionPropsValidators = {
   onBeforeAppear: TransitionHookValidator,
   onAppear: TransitionHookValidator,
   onAfterAppear: TransitionHookValidator,
-  onAppearCancelled: TransitionHookValidator
+  onAppearCancelled: TransitionHookValidator,
 }
 
 const BaseTransitionImpl: ComponentOptions = {
@@ -163,7 +163,7 @@ const BaseTransitionImpl: ComponentOptions = {
               // warn more than one non-comment child
               warn(
                 '<transition> can only be used on a single element or component. ' +
-                  'Use <transition-group> for lists.'
+                  'Use <transition-group> for lists.',
               )
               break
             }
@@ -204,7 +204,7 @@ const BaseTransitionImpl: ComponentOptions = {
         innerChild,
         rawProps,
         state,
-        instance
+        instance,
       )
       setTransitionHooks(innerChild, enterHooks)
 
@@ -233,7 +233,7 @@ const BaseTransitionImpl: ComponentOptions = {
           oldInnerChild,
           rawProps,
           state,
-          instance
+          instance,
         )
         // update old tree's hooks in case of dynamic transition
         setTransitionHooks(oldInnerChild, leavingHooks)
@@ -246,6 +246,7 @@ const BaseTransitionImpl: ComponentOptions = {
             // #6835
             // it also needs to be updated when active is undefined
             if (instance.update.active !== false) {
+              instance.effect.dirty = true
               instance.update()
             }
           }
@@ -254,11 +255,11 @@ const BaseTransitionImpl: ComponentOptions = {
           leavingHooks.delayLeave = (
             el: TransitionElement,
             earlyRemove,
-            delayedLeave
+            delayedLeave,
           ) => {
             const leavingVNodesCache = getLeavingNodesForType(
               state,
-              oldInnerChild
+              oldInnerChild,
             )
             leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild
             // early removal callback
@@ -274,7 +275,7 @@ const BaseTransitionImpl: ComponentOptions = {
 
       return child
     }
-  }
+  },
 }
 
 if (__COMPAT__) {
@@ -294,7 +295,7 @@ export const BaseTransition = BaseTransitionImpl as unknown as {
 
 function getLeavingNodesForType(
   state: TransitionState,
-  vnode: VNode
+  vnode: VNode,
 ): Record<string, VNode> {
   const { leavingVNodes } = state
   let leavingVNodesCache = leavingVNodes.get(vnode.type)!
@@ -311,7 +312,7 @@ export function resolveTransitionHooks(
   vnode: VNode,
   props: BaseTransitionProps<any>,
   state: TransitionState,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): TransitionHooks {
   const {
     appear,
@@ -328,7 +329,7 @@ export function resolveTransitionHooks(
     onBeforeAppear,
     onAppear,
     onAfterAppear,
-    onAppearCancelled
+    onAppearCancelled,
   } = props
   const key = String(vnode.key)
   const leavingVNodesCache = getLeavingNodesForType(state, vnode)
@@ -339,13 +340,13 @@ export function resolveTransitionHooks(
         hook,
         instance,
         ErrorCodes.TRANSITION_HOOK,
-        args
+        args,
       )
   }
 
   const callAsyncHook = (
     hook: Hook<(el: any, done: () => void) => void>,
-    args: [TransitionElement, () => void]
+    args: [TransitionElement, () => void],
   ) => {
     const done = args[1]
     callHook(hook, args)
@@ -453,7 +454,7 @@ export function resolveTransitionHooks(
 
     clone(vnode) {
       return resolveTransitionHooks(vnode, props, state, instance)
-    }
+    },
   }
 
   return hooks
@@ -473,9 +474,13 @@ function emptyPlaceholder(vnode: VNode): VNode | undefined {
 
 function getKeepAliveChild(vnode: VNode): VNode | undefined {
   return isKeepAlive(vnode)
-    ? vnode.children
-      ? ((vnode.children as VNodeArrayChildren)[0] as VNode)
-      : undefined
+    ? // #7121 ensure get the child component subtree in case
+      // it's been replaced during HMR
+      __DEV__ && vnode.component
+      ? vnode.component.subTree
+      : vnode.children
+        ? ((vnode.children as VNodeArrayChildren)[0] as VNode)
+        : undefined
     : vnode
 }
 
@@ -493,7 +498,7 @@ export function setTransitionHooks(vnode: VNode, hooks: TransitionHooks) {
 export function getTransitionRawChildren(
   children: VNode[],
   keepComment: boolean = false,
-  parentKey?: VNode['key']
+  parentKey?: VNode['key'],
 ): VNode[] {
   let ret: VNode[] = []
   let keyedFragmentCount = 0
@@ -508,7 +513,7 @@ export function getTransitionRawChildren(
     if (child.type === Fragment) {
       if (child.patchFlag & PatchFlags.KEYED_FRAGMENT) keyedFragmentCount++
       ret = ret.concat(
-        getTransitionRawChildren(child.children as VNode[], keepComment, key)
+        getTransitionRawChildren(child.children as VNode[], keepComment, key),
       )
     }
     // comment placeholders should be skipped, e.g. v-if
diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index 8c1b6318887..db6088cf5c6 100644
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/packages/runtime-core/src/components/KeepAlive.ts
@@ -1,46 +1,47 @@
 import {
-  ConcreteComponent,
-  getCurrentInstance,
-  SetupContext,
-  ComponentInternalInstance,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  type SetupContext,
   currentInstance,
   getComponentName,
-  ComponentOptions
+  getCurrentInstance,
 } from '../component'
 import {
-  VNode,
+  type VNode,
+  type VNodeProps,
   cloneVNode,
-  isVNode,
-  VNodeProps,
   invokeVNodeHook,
-  isSameVNodeType
+  isSameVNodeType,
+  isVNode,
 } from '../vnode'
 import { warn } from '../warning'
 import {
-  onBeforeUnmount,
   injectHook,
-  onUnmounted,
+  onBeforeUnmount,
   onMounted,
-  onUpdated
+  onUnmounted,
+  onUpdated,
 } from '../apiLifecycle'
 import {
-  isString,
+  ShapeFlags,
+  invokeArrayFns,
   isArray,
   isRegExp,
-  ShapeFlags,
+  isString,
   remove,
-  invokeArrayFns
 } from '@vue/shared'
 import { watch } from '../apiWatch'
 import {
-  RendererInternals,
-  queuePostRenderEffect,
+  type ElementNamespace,
   MoveType,
-  RendererElement,
-  RendererNode
+  type RendererElement,
+  type RendererInternals,
+  type RendererNode,
+  queuePostRenderEffect,
 } from '../renderer'
 import { setTransitionHooks } from './BaseTransition'
-import { ComponentRenderContext } from '../componentPublicInstance'
+import type { ComponentRenderContext } from '../componentPublicInstance'
 import { devtoolsComponentAdded } from '../devtools'
 import { isAsyncWrapper } from '../apiAsyncComponent'
 import { isSuspense } from './Suspense'
@@ -64,8 +65,8 @@ export interface KeepAliveContext extends ComponentRenderContext {
     vnode: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    isSVG: boolean,
-    optimized: boolean
+    namespace: ElementNamespace,
+    optimized: boolean,
   ) => void
   deactivate: (vnode: VNode) => void
 }
@@ -84,7 +85,7 @@ const KeepAliveImpl: ComponentOptions = {
   props: {
     include: [String, RegExp, Array],
     exclude: [String, RegExp, Array],
-    max: [String, Number]
+    max: [String, Number],
   },
 
   setup(props: KeepAliveProps, { slots }: SetupContext) {
@@ -120,12 +121,18 @@ const KeepAliveImpl: ComponentOptions = {
         p: patch,
         m: move,
         um: _unmount,
-        o: { createElement }
-      }
+        o: { createElement },
+      },
     } = 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,9 +143,9 @@ const KeepAliveImpl: ComponentOptions = {
         anchor,
         instance,
         parentSuspense,
-        isSVG,
+        namespace,
         vnode.slotScopeIds,
-        optimized
+        optimized,
       )
       queuePostRenderEffect(() => {
         instance.isDeactivated = false
@@ -213,7 +220,7 @@ const KeepAliveImpl: ComponentOptions = {
         exclude && pruneCache(name => !matches(exclude, name))
       },
       // prune post-render after `current` has been updated
-      { flush: 'post', deep: true }
+      { flush: 'post', deep: true },
     )
 
     // cache sub tree after render
@@ -275,7 +282,7 @@ const KeepAliveImpl: ComponentOptions = {
       const name = getComponentName(
         isAsyncWrapper(vnode)
           ? (vnode.type as ComponentOptions).__asyncResolved || {}
-          : comp
+          : comp,
       )
 
       const { include, exclude, max } = props
@@ -331,7 +338,7 @@ const KeepAliveImpl: ComponentOptions = {
       current = vnode
       return isSuspense(rawVNode.type) ? rawVNode : vnode
     }
-  }
+  },
 }
 
 if (__COMPAT__) {
@@ -364,14 +371,14 @@ function matches(pattern: MatchPattern, name: string): boolean {
 
 export function onActivated(
   hook: Function,
-  target?: ComponentInternalInstance | null
+  target?: ComponentInternalInstance | null,
 ) {
   registerKeepAliveHook(hook, LifecycleHooks.ACTIVATED, target)
 }
 
 export function onDeactivated(
   hook: Function,
-  target?: ComponentInternalInstance | null
+  target?: ComponentInternalInstance | null,
 ) {
   registerKeepAliveHook(hook, LifecycleHooks.DEACTIVATED, target)
 }
@@ -379,7 +386,7 @@ export function onDeactivated(
 function registerKeepAliveHook(
   hook: Function & { __wdc?: Function },
   type: LifecycleHooks,
-  target: ComponentInternalInstance | null = currentInstance
+  target: ComponentInternalInstance | null = currentInstance,
 ) {
   // cache the deactivate branch check wrapper for injected hooks so the same
   // hook can be properly deduped by the scheduler. "__wdc" stands for "with
@@ -418,7 +425,7 @@ function injectToKeepAliveRoot(
   hook: Function & { __weh?: Function },
   type: LifecycleHooks,
   target: ComponentInternalInstance,
-  keepAliveRoot: ComponentInternalInstance
+  keepAliveRoot: ComponentInternalInstance,
 ) {
   // injectHook wraps the original for error handling, so make sure to remove
   // the wrapped version.
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 0fa07d9beec..9b3d6765d9c 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -1,34 +1,36 @@
 import {
-  VNode,
-  normalizeVNode,
-  VNodeProps,
-  isSameVNodeType,
-  openBlock,
-  closeBlock,
-  currentBlock,
   Comment,
+  type VNode,
+  type VNodeProps,
+  closeBlock,
   createVNode,
-  isBlockTreeEnabled
+  currentBlock,
+  isBlockTreeEnabled,
+  isSameVNodeType,
+  normalizeVNode,
+  openBlock,
 } from '../vnode'
-import { isFunction, isArray, ShapeFlags, toNumber } from '@vue/shared'
-import { ComponentInternalInstance, handleSetupResult } from '../component'
-import { Slots } from '../componentSlots'
+import { ShapeFlags, isArray, isFunction, toNumber } from '@vue/shared'
+import { type ComponentInternalInstance, handleSetupResult } from '../component'
+import type { Slots } from '../componentSlots'
 import {
-  RendererInternals,
+  type ElementNamespace,
   MoveType,
-  SetupRenderEffectFn,
-  RendererNode,
-  RendererElement
+  type RendererElement,
+  type RendererInternals,
+  type RendererNode,
+  type SetupRenderEffectFn,
 } from '../renderer'
 import { queuePostFlushCb } from '../scheduler'
 import { filterSingleRoot, updateHOCHostEl } from '../componentRenderUtils'
 import {
-  pushWarningContext,
+  assertNumber,
   popWarningContext,
+  pushWarningContext,
   warn,
-  assertNumber
 } from '../warning'
-import { handleError, ErrorCodes } from '../errorHandling'
+import { ErrorCodes, handleError } from '../errorHandling'
+import { NULL_DYNAMIC_COMPONENT } from '../helpers/resolveAssets'
 
 export interface SuspenseProps {
   onResolve?: () => void
@@ -45,6 +47,14 @@ export interface SuspenseProps {
 
 export const isSuspense = (type: any): boolean => type.__isSuspense
 
+// incrementing unique id for every pending branch
+let suspenseId = 0
+
+/**
+ * For testing only
+ */
+export const resetSuspenseId = () => (suspenseId = 0)
+
 // Suspense exposes a component-like API, and is treated like a component
 // in the compiler, but internally it's a special built-in type that hooks
 // directly into the renderer.
@@ -62,11 +72,11 @@ 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
-    rendererInternals: RendererInternals
+    rendererInternals: RendererInternals,
   ) {
     if (n1 == null) {
       mountSuspense(
@@ -75,28 +85,40 @@ export const SuspenseImpl = {
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
-        rendererInternals
+        rendererInternals,
       )
     } else {
+      // #8678 if the current suspense needs to be patched and parentSuspense has
+      // not been resolved. this means that both the current suspense and parentSuspense
+      // need to be patched. because parentSuspense's pendingBranch includes the
+      // current suspense, it will be processed twice:
+      //  1. current patch
+      //  2. mounting along with the pendingBranch of parentSuspense
+      // it is necessary to skip the current patch to avoid multiple mounts
+      // of inner components.
+      if (parentSuspense && parentSuspense.deps > 0) {
+        n2.suspense = n1.suspense
+        return
+      }
       patchSuspense(
         n1,
         n2,
         container,
         anchor,
         parentComponent,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
-        rendererInternals
+        rendererInternals,
       )
     }
   },
   hydrate: hydrateSuspense,
   create: createSuspenseBoundary,
-  normalize: normalizeSuspenseChildren
+  normalize: normalizeSuspenseChildren,
 }
 
 // Force-casted public typing for h and TSX props inference
@@ -115,7 +137,7 @@ export const Suspense = (__FEATURE_SUSPENSE__
 
 function triggerEvent(
   vnode: VNode,
-  name: 'onResolve' | 'onPending' | 'onFallback'
+  name: 'onResolve' | 'onPending' | 'onFallback',
 ) {
   const eventListener = vnode.props && vnode.props[name]
   if (isFunction(eventListener)) {
@@ -129,14 +151,14 @@ function mountSuspense(
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
-  rendererInternals: RendererInternals
+  rendererInternals: RendererInternals,
 ) {
   const {
     p: patch,
-    o: { createElement }
+    o: { createElement },
   } = rendererInternals
   const hiddenContainer = createElement('div')
   const suspense = (vnode.suspense = createSuspenseBoundary(
@@ -146,10 +168,10 @@ function mountSuspense(
     container,
     hiddenContainer,
     anchor,
-    isSVG,
+    namespace,
     slotScopeIds,
     optimized,
-    rendererInternals
+    rendererInternals,
   ))
 
   // start mounting the content subtree in an off-dom container
@@ -160,8 +182,8 @@ function mountSuspense(
     null,
     parentComponent,
     suspense,
-    isSVG,
-    slotScopeIds
+    namespace,
+    slotScopeIds,
   )
   // now check if we have encountered any async deps
   if (suspense.deps > 0) {
@@ -178,8 +200,8 @@ function mountSuspense(
       anchor,
       parentComponent,
       null, // fallback tree will not have suspense context
-      isSVG,
-      slotScopeIds
+      namespace,
+      slotScopeIds,
     )
     setActiveBranch(suspense, vnode.ssFallback!)
   } else {
@@ -194,10 +216,10 @@ 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
+  { p: patch, um: unmount, o: { createElement } }: RendererInternals,
 ) {
   const suspense = (n2.suspense = n1.suspense)!
   suspense.vnode = n2
@@ -217,29 +239,38 @@ function patchSuspense(
         null,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
       if (suspense.deps <= 0) {
         suspense.resolve()
       } else if (isInFallback) {
-        patch(
-          activeBranch,
-          newFallback,
-          container,
-          anchor,
-          parentComponent,
-          null, // fallback tree will not have suspense context
-          isSVG,
-          slotScopeIds,
-          optimized
-        )
-        setActiveBranch(suspense, newFallback)
+        // It's possible that the app is in hydrating state when patching the
+        // suspense instance. If someone updates the dependency during component
+        // setup in children of suspense boundary, that would be problemtic
+        // because we aren't actually showing a fallback content when
+        // patchSuspense is called. In such case, patch of fallback content
+        // should be no op
+        if (!isHydrating) {
+          patch(
+            activeBranch,
+            newFallback,
+            container,
+            anchor,
+            parentComponent,
+            null, // fallback tree will not have suspense context
+            namespace,
+            slotScopeIds,
+            optimized,
+          )
+          setActiveBranch(suspense, newFallback)
+        }
       }
     } else {
       // toggled before pending tree is resolved
-      suspense.pendingId++
+      // increment pending ID. this is used to invalidate async callbacks
+      suspense.pendingId = suspenseId++
       if (isHydrating) {
         // if toggled before hydration is finished, the current DOM tree is
         // no longer valid. set it as the active branch so it will be unmounted
@@ -249,7 +280,6 @@ function patchSuspense(
       } else {
         unmount(pendingBranch, parentComponent, suspense)
       }
-      // increment pending ID. this is used to invalidate async callbacks
       // reset suspense state
       suspense.deps = 0
       // discard effects from pending branch
@@ -266,9 +296,9 @@ function patchSuspense(
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         if (suspense.deps <= 0) {
           suspense.resolve()
@@ -280,9 +310,9 @@ function patchSuspense(
             anchor,
             parentComponent,
             null, // fallback tree will not have suspense context
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
           setActiveBranch(suspense, newFallback)
         }
@@ -295,9 +325,9 @@ function patchSuspense(
           anchor,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         // force resolve
         suspense.resolve(true)
@@ -310,9 +340,9 @@ function patchSuspense(
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         if (suspense.deps <= 0) {
           suspense.resolve()
@@ -329,9 +359,9 @@ function patchSuspense(
         anchor,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
       setActiveBranch(suspense, newBranch)
     } else {
@@ -340,7 +370,11 @@ function patchSuspense(
       triggerEvent(n2, 'onPending')
       // mount pending branch in off-dom container
       suspense.pendingBranch = newBranch
-      suspense.pendingId++
+      if (newBranch.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
+        suspense.pendingId = newBranch.component!.suspenseId!
+      } else {
+        suspense.pendingId = suspenseId++
+      }
       patch(
         null,
         newBranch,
@@ -348,9 +382,9 @@ function patchSuspense(
         null,
         parentComponent,
         suspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
       if (suspense.deps <= 0) {
         // incoming branch has no async deps, resolve now.
@@ -375,10 +409,9 @@ 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
   activeBranch: VNode | null
   pendingBranch: VNode | null
   deps: number
@@ -393,12 +426,12 @@ export interface SuspenseBoundary {
   move(
     container: RendererElement,
     anchor: RendererNode | null,
-    type: MoveType
+    type: MoveType,
   ): void
   next(): RendererNode | null
   registerDep(
     instance: ComponentInternalInstance,
-    setupRenderEffect: SetupRenderEffectFn
+    setupRenderEffect: SetupRenderEffectFn,
   ): void
   unmount(parentSuspense: SuspenseBoundary | null, doRemove?: boolean): void
 }
@@ -412,18 +445,19 @@ function createSuspenseBoundary(
   container: RendererElement,
   hiddenContainer: RendererElement,
   anchor: RendererNode | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals,
-  isHydrating = false
+  isHydrating = false,
 ): SuspenseBoundary {
   /* istanbul ignore if */
   if (__DEV__ && !__TEST__ && !hasWarned) {
     hasWarned = true
-    // @ts-ignore `console.info` cannot be null error
+    // @ts-expect-error `console.info` cannot be null error
+    // eslint-disable-next-line no-console
     console[console.info ? 'info' : 'log'](
-      `<Suspense> is an experimental feature and its API will likely change.`
+      `<Suspense> is an experimental feature and its API will likely change.`,
     )
   }
 
@@ -432,7 +466,7 @@ function createSuspenseBoundary(
     m: move,
     um: unmount,
     n: next,
-    o: { parentNode, remove }
+    o: { parentNode, remove },
   } = rendererInternals
 
   // if set `suspensible: true`, set the current suspense as a dep of parent suspense
@@ -450,20 +484,20 @@ function createSuspenseBoundary(
     assertNumber(timeout, `Suspense timeout`)
   }
 
+  const initialAnchor = anchor
   const suspense: SuspenseBoundary = {
     vnode,
     parent: parentSuspense,
     parentComponent,
-    isSVG,
+    namespace,
     container,
     hiddenContainer,
-    anchor,
     deps: 0,
-    pendingId: 0,
+    pendingId: suspenseId++,
     timeout: typeof timeout === 'number' ? timeout : -1,
     activeBranch: null,
     pendingBranch: null,
-    isInFallback: true,
+    isInFallback: !isHydrating,
     isHydrating,
     isUnmounted: false,
     effects: [],
@@ -472,12 +506,12 @@ function createSuspenseBoundary(
       if (__DEV__) {
         if (!resume && !suspense.pendingBranch) {
           throw new Error(
-            `suspense.resolve() is called without a pending branch.`
+            `suspense.resolve() is called without a pending branch.`,
           )
         }
         if (suspense.isUnmounted) {
           throw new Error(
-            `suspense.resolve() is called on an already unmounted suspense boundary.`
+            `suspense.resolve() is called on an already unmounted suspense boundary.`,
           )
         }
       }
@@ -488,30 +522,46 @@ function createSuspenseBoundary(
         pendingId,
         effects,
         parentComponent,
-        container
+        container,
       } = suspense
 
+      // if there's a transition happening we need to wait it to finish.
+      let delayEnter: boolean | null = false
       if (suspense.isHydrating) {
         suspense.isHydrating = false
       } else if (!resume) {
-        const delayEnter =
+        delayEnter =
           activeBranch &&
           pendingBranch!.transition &&
           pendingBranch!.transition.mode === 'out-in'
         if (delayEnter) {
           activeBranch!.transition!.afterLeave = () => {
             if (pendingId === suspense.pendingId) {
-              move(pendingBranch!, container, anchor, MoveType.ENTER)
+              move(
+                pendingBranch!,
+                container,
+                anchor === initialAnchor ? next(activeBranch!) : anchor,
+                MoveType.ENTER,
+              )
+              queuePostFlushCb(effects)
             }
           }
         }
-        // this is initial anchor on mount
-        let { anchor } = suspense
         // unmount current active tree
         if (activeBranch) {
           // if the fallback tree was mounted, it may have been moved
           // as part of a parent suspense. get the latest anchor for insertion
-          anchor = next(activeBranch)
+          // #8105 if `delayEnter` is true, it means that the mounting of
+          // `activeBranch` will be delayed. if the branch switches before
+          // transition completes, both `activeBranch` and `pendingBranch` may
+          // coexist in the `hiddenContainer`. This could result in
+          // `next(activeBranch!)` obtaining an incorrect anchor
+          // (got `pendingBranch.el`).
+          // Therefore, after the mounting of activeBranch is completed,
+          // it is necessary to get the latest anchor.
+          if (parentNode(activeBranch.el!) !== suspense.hiddenContainer) {
+            anchor = next(activeBranch)
+          }
           unmount(activeBranch, parentComponent, suspense, true)
         }
         if (!delayEnter) {
@@ -538,8 +588,8 @@ function createSuspenseBoundary(
         }
         parent = parent.parent
       }
-      // no pending parent suspense, flush all jobs
-      if (!hasUnresolvedAncestor) {
+      // no pending parent suspense nor transition, flush all jobs
+      if (!hasUnresolvedAncestor && !delayEnter) {
         queuePostFlushCb(effects)
       }
       suspense.effects = []
@@ -567,7 +617,7 @@ function createSuspenseBoundary(
         return
       }
 
-      const { vnode, activeBranch, parentComponent, container, isSVG } =
+      const { vnode, activeBranch, parentComponent, container, namespace } =
         suspense
 
       // invoke @fallback event
@@ -586,9 +636,9 @@ function createSuspenseBoundary(
           anchor,
           parentComponent,
           null, // fallback tree will not have suspense context
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         setActiveBranch(suspense, fallbackVNode)
       }
@@ -605,7 +655,7 @@ function createSuspenseBoundary(
         activeBranch!,
         parentComponent,
         null, // no suspense so unmount hooks fire now
-        true // shouldRemove
+        true, // shouldRemove
       )
 
       if (!delayEnter) {
@@ -667,8 +717,8 @@ function createSuspenseBoundary(
             // consider the comment placeholder case.
             hydratedEl ? null : next(instance.subTree),
             suspense,
-            isSVG,
-            optimized
+            namespace,
+            optimized,
           )
           if (placeholder) {
             remove(placeholder)
@@ -691,7 +741,7 @@ function createSuspenseBoundary(
           suspense.activeBranch,
           parentComponent,
           parentSuspense,
-          doRemove
+          doRemove,
         )
       }
       if (suspense.pendingBranch) {
@@ -699,10 +749,10 @@ function createSuspenseBoundary(
           suspense.pendingBranch,
           parentComponent,
           parentSuspense,
-          doRemove
+          doRemove,
         )
       }
-    }
+    },
   }
 
   return suspense
@@ -713,7 +763,7 @@ function hydrateSuspense(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
   rendererInternals: RendererInternals,
@@ -723,22 +773,22 @@ function hydrateSuspense(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
-  ) => Node | null
+    optimized: boolean,
+  ) => Node | null,
 ): Node | null {
-  /* eslint-disable no-restricted-globals */
   const suspense = (vnode.suspense = createSuspenseBoundary(
     vnode,
     parentSuspense,
     parentComponent,
     node.parentNode!,
+    // eslint-disable-next-line no-restricted-globals
     document.createElement('div'),
     null,
-    isSVG,
+    namespace,
     slotScopeIds,
     optimized,
     rendererInternals,
-    true /* hydrating */
+    true /* hydrating */,
   ))
   // there are two possible scenarios for server-rendered suspense:
   // - success: ssr content should be fully resolved
@@ -752,7 +802,7 @@ function hydrateSuspense(
     parentComponent,
     suspense,
     slotScopeIds,
-    optimized
+    optimized,
   )
   if (suspense.deps === 0) {
     suspense.resolve(false, true)
@@ -765,7 +815,7 @@ function normalizeSuspenseChildren(vnode: VNode) {
   const { shapeFlag, children } = vnode
   const isSlotChildren = shapeFlag & ShapeFlags.SLOTS_CHILDREN
   vnode.ssContent = normalizeSuspenseSlot(
-    isSlotChildren ? (children as Slots).default : children
+    isSlotChildren ? (children as Slots).default : children,
   )
   vnode.ssFallback = isSlotChildren
     ? normalizeSuspenseSlot((children as Slots).fallback)
@@ -792,7 +842,11 @@ function normalizeSuspenseSlot(s: any) {
   }
   if (isArray(s)) {
     const singleChild = filterSingleRoot(s)
-    if (__DEV__ && !singleChild) {
+    if (
+      __DEV__ &&
+      !singleChild &&
+      s.filter(child => child !== NULL_DYNAMIC_COMPONENT).length > 0
+    ) {
       warn(`<Suspense> slots expect a single root node.`)
     }
     s = singleChild
@@ -806,7 +860,7 @@ function normalizeSuspenseSlot(s: any) {
 
 export function queueEffectWithSuspense(
   fn: Function | Function[],
-  suspense: SuspenseBoundary | null
+  suspense: SuspenseBoundary | null,
 ): void {
   if (suspense && suspense.pendingBranch) {
     if (isArray(fn)) {
@@ -822,7 +876,14 @@ export function queueEffectWithSuspense(
 function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
   suspense.activeBranch = branch
   const { vnode, parentComponent } = suspense
-  const el = (vnode.el = branch.el)
+  let el = branch.el
+  // if branch has no el after patch, it's a HOC wrapping async components
+  // drill and locate the placeholder comment node
+  while (!el && branch.component) {
+    branch = branch.component.subTree
+    el = branch.el
+  }
+  vnode.el = el
   // in case suspense is the root node of a component,
   // recursively update the HOC el
   if (parentComponent && parentComponent.subTree === vnode) {
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 19ccbc5de27..0de0ebf787e 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -1,15 +1,16 @@
-import { ComponentInternalInstance } from '../component'
-import { SuspenseBoundary } from './Suspense'
+import type { ComponentInternalInstance } from '../component'
+import type { SuspenseBoundary } from './Suspense'
 import {
-  RendererInternals,
+  type ElementNamespace,
   MoveType,
-  RendererElement,
-  RendererNode,
-  RendererOptions,
-  traverseStaticChildren
+  type RendererElement,
+  type RendererInternals,
+  type RendererNode,
+  type RendererOptions,
+  traverseStaticChildren,
 } from '../renderer'
-import { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
-import { isString, ShapeFlags } from '@vue/shared'
+import type { VNode, VNodeArrayChildren, VNodeProps } from '../vnode'
+import { ShapeFlags, isString } from '@vue/shared'
 import { warn } from '../warning'
 import { isHmrUpdating } from '../hmr'
 
@@ -28,9 +29,12 @@ 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']
+  select: RendererOptions['querySelector'],
 ): T | null => {
   const targetSelector = props && props.to
   if (isString(targetSelector)) {
@@ -38,7 +42,7 @@ const resolveTarget = <T = RendererElement>(
       __DEV__ &&
         warn(
           `Current renderer does not support string target for Teleports. ` +
-            `(missing querySelector renderer option)`
+            `(missing querySelector renderer option)`,
         )
       return null
     } else {
@@ -49,7 +53,7 @@ const resolveTarget = <T = RendererElement>(
             `Failed to locate Teleport target with selector "${targetSelector}". ` +
               `Note the target element must exist before the component is mounted - ` +
               `i.e. the target cannot be rendered by the component itself, and ` +
-              `ideally should be outside of the entire Vue component tree.`
+              `ideally should be outside of the entire Vue component tree.`,
           )
       }
       return target as T
@@ -63,6 +67,7 @@ const resolveTarget = <T = RendererElement>(
 }
 
 export const TeleportImpl = {
+  name: 'Teleport',
   __isTeleport: true,
   process(
     n1: TeleportVNode | null,
@@ -71,16 +76,16 @@ export const TeleportImpl = {
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
     optimized: boolean,
-    internals: RendererInternals
+    internals: RendererInternals,
   ) {
     const {
       mc: mountChildren,
       pc: patchChildren,
       pbc: patchBlockChildren,
-      o: { insert, querySelector, createText, createComment }
+      o: { insert, querySelector, createText, createComment },
     } = internals
 
     const disabled = isTeleportDisabled(n2.props)
@@ -108,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})`)
       }
@@ -123,9 +132,9 @@ export const TeleportImpl = {
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         }
       }
@@ -144,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
@@ -154,8 +168,8 @@ export const TeleportImpl = {
           currentContainer,
           parentComponent,
           parentSuspense,
-          isSVG,
-          slotScopeIds
+          namespace,
+          slotScopeIds,
         )
         // even in block tree mode we need to make sure all root-level nodes
         // in the teleport inherit previous DOM references so that they can
@@ -169,9 +183,9 @@ export const TeleportImpl = {
           currentAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          false
+          false,
         )
       }
 
@@ -184,7 +198,7 @@ export const TeleportImpl = {
             container,
             mainAnchor,
             internals,
-            TeleportMoveTypes.TOGGLE
+            TeleportMoveTypes.TOGGLE,
           )
         } else {
           // #7835
@@ -199,7 +213,7 @@ export const TeleportImpl = {
         if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
           const nextTarget = (n2.target = resolveTarget(
             n2.props,
-            querySelector
+            querySelector,
           ))
           if (nextTarget) {
             moveTeleport(
@@ -207,13 +221,13 @@ export const TeleportImpl = {
               nextTarget,
               null,
               internals,
-              TeleportMoveTypes.TARGET_CHANGE
+              TeleportMoveTypes.TARGET_CHANGE,
             )
           } else if (__DEV__) {
             warn(
               'Invalid Teleport target on update:',
               target,
-              `(${typeof target})`
+              `(${typeof target})`,
             )
           }
         } else if (wasDisabled) {
@@ -224,7 +238,7 @@ export const TeleportImpl = {
             target,
             targetAnchor,
             internals,
-            TeleportMoveTypes.TOGGLE
+            TeleportMoveTypes.TOGGLE,
           )
         }
       }
@@ -239,7 +253,7 @@ export const TeleportImpl = {
     parentSuspense: SuspenseBoundary | null,
     optimized: boolean,
     { um: unmount, o: { remove: hostRemove } }: RendererInternals,
-    doRemove: Boolean
+    doRemove: boolean,
   ) {
     const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode
 
@@ -247,32 +261,31 @@ export const TeleportImpl = {
       hostRemove(targetAnchor!)
     }
 
-    // an unmounted teleport should always remove its children if not disabled
-    if (doRemove || !isTeleportDisabled(props)) {
-      hostRemove(anchor!)
-      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-        for (let i = 0; i < (children as VNode[]).length; i++) {
-          const child = (children as VNode[])[i]
-          unmount(
-            child,
-            parentComponent,
-            parentSuspense,
-            true,
-            !!child.dynamicChildren
-          )
-        }
+    // an unmounted teleport should always unmount its children whether it's disabled or not
+    doRemove && hostRemove(anchor!)
+    if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      const shouldRemove = doRemove || !isTeleportDisabled(props)
+      for (let i = 0; i < (children as VNode[]).length; i++) {
+        const child = (children as VNode[])[i]
+        unmount(
+          child,
+          parentComponent,
+          parentSuspense,
+          shouldRemove,
+          !!child.dynamicChildren,
+        )
       }
     }
   },
 
   move: moveTeleport,
-  hydrate: hydrateTeleport
+  hydrate: hydrateTeleport,
 }
 
-export const enum TeleportMoveTypes {
+export enum TeleportMoveTypes {
   TARGET_CHANGE,
   TOGGLE, // enable / disable
-  REORDER // moved in the main view
+  REORDER, // moved in the main view
 }
 
 function moveTeleport(
@@ -280,7 +293,7 @@ function moveTeleport(
   container: RendererElement,
   parentAnchor: RendererNode | null,
   { o: { insert }, m: move }: RendererInternals,
-  moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER
+  moveType: TeleportMoveTypes = TeleportMoveTypes.REORDER,
 ) {
   // move target anchor if this is a target change.
   if (moveType === TeleportMoveTypes.TARGET_CHANGE) {
@@ -303,7 +316,7 @@ function moveTeleport(
           (children as VNode[])[i],
           container,
           parentAnchor,
-          MoveType.REORDER
+          MoveType.REORDER,
         )
       }
     }
@@ -327,7 +340,7 @@ function hydrateTeleport(
   slotScopeIds: string[] | null,
   optimized: boolean,
   {
-    o: { nextSibling, parentNode, querySelector }
+    o: { nextSibling, parentNode, querySelector },
   }: RendererInternals<Node, Element>,
   hydrateChildren: (
     node: Node | null,
@@ -336,12 +349,12 @@ function hydrateTeleport(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
-  ) => Node | null
+    optimized: boolean,
+  ) => Node | null,
 ): Node | null {
   const target = (vnode.target = resolveTarget<Element>(
     vnode.props,
-    querySelector
+    querySelector,
   ))
   if (target) {
     // if multiple teleports rendered to the same target element, we need to
@@ -357,7 +370,7 @@ function hydrateTeleport(
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
         vnode.targetAnchor = targetNode
       } else {
@@ -388,7 +401,7 @@ function hydrateTeleport(
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
       }
     }
@@ -414,7 +427,7 @@ function updateCssVars(vnode: VNode) {
   const ctx = vnode.ctx
   if (ctx && ctx.ut) {
     let node = (vnode.children as VNode[])[0].el!
-    while (node !== vnode.targetAnchor) {
+    while (node && node !== vnode.targetAnchor) {
       if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
       node = node.nextSibling
     }
diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index 768240feb62..abd3a329922 100644
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -1,8 +1,14 @@
-import { isReactive, isReadonly, isRef, Ref, toRaw } from '@vue/reactivity'
+import {
+  type Ref,
+  isReactive,
+  isReadonly,
+  isRef,
+  isShallow,
+  toRaw,
+} from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
-import { isShallow } from '../../reactivity/src/reactive'
-import { ComponentInternalInstance, ComponentOptions } from './component'
-import { ComponentPublicInstance } from './componentPublicInstance'
+import type { ComponentInternalInstance, ComponentOptions } from './component'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 
 export function initCustomFormatter() {
   /* eslint-disable no-restricted-globals */
@@ -11,9 +17,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
@@ -33,7 +39,7 @@ export function initCustomFormatter() {
           ['span', vueStyle, genRefFlag(obj)],
           '<',
           formatValue(obj.value),
-          `>`
+          `>`,
         ]
       } else if (isReactive(obj)) {
         return [
@@ -42,7 +48,7 @@ export function initCustomFormatter() {
           ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
           '<',
           formatValue(obj),
-          `>${isReadonly(obj) ? ` (readonly)` : ``}`
+          `>${isReadonly(obj) ? ` (readonly)` : ``}`,
         ]
       } else if (isReadonly(obj)) {
         return [
@@ -51,7 +57,7 @@ export function initCustomFormatter() {
           ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
           '<',
           formatValue(obj),
-          '>'
+          '>',
         ]
       }
       return null
@@ -64,10 +70,10 @@ export function initCustomFormatter() {
         return [
           'div',
           {},
-          ...formatInstance((obj as ComponentPublicInstance).$)
+          ...formatInstance((obj as ComponentPublicInstance).$),
         ]
       }
-    }
+    },
   }
 
   function formatInstance(instance: ComponentInternalInstance) {
@@ -96,11 +102,11 @@ export function initCustomFormatter() {
       [
         'span',
         {
-          style: keywordStyle.style + ';opacity:0.66'
+          style: keywordStyle.style + ';opacity:0.66',
         },
-        '$ (internal): '
+        '$ (internal): ',
       ],
-      ['object', { object: instance }]
+      ['object', { object: instance }],
     ])
     return blocks
   }
@@ -116,24 +122,24 @@ export function initCustomFormatter() {
       [
         'div',
         {
-          style: 'color:#476582'
+          style: 'color:#476582',
         },
-        type
+        type,
       ],
       [
         'div',
         {
-          style: 'padding-left:1.25em'
+          style: 'padding-left:1.25em',
         },
         ...Object.keys(target).map(key => {
           return [
             'div',
             {},
             ['span', keywordStyle, key + ': '],
-            formatValue(target[key], false)
+            formatValue(target[key], false),
           ]
-        })
-      ]
+        }),
+      ],
     ]
   }
 
diff --git a/packages/runtime-core/src/devtools.ts b/packages/runtime-core/src/devtools.ts
index bf67093f5c3..870cb4748bd 100644
--- a/packages/runtime-core/src/devtools.ts
+++ b/packages/runtime-core/src/devtools.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-globals */
-import { App } from './apiCreateApp'
-import { Fragment, Text, Comment, Static } from './vnode'
-import { ComponentInternalInstance } from './component'
+import type { App } from './apiCreateApp'
+import { Comment, Fragment, Static, Text } from './vnode'
+import type { ComponentInternalInstance } from './component'
 
 interface AppRecord {
   id: number
@@ -10,7 +10,7 @@ interface AppRecord {
   types: Record<string, string | Symbol>
 }
 
-const enum DevtoolsHooks {
+enum DevtoolsHooks {
   APP_INIT = 'app:init',
   APP_UNMOUNT = 'app:unmount',
   COMPONENT_UPDATED = 'component:updated',
@@ -18,10 +18,10 @@ const enum DevtoolsHooks {
   COMPONENT_REMOVED = 'component:removed',
   COMPONENT_EMIT = 'component:emit',
   PERFORMANCE_START = 'perf:start',
-  PERFORMANCE_END = 'perf:end'
+  PERFORMANCE_END = 'perf:end',
 }
 
-interface DevtoolsHook {
+export interface DevtoolsHook {
   enabled?: boolean
   emit: (event: string, ...payload: any[]) => void
   on: (event: string, handler: Function) => void
@@ -91,7 +91,7 @@ export function devtoolsInitApp(app: App, version: string) {
     Fragment,
     Text,
     Comment,
-    Static
+    Static,
   })
 }
 
@@ -100,18 +100,18 @@ export function devtoolsUnmountApp(app: App) {
 }
 
 export const devtoolsComponentAdded = /*#__PURE__*/ createDevtoolsComponentHook(
-  DevtoolsHooks.COMPONENT_ADDED
+  DevtoolsHooks.COMPONENT_ADDED,
 )
 
 export const devtoolsComponentUpdated =
   /*#__PURE__*/ createDevtoolsComponentHook(DevtoolsHooks.COMPONENT_UPDATED)
 
 const _devtoolsComponentRemoved = /*#__PURE__*/ createDevtoolsComponentHook(
-  DevtoolsHooks.COMPONENT_REMOVED
+  DevtoolsHooks.COMPONENT_REMOVED,
 )
 
 export const devtoolsComponentRemoved = (
-  component: ComponentInternalInstance
+  component: ComponentInternalInstance,
 ) => {
   if (
     devtools &&
@@ -130,17 +130,17 @@ function createDevtoolsComponentHook(hook: DevtoolsHooks) {
       component.appContext.app,
       component.uid,
       component.parent ? component.parent.uid : undefined,
-      component
+      component,
     )
   }
 }
 
 export const devtoolsPerfStart = /*#__PURE__*/ createDevtoolsPerformanceHook(
-  DevtoolsHooks.PERFORMANCE_START
+  DevtoolsHooks.PERFORMANCE_START,
 )
 
 export const devtoolsPerfEnd = /*#__PURE__*/ createDevtoolsPerformanceHook(
-  DevtoolsHooks.PERFORMANCE_END
+  DevtoolsHooks.PERFORMANCE_END,
 )
 
 function createDevtoolsPerformanceHook(hook: DevtoolsHooks) {
@@ -152,13 +152,13 @@ function createDevtoolsPerformanceHook(hook: DevtoolsHooks) {
 export function devtoolsComponentEmit(
   component: ComponentInternalInstance,
   event: string,
-  params: any[]
+  params: any[],
 ) {
   emit(
     DevtoolsHooks.COMPONENT_EMIT,
     component.appContext.app,
     component,
     event,
-    params
+    params,
   )
 }
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
index 18c3352b002..daaf28b1518 100644
--- a/packages/runtime-core/src/directives.ts
+++ b/packages/runtime-core/src/directives.ts
@@ -11,13 +11,17 @@ return withDirectives(h(comp), [
 ])
 */
 
-import { VNode } from './vnode'
-import { isFunction, EMPTY_OBJ, isBuiltInDirective } from '@vue/shared'
+import type { VNode } from './vnode'
+import { EMPTY_OBJ, isBuiltInDirective, isFunction } from '@vue/shared'
 import { warn } from './warning'
-import { ComponentInternalInstance, Data, getExposeProxy } from './component'
+import {
+  type ComponentInternalInstance,
+  type Data,
+  getExposeProxy,
+} from './component'
 import { currentRenderingInstance } from './componentRenderContext'
-import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
-import { ComponentPublicInstance } from './componentPublicInstance'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 import { mapCompatDirectiveHook } from './compat/customDirective'
 import { pauseTracking, resetTracking } from '@vue/reactivity'
 import { traverse } from './apiWatch'
@@ -35,12 +39,12 @@ export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (
   el: T,
   binding: DirectiveBinding<V>,
   vnode: VNode<any, T>,
-  prevVNode: Prev
+  prevVNode: Prev,
 ) => void
 
 export type SSRDirectiveHook = (
   binding: DirectiveBinding,
-  vnode: VNode
+  vnode: VNode,
 ) => Data | undefined
 
 export interface ObjectDirective<T = any, V = any> {
@@ -82,16 +86,15 @@ export type DirectiveArguments = Array<
  */
 export function withDirectives<T extends VNode>(
   vnode: T,
-  directives: DirectiveArguments
+  directives: DirectiveArguments,
 ): T {
-  const internalInstance = currentRenderingInstance
-  if (internalInstance === null) {
+  if (currentRenderingInstance === null) {
     __DEV__ && warn(`withDirectives can only be used inside render functions.`)
     return vnode
   }
   const instance =
-    (getExposeProxy(internalInstance) as ComponentPublicInstance) ||
-    internalInstance.proxy
+    (getExposeProxy(currentRenderingInstance) as ComponentPublicInstance) ||
+    currentRenderingInstance.proxy
   const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])
   for (let i = 0; i < directives.length; i++) {
     let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]
@@ -99,7 +102,7 @@ export function withDirectives<T extends VNode>(
       if (isFunction(dir)) {
         dir = {
           mounted: dir,
-          updated: dir
+          updated: dir,
         } as ObjectDirective
       }
       if (dir.deep) {
@@ -111,7 +114,7 @@ export function withDirectives<T extends VNode>(
         value,
         oldValue: void 0,
         arg,
-        modifiers
+        modifiers,
       })
     }
   }
@@ -122,7 +125,7 @@ export function invokeDirectiveHook(
   vnode: VNode,
   prevVNode: VNode | null,
   instance: ComponentInternalInstance | null,
-  name: keyof ObjectDirective
+  name: keyof ObjectDirective,
 ) {
   const bindings = vnode.dirs!
   const oldBindings = prevVNode && prevVNode.dirs!
@@ -143,7 +146,7 @@ export function invokeDirectiveHook(
         vnode.el,
         binding,
         vnode,
-        prevVNode
+        prevVNode,
       ])
       resetTracking()
     }
diff --git a/packages/runtime-core/src/enums.ts b/packages/runtime-core/src/enums.ts
index 63d829d7a87..aeb41adfcd6 100644
--- a/packages/runtime-core/src/enums.ts
+++ b/packages/runtime-core/src/enums.ts
@@ -1,4 +1,4 @@
-export const enum LifecycleHooks {
+export enum LifecycleHooks {
   BEFORE_CREATE = 'bc',
   CREATED = 'c',
   BEFORE_MOUNT = 'bm',
@@ -12,5 +12,5 @@ export const enum LifecycleHooks {
   RENDER_TRIGGERED = 'rtg',
   RENDER_TRACKED = 'rtc',
   ERROR_CAPTURED = 'ec',
-  SERVER_PREFETCH = 'sp'
+  SERVER_PREFETCH = 'sp',
 }
diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts
index afbd226c4c6..041eb123938 100644
--- a/packages/runtime-core/src/errorHandling.ts
+++ b/packages/runtime-core/src/errorHandling.ts
@@ -1,12 +1,12 @@
-import { VNode } from './vnode'
-import { ComponentInternalInstance } from './component'
-import { warn, pushWarningContext, popWarningContext } from './warning'
-import { isPromise, isFunction } from '@vue/shared'
+import type { VNode } from './vnode'
+import type { ComponentInternalInstance } from './component'
+import { popWarningContext, pushWarningContext, warn } from './warning'
+import { isFunction, isPromise } from '@vue/shared'
 import { LifecycleHooks } from './enums'
 
 // contexts where user provided function may be executed, in addition to
 // lifecycle hooks.
-export const enum ErrorCodes {
+export enum ErrorCodes {
   SETUP_FUNCTION,
   RENDER_FUNCTION,
   WATCH_GETTER,
@@ -21,7 +21,7 @@ export const enum ErrorCodes {
   APP_WARN_HANDLER,
   FUNCTION_REF,
   ASYNC_COMPONENT_LOADER,
-  SCHEDULER
+  SCHEDULER,
 }
 
 export const ErrorTypeStrings: Record<LifecycleHooks | ErrorCodes, string> = {
@@ -55,7 +55,7 @@ export const ErrorTypeStrings: Record<LifecycleHooks | ErrorCodes, string> = {
   [ErrorCodes.ASYNC_COMPONENT_LOADER]: 'async component loader',
   [ErrorCodes.SCHEDULER]:
     'scheduler flush. This is likely a Vue internals bug. ' +
-    'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core'
+    'Please open an issue at https://github.com/vuejs/core .',
 }
 
 export type ErrorTypes = LifecycleHooks | ErrorCodes
@@ -64,22 +64,20 @@ export function callWithErrorHandling(
   fn: Function,
   instance: ComponentInternalInstance | null,
   type: ErrorTypes,
-  args?: unknown[]
+  args?: unknown[],
 ) {
-  let res
   try {
-    res = args ? fn(...args) : fn()
+    return args ? fn(...args) : fn()
   } catch (err) {
     handleError(err, instance, type)
   }
-  return res
 }
 
 export function callWithAsyncErrorHandling(
   fn: Function | Function[],
   instance: ComponentInternalInstance | null,
   type: ErrorTypes,
-  args?: unknown[]
+  args?: unknown[],
 ): any[] {
   if (isFunction(fn)) {
     const res = callWithErrorHandling(fn, instance, type, args)
@@ -102,7 +100,7 @@ export function handleError(
   err: unknown,
   instance: ComponentInternalInstance | null,
   type: ErrorTypes,
-  throwInDev = true
+  throwInDev = true,
 ) {
   const contextVNode = instance ? instance.vnode : null
   if (instance) {
@@ -110,7 +108,9 @@ export function handleError(
     // the exposed instance is the render proxy to keep it consistent with 2.x
     const exposedInstance = instance.proxy
     // in production the hook receives only the error code
-    const errorInfo = __DEV__ ? ErrorTypeStrings[type] : type
+    const errorInfo = __DEV__
+      ? ErrorTypeStrings[type]
+      : `https://vuejs.org/error-reference/#runtime-${type}`
     while (cur) {
       const errorCapturedHooks = cur.ec
       if (errorCapturedHooks) {
@@ -131,7 +131,7 @@ export function handleError(
         appErrorHandler,
         null,
         ErrorCodes.APP_ERROR_HANDLER,
-        [err, exposedInstance, errorInfo]
+        [err, exposedInstance, errorInfo],
       )
       return
     }
@@ -143,7 +143,7 @@ function logError(
   err: unknown,
   type: ErrorTypes,
   contextVNode: VNode | null,
-  throwInDev = true
+  throwInDev = true,
 ) {
   if (__DEV__) {
     const info = ErrorTypeStrings[type]
diff --git a/packages/runtime-core/src/featureFlags.ts b/packages/runtime-core/src/featureFlags.ts
index e878407bcc8..6dd136277bd 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(
@@ -29,7 +34,7 @@ export function initFeatureFlags() {
         `which expects these compile-time feature flags to be globally injected ` +
         `via the bundler config in order to get better tree-shaking in the ` +
         `production bundle.\n\n` +
-        `For more details, see https://link.vuejs.org/feature-flags.`
+        `For more details, see https://link.vuejs.org/feature-flags.`,
     )
   }
 }
diff --git a/packages/runtime-core/src/h.ts b/packages/runtime-core/src/h.ts
index 73b27107b8b..93e7fd9bc88 100644
--- a/packages/runtime-core/src/h.ts
+++ b/packages/runtime-core/src/h.ts
@@ -1,25 +1,25 @@
 import {
-  VNode,
-  VNodeProps,
+  type Comment,
+  type Fragment,
+  type Text,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
   createVNode,
-  VNodeArrayChildren,
-  Fragment,
-  Text,
-  Comment,
-  isVNode
+  isVNode,
 } from './vnode'
-import { Teleport, TeleportProps } from './components/Teleport'
-import { Suspense, SuspenseProps } from './components/Suspense'
-import { isObject, isArray } from '@vue/shared'
-import { RawSlots } from './componentSlots'
-import {
-  FunctionalComponent,
+import type { Teleport, TeleportProps } from './components/Teleport'
+import type { Suspense, SuspenseProps } from './components/Suspense'
+import { type IfAny, isArray, isObject } from '@vue/shared'
+import type { RawSlots } from './componentSlots'
+import type {
   Component,
   ComponentOptions,
-  ConcreteComponent
+  ConcreteComponent,
+  FunctionalComponent,
 } from './component'
-import { EmitsOptions } from './componentEmits'
-import { DefineComponent } from './apiDefineComponent'
+import type { EmitsOptions } from './componentEmits'
+import type { DefineComponent } from './apiDefineComponent'
 
 // `h` is a more user-friendly version of `createVNode` that allows omitting the
 // props when possible. It is intended for manually written render functions.
@@ -75,40 +75,57 @@ interface Constructor<P = any> {
   new (...args: any[]): { $props: P }
 }
 
+type HTMLElementEventHandler = {
+  [K in keyof HTMLElementEventMap as `on${Capitalize<K>}`]?: (
+    ev: HTMLElementEventMap[K],
+  ) => any
+}
+
 // The following is a series of overloads for providing props validation of
 // manually written render functions.
 
 // element
+export function h<K extends keyof HTMLElementTagNameMap>(
+  type: K,
+  children?: RawChildren,
+): VNode
+export function h<K extends keyof HTMLElementTagNameMap>(
+  type: K,
+  props?: (RawProps & HTMLElementEventHandler) | null,
+  children?: RawChildren | RawSlots,
+): VNode
+
+// custom element
 export function h(type: string, children?: RawChildren): VNode
 export function h(
   type: string,
   props?: RawProps | null,
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // text/comment
 export function h(
   type: typeof Text | typeof Comment,
-  children?: string | number | boolean
+  children?: string | number | boolean,
 ): VNode
 export function h(
   type: typeof Text | typeof Comment,
   props?: null,
-  children?: string | number | boolean
+  children?: string | number | boolean,
 ): VNode
 // fragment
 export function h(type: typeof Fragment, children?: VNodeArrayChildren): VNode
 export function h(
   type: typeof Fragment,
   props?: RawProps | null,
-  children?: VNodeArrayChildren
+  children?: VNodeArrayChildren,
 ): VNode
 
 // teleport (target prop is required)
 export function h(
   type: typeof Teleport,
   props: RawProps & TeleportProps,
-  children: RawChildren | RawSlots
+  children: RawChildren | RawSlots,
 ): VNode
 
 // suspense
@@ -116,18 +133,18 @@ export function h(type: typeof Suspense, children?: RawChildren): VNode
 export function h(
   type: typeof Suspense,
   props?: (RawProps & SuspenseProps) | null,
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // functional component
 export function h<
   P,
   E extends EmitsOptions = {},
-  S extends Record<string, any> = {}
+  S extends Record<string, any> = any,
 >(
-  type: FunctionalComponent<P, E, S>,
+  type: FunctionalComponent<P, any, S, any>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | IfAny<S, RawSlots, S>,
 ): VNode
 
 // catch-all for generic component types
@@ -136,26 +153,26 @@ export function h(type: Component, children?: RawChildren): VNode
 // concrete component
 export function h<P>(
   type: ConcreteComponent | string,
-  children?: RawChildren
+  children?: RawChildren,
 ): VNode
 export function h<P>(
   type: ConcreteComponent<P> | string,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren
+  children?: RawChildren,
 ): VNode
 
 // component without props
 export function h<P>(
   type: Component<P>,
   props?: (RawProps & P) | null,
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // exclude `defineComponent` constructors
 export function h<P>(
   type: ComponentOptions<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // fake constructor type returned by `defineComponent` or class component
@@ -163,7 +180,7 @@ export function h(type: Constructor, children?: RawChildren): VNode
 export function h<P>(
   type: Constructor<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // fake constructor type returned by `defineComponent`
@@ -171,7 +188,15 @@ export function h(type: DefineComponent, children?: RawChildren): VNode
 export function h<P>(
   type: DefineComponent<P>,
   props?: (RawProps & P) | ({} extends P ? null : never),
-  children?: RawChildren | RawSlots
+  children?: RawChildren | RawSlots,
+): VNode
+
+// catch all types
+export function h(type: string | Component, children?: RawChildren): VNode
+export function h<P>(
+  type: string | Component<P>,
+  props?: (RawProps & P) | ({} extends P ? null : never),
+  children?: RawChildren | RawSlots,
 ): VNode
 
 // Actual implementation
diff --git a/packages/runtime-core/src/helpers/createSlots.ts b/packages/runtime-core/src/helpers/createSlots.ts
index f370f5ca803..f7d6e9d073b 100644
--- a/packages/runtime-core/src/helpers/createSlots.ts
+++ b/packages/runtime-core/src/helpers/createSlots.ts
@@ -1,5 +1,5 @@
 import { isArray } from '@vue/shared'
-import { VNode } from '../vnode'
+import type { VNode } from '../vnode'
 
 // #6651 res can be undefined in SSR in string push mode
 type SSRSlot = (...args: any[]) => VNode[] | undefined
@@ -20,7 +20,7 @@ export function createSlots(
     | CompiledSlotDescriptor
     | CompiledSlotDescriptor[]
     | undefined
-  )[]
+  )[],
 ): Record<string, SSRSlot> {
   for (let i = 0; i < dynamicSlots.length; i++) {
     const slot = dynamicSlots[i]
diff --git a/packages/runtime-core/src/helpers/renderList.ts b/packages/runtime-core/src/helpers/renderList.ts
index 1655d555fb3..655435fdd7a 100644
--- a/packages/runtime-core/src/helpers/renderList.ts
+++ b/packages/runtime-core/src/helpers/renderList.ts
@@ -1,5 +1,5 @@
-import { VNode, VNodeChild } from '../vnode'
-import { isArray, isString, isObject } from '@vue/shared'
+import type { VNode, VNodeChild } from '../vnode'
+import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '../warning'
 
 /**
@@ -8,7 +8,7 @@ import { warn } from '../warning'
  */
 export function renderList(
   source: string,
-  renderItem: (value: string, index: number) => VNodeChild
+  renderItem: (value: string, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -16,7 +16,7 @@ export function renderList(
  */
 export function renderList(
   source: number,
-  renderItem: (value: number, index: number) => VNodeChild
+  renderItem: (value: number, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -24,7 +24,7 @@ export function renderList(
  */
 export function renderList<T>(
   source: T[],
-  renderItem: (value: T, index: number) => VNodeChild
+  renderItem: (value: T, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -32,7 +32,7 @@ export function renderList<T>(
  */
 export function renderList<T>(
   source: Iterable<T>,
-  renderItem: (value: T, index: number) => VNodeChild
+  renderItem: (value: T, index: number) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -43,8 +43,8 @@ export function renderList<T>(
   renderItem: <K extends keyof T>(
     value: T[K],
     key: K,
-    index: number
-  ) => VNodeChild
+    index: number,
+  ) => VNodeChild,
 ): VNodeChild[]
 
 /**
@@ -54,7 +54,7 @@ export function renderList(
   source: any,
   renderItem: (...args: any[]) => VNodeChild,
   cache?: any[],
-  index?: number
+  index?: number,
 ): VNodeChild[] {
   let ret: VNodeChild[]
   const cached = (cache && cache[index!]) as VNode[] | undefined
@@ -75,7 +75,7 @@ export function renderList(
   } else if (isObject(source)) {
     if (source[Symbol.iterator as any]) {
       ret = Array.from(source as Iterable<any>, (item, i) =>
-        renderItem(item, i, undefined, cached && cached[i])
+        renderItem(item, i, undefined, cached && cached[i]),
       )
     } else {
       const keys = Object.keys(source)
diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts
index 452fc827269..8a7608219d9 100644
--- a/packages/runtime-core/src/helpers/renderSlot.ts
+++ b/packages/runtime-core/src/helpers/renderSlot.ts
@@ -1,17 +1,17 @@
-import { Data } from '../component'
-import { Slots, RawSlots } from '../componentSlots'
+import type { Data } from '../component'
+import type { RawSlots, Slots } from '../componentSlots'
 import {
-  ContextualRenderFn,
-  currentRenderingInstance
+  type ContextualRenderFn,
+  currentRenderingInstance,
 } from '../componentRenderContext'
 import {
   Comment,
+  Fragment,
+  type VNode,
+  type VNodeArrayChildren,
+  createBlock,
   isVNode,
-  VNodeArrayChildren,
   openBlock,
-  createBlock,
-  Fragment,
-  VNode
 } from '../vnode'
 import { PatchFlags, SlotFlags } from '@vue/shared'
 import { warn } from '../warning'
@@ -29,7 +29,7 @@ export function renderSlot(
   // this is not a user-facing function, so the fallback is always generated by
   // the compiler and guaranteed to be a function returning an array
   fallback?: () => VNodeArrayChildren,
-  noSlotted?: boolean
+  noSlotted?: boolean,
 ): VNode {
   if (
     currentRenderingInstance!.isCE ||
@@ -47,7 +47,7 @@ export function renderSlot(
     warn(
       `SSR-optimized slot function detected in a non-SSR-optimized render ` +
         `function. You need to mark this component with $dynamic-slots in the ` +
-        `parent template.`
+        `parent template.`,
     )
     slot = () => []
   }
@@ -69,12 +69,12 @@ export function renderSlot(
         // slot content array of a dynamic conditional slot may have a branch
         // key attached in the `createSlots` helper, respect that
         (validSlotContent && (validSlotContent as any).key) ||
-        `_${name}`
+        `_${name}`,
     },
     validSlotContent || (fallback ? fallback() : []),
     validSlotContent && (slots as RawSlots)._ === SlotFlags.STABLE
       ? PatchFlags.STABLE_FRAGMENT
-      : PatchFlags.BAIL
+      : PatchFlags.BAIL,
   )
   if (!noSlotted && rendered.scopeId) {
     rendered.slotScopeIds = [rendered.scopeId + '-s']
diff --git a/packages/runtime-core/src/helpers/resolveAssets.ts b/packages/runtime-core/src/helpers/resolveAssets.ts
index 3aedcee47ee..f44e9c530e2 100644
--- a/packages/runtime-core/src/helpers/resolveAssets.ts
+++ b/packages/runtime-core/src/helpers/resolveAssets.ts
@@ -1,14 +1,14 @@
 import {
+  type ComponentOptions,
+  type ConcreteComponent,
   currentInstance,
-  ConcreteComponent,
-  ComponentOptions,
-  getComponentName
+  getComponentName,
 } from '../component'
 import { currentRenderingInstance } from '../componentRenderContext'
-import { Directive } from '../directives'
+import type { Directive } from '../directives'
 import { camelize, capitalize, isString } from '@vue/shared'
 import { warn } from '../warning'
-import { VNodeTypes } from '../vnode'
+import type { VNodeTypes } from '../vnode'
 
 export const COMPONENTS = 'components'
 export const DIRECTIVES = 'directives'
@@ -21,7 +21,7 @@ export type AssetTypes = typeof COMPONENTS | typeof DIRECTIVES | typeof FILTERS
  */
 export function resolveComponent(
   name: string,
-  maybeSelfReference?: boolean
+  maybeSelfReference?: boolean,
 ): ConcreteComponent | string {
   return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name
 }
@@ -63,12 +63,12 @@ function resolveAsset(
   type: typeof COMPONENTS,
   name: string,
   warnMissing?: boolean,
-  maybeSelfReference?: boolean
+  maybeSelfReference?: boolean,
 ): ConcreteComponent | undefined
 // overload 2: directives
 function resolveAsset(
   type: typeof DIRECTIVES,
-  name: string
+  name: string,
 ): Directive | undefined
 // implementation
 // overload 3: filters (compat only)
@@ -78,7 +78,7 @@ function resolveAsset(
   type: AssetTypes,
   name: string,
   warnMissing = true,
-  maybeSelfReference = false
+  maybeSelfReference = false,
 ) {
   const instance = currentRenderingInstance || currentInstance
   if (instance) {
@@ -88,7 +88,7 @@ function resolveAsset(
     if (type === COMPONENTS) {
       const selfName = getComponentName(
         Component,
-        false /* do not include inferred name to avoid breaking existing code */
+        false /* do not include inferred name to avoid breaking existing code */,
       )
       if (
         selfName &&
@@ -125,7 +125,7 @@ function resolveAsset(
   } else if (__DEV__) {
     warn(
       `resolve${capitalize(type.slice(0, -1))} ` +
-        `can only be used in render() or setup().`
+        `can only be used in render() or setup().`,
     )
   }
 }
diff --git a/packages/runtime-core/src/helpers/toHandlers.ts b/packages/runtime-core/src/helpers/toHandlers.ts
index 78ad164d7c0..3e7dcb327f5 100644
--- a/packages/runtime-core/src/helpers/toHandlers.ts
+++ b/packages/runtime-core/src/helpers/toHandlers.ts
@@ -1,4 +1,4 @@
-import { toHandlerKey, isObject } from '@vue/shared'
+import { isObject, toHandlerKey } from '@vue/shared'
 import { warn } from '../warning'
 
 /**
@@ -7,7 +7,7 @@ import { warn } from '../warning'
  */
 export function toHandlers(
   obj: Record<string, any>,
-  preserveCaseIfNecessary?: boolean
+  preserveCaseIfNecessary?: boolean,
 ): Record<string, any> {
   const ret: Record<string, any> = {}
   if (__DEV__ && !isObject(obj)) {
diff --git a/packages/runtime-core/src/helpers/useModel.ts b/packages/runtime-core/src/helpers/useModel.ts
new file mode 100644
index 00000000000..b2670e576e4
--- /dev/null
+++ b/packages/runtime-core/src/helpers/useModel.ts
@@ -0,0 +1,88 @@
+import { type Ref, customRef, ref } from '@vue/reactivity'
+import { EMPTY_OBJ, camelize, hasChanged, hyphenate } from '@vue/shared'
+import type { DefineModelOptions, ModelRef } from '../apiSetupHelpers'
+import { getCurrentInstance } from '../component'
+import { warn } from '../warning'
+import type { NormalizedProps } from '../componentProps'
+import { watchSyncEffect } from '../apiWatch'
+
+export function useModel<
+  M extends string | number | symbol,
+  T extends Record<string, any>,
+  K extends keyof T,
+>(props: T, name: K, options?: DefineModelOptions<T[K]>): ModelRef<T[K], M>
+export function useModel(
+  props: Record<string, any>,
+  name: string,
+  options: DefineModelOptions = EMPTY_OBJ,
+): Ref {
+  const i = getCurrentInstance()!
+  if (__DEV__ && !i) {
+    warn(`useModel() called without active instance.`)
+    return ref() as any
+  }
+
+  if (__DEV__ && !(i.propsOptions[0] as NormalizedProps)[name]) {
+    warn(`useModel() called with prop "${name}" which is not declared.`)
+    return ref() as any
+  }
+
+  const camelizedName = camelize(name)
+  const hyphenatedName = hyphenate(name)
+
+  const res = customRef((track, trigger) => {
+    let localValue: any
+    watchSyncEffect(() => {
+      const propValue = props[name]
+      if (hasChanged(localValue, propValue)) {
+        localValue = propValue
+        trigger()
+      }
+    })
+    return {
+      get() {
+        track()
+        return options.get ? options.get(localValue) : localValue
+      },
+      set(value) {
+        const rawProps = i.vnode!.props
+        if (
+          !(
+            rawProps &&
+            // check if parent has passed v-model
+            (name in rawProps ||
+              camelizedName in rawProps ||
+              hyphenatedName in rawProps) &&
+            (`onUpdate:${name}` in rawProps ||
+              `onUpdate:${camelizedName}` in rawProps ||
+              `onUpdate:${hyphenatedName}` in rawProps)
+          ) &&
+          hasChanged(value, localValue)
+        ) {
+          localValue = value
+          trigger()
+        }
+        i.emit(`update:${name}`, options.set ? options.set(value) : value)
+      },
+    }
+  })
+
+  const modifierKey =
+    name === 'modelValue' ? 'modelModifiers' : `${name}Modifiers`
+
+  // @ts-expect-error
+  res[Symbol.iterator] = () => {
+    let i = 0
+    return {
+      next() {
+        if (i < 2) {
+          return { value: i++ ? props[modifierKey] || {} : res, done: false }
+        } else {
+          return { done: true }
+        }
+      },
+    }
+  }
+
+  return res
+}
diff --git a/packages/runtime-core/src/helpers/useSsrContext.ts b/packages/runtime-core/src/helpers/useSsrContext.ts
index 501a18e3bb5..3ff4a097b12 100644
--- a/packages/runtime-core/src/helpers/useSsrContext.ts
+++ b/packages/runtime-core/src/helpers/useSsrContext.ts
@@ -10,7 +10,7 @@ export const useSSRContext = <T = Record<string, any>>() => {
       __DEV__ &&
         warn(
           `Server rendering context not provided. Make sure to only call ` +
-            `useSSRContext() conditionally in the server build.`
+            `useSSRContext() conditionally in the server build.`,
         )
     }
     return ctx
diff --git a/packages/runtime-core/src/helpers/withMemo.ts b/packages/runtime-core/src/helpers/withMemo.ts
index 76b0f055f39..97fbad31fb9 100644
--- a/packages/runtime-core/src/helpers/withMemo.ts
+++ b/packages/runtime-core/src/helpers/withMemo.ts
@@ -1,11 +1,11 @@
 import { hasChanged } from '@vue/shared'
-import { currentBlock, isBlockTreeEnabled, VNode } from '../vnode'
+import { type VNode, currentBlock, isBlockTreeEnabled } from '../vnode'
 
 export function withMemo(
   memo: any[],
   render: () => VNode<any, any>,
   cache: any[],
-  index: number
+  index: number,
 ) {
   const cached = cache[index] as VNode | undefined
   if (cached && isMemoSame(cached, memo)) {
diff --git a/packages/runtime-core/src/hmr.ts b/packages/runtime-core/src/hmr.ts
index 1ce66a3da1e..b5904a4fc5b 100644
--- a/packages/runtime-core/src/hmr.ts
+++ b/packages/runtime-core/src/hmr.ts
@@ -1,11 +1,11 @@
 /* eslint-disable no-restricted-globals */
 import {
-  ConcreteComponent,
-  ComponentInternalInstance,
-  ComponentOptions,
-  InternalRenderFunction,
-  ClassComponent,
-  isClassComponent
+  type ClassComponent,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ConcreteComponent,
+  type InternalRenderFunction,
+  isClassComponent,
 } from './component'
 import { queueJob, queuePostFlushCb } from './scheduler'
 import { extend, getGlobalThis } from '@vue/shared'
@@ -31,7 +31,7 @@ if (__DEV__) {
   getGlobalThis().__VUE_HMR_RUNTIME__ = {
     createRecord: tryWrap(createRecord),
     rerender: tryWrap(rerender),
-    reload: tryWrap(reload)
+    reload: tryWrap(reload),
   } as HMRRuntime
 }
 
@@ -66,7 +66,7 @@ function createRecord(id: string, initialDef: HMRComponent): boolean {
   }
   map.set(id, {
     initialDef: normalizeClassComponent(initialDef),
-    instances: new Set()
+    instances: new Set(),
   })
   return true
 }
@@ -93,6 +93,7 @@ function rerender(id: string, newRender?: Function) {
     instance.renderCache = []
     // this flag forces child components with slot content to update
     isHmrUpdating = true
+    instance.effect.dirty = true
     instance.update()
     isHmrUpdating = false
   })
@@ -137,6 +138,7 @@ function reload(id: string, newComp: HMRComponent) {
       // 4. Force the parent instance to re-render. This will cause all updated
       // components to be unmounted and re-mounted. Queue the update so that we
       // don't end up forcing the same parent to re-render multiple times.
+      instance.parent.effect.dirty = true
       queueJob(instance.parent.update)
     } else if (instance.appContext.reload) {
       // root instance mounted via createApp() has a reload method
@@ -146,7 +148,7 @@ function reload(id: string, newComp: HMRComponent) {
       window.location.reload()
     } else {
       console.warn(
-        '[HMR] Root or manually mounted instance modified. Full reload required.'
+        '[HMR] Root or manually mounted instance modified. Full reload required.',
       )
     }
   }
@@ -155,7 +157,7 @@ function reload(id: string, newComp: HMRComponent) {
   queuePostFlushCb(() => {
     for (const instance of instances) {
       hmrDirtyComponents.delete(
-        normalizeClassComponent(instance.type as HMRComponent)
+        normalizeClassComponent(instance.type as HMRComponent),
       )
     }
   })
@@ -163,7 +165,7 @@ function reload(id: string, newComp: HMRComponent) {
 
 function updateComponentDef(
   oldComp: ComponentOptions,
-  newComp: ComponentOptions
+  newComp: ComponentOptions,
 ) {
   extend(oldComp, newComp)
   for (const key in oldComp) {
@@ -181,7 +183,7 @@ function tryWrap(fn: (id: string, arg: any) => any): Function {
       console.error(e)
       console.warn(
         `[HMR] Something went wrong during Vue component hot-reload. ` +
-          `Full reload required.`
+          `Full reload required.`,
       )
     }
   }
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 89a00886332..de02ae46d8a 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -1,45 +1,69 @@
 import {
-  VNode,
-  normalizeVNode,
-  Text,
   Comment,
-  Static,
   Fragment,
-  VNodeHook,
-  createVNode,
+  Static,
+  Text,
+  type VNode,
+  type VNodeHook,
   createTextVNode,
-  invokeVNodeHook
+  createVNode,
+  invokeVNodeHook,
+  normalizeVNode,
 } from './vnode'
 import { flushPostFlushCbs } from './scheduler'
-import { ComponentInternalInstance } from './component'
+import type { ComponentInternalInstance } from './component'
 import { invokeDirectiveHook } from './directives'
 import { warn } from './warning'
-import { PatchFlags, ShapeFlags, isReservedProp, isOn } from '@vue/shared'
-import { RendererInternals } from './renderer'
+import {
+  PatchFlags,
+  ShapeFlags,
+  includeBooleanAttr,
+  isBooleanAttr,
+  isKnownHtmlAttr,
+  isKnownSvgAttr,
+  isOn,
+  isRenderableAttrValue,
+  isReservedProp,
+  isString,
+  normalizeClass,
+  normalizeStyle,
+  stringifyStyle,
+} from '@vue/shared'
+import { type RendererInternals, needTransition } from './renderer'
 import { setRef } from './rendererTemplateRef'
 import {
-  SuspenseImpl,
-  SuspenseBoundary,
-  queueEffectWithSuspense
+  type SuspenseBoundary,
+  type SuspenseImpl,
+  queueEffectWithSuspense,
 } from './components/Suspense'
-import { TeleportImpl, TeleportVNode } from './components/Teleport'
+import type { TeleportImpl, TeleportVNode } from './components/Teleport'
 import { isAsyncWrapper } from './apiAsyncComponent'
 
 export type RootHydrateFunction = (
   vnode: VNode<Node, Element>,
-  container: (Element | ShadowRoot) & { _vnode?: VNode }
+  container: (Element | ShadowRoot) & { _vnode?: VNode },
 ) => void
 
-const enum DOMNodeTypes {
+enum DOMNodeTypes {
   ELEMENT = 1,
   TEXT = 3,
-  COMMENT = 8
+  COMMENT = 8,
 }
 
 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
@@ -50,7 +74,7 @@ const isComment = (node: Node): node is Comment =>
 // Hydration also depends on some renderer internal logic which needs to be
 // passed in via arguments.
 export function createHydrationFunctions(
-  rendererInternals: RendererInternals<Node, Element>
+  rendererInternals: RendererInternals<Node, Element>,
 ) {
   const {
     mt: mountComponent,
@@ -62,16 +86,16 @@ export function createHydrationFunctions(
       parentNode,
       remove,
       insert,
-      createComment
-    }
+      createComment,
+    },
   } = rendererInternals
 
   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.`
+            `Performing full mount instead.`,
         )
       patch(null, vnode, container)
       flushPostFlushCbs()
@@ -94,7 +118,7 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized = false
+    optimized = false,
   ): Node | null => {
     const isFragmentStart = isComment(node) && node.data === '['
     const onMismatch = () =>
@@ -104,13 +128,28 @@ export function createHydrationFunctions(
         parentComponent,
         parentSuspense,
         slotScopeIds,
-        isFragmentStart
+        isFragmentStart,
       )
 
     const { type, ref, shapeFlag, patchFlag } = vnode
     let domType = node.nodeType
     vnode.el = node
 
+    if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+      if (!('__vnode' in node)) {
+        Object.defineProperty(node, '__vnode', {
+          value: vnode,
+          enumerable: false,
+        })
+      }
+      if (!('__vueParentComponent' in node)) {
+        Object.defineProperty(node, '__vueParentComponent', {
+          value: parentComponent,
+          enumerable: false,
+        })
+      }
+    }
+
     if (patchFlag === PatchFlags.BAIL) {
       optimized = false
       vnode.dynamicChildren = null
@@ -131,13 +170,14 @@ export function createHydrationFunctions(
         } else {
           if ((node as Text).data !== vnode.children) {
             hasMismatch = true
-            __DEV__ &&
+            ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
               warn(
-                `Hydration text mismatch:` +
-                  `\n- Server rendered: ${JSON.stringify(
-                    (node as Text).data
-                  )}` +
-                  `\n- Client rendered: ${JSON.stringify(vnode.children)}`
+                `Hydration text mismatch in`,
+                node.parentNode,
+                `\n  - rendered on server: ${JSON.stringify(
+                  (node as Text).data,
+                )}` +
+                  `\n  - expected on client: ${JSON.stringify(vnode.children)}`,
               )
             ;(node as Text).data = vnode.children as string
           }
@@ -145,7 +185,16 @@ export function createHydrationFunctions(
         }
         break
       case Comment:
-        if (domType !== DOMNodeTypes.COMMENT || isFragmentStart) {
+        if (isTemplateNode(node)) {
+          nextNode = nextSibling(node)
+          // wrapped <transition appear>
+          // replace <template> node with inner child
+          replaceNode(
+            (vnode.el = node.content.firstChild!),
+            node,
+            parentComponent,
+          )
+        } else if (domType !== DOMNodeTypes.COMMENT || isFragmentStart) {
           nextNode = onMismatch()
         } else {
           nextNode = nextSibling(node)
@@ -189,16 +238,17 @@ export function createHydrationFunctions(
             parentComponent,
             parentSuspense,
             slotScopeIds,
-            optimized
+            optimized,
           )
         }
         break
       default:
         if (shapeFlag & ShapeFlags.ELEMENT) {
           if (
-            domType !== DOMNodeTypes.ELEMENT ||
-            (vnode.type as string).toLowerCase() !==
-              (node as Element).tagName.toLowerCase()
+            (domType !== DOMNodeTypes.ELEMENT ||
+              (vnode.type as string).toLowerCase() !==
+                (node as Element).tagName.toLowerCase()) &&
+            !isTemplateNode(node)
           ) {
             nextNode = onMismatch()
           } else {
@@ -208,7 +258,7 @@ export function createHydrationFunctions(
               parentComponent,
               parentSuspense,
               slotScopeIds,
-              optimized
+              optimized,
             )
           }
         } else if (shapeFlag & ShapeFlags.COMPONENT) {
@@ -217,32 +267,31 @@ export function createHydrationFunctions(
           // on its sub-tree.
           vnode.slotScopeIds = slotScopeIds
           const container = parentNode(node)!
+
+          // Locate the next node.
+          if (isFragmentStart) {
+            // If it's a fragment: since components may be async, we cannot rely
+            // on component's rendered output to determine the end of the
+            // fragment. Instead, we do a lookahead to find the end anchor node.
+            nextNode = locateClosingAnchor(node)
+          } else if (isComment(node) && node.data === 'teleport start') {
+            // #4293 #6152
+            // If a teleport is at component root, look ahead for teleport end.
+            nextNode = locateClosingAnchor(node, node.data, 'teleport end')
+          } else {
+            nextNode = nextSibling(node)
+          }
+
           mountComponent(
             vnode,
             container,
             null,
             parentComponent,
             parentSuspense,
-            isSVGContainer(container),
-            optimized
+            getContainerType(container),
+            optimized,
           )
 
-          // component may be async, so in the case of fragments we cannot rely
-          // on component's rendered output to determine the end of the fragment
-          // instead, we do a lookahead to find the end anchor node.
-          nextNode = isFragmentStart
-            ? locateClosingAsyncAnchor(node)
-            : nextSibling(node)
-
-          // #4293 teleport as component root
-          if (
-            nextNode &&
-            isComment(nextNode) &&
-            nextNode.data === 'teleport end'
-          ) {
-            nextNode = nextSibling(nextNode)
-          }
-
           // #3787
           // if component is async, it may get moved / unmounted before its
           // inner component is loaded, so we need to give it a placeholder
@@ -273,7 +322,7 @@ export function createHydrationFunctions(
               slotScopeIds,
               optimized,
               rendererInternals,
-              hydrateChildren
+              hydrateChildren,
             )
           }
         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
@@ -282,13 +331,13 @@ export function createHydrationFunctions(
             vnode,
             parentComponent,
             parentSuspense,
-            isSVGContainer(parentNode(node)!),
+            getContainerType(parentNode(node)!),
             slotScopeIds,
             optimized,
             rendererInternals,
-            hydrateNode
+            hydrateNode,
           )
-        } else if (__DEV__) {
+        } else if (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) {
           warn('Invalid HostVNode type:', type, `(${typeof type})`)
         }
     }
@@ -306,39 +355,121 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     optimized = optimized || !!vnode.dynamicChildren
-    const { type, props, patchFlag, shapeFlag, dirs } = vnode
+    const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode
     // #4006 for form elements with non-string v-model value bindings
     // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
-    const forcePatchValue = (type === 'input' && dirs) || type === 'option'
+    // #7476 <input indeterminate>
+    const forcePatch = type === 'input' || type === 'option'
     // skip props & children if this is hoisted static nodes
     // #5405 in dev, always hydrate children for HMR
-    if (__DEV__ || forcePatchValue || patchFlag !== PatchFlags.HOISTED) {
+    if (__DEV__ || forcePatch || patchFlag !== PatchFlags.HOISTED) {
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'created')
       }
+
+      // handle appear transition
+      let needCallTransitionHooks = false
+      if (isTemplateNode(el)) {
+        needCallTransitionHooks =
+          needTransition(parentSuspense, transition) &&
+          parentComponent &&
+          parentComponent.vnode.props &&
+          parentComponent.vnode.props.appear
+
+        const content = (el as HTMLTemplateElement).content
+          .firstChild as Element
+
+        if (needCallTransitionHooks) {
+          transition!.beforeEnter(content)
+        }
+
+        // replace <template> node with inner children
+        replaceNode(content, el, parentComponent)
+        vnode.el = el = content
+      }
+
+      // children
+      if (
+        shapeFlag & ShapeFlags.ARRAY_CHILDREN &&
+        // skip if element has innerHTML / textContent
+        !(props && (props.innerHTML || props.textContent))
+      ) {
+        let next = hydrateChildren(
+          el.firstChild,
+          vnode,
+          el,
+          parentComponent,
+          parentSuspense,
+          slotScopeIds,
+          optimized,
+        )
+        let hasWarned = false
+        while (next) {
+          hasMismatch = true
+          if (
+            (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+            !hasWarned
+          ) {
+            warn(
+              `Hydration children mismatch on`,
+              el,
+              `\nServer rendered element contains more child nodes than client vdom.`,
+            )
+            hasWarned = true
+          }
+          // The SSRed DOM contains more nodes than it should. Remove them.
+          const cur = next
+          next = next.nextSibling
+          remove(cur)
+        }
+      } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+        if (el.textContent !== vnode.children) {
+          hasMismatch = true
+          ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+            warn(
+              `Hydration text content mismatch on`,
+              el,
+              `\n  - rendered on server: ${el.textContent}` +
+                `\n  - expected on client: ${vnode.children as string}`,
+            )
+          el.textContent = vnode.children as string
+        }
+      }
+
       // props
       if (props) {
         if (
-          forcePatchValue ||
+          __DEV__ ||
+          forcePatch ||
           !optimized ||
-          patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.HYDRATE_EVENTS)
+          patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
         ) {
           for (const key in props) {
+            // check hydration mismatch
+            if (
+              __DEV__ &&
+              propHasMismatch(el, key, props[key], vnode, parentComponent)
+            ) {
+              hasMismatch = true
+            }
             if (
-              (forcePatchValue && key.endsWith('value')) ||
-              (isOn(key) && !isReservedProp(key))
+              (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
+                undefined,
+                parentComponent,
               )
             }
           }
@@ -350,12 +481,13 @@ export function createHydrationFunctions(
             'onClick',
             null,
             props.onClick,
-            false,
             undefined,
-            parentComponent
+            undefined,
+            parentComponent,
           )
         }
       }
+
       // vnode / directive hooks
       let vnodeHooks: VNodeHook | null | undefined
       if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
@@ -364,57 +496,19 @@ export function createHydrationFunctions(
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')
       }
-      if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {
+      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 &&
-        // skip if element has innerHTML / textContent
-        !(props && (props.innerHTML || props.textContent))
-      ) {
-        let next = hydrateChildren(
-          el.firstChild,
-          vnode,
-          el,
-          parentComponent,
-          parentSuspense,
-          slotScopeIds,
-          optimized
-        )
-        let hasWarned = false
-        while (next) {
-          hasMismatch = true
-          if (__DEV__ && !hasWarned) {
-            warn(
-              `Hydration children mismatch in <${vnode.type as string}>: ` +
-                `server rendered element contains more child nodes than client vdom.`
-            )
-            hasWarned = true
-          }
-          // The SSRed DOM contains more nodes than it should. Remove them.
-          const cur = next
-          next = next.nextSibling
-          remove(cur)
-        }
-      } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-        if (el.textContent !== vnode.children) {
-          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}`
-            )
-          el.textContent = vnode.children as string
-        }
-      }
     }
+
     return el.nextSibling
   }
 
@@ -425,7 +519,7 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ): Node | null => {
     optimized = optimized || !!parentVNode.dynamicChildren
     const children = parentVNode.children as VNode[]
@@ -442,16 +536,20 @@ export function createHydrationFunctions(
           parentComponent,
           parentSuspense,
           slotScopeIds,
-          optimized
+          optimized,
         )
       } else if (vnode.type === Text && !vnode.children) {
         continue
       } else {
         hasMismatch = true
-        if (__DEV__ && !hasWarned) {
+        if (
+          (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
+          !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
         }
@@ -463,8 +561,8 @@ export function createHydrationFunctions(
           null,
           parentComponent,
           parentSuspense,
-          isSVGContainer(container),
-          slotScopeIds
+          getContainerType(container),
+          slotScopeIds,
         )
       }
     }
@@ -477,7 +575,7 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     const { slotScopeIds: fragmentSlotScopeIds } = vnode
     if (fragmentSlotScopeIds) {
@@ -494,7 +592,7 @@ export function createHydrationFunctions(
       parentComponent,
       parentSuspense,
       slotScopeIds,
-      optimized
+      optimized,
     )
     if (next && isComment(next) && next.data === ']') {
       return nextSibling((vnode.anchor = next))
@@ -514,26 +612,26 @@ export function createHydrationFunctions(
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
     slotScopeIds: string[] | null,
-    isFragment: boolean
+    isFragment: boolean,
   ): Node | null => {
     hasMismatch = true
-    __DEV__ &&
+    ;(__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
       warn(
-        `Hydration node mismatch:\n- Client vnode:`,
-        vnode.type,
-        `\n- Server rendered DOM:`,
+        `Hydration node mismatch:\n- rendered on server:`,
         node,
         node.nodeType === DOMNodeTypes.TEXT
           ? `(text)`
           : isComment(node) && node.data === '['
-          ? `(start of fragment)`
-          : ``
+            ? `(start of fragment)`
+            : ``,
+        `\n- expected on client:`,
+        vnode.type,
       )
     vnode.el = null
 
     if (isFragment) {
       // remove excessive fragment nodes
-      const end = locateClosingAsyncAnchor(node)
+      const end = locateClosingAnchor(node)
       while (true) {
         const next = nextSibling(node)
         if (next && next !== end) {
@@ -555,19 +653,24 @@ export function createHydrationFunctions(
       next,
       parentComponent,
       parentSuspense,
-      isSVGContainer(container),
-      slotScopeIds
+      getContainerType(container),
+      slotScopeIds,
     )
     return next
   }
 
-  const locateClosingAsyncAnchor = (node: Node | null): Node | null => {
+  // looks ahead for a start and closing comment node
+  const locateClosingAnchor = (
+    node: Node | null,
+    open = '[',
+    close = ']',
+  ): Node | null => {
     let match = 0
     while (node) {
       node = nextSibling(node)
       if (node && isComment(node)) {
-        if (node.data === '[') match++
-        if (node.data === ']') {
+        if (node.data === open) match++
+        if (node.data === close) {
           if (match === 0) {
             return nextSibling(node)
           } else {
@@ -579,5 +682,179 @@ export function createHydrationFunctions(
     return node
   }
 
+  const replaceNode = (
+    newNode: Node,
+    oldNode: Node,
+    parentComponent: ComponentInternalInstance | null,
+  ): void => {
+    // replace node
+    const parentNode = oldNode.parentNode
+    if (parentNode) {
+      parentNode.replaceChild(newNode, oldNode)
+    }
+
+    // update vnode
+    let parent = parentComponent
+    while (parent) {
+      if (parent.vnode.el === oldNode) {
+        parent.vnode.el = parent.subTree.el = newNode
+      }
+      parent = parent.parent
+    }
+  }
+
+  const isTemplateNode = (node: Node): node is HTMLTemplateElement => {
+    return (
+      node.nodeType === DOMNodeTypes.ELEMENT &&
+      (node as Element).tagName.toLowerCase() === 'template'
+    )
+  }
+
   return [hydrate, hydrateNode] as const
 }
+
+/**
+ * Dev only
+ */
+function propHasMismatch(
+  el: Element,
+  key: string,
+  clientValue: any,
+  vnode: VNode,
+  instance: ComponentInternalInstance | null,
+): boolean {
+  let mismatchType: string | undefined
+  let mismatchKey: string | undefined
+  let actual: any
+  let expected: any
+  if (key === 'class') {
+    // classes might be in different order, but that doesn't affect cascade
+    // so we just need to check if the class lists contain the same classes.
+    actual = el.getAttribute('class')
+    expected = normalizeClass(clientValue)
+    if (!isSetEqual(toClassSet(actual || ''), toClassSet(expected))) {
+      mismatchType = mismatchKey = `class`
+    }
+  } else if (key === 'style') {
+    // style might be in different order, but that doesn't affect cascade
+    actual = el.getAttribute('style')
+    expected = isString(clientValue)
+      ? clientValue
+      : stringifyStyle(normalizeStyle(clientValue))
+    const actualMap = toStyleMap(actual)
+    const expectedMap = toStyleMap(expected)
+    // If `v-show=false`, `display: 'none'` should be added to expected
+    if (vnode.dirs) {
+      for (const { dir, value } of vnode.dirs) {
+        // @ts-expect-error only vShow has this internal name
+        if (dir.name === 'show' && !value) {
+          expectedMap.set('display', 'none')
+        }
+      }
+    }
+
+    const root = instance?.subTree
+    if (
+      vnode === root ||
+      (root?.type === Fragment && (root.children as VNode[]).includes(vnode))
+    ) {
+      const cssVars = instance?.getCssVars?.()
+      for (const key in cssVars) {
+        expectedMap.set(`--${key}`, String(cssVars[key]))
+      }
+    }
+
+    if (!isMapEqual(actualMap, expectedMap)) {
+      mismatchType = mismatchKey = 'style'
+    }
+  } else if (
+    (el instanceof SVGElement && isKnownSvgAttr(key)) ||
+    (el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key)))
+  ) {
+    if (isBooleanAttr(key)) {
+      actual = el.hasAttribute(key)
+      expected = includeBooleanAttr(clientValue)
+    } else if (clientValue == null) {
+      actual = el.hasAttribute(key)
+      expected = false
+    } else {
+      if (el.hasAttribute(key)) {
+        actual = el.getAttribute(key)
+      } else if (key === 'value' && el.tagName === 'TEXTAREA') {
+        // #10000 textarea.value can't be retrieved by `hasAttribute`
+        actual = (el as HTMLTextAreaElement).value
+      } else {
+        actual = false
+      }
+      expected = isRenderableAttrValue(clientValue)
+        ? String(clientValue)
+        : false
+    }
+    if (actual !== expected) {
+      mismatchType = `attribute`
+      mismatchKey = key
+    }
+  }
+
+  if (mismatchType) {
+    const format = (v: any) =>
+      v === false ? `(not rendered)` : `${mismatchKey}="${v}"`
+    const preSegment = `Hydration ${mismatchType} mismatch on`
+    const postSegment =
+      `\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.`
+    if (__TEST__) {
+      // during tests, log the full message in one single string for easier
+      // debugging.
+      warn(`${preSegment} ${el.tagName}${postSegment}`)
+    } else {
+      warn(preSegment, el, postSegment)
+    }
+    return true
+  }
+  return false
+}
+
+function toClassSet(str: string): Set<string> {
+  return new Set(str.trim().split(/\s+/))
+}
+
+function isSetEqual(a: Set<string>, b: Set<string>): boolean {
+  if (a.size !== b.size) {
+    return false
+  }
+  for (const s of a) {
+    if (!b.has(s)) {
+      return false
+    }
+  }
+  return true
+}
+
+function toStyleMap(str: string): Map<string, string> {
+  const styleMap: Map<string, string> = new Map()
+  for (const item of str.split(';')) {
+    let [key, value] = item.split(':')
+    key = key?.trim()
+    value = value?.trim()
+    if (key && value) {
+      styleMap.set(key, value)
+    }
+  }
+  return styleMap
+}
+
+function isMapEqual(a: Map<string, string>, b: Map<string, string>): boolean {
+  if (a.size !== b.size) {
+    return false
+  }
+  for (const [key, value] of a) {
+    if (value !== b.get(key)) {
+      return false
+    }
+  }
+  return true
+}
diff --git a/packages/runtime-core/src/index.ts b/packages/runtime-core/src/index.ts
index 98aee757dab..7fbe58446f7 100644
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -33,14 +33,14 @@ export {
   effectScope,
   EffectScope,
   getCurrentScope,
-  onScopeDispose
+  onScopeDispose,
 } from '@vue/reactivity'
 export { computed } from './apiComputed'
 export {
   watch,
   watchEffect,
   watchPostEffect,
-  watchSyncEffect
+  watchSyncEffect,
 } from './apiWatch'
 export {
   onBeforeMount,
@@ -54,13 +54,14 @@ export {
   onRenderTracked,
   onRenderTriggered,
   onErrorCaptured,
-  onServerPrefetch
+  onServerPrefetch,
 } from './apiLifecycle'
 export { provide, inject, hasInjectionContext } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
 export { defineAsyncComponent } from './apiAsyncComponent'
 export { useAttrs, useSlots } from './apiSetupHelpers'
+export { useModel } from './helpers/useModel'
 
 // <script setup> API ----------------------------------------------------------
 
@@ -73,7 +74,8 @@ export {
   defineSlots,
   defineModel,
   withDefaults,
-  useModel
+  type DefineProps,
+  type ModelRef,
 } from './apiSetupHelpers'
 
 /**
@@ -83,7 +85,7 @@ export {
   mergeDefaults,
   mergeModels,
   createPropsRestProxy,
-  withAsyncContext
+  withAsyncContext,
 } from './apiSetupHelpers'
 
 // Advanced API ----------------------------------------------------------------
@@ -105,7 +107,7 @@ export { KeepAlive, type KeepAliveProps } from './components/KeepAlive'
 export {
   BaseTransition,
   BaseTransitionPropsValidators,
-  type BaseTransitionProps
+  type BaseTransitionProps,
 } from './components/BaseTransition'
 // For using custom directives
 export { withDirectives } from './directives'
@@ -116,19 +118,21 @@ export { useSSRContext, ssrContextKey } from './helpers/useSsrContext'
 
 export { createRenderer, createHydrationRenderer } from './renderer'
 export { queuePostFlushCb } from './scheduler'
-export { warn } from './warning'
+import { warn as _warn } from './warning'
+export const warn = (__DEV__ ? _warn : NOOP) as typeof _warn
+
 /** @internal */
 export { assertNumber } from './warning'
 export {
   handleError,
   callWithErrorHandling,
   callWithAsyncErrorHandling,
-  ErrorCodes
+  ErrorCodes,
 } from './errorHandling'
 export {
   resolveComponent,
   resolveDirective,
-  resolveDynamicComponent
+  resolveDynamicComponent,
 } from './helpers/resolveAssets'
 // For integration with runtime compiler
 export { registerRuntimeCompiler, isRuntimeOnly } from './component'
@@ -136,17 +140,37 @@ export {
   useTransitionState,
   resolveTransitionHooks,
   setTransitionHooks,
-  getTransitionRawChildren
+  getTransitionRawChildren,
 } from './components/BaseTransition'
 export { initCustomFormatter } from './customFormatter'
 
+import { ErrorTypeStrings as _ErrorTypeStrings } from './errorHandling'
+/**
+ * Runtime error messages. Only exposed in dev or esm builds.
+ * @internal
+ */
+export const ErrorTypeStrings = (
+  __ESM_BUNDLER__ || __CJS__ || __DEV__ ? _ErrorTypeStrings : null
+) as typeof _ErrorTypeStrings
+
 // For devtools
-export { devtools, setDevtoolsHook } from './devtools'
+import {
+  type DevtoolsHook,
+  devtools as _devtools,
+  setDevtoolsHook as _setDevtoolsHook,
+} from './devtools'
+
+export const devtools = (
+  __DEV__ || __ESM_BUNDLER__ ? _devtools : undefined
+) as DevtoolsHook
+export const setDevtoolsHook = (
+  __DEV__ || __ESM_BUNDLER__ ? _setDevtoolsHook : NOOP
+) as typeof _setDevtoolsHook
 
-// Types -------------------------------------------------------------------------
+// Types -----------------------------------------------------------------------
 
-import { VNode } from './vnode'
-import { ComponentInternalInstance } from './component'
+import type { VNode } from './vnode'
+import type { ComponentInternalInstance } from './component'
 
 // Augment Ref unwrap bail types.
 declare module '@vue/reactivity' {
@@ -187,7 +211,7 @@ export type {
   DebuggerOptions,
   DebuggerEvent,
   DebuggerEventExtraInfo,
-  Raw
+  Raw,
 } from '@vue/reactivity'
 export type {
   WatchEffect,
@@ -195,7 +219,7 @@ export type {
   WatchOptionsBase,
   WatchCallback,
   WatchSource,
-  WatchStopHandle
+  WatchStopHandle,
 } from './apiWatch'
 export type { InjectionKey } from './apiInject'
 export type {
@@ -203,8 +227,10 @@ export type {
   AppConfig,
   AppContext,
   Plugin,
+  ObjectPlugin,
+  FunctionPlugin,
   CreateAppFunction,
-  OptionMergeFunction
+  OptionMergeFunction,
 } from './apiCreateApp'
 export type {
   VNode,
@@ -212,7 +238,7 @@ export type {
   VNodeTypes,
   VNodeProps,
   VNodeArrayChildren,
-  VNodeNormalizedChildren
+  VNodeNormalizedChildren,
 } from './vnode'
 export type {
   Component,
@@ -221,9 +247,10 @@ export type {
   ComponentInternalInstance,
   SetupContext,
   ComponentCustomProps,
-  AllowedComponentProps
+  AllowedComponentProps,
+  ComponentInstance,
 } from './component'
-export type { DefineComponent } from './apiDefineComponent'
+export type { DefineComponent, PublicProps } from './apiDefineComponent'
 export type {
   ComponentOptions,
   ComponentOptionsMixin,
@@ -237,13 +264,13 @@ export type {
   MethodOptions,
   ComputedOptions,
   RuntimeCompilerOptions,
-  ComponentInjectOptions
+  ComponentInjectOptions,
 } from './componentOptions'
 export type { EmitsOptions, ObjectEmitsOptions } from './componentEmits'
 export type {
   ComponentPublicInstance,
   ComponentCustomProperties,
-  CreateComponentPublicInstance
+  CreateComponentPublicInstance,
 } from './componentPublicInstance'
 export type {
   Renderer,
@@ -251,7 +278,8 @@ export type {
   RendererElement,
   HydrationRenderer,
   RendererOptions,
-  RootRenderFunction
+  RootRenderFunction,
+  ElementNamespace,
 } from './renderer'
 export type { RootHydrateFunction } from './hydration'
 export type { Slot, Slots, SlotsType } from './componentSlots'
@@ -262,7 +290,7 @@ export type {
   ComponentObjectPropsOptions,
   ExtractPropTypes,
   ExtractPublicPropTypes,
-  ExtractDefaultPropTypes
+  ExtractDefaultPropTypes,
 } from './componentProps'
 export type {
   Directive,
@@ -270,16 +298,16 @@ export type {
   DirectiveHook,
   ObjectDirective,
   FunctionDirective,
-  DirectiveArguments
+  DirectiveArguments,
 } from './directives'
 export type { SuspenseBoundary } from './components/Suspense'
 export type {
   TransitionState,
-  TransitionHooks
+  TransitionHooks,
 } from './components/BaseTransition'
 export type {
   AsyncComponentOptions,
-  AsyncComponentLoader
+  AsyncComponentLoader,
 } from './apiAsyncComponent'
 export type { HMRRuntime } from './hmr'
 
@@ -294,7 +322,7 @@ export {
   withCtx,
   pushScopeId,
   popScopeId,
-  withScopeId
+  withScopeId,
 } from './componentRenderContext'
 export { renderList } from './helpers/renderList'
 export { toHandlers } from './helpers/toHandlers'
@@ -310,7 +338,7 @@ export {
   createStaticVNode,
   createElementVNode,
   createElementBlock,
-  guardReactiveProps
+  guardReactiveProps,
 } from './vnode'
 export {
   toDisplayString,
@@ -319,7 +347,7 @@ export {
   toHandlerKey,
   normalizeProps,
   normalizeClass,
-  normalizeStyle
+  normalizeStyle,
 } from '@vue/shared'
 
 // For test-utils
@@ -341,7 +369,7 @@ const _ssrUtils = {
   renderComponentRoot,
   setCurrentRenderingInstance,
   isVNode,
-  normalizeVNode
+  normalizeVNode,
 }
 
 /**
@@ -352,18 +380,19 @@ export const ssrUtils = (__SSR__ ? _ssrUtils : null) as typeof _ssrUtils
 
 // 2.x COMPAT ------------------------------------------------------------------
 
-export { DeprecationTypes } from './compat/compatConfig'
+import { DeprecationTypes as _DeprecationTypes } from './compat/compatConfig'
 export type { CompatVue } from './compat/global'
 export type { LegacyConfig } from './compat/globalConfig'
 
 import { warnDeprecation } from './compat/compatConfig'
 import { createCompatVue } from './compat/global'
 import {
-  isCompatEnabled,
   checkCompatEnabled,
-  softAssertCompatEnabled
+  isCompatEnabled,
+  softAssertCompatEnabled,
 } from './compat/compatConfig'
 import { resolveFilter as _resolveFilter } from './helpers/resolveAssets'
+import { NOOP } from '@vue/shared'
 
 /**
  * @internal only exposed in compat builds
@@ -375,7 +404,7 @@ const _compatUtils = {
   createCompatVue,
   isCompatEnabled,
   checkCompatEnabled,
-  softAssertCompatEnabled
+  softAssertCompatEnabled,
 }
 
 /**
@@ -384,3 +413,7 @@ const _compatUtils = {
 export const compatUtils = (
   __COMPAT__ ? _compatUtils : null
 ) as typeof _compatUtils
+
+export const DeprecationTypes = (
+  __COMPAT__ ? _DeprecationTypes : null
+) as typeof _DeprecationTypes
diff --git a/packages/runtime-core/src/profiling.ts b/packages/runtime-core/src/profiling.ts
index 9b0f9852622..f87b7f472a9 100644
--- a/packages/runtime-core/src/profiling.ts
+++ b/packages/runtime-core/src/profiling.ts
@@ -1,5 +1,8 @@
 /* eslint-disable no-restricted-globals */
-import { ComponentInternalInstance, formatComponentName } from './component'
+import {
+  type ComponentInternalInstance,
+  formatComponentName,
+} from './component'
 import { devtoolsPerfEnd, devtoolsPerfStart } from './devtools'
 
 let supported: boolean
@@ -7,7 +10,7 @@ let perf: Performance
 
 export function startMeasure(
   instance: ComponentInternalInstance,
-  type: string
+  type: string,
 ) {
   if (instance.appContext.config.performance && isSupported()) {
     perf.mark(`vue-${type}-${instance.uid}`)
@@ -26,7 +29,7 @@ export function endMeasure(instance: ComponentInternalInstance, type: string) {
     perf.measure(
       `<${formatComponentName(instance, instance.type)}> ${type}`,
       startTag,
-      endTag
+      endTag,
     )
     perf.clearMarks(startTag)
     perf.clearMarks(endTag)
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index 383e17fb0f5..c7dfbf45dd2 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -1,77 +1,78 @@
 import {
-  Text,
-  Fragment,
   Comment,
+  Fragment,
+  Static,
+  Text,
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeHook,
+  type VNodeProps,
   cloneIfMounted,
-  normalizeVNode,
-  VNode,
-  VNodeArrayChildren,
   createVNode,
+  invokeVNodeHook,
   isSameVNodeType,
-  Static,
-  VNodeHook,
-  VNodeProps,
-  invokeVNodeHook
+  normalizeVNode,
 } from './vnode'
 import {
-  ComponentInternalInstance,
-  ComponentOptions,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type Data,
   createComponentInstance,
-  Data,
-  setupComponent
+  setupComponent,
 } from './component'
 import {
   filterSingleRoot,
   renderComponentRoot,
   shouldUpdateComponent,
-  updateHOCHostEl
+  updateHOCHostEl,
 } from './componentRenderUtils'
 import {
-  EMPTY_OBJ,
   EMPTY_ARR,
-  isReservedProp,
+  EMPTY_OBJ,
+  NOOP,
   PatchFlags,
   ShapeFlags,
-  NOOP,
+  getGlobalThis,
   invokeArrayFns,
   isArray,
-  getGlobalThis
+  isReservedProp,
 } from '@vue/shared'
 import {
-  queueJob,
-  queuePostFlushCb,
+  type SchedulerJob,
   flushPostFlushCbs,
-  invalidateJob,
   flushPreFlushCbs,
-  SchedulerJob
+  invalidateJob,
+  queueJob,
+  queuePostFlushCb,
 } from './scheduler'
-import { pauseTracking, resetTracking, ReactiveEffect } from '@vue/reactivity'
+import { ReactiveEffect, pauseTracking, resetTracking } from '@vue/reactivity'
 import { updateProps } from './componentProps'
 import { updateSlots } from './componentSlots'
-import { pushWarningContext, popWarningContext, warn } from './warning'
-import { createAppAPI, CreateAppFunction } from './apiCreateApp'
+import { popWarningContext, pushWarningContext, warn } from './warning'
+import { type CreateAppFunction, createAppAPI } from './apiCreateApp'
 import { setRef } from './rendererTemplateRef'
 import {
-  SuspenseBoundary,
+  type SuspenseBoundary,
+  type SuspenseImpl,
   queueEffectWithSuspense,
-  SuspenseImpl
 } from './components/Suspense'
-import { TeleportImpl, TeleportVNode } from './components/Teleport'
-import { isKeepAlive, KeepAliveContext } from './components/KeepAlive'
-import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr'
-import { createHydrationFunctions, RootHydrateFunction } from './hydration'
+import type { TeleportImpl, TeleportVNode } from './components/Teleport'
+import { type KeepAliveContext, isKeepAlive } from './components/KeepAlive'
+import { isHmrUpdating, registerHMR, unregisterHMR } from './hmr'
+import { type RootHydrateFunction, createHydrationFunctions } from './hydration'
 import { invokeDirectiveHook } from './directives'
-import { startMeasure, endMeasure } from './profiling'
+import { endMeasure, startMeasure } from './profiling'
 import {
   devtoolsComponentAdded,
   devtoolsComponentRemoved,
   devtoolsComponentUpdated,
-  setDevtoolsHook
+  setDevtoolsHook,
 } from './devtools'
 import { initFeatureFlags } from './featureFlags'
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { isCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
+import type { TransitionHooks } from './components/BaseTransition'
 
 export interface Renderer<HostElement = RendererElement> {
   render: RootRenderFunction<HostElement>
@@ -82,34 +83,36 @@ 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<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 > {
   patchProp(
     el: HostElement,
     key: string,
     prevValue: any,
     nextValue: any,
-    isSVG?: boolean,
+    namespace?: ElementNamespace,
     prevChildren?: VNode<HostNode, HostElement>[],
     parentComponent?: ComponentInternalInstance | null,
     parentSuspense?: SuspenseBoundary | null,
-    unmountChildren?: UnmountChildrenFn
+    unmountChildren?: UnmountChildrenFn,
   ): void
   insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
   remove(el: HostNode): void
   createElement(
     type: string,
-    isSVG?: boolean,
+    namespace?: ElementNamespace,
     isCustomizedBuiltIn?: string,
-    vnodeProps?: (VNodeProps & { [key: string]: any }) | null
+    vnodeProps?: (VNodeProps & { [key: string]: any }) | null,
   ): HostElement
   createText(text: string): HostNode
   createComment(text: string): HostNode
@@ -124,9 +127,9 @@ export interface RendererOptions<
     content: string,
     parent: HostElement,
     anchor: HostNode | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     start?: HostNode | null,
-    end?: HostNode | null
+    end?: HostNode | null,
   ): [HostNode, HostNode]
 }
 
@@ -145,7 +148,7 @@ export interface RendererElement extends RendererNode {}
 // to optimize bundle size.
 export interface RendererInternals<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 > {
   p: PatchFn
   um: UnmountFn
@@ -169,9 +172,9 @@ type PatchFn = (
   anchor?: RendererNode | null,
   parentComponent?: ComponentInternalInstance | null,
   parentSuspense?: SuspenseBoundary | null,
-  isSVG?: boolean,
+  namespace?: ElementNamespace,
   slotScopeIds?: string[] | null,
-  optimized?: boolean
+  optimized?: boolean,
 ) => void
 
 type MountChildrenFn = (
@@ -180,10 +183,10 @@ type MountChildrenFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
   optimized: boolean,
-  start?: number
+  start?: number,
 ) => void
 
 type PatchChildrenFn = (
@@ -193,9 +196,9 @@ type PatchChildrenFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
+  namespace: ElementNamespace,
   slotScopeIds: string[] | null,
-  optimized: boolean
+  optimized: boolean,
 ) => void
 
 type PatchBlockChildrenFn = (
@@ -204,8 +207,8 @@ type PatchBlockChildrenFn = (
   fallbackContainer: RendererElement,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
-  slotScopeIds: string[] | null
+  namespace: ElementNamespace,
+  slotScopeIds: string[] | null,
 ) => void
 
 type MoveFn = (
@@ -213,7 +216,7 @@ type MoveFn = (
   container: RendererElement,
   anchor: RendererNode | null,
   type: MoveType,
-  parentSuspense?: SuspenseBoundary | null
+  parentSuspense?: SuspenseBoundary | null,
 ) => void
 
 type NextFn = (vnode: VNode) => RendererNode | null
@@ -223,7 +226,7 @@ type UnmountFn = (
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
   doRemove?: boolean,
-  optimized?: boolean
+  optimized?: boolean,
 ) => void
 
 type RemoveFn = (vnode: VNode) => void
@@ -234,7 +237,7 @@ type UnmountChildrenFn = (
   parentSuspense: SuspenseBoundary | null,
   doRemove?: boolean,
   optimized?: boolean,
-  start?: number
+  start?: number,
 ) => void
 
 export type MountComponentFn = (
@@ -243,15 +246,15 @@ export type MountComponentFn = (
   anchor: RendererNode | null,
   parentComponent: ComponentInternalInstance | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
-  optimized: boolean
+  namespace: ElementNamespace,
+  optimized: boolean,
 ) => void
 
 type ProcessTextOrCommentFn = (
   n1: VNode | null,
   n2: VNode,
   container: RendererElement,
-  anchor: RendererNode | null
+  anchor: RendererNode | null,
 ) => void
 
 export type SetupRenderEffectFn = (
@@ -260,14 +263,14 @@ export type SetupRenderEffectFn = (
   container: RendererElement,
   anchor: RendererNode | null,
   parentSuspense: SuspenseBoundary | null,
-  isSVG: boolean,
-  optimized: boolean
+  namespace: ElementNamespace,
+  optimized: boolean,
 ) => void
 
-export const enum MoveType {
+export enum MoveType {
   ENTER,
   LEAVE,
-  REORDER
+  REORDER,
 }
 
 export const queuePostRenderEffect = __FEATURE_SUSPENSE__
@@ -295,7 +298,7 @@ export const queuePostRenderEffect = __FEATURE_SUSPENSE__
  */
 export function createRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 >(options: RendererOptions<HostNode, HostElement>) {
   return baseCreateRenderer<HostNode, HostElement>(options)
 }
@@ -304,7 +307,7 @@ export function createRenderer<
 // Hydration logic is only used when calling this function, making it
 // tree-shakable.
 export function createHydrationRenderer(
-  options: RendererOptions<Node, Element>
+  options: RendererOptions<Node, Element>,
 ) {
   return baseCreateRenderer(options, createHydrationFunctions)
 }
@@ -312,19 +315,19 @@ export function createHydrationRenderer(
 // overload 1: no hydration
 function baseCreateRenderer<
   HostNode = RendererNode,
-  HostElement = RendererElement
+  HostElement = RendererElement,
 >(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>
 
 // overload 2: with hydration
 function baseCreateRenderer(
   options: RendererOptions<Node, Element>,
-  createHydrationFns: typeof createHydrationFunctions
+  createHydrationFns: typeof createHydrationFunctions,
 ): HydrationRenderer
 
 // implementation
 function baseCreateRenderer(
   options: RendererOptions,
-  createHydrationFns?: typeof createHydrationFunctions
+  createHydrationFns?: typeof createHydrationFunctions,
 ): any {
   // compile-time feature flags check
   if (__ESM_BUNDLER__ && !__TEST__) {
@@ -349,7 +352,7 @@ function baseCreateRenderer(
     parentNode: hostParentNode,
     nextSibling: hostNextSibling,
     setScopeId: hostSetScopeId = NOOP,
-    insertStaticContent: hostInsertStaticContent
+    insertStaticContent: hostInsertStaticContent,
   } = options
 
   // Note: functions inside this closure should use `const xxx = () => {}`
@@ -361,9 +364,9 @@ function baseCreateRenderer(
     anchor = null,
     parentComponent = null,
     parentSuspense = null,
-    isSVG = false,
+    namespace = undefined,
     slotScopeIds = null,
-    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
+    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren,
   ) => {
     if (n1 === n2) {
       return
@@ -391,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:
@@ -404,9 +407,9 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         break
       default:
@@ -418,9 +421,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else if (shapeFlag & ShapeFlags.COMPONENT) {
           processComponent(
@@ -430,9 +433,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else if (shapeFlag & ShapeFlags.TELEPORT) {
           ;(type as typeof TeleportImpl).process(
@@ -442,10 +445,10 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized,
-            internals
+            internals,
           )
         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
           ;(type as typeof SuspenseImpl).process(
@@ -455,10 +458,10 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized,
-            internals
+            internals,
           )
         } else if (__DEV__) {
           warn('Invalid VNode type:', type, `(${typeof type})`)
@@ -476,7 +479,7 @@ function baseCreateRenderer(
       hostInsert(
         (n2.el = hostCreateText(n2.children as string)),
         container,
-        anchor
+        anchor,
       )
     } else {
       const el = (n2.el = n1.el!)
@@ -490,13 +493,13 @@ function baseCreateRenderer(
     n1,
     n2,
     container,
-    anchor
+    anchor,
   ) => {
     if (n1 == null) {
       hostInsert(
         (n2.el = hostCreateComment((n2.children as string) || '')),
         container,
-        anchor
+        anchor,
       )
     } else {
       // there's no support for dynamic comments
@@ -508,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.
@@ -516,9 +519,9 @@ function baseCreateRenderer(
       n2.children as string,
       container,
       anchor,
-      isSVG,
+      namespace,
       n2.el,
-      n2.anchor
+      n2.anchor,
     )
   }
 
@@ -529,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) {
@@ -541,7 +544,7 @@ function baseCreateRenderer(
         n2.children as string,
         container,
         anchor,
-        isSVG
+        namespace,
       )
     } else {
       n2.el = n1.el
@@ -552,7 +555,7 @@ function baseCreateRenderer(
   const moveStaticNode = (
     { el, anchor }: VNode,
     container: RendererElement,
-    nextSibling: RendererNode | null
+    nextSibling: RendererNode | null,
   ) => {
     let next
     while (el && el !== anchor) {
@@ -580,11 +583,16 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    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,
@@ -592,9 +600,9 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     } else {
       patchElement(
@@ -602,9 +610,9 @@ function baseCreateRenderer(
         n2,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
   }
@@ -615,19 +623,19 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    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
+      props,
     )
 
     // mount children first, since some props may rely on child content
@@ -641,9 +649,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG && type !== 'foreignObject',
+        resolveChildrenNamespace(vnode, namespace),
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
 
@@ -661,11 +669,11 @@ function baseCreateRenderer(
             key,
             null,
             props[key],
-            isSVG,
+            namespace,
             vnode.children as VNode[],
             parentComponent,
             parentSuspense,
-            unmountChildren
+            unmountChildren,
           )
         }
       }
@@ -679,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)
@@ -689,11 +697,11 @@ function baseCreateRenderer(
     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
       Object.defineProperty(el, '__vnode', {
         value: vnode,
-        enumerable: false
+        enumerable: false,
       })
       Object.defineProperty(el, '__vueParentComponent', {
         value: parentComponent,
-        enumerable: false
+        enumerable: false,
       })
     }
     if (dirs) {
@@ -701,10 +709,7 @@ function baseCreateRenderer(
     }
     // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
     // #1689 For inside suspense + suspense resolved case, just call it
-    const needCallTransitionHooks =
-      (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
-      transition &&
-      !transition.persisted
+    const needCallTransitionHooks = needTransition(parentSuspense, transition)
     if (needCallTransitionHooks) {
       transition!.beforeEnter(el)
     }
@@ -727,7 +732,7 @@ function baseCreateRenderer(
     vnode: VNode,
     scopeId: string | null,
     slotScopeIds: string[] | null,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent: ComponentInternalInstance | null,
   ) => {
     if (scopeId) {
       hostSetScopeId(el, scopeId)
@@ -754,7 +759,7 @@ function baseCreateRenderer(
           parentVNode,
           parentVNode.scopeId,
           parentVNode.slotScopeIds,
-          parentComponent.parent
+          parentComponent.parent,
         )
       }
     }
@@ -766,10 +771,10 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds,
     optimized,
-    start = 0
+    start = 0,
   ) => {
     for (let i = start; i < children.length; i++) {
       const child = (children[i] = optimized
@@ -782,9 +787,9 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
   }
@@ -794,9 +799,9 @@ function baseCreateRenderer(
     n2: VNode,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     const el = (n2.el = n1.el!)
     let { patchFlag, dynamicChildren, dirs } = n2
@@ -824,7 +829,6 @@ function baseCreateRenderer(
       dynamicChildren = null
     }
 
-    const areChildrenSVG = isSVG && n2.type !== 'foreignObject'
     if (dynamicChildren) {
       patchBlockChildren(
         n1.dynamicChildren!,
@@ -832,8 +836,8 @@ function baseCreateRenderer(
         el,
         parentComponent,
         parentSuspense,
-        areChildrenSVG,
-        slotScopeIds
+        resolveChildrenNamespace(n2, namespace),
+        slotScopeIds,
       )
       if (__DEV__) {
         // necessary for HMR
@@ -848,9 +852,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        areChildrenSVG,
+        resolveChildrenNamespace(n2, namespace),
         slotScopeIds,
-        false
+        false,
       )
     }
 
@@ -868,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
@@ -905,11 +909,11 @@ function baseCreateRenderer(
                 key,
                 prev,
                 next,
-                isSVG,
+                namespace,
                 n1.children as VNode[],
                 parentComponent,
                 parentSuspense,
-                unmountChildren
+                unmountChildren,
               )
             }
           }
@@ -932,7 +936,7 @@ function baseCreateRenderer(
         newProps,
         parentComponent,
         parentSuspense,
-        isSVG
+        namespace,
       )
     }
 
@@ -951,8 +955,8 @@ function baseCreateRenderer(
     fallbackContainer,
     parentComponent,
     parentSuspense,
-    isSVG,
-    slotScopeIds
+    namespace: ElementNamespace,
+    slotScopeIds,
   ) => {
     for (let i = 0; i < newChildren.length; i++) {
       const oldVNode = oldChildren[i]
@@ -981,9 +985,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        true
+        true,
       )
     }
   }
@@ -995,7 +999,7 @@ function baseCreateRenderer(
     newProps: Data,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean
+    namespace: ElementNamespace,
   ) => {
     if (oldProps !== newProps) {
       if (oldProps !== EMPTY_OBJ) {
@@ -1006,11 +1010,11 @@ function baseCreateRenderer(
               key,
               oldProps[key],
               null,
-              isSVG,
+              namespace,
               vnode.children as VNode[],
               parentComponent,
               parentSuspense,
-              unmountChildren
+              unmountChildren,
             )
           }
         }
@@ -1027,16 +1031,16 @@ function baseCreateRenderer(
             key,
             prev,
             next,
-            isSVG,
+            namespace,
             vnode.children as VNode[],
             parentComponent,
             parentSuspense,
-            unmountChildren
+            unmountChildren,
           )
         }
       }
       if ('value' in newProps) {
-        hostPatchProp(el, 'value', oldProps.value, newProps.value)
+        hostPatchProp(el, 'value', oldProps.value, newProps.value, namespace)
       }
     }
   }
@@ -1048,9 +1052,9 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))!
     const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''))!
@@ -1082,14 +1086,18 @@ function baseCreateRenderer(
       // since they are either generated by the compiler, or implicitly created
       // from arrays.
       mountChildren(
-        n2.children as VNodeArrayChildren,
+        // #10007
+        // such fragment like `<></>` will be compiled into
+        // a fragment which doesn't have a children.
+        // In this case fallback to an empty array
+        (n2.children || []) as VNodeArrayChildren,
         container,
         fragmentEndAnchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     } else {
       if (
@@ -1108,8 +1116,8 @@ function baseCreateRenderer(
           container,
           parentComponent,
           parentSuspense,
-          isSVG,
-          slotScopeIds
+          namespace,
+          slotScopeIds,
         )
         if (__DEV__) {
           // necessary for HMR
@@ -1136,9 +1144,9 @@ function baseCreateRenderer(
           fragmentEndAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
       }
     }
@@ -1151,9 +1159,9 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     n2.slotScopeIds = slotScopeIds
     if (n1 == null) {
@@ -1162,8 +1170,8 @@ function baseCreateRenderer(
           n2,
           container,
           anchor,
-          isSVG,
-          optimized
+          namespace,
+          optimized,
         )
       } else {
         mountComponent(
@@ -1172,8 +1180,8 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
-          optimized
+          namespace,
+          optimized,
         )
       }
     } else {
@@ -1187,8 +1195,8 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
-    optimized
+    namespace: ElementNamespace,
+    optimized,
   ) => {
     // 2.x compat may pre-create the component instance before actually
     // mounting
@@ -1199,7 +1207,7 @@ function baseCreateRenderer(
       (initialVNode.component = createComponentInstance(
         initialVNode,
         parentComponent,
-        parentSuspense
+        parentSuspense,
       ))
 
     if (__DEV__ && instance.type.__hmrId) {
@@ -1238,19 +1246,18 @@ function baseCreateRenderer(
         const placeholder = (instance.subTree = createVNode(Comment))
         processCommentNode(null, placeholder, container!, anchor)
       }
-      return
+    } else {
+      setupRenderEffect(
+        instance,
+        initialVNode,
+        container,
+        anchor,
+        parentSuspense,
+        namespace,
+        optimized,
+      )
     }
 
-    setupRenderEffect(
-      instance,
-      initialVNode,
-      container,
-      anchor,
-      parentSuspense,
-      isSVG,
-      optimized
-    )
-
     if (__DEV__) {
       popWarningContext()
       endMeasure(instance, `mount`)
@@ -1282,6 +1289,7 @@ function baseCreateRenderer(
         // double updating the same child component in the same flush.
         invalidateJob(instance.update)
         // instance.update is the reactive effect.
+        instance.effect.dirty = true
         instance.update()
       }
     } else {
@@ -1297,8 +1305,8 @@ function baseCreateRenderer(
     container,
     anchor,
     parentSuspense,
-    isSVG,
-    optimized
+    namespace: ElementNamespace,
+    optimized,
   ) => {
     const componentUpdateFn = () => {
       if (!instance.isMounted) {
@@ -1345,7 +1353,7 @@ function baseCreateRenderer(
               instance.subTree,
               instance,
               parentSuspense,
-              null
+              null,
             )
             if (__DEV__) {
               endMeasure(instance, `hydrate`)
@@ -1358,7 +1366,7 @@ function baseCreateRenderer(
               // which means it won't track dependencies - but it's ok because
               // a server-rendered async wrapper is already in resolved state
               // and it will never need to change.
-              () => !instance.isUnmounted && hydrateSubTree()
+              () => !instance.isUnmounted && hydrateSubTree(),
             )
           } else {
             hydrateSubTree()
@@ -1381,7 +1389,7 @@ function baseCreateRenderer(
             anchor,
             instance,
             parentSuspense,
-            isSVG
+            namespace,
           )
           if (__DEV__) {
             endMeasure(instance, `patch`)
@@ -1400,7 +1408,7 @@ function baseCreateRenderer(
           const scopedInitialVNode = initialVNode
           queuePostRenderEffect(
             () => invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode),
-            parentSuspense
+            parentSuspense,
           )
         }
         if (
@@ -1409,7 +1417,7 @@ function baseCreateRenderer(
         ) {
           queuePostRenderEffect(
             () => instance.emit('hook:mounted'),
-            parentSuspense
+            parentSuspense,
           )
         }
 
@@ -1429,7 +1437,7 @@ function baseCreateRenderer(
           ) {
             queuePostRenderEffect(
               () => instance.emit('hook:activated'),
-              parentSuspense
+              parentSuspense,
             )
           }
         }
@@ -1442,10 +1450,32 @@ function baseCreateRenderer(
         // #2458: deference mount-only object parameters to prevent memleaks
         initialVNode = container = anchor = null as any
       } else {
+        let { next, bu, u, parent, vnode } = instance
+
+        if (__FEATURE_SUSPENSE__) {
+          const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance)
+          // we are trying to update some async comp before hydration
+          // this will cause crash because we don't know the root node yet
+          if (nonHydratedAsyncRoot) {
+            // only sync the properties and abort the rest of operations
+            if (next) {
+              next.el = vnode.el
+              updateComponentPreRender(instance, next, optimized)
+            }
+            // and continue the rest of operations once the deps are resolved
+            nonHydratedAsyncRoot.asyncDep!.then(() => {
+              // the instance may be destroyed during the time period
+              if (!instance.isUnmounted) {
+                componentUpdateFn()
+              }
+            })
+            return
+          }
+        }
+
         // updateComponent
         // This is triggered by mutation of component's own state (next: null)
         // OR parent calling processComponent (next: VNode)
-        let { next, bu, u, parent, vnode } = instance
         let originNext = next
         let vnodeHook: VNodeHook | null | undefined
         if (__DEV__) {
@@ -1500,7 +1530,7 @@ function baseCreateRenderer(
           getNextHostNode(prevTree),
           instance,
           parentSuspense,
-          isSVG
+          namespace,
         )
         if (__DEV__) {
           endMeasure(instance, `patch`)
@@ -1520,7 +1550,7 @@ function baseCreateRenderer(
         if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
           queuePostRenderEffect(
             () => invokeVNodeHook(vnodeHook!, parent, next!, vnode),
-            parentSuspense
+            parentSuspense,
           )
         }
         if (
@@ -1529,7 +1559,7 @@ function baseCreateRenderer(
         ) {
           queuePostRenderEffect(
             () => instance.emit('hook:updated'),
-            parentSuspense
+            parentSuspense,
           )
         }
 
@@ -1546,11 +1576,16 @@ function baseCreateRenderer(
     // create reactive effect for rendering
     const effect = (instance.effect = new ReactiveEffect(
       componentUpdateFn,
+      NOOP,
       () => queueJob(update),
-      instance.scope // track it in component's effect scope
+      instance.scope, // track it in component's effect scope
     ))
 
-    const update: SchedulerJob = (instance.update = () => effect.run())
+    const update: SchedulerJob = (instance.update = () => {
+      if (effect.dirty) {
+        effect.run()
+      }
+    })
     update.id = instance.uid
     // allowRecurse
     // #1801, #2043 component render effects should allow recursive updates
@@ -1572,7 +1607,7 @@ function baseCreateRenderer(
   const updateComponentPreRender = (
     instance: ComponentInternalInstance,
     nextVNode: VNode,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     nextVNode.component = instance
     const prevProps = instance.vnode.props
@@ -1584,7 +1619,7 @@ function baseCreateRenderer(
     pauseTracking()
     // props update may have triggered pre-flush watchers.
     // flush them before the render update.
-    flushPreFlushCbs()
+    flushPreFlushCbs(instance)
     resetTracking()
   }
 
@@ -1595,9 +1630,9 @@ function baseCreateRenderer(
     anchor,
     parentComponent,
     parentSuspense,
-    isSVG,
+    namespace: ElementNamespace,
     slotScopeIds,
-    optimized = false
+    optimized = false,
   ) => {
     const c1 = n1 && n1.children
     const prevShapeFlag = n1 ? n1.shapeFlag : 0
@@ -1616,9 +1651,9 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         return
       } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
@@ -1630,9 +1665,9 @@ function baseCreateRenderer(
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
         return
       }
@@ -1659,9 +1694,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else {
           // no new children, just unmount old
@@ -1681,9 +1716,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         }
       }
@@ -1697,9 +1732,9 @@ function baseCreateRenderer(
     anchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     c1 = c1 || EMPTY_ARR
     c2 = c2 || EMPTY_ARR
@@ -1718,9 +1753,9 @@ function baseCreateRenderer(
         null,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
-        optimized
+        optimized,
       )
     }
     if (oldLength > newLength) {
@@ -1731,7 +1766,7 @@ function baseCreateRenderer(
         parentSuspense,
         true,
         false,
-        commonLength
+        commonLength,
       )
     } else {
       // mount new
@@ -1741,10 +1776,10 @@ function baseCreateRenderer(
         anchor,
         parentComponent,
         parentSuspense,
-        isSVG,
+        namespace,
         slotScopeIds,
         optimized,
-        commonLength
+        commonLength,
       )
     }
   }
@@ -1757,9 +1792,9 @@ function baseCreateRenderer(
     parentAnchor: RendererNode | null,
     parentComponent: ComponentInternalInstance | null,
     parentSuspense: SuspenseBoundary | null,
-    isSVG: boolean,
+    namespace: ElementNamespace,
     slotScopeIds: string[] | null,
-    optimized: boolean
+    optimized: boolean,
   ) => {
     let i = 0
     const l2 = c2.length
@@ -1782,9 +1817,9 @@ function baseCreateRenderer(
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
       } else {
         break
@@ -1808,9 +1843,9 @@ function baseCreateRenderer(
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
-          optimized
+          optimized,
         )
       } else {
         break
@@ -1840,9 +1875,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
           i++
         }
@@ -1882,7 +1917,7 @@ function baseCreateRenderer(
             warn(
               `Duplicate keys found during update:`,
               JSON.stringify(nextChild.key),
-              `Make sure keys are unique.`
+              `Make sure keys are unique.`,
             )
           }
           keyToNewIndexMap.set(nextChild.key, i)
@@ -1943,9 +1978,9 @@ function baseCreateRenderer(
             null,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
           patched++
         }
@@ -1972,9 +2007,9 @@ function baseCreateRenderer(
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
-            optimized
+            optimized,
           )
         } else if (moved) {
           // move if:
@@ -1995,7 +2030,7 @@ function baseCreateRenderer(
     container,
     anchor,
     moveType,
-    parentSuspense = null
+    parentSuspense = null,
   ) => {
     const { el, type, transition, children, shapeFlag } = vnode
     if (shapeFlag & ShapeFlags.COMPONENT) {
@@ -2062,7 +2097,7 @@ function baseCreateRenderer(
     parentComponent,
     parentSuspense,
     doRemove = false,
-    optimized = false
+    optimized = false,
   ) => {
     const {
       type,
@@ -2072,7 +2107,7 @@ function baseCreateRenderer(
       dynamicChildren,
       shapeFlag,
       patchFlag,
-      dirs
+      dirs,
     } = vnode
     // unset ref
     if (ref != null) {
@@ -2114,7 +2149,7 @@ function baseCreateRenderer(
           parentSuspense,
           optimized,
           internals,
-          doRemove
+          doRemove,
         )
       } else if (
         dynamicChildren &&
@@ -2128,7 +2163,7 @@ function baseCreateRenderer(
           parentComponent,
           parentSuspense,
           false,
-          true
+          true,
         )
       } else if (
         (type === Fragment &&
@@ -2224,7 +2259,7 @@ function baseCreateRenderer(
   const unmountComponent = (
     instance: ComponentInternalInstance,
     parentSuspense: SuspenseBoundary | null,
-    doRemove?: boolean
+    doRemove?: boolean,
   ) => {
     if (__DEV__ && instance.type.__hmrId) {
       unregisterHMR(instance)
@@ -2264,7 +2299,7 @@ function baseCreateRenderer(
     ) {
       queuePostRenderEffect(
         () => instance.emit('hook:destroyed'),
-        parentSuspense
+        parentSuspense,
       )
     }
     queuePostRenderEffect(() => {
@@ -2300,7 +2335,7 @@ function baseCreateRenderer(
     parentSuspense,
     doRemove = false,
     optimized = false,
-    start = 0
+    start = 0,
   ) => {
     for (let i = start; i < children.length; i++) {
       unmount(children[i], parentComponent, parentSuspense, doRemove, optimized)
@@ -2317,16 +2352,29 @@ function baseCreateRenderer(
     return hostNextSibling((vnode.anchor || vnode.el)!)
   }
 
-  const render: RootRenderFunction = (vnode, container, isSVG) => {
+  let isFlushing = false
+  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,
+      )
+    }
+    if (!isFlushing) {
+      isFlushing = true
+      flushPreFlushCbs()
+      flushPostFlushCbs()
+      isFlushing = false
     }
-    flushPreFlushCbs()
-    flushPostFlushCbs()
     container._vnode = vnode
   }
 
@@ -2340,31 +2388,56 @@ function baseCreateRenderer(
     pc: patchChildren,
     pbc: patchBlockChildren,
     n: getNextHostNode,
-    o: options
+    o: options,
   }
 
   let hydrate: ReturnType<typeof createHydrationFunctions>[0] | undefined
   let hydrateNode: ReturnType<typeof createHydrationFunctions>[1] | undefined
   if (createHydrationFns) {
     ;[hydrate, hydrateNode] = createHydrationFns(
-      internals as RendererInternals<Node, Element>
+      internals as RendererInternals<Node, Element>,
     )
   }
 
   return {
     render,
     hydrate,
-    createApp: createAppAPI(render, hydrate)
+    createApp: createAppAPI(render, hydrate),
   }
 }
 
+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
+  allowed: boolean,
 ) {
   effect.allowRecurse = update.allowRecurse = allowed
 }
 
+export function needTransition(
+  parentSuspense: SuspenseBoundary | null,
+  transition: TransitionHooks | null,
+) {
+  return (
+    (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
+    transition &&
+    !transition.persisted
+  )
+}
+
 /**
  * #1156
  * When a component is HMR-enabled, we need to make sure that all static nodes
@@ -2386,7 +2459,7 @@ export function traverseStaticChildren(n1: VNode, n2: VNode, shallow = false) {
       const c1 = ch1[i] as VNode
       let c2 = ch2[i] as VNode
       if (c2.shapeFlag & ShapeFlags.ELEMENT && !c2.dynamicChildren) {
-        if (c2.patchFlag <= 0 || c2.patchFlag === PatchFlags.HYDRATE_EVENTS) {
+        if (c2.patchFlag <= 0 || c2.patchFlag === PatchFlags.NEED_HYDRATION) {
           c2 = ch2[i] = cloneIfMounted(ch2[i] as VNode)
           c2.el = c1.el
         }
@@ -2446,3 +2519,16 @@ function getSequence(arr: number[]): number[] {
   }
   return result
 }
+
+function locateNonHydratedAsyncRoot(
+  instance: ComponentInternalInstance,
+): ComponentInternalInstance | undefined {
+  const subComponent = instance.subTree.component
+  if (subComponent) {
+    if (subComponent.asyncDep && !subComponent.asyncResolved) {
+      return subComponent
+    } else {
+      return locateNonHydratedAsyncRoot(subComponent)
+    }
+  }
+}
diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts
index 30f96228d1f..b652edeac4c 100644
--- a/packages/runtime-core/src/rendererTemplateRef.ts
+++ b/packages/runtime-core/src/rendererTemplateRef.ts
@@ -1,20 +1,20 @@
-import { SuspenseBoundary } from './components/Suspense'
-import { VNode, VNodeNormalizedRef, VNodeNormalizedRefAtom } from './vnode'
+import type { SuspenseBoundary } from './components/Suspense'
+import type { VNode, VNodeNormalizedRef, VNodeNormalizedRefAtom } from './vnode'
 import {
   EMPTY_OBJ,
+  ShapeFlags,
   hasOwn,
   isArray,
   isFunction,
   isString,
   remove,
-  ShapeFlags
 } from '@vue/shared'
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { getExposeProxy } from './component'
 import { warn } from './warning'
 import { isRef } from '@vue/reactivity'
-import { callWithErrorHandling, ErrorCodes } from './errorHandling'
-import { SchedulerJob } from './scheduler'
+import { ErrorCodes, callWithErrorHandling } from './errorHandling'
+import type { SchedulerJob } from './scheduler'
 import { queuePostRenderEffect } from './renderer'
 
 /**
@@ -25,7 +25,7 @@ export function setRef(
   oldRawRef: VNodeNormalizedRef | null,
   parentSuspense: SuspenseBoundary | null,
   vnode: VNode,
-  isUnmount = false
+  isUnmount = false,
 ) {
   if (isArray(rawRef)) {
     rawRef.forEach((r, i) =>
@@ -34,8 +34,8 @@ export function setRef(
         oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
         parentSuspense,
         vnode,
-        isUnmount
-      )
+        isUnmount,
+      ),
     )
     return
   }
@@ -56,7 +56,7 @@ export function setRef(
   if (__DEV__ && !owner) {
     warn(
       `Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
-        `A vnode with ref must be created inside the render function.`
+        `A vnode with ref must be created inside the render function.`,
     )
     return
   }
diff --git a/packages/runtime-core/src/scheduler.ts b/packages/runtime-core/src/scheduler.ts
index 64c70ab59ca..b8d1445a183 100644
--- a/packages/runtime-core/src/scheduler.ts
+++ b/packages/runtime-core/src/scheduler.ts
@@ -1,7 +1,6 @@
-import { ErrorCodes, callWithErrorHandling } from './errorHandling'
-import { Awaited, isArray, NOOP } from '@vue/shared'
-import { ComponentInternalInstance, getComponentName } from './component'
-import { warn } from './warning'
+import { ErrorCodes, callWithErrorHandling, handleError } from './errorHandling'
+import { type Awaited, NOOP, isArray } from '@vue/shared'
+import { type ComponentInternalInstance, getComponentName } from './component'
 
 export interface SchedulerJob extends Function {
   id?: number
@@ -52,7 +51,7 @@ type CountMap = Map<SchedulerJob, number>
 
 export function nextTick<T = void, R = void>(
   this: T,
-  fn?: (this: T) => R
+  fn?: (this: T) => R,
 ): Promise<Awaited<R>> {
   const p = currentFlushPromise || resolvedPromise
   return fn ? p.then(this ? fn.bind(this) : fn) : p
@@ -69,8 +68,13 @@ function findInsertionIndex(id: number) {
 
   while (start < end) {
     const middle = (start + end) >>> 1
-    const middleJobId = getId(queue[middle])
-    middleJobId < id ? (start = middle + 1) : (end = middle)
+    const middleJob = queue[middle]
+    const middleJobId = getId(middleJob)
+    if (middleJobId < id || (middleJobId === id && middleJob.pre)) {
+      start = middle + 1
+    } else {
+      end = middle
+    }
   }
 
   return start
@@ -87,7 +91,7 @@ export function queueJob(job: SchedulerJob) {
     !queue.length ||
     !queue.includes(
       job,
-      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
+      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex,
     )
   ) {
     if (job.id == null) {
@@ -119,7 +123,7 @@ export function queuePostFlushCb(cb: SchedulerJobs) {
       !activePostFlushCbs ||
       !activePostFlushCbs.includes(
         cb,
-        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
+        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex,
       )
     ) {
       pendingPostFlushCbs.push(cb)
@@ -134,9 +138,10 @@ export function queuePostFlushCb(cb: SchedulerJobs) {
 }
 
 export function flushPreFlushCbs(
+  instance?: ComponentInternalInstance,
   seen?: CountMap,
   // if currently flushing, skip the current job itself
-  i = isFlushing ? flushIndex + 1 : 0
+  i = isFlushing ? flushIndex + 1 : 0,
 ) {
   if (__DEV__) {
     seen = seen || new Map()
@@ -144,6 +149,9 @@ export function flushPreFlushCbs(
   for (; i < queue.length; i++) {
     const cb = queue[i]
     if (cb && cb.pre) {
+      if (instance && cb.id !== instance.uid) {
+        continue
+      }
       if (__DEV__ && checkRecursiveUpdates(seen!, cb)) {
         continue
       }
@@ -156,7 +164,9 @@ export function flushPreFlushCbs(
 
 export function flushPostFlushCbs(seen?: CountMap) {
   if (pendingPostFlushCbs.length) {
-    const deduped = [...new Set(pendingPostFlushCbs)]
+    const deduped = [...new Set(pendingPostFlushCbs)].sort(
+      (a, b) => getId(a) - getId(b),
+    )
     pendingPostFlushCbs.length = 0
 
     // #1947 already has active queue, nested flushPostFlushCbs call
@@ -170,8 +180,6 @@ export function flushPostFlushCbs(seen?: CountMap) {
       seen = seen || new Map()
     }
 
-    activePostFlushCbs.sort((a, b) => getId(a) - getId(b))
-
     for (
       postFlushIndex = 0;
       postFlushIndex < activePostFlushCbs.length;
@@ -234,7 +242,6 @@ function flushJobs(seen?: CountMap) {
         if (__DEV__ && check(job)) {
           continue
         }
-        // console.log(`running:`, job.id)
         callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
       }
     }
@@ -262,14 +269,16 @@ function checkRecursiveUpdates(seen: CountMap, fn: SchedulerJob) {
     if (count > RECURSION_LIMIT) {
       const instance = fn.ownerInstance
       const componentName = instance && getComponentName(instance.type)
-      warn(
+      handleError(
         `Maximum recursive updates exceeded${
           componentName ? ` in component <${componentName}>` : ``
         }. ` +
           `This means you have a reactive effect that is mutating its own ` +
           `dependencies and thus recursively triggering itself. Possible sources ` +
           `include component template, render function, updated hook or ` +
-          `watcher source function.`
+          `watcher source function.`,
+        null,
+        ErrorCodes.APP_ERROR_HANDLER,
       )
       return true
     } else {
diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index f8cf6652d31..daa9413d2ee 100644
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -1,50 +1,60 @@
 import {
+  EMPTY_ARR,
+  PatchFlags,
+  ShapeFlags,
+  SlotFlags,
+  extend,
   isArray,
   isFunction,
-  isString,
   isObject,
-  EMPTY_ARR,
-  extend,
+  isOn,
+  isString,
   normalizeClass,
   normalizeStyle,
-  PatchFlags,
-  ShapeFlags,
-  SlotFlags,
-  isOn
 } from '@vue/shared'
 import {
-  ComponentInternalInstance,
-  Data,
-  ConcreteComponent,
-  ClassComponent,
-  Component,
-  isClassComponent
+  type ClassComponent,
+  type Component,
+  type ComponentInternalInstance,
+  type ConcreteComponent,
+  type Data,
+  isClassComponent,
 } from './component'
-import { RawSlots } from './componentSlots'
-import { isProxy, Ref, toRaw, ReactiveFlags, isRef } from '@vue/reactivity'
-import { AppContext } from './apiCreateApp'
+import type { RawSlots } from './componentSlots'
+import {
+  type ReactiveFlags,
+  type Ref,
+  isProxy,
+  isRef,
+  toRaw,
+} from '@vue/reactivity'
+import type { AppContext } from './apiCreateApp'
 import {
-  Suspense,
-  SuspenseImpl,
+  type Suspense,
+  type SuspenseBoundary,
+  type SuspenseImpl,
   isSuspense,
-  SuspenseBoundary
 } from './components/Suspense'
-import { DirectiveBinding } from './directives'
-import { TransitionHooks } from './components/BaseTransition'
+import type { DirectiveBinding } from './directives'
+import type { TransitionHooks } from './components/BaseTransition'
 import { warn } from './warning'
-import { Teleport, TeleportImpl, isTeleport } from './components/Teleport'
+import {
+  type Teleport,
+  type TeleportImpl,
+  isTeleport,
+} from './components/Teleport'
 import {
   currentRenderingInstance,
-  currentScopeId
+  currentScopeId,
 } from './componentRenderContext'
-import { RendererNode, RendererElement } from './renderer'
+import type { RendererElement, RendererNode } from './renderer'
 import { NULL_DYNAMIC_COMPONENT } from './helpers/resolveAssets'
 import { hmrDirtyComponents } from './hmr'
 import { convertLegacyComponent } from './compat/component'
 import { convertLegacyVModelProps } from './compat/componentVModel'
 import { defineLegacyVNodeProperties } from './compat/renderFn'
-import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
-import { ComponentPublicInstance } from './componentPublicInstance'
+import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
+import type { ComponentPublicInstance } from './componentPublicInstance'
 
 export const Fragment = Symbol.for('v-fgt') as any as {
   __isFragment: true
@@ -74,7 +84,7 @@ export type VNodeRef =
   | Ref
   | ((
       ref: Element | ComponentPublicInstance | null,
-      refs: Record<string, any>
+      refs: Record<string, any>,
     ) => void)
 
 export type VNodeNormalizedRefAtom = {
@@ -134,7 +144,7 @@ export type VNodeNormalizedChildren =
 export interface VNode<
   HostNode = RendererNode,
   HostElement = RendererElement,
-  ExtraProps = { [key: string]: any }
+  ExtraProps = { [key: string]: any },
 > {
   /**
    * @internal
@@ -306,7 +316,7 @@ export function createElementBlock(
   children?: any,
   patchFlag?: number,
   dynamicProps?: string[],
-  shapeFlag?: number
+  shapeFlag?: number,
 ) {
   return setupBlock(
     createBaseVNode(
@@ -316,8 +326,8 @@ export function createElementBlock(
       patchFlag,
       dynamicProps,
       shapeFlag,
-      true /* isBlock */
-    )
+      true /* isBlock */,
+    ),
   )
 }
 
@@ -333,7 +343,7 @@ export function createBlock(
   props?: Record<string, any> | null,
   children?: any,
   patchFlag?: number,
-  dynamicProps?: string[]
+  dynamicProps?: string[],
 ): VNode {
   return setupBlock(
     createVNode(
@@ -342,8 +352,8 @@ export function createBlock(
       children,
       patchFlag,
       dynamicProps,
-      true /* isBlock: prevent a block from tracking itself */
-    )
+      true /* isBlock: prevent a block from tracking itself */,
+    ),
   )
 }
 
@@ -370,7 +380,7 @@ export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
 let vnodeArgsTransformer:
   | ((
       args: Parameters<typeof _createVNode>,
-      instance: ComponentInternalInstance | null
+      instance: ComponentInternalInstance | null,
     ) => Parameters<typeof _createVNode>)
   | undefined
 
@@ -390,7 +400,7 @@ const createVNodeWithArgsTransform = (
   return _createVNode(
     ...(vnodeArgsTransformer
       ? vnodeArgsTransformer(args, currentRenderingInstance)
-      : args)
+      : args),
   )
 }
 
@@ -402,7 +412,7 @@ const normalizeKey = ({ key }: VNodeProps): VNode['key'] =>
 const normalizeRef = ({
   ref,
   ref_key,
-  ref_for
+  ref_for,
 }: VNodeProps): VNodeNormalizedRefAtom | null => {
   if (typeof ref === 'number') {
     ref = '' + ref
@@ -424,7 +434,7 @@ function createBaseVNode(
   dynamicProps: string[] | null = null,
   shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
   isBlockNode = false,
-  needFullChildrenNormalization = false
+  needFullChildrenNormalization = false,
 ) {
   const vnode = {
     __v_isVNode: true,
@@ -452,7 +462,7 @@ function createBaseVNode(
     dynamicProps,
     dynamicChildren: null,
     appContext: null,
-    ctx: currentRenderingInstance
+    ctx: currentRenderingInstance,
   } as VNode
 
   if (needFullChildrenNormalization) {
@@ -488,7 +498,7 @@ function createBaseVNode(
     (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
     // the EVENTS flag is only for hydration and if it is the only flag, the
     // vnode should not be considered dynamic due to handler caching.
-    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
+    vnode.patchFlag !== PatchFlags.NEED_HYDRATION
   ) {
     currentBlock.push(vnode)
   }
@@ -513,7 +523,7 @@ function _createVNode(
   children: unknown = null,
   patchFlag: number = 0,
   dynamicProps: string[] | null = null,
-  isBlockNode = false
+  isBlockNode = false,
 ): VNode {
   if (!type || type === NULL_DYNAMIC_COMPONENT) {
     if (__DEV__ && !type) {
@@ -573,24 +583,24 @@ function _createVNode(
   const shapeFlag = isString(type)
     ? ShapeFlags.ELEMENT
     : __FEATURE_SUSPENSE__ && isSuspense(type)
-    ? ShapeFlags.SUSPENSE
-    : isTeleport(type)
-    ? ShapeFlags.TELEPORT
-    : isObject(type)
-    ? ShapeFlags.STATEFUL_COMPONENT
-    : isFunction(type)
-    ? ShapeFlags.FUNCTIONAL_COMPONENT
-    : 0
+      ? ShapeFlags.SUSPENSE
+      : isTeleport(type)
+        ? ShapeFlags.TELEPORT
+        : isObject(type)
+          ? ShapeFlags.STATEFUL_COMPONENT
+          : isFunction(type)
+            ? ShapeFlags.FUNCTIONAL_COMPONENT
+            : 0
 
   if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
     type = toRaw(type)
     warn(
-      `Vue received a Component which was made a reactive object. This can ` +
-        `lead to unnecessary performance overhead, and should be avoided by ` +
+      `Vue received a Component that was made a reactive object. This can ` +
+        `lead to unnecessary performance overhead and should be avoided by ` +
         `marking the component with \`markRaw\` or using \`shallowRef\` ` +
         `instead of \`ref\`.`,
       `\nComponent that was made reactive: `,
-      type
+      type,
     )
   }
 
@@ -602,7 +612,7 @@ function _createVNode(
     dynamicProps,
     shapeFlag,
     isBlockNode,
-    true
+    true,
   )
 }
 
@@ -616,7 +626,7 @@ export function guardReactiveProps(props: (Data & VNodeProps) | null) {
 export function cloneVNode<T, U>(
   vnode: VNode<T, U>,
   extraProps?: (Data & VNodeProps) | null,
-  mergeRef = false
+  mergeRef = false,
 ): VNode<T, U> {
   // This is intentionally NOT using spread or extend to avoid the runtime
   // key enumeration cost.
@@ -655,7 +665,7 @@ export function cloneVNode<T, U>(
     // fast paths only.
     patchFlag:
       extraProps && vnode.type !== Fragment
-        ? patchFlag === -1 // hoisted node
+        ? patchFlag === PatchFlags.HOISTED // hoisted node
           ? PatchFlags.FULL_PROPS
           : patchFlag | PatchFlags.FULL_PROPS
         : patchFlag,
@@ -676,7 +686,7 @@ export function cloneVNode<T, U>(
     el: vnode.el,
     anchor: vnode.anchor,
     ctx: vnode.ctx,
-    ce: vnode.ce
+    ce: vnode.ce,
   }
   if (__COMPAT__) {
     defineLegacyVNodeProperties(cloned as VNode)
@@ -708,7 +718,7 @@ export function createTextVNode(text: string = ' ', flag: number = 0): VNode {
  */
 export function createStaticVNode(
   content: string,
-  numberOfNodes: number
+  numberOfNodes: number,
 ): VNode {
   // A static vnode can contain multiple stringified elements, and the number
   // of elements is necessary for hydration.
@@ -724,7 +734,7 @@ export function createCommentVNode(
   text: string = '',
   // when used as the v-else branch, the comment node must be created as a
   // block to ensure correct updates.
-  asBlock: boolean = false
+  asBlock: boolean = false,
 ): VNode {
   return asBlock
     ? (openBlock(), createBlock(Comment, null, text))
@@ -741,7 +751,7 @@ export function normalizeVNode(child: VNodeChild): VNode {
       Fragment,
       null,
       // #3666, avoid reference pollution when reusing vnode
-      child.slice()
+      child.slice(),
     )
   } else if (typeof child === 'object') {
     // already vnode, this should be the most common since compiled templates
@@ -851,10 +861,10 @@ export function invokeVNodeHook(
   hook: VNodeHook,
   instance: ComponentInternalInstance | null,
   vnode: VNode,
-  prevVNode: VNode | null = null
+  prevVNode: VNode | null = null,
 ) {
   callWithAsyncErrorHandling(hook, instance, ErrorCodes.VNODE_HOOK, [
     vnode,
-    prevVNode
+    prevVNode,
   ])
 }
diff --git a/packages/runtime-core/src/warning.ts b/packages/runtime-core/src/warning.ts
index 8e93d9efe59..16928387dfb 100644
--- a/packages/runtime-core/src/warning.ts
+++ b/packages/runtime-core/src/warning.ts
@@ -1,13 +1,13 @@
-import { VNode } from './vnode'
+import type { VNode } from './vnode'
 import {
-  Data,
-  ComponentInternalInstance,
-  ConcreteComponent,
-  formatComponentName
+  type ComponentInternalInstance,
+  type ConcreteComponent,
+  type Data,
+  formatComponentName,
 } from './component'
-import { isString, isFunction } from '@vue/shared'
-import { toRaw, isRef, pauseTracking, resetTracking } from '@vue/reactivity'
-import { callWithErrorHandling, ErrorCodes } from './errorHandling'
+import { isFunction, isString } from '@vue/shared'
+import { isRef, pauseTracking, resetTracking, toRaw } from '@vue/reactivity'
+import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 
 type ComponentVNode = VNode & {
   type: ConcreteComponent
@@ -31,8 +31,6 @@ export function popWarningContext() {
 }
 
 export function warn(msg: string, ...args: any[]) {
-  if (!__DEV__) return
-
   // avoid props formatting or warn handler tracking deps that might be mutated
   // during patch, leading to infinite recursion.
   pauseTracking()
@@ -51,11 +49,11 @@ export function warn(msg: string, ...args: any[]) {
         instance && instance.proxy,
         trace
           .map(
-            ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`
+            ({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`,
           )
           .join('\n'),
-        trace
-      ]
+        trace,
+      ],
     )
   } else {
     const warnArgs = [`[Vue warn]: ${msg}`, ...args]
@@ -91,7 +89,7 @@ export function getComponentTrace(): ComponentTraceStack {
     } else {
       normalizedStack.push({
         vnode: currentVNode as ComponentVNode,
-        recurseCount: 0
+        recurseCount: 0,
       })
     }
     const parentInstance: ComponentInternalInstance | null =
@@ -118,7 +116,7 @@ function formatTraceEntry({ vnode, recurseCount }: TraceEntry): any[] {
   const open = ` at <${formatComponentName(
     vnode.component,
     vnode.type,
-    isRoot
+    isRoot,
   )}`
   const close = `>` + postfix
   return vnode.props
diff --git a/packages/runtime-dom/__tests__/createApp.spec.ts b/packages/runtime-dom/__tests__/createApp.spec.ts
index 0857d7ab2c3..9a8d05df2df 100644
--- a/packages/runtime-dom/__tests__/createApp.spec.ts
+++ b/packages/runtime-dom/__tests__/createApp.spec.ts
@@ -7,7 +7,7 @@ describe('createApp for dom', () => {
     createApp({
       render() {
         return h('g')
-      }
+      },
     }).mount(root)
     expect(root.children.length).toBe(1)
     expect(root.children[0]).toBeInstanceOf(SVGElement)
@@ -18,9 +18,9 @@ describe('createApp for dom', () => {
     const originalObj = {
       data() {
         return {
-          counter: 0
+          counter: 0,
         }
-      }
+      },
     }
 
     const handler = vi.fn(msg => {
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index a3f3ceac229..fb746f72c4a 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -1,14 +1,14 @@
 import {
+  type Ref,
+  type VueElement,
   defineAsyncComponent,
   defineComponent,
   defineCustomElement,
   h,
   inject,
   nextTick,
-  Ref,
   ref,
   renderSlot,
-  VueElement
 } from '../src'
 
 describe('defineCustomElement', () => {
@@ -24,12 +24,12 @@ describe('defineCustomElement', () => {
       props: {
         msg: {
           type: String,
-          default: 'hello'
-        }
+          default: 'hello',
+        },
       },
       render() {
         return h('div', this.msg)
-      }
+      },
     })
     customElements.define('my-element', E)
 
@@ -92,9 +92,9 @@ describe('defineCustomElement', () => {
       render() {
         return [
           h('div', null, this.foo),
-          h('div', null, this.bazQux || (this.bar && this.bar.x))
+          h('div', null, this.bazQux || (this.bar && this.bar.x)),
         ]
-      }
+      },
     })
     customElements.define('my-el-props', E)
 
@@ -112,7 +112,7 @@ describe('defineCustomElement', () => {
       e.setAttribute('baz-qux', 'changed')
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe(
-        '<div>changed</div><div>changed</div>'
+        '<div>changed</div><div>changed</div>',
       )
     })
 
@@ -156,7 +156,7 @@ describe('defineCustomElement', () => {
         props: {
           fooBar: Number, // test casting of camelCase prop names
           bar: Boolean,
-          baz: String
+          baz: String,
         },
         render() {
           return [
@@ -165,15 +165,15 @@ describe('defineCustomElement', () => {
             this.bar,
             typeof this.bar,
             this.baz,
-            typeof this.baz
+            typeof this.baz,
           ].join(' ')
-        }
+        },
       })
       customElements.define('my-el-props-cast', E)
       container.innerHTML = `<my-el-props-cast foo-bar="1" baz="12345"></my-el-props-cast>`
       const e = container.childNodes[0] as VueElement
       expect(e.shadowRoot!.innerHTML).toBe(
-        `1 number false boolean 12345 string`
+        `1 number false boolean 12345 string`,
       )
 
       e.setAttribute('bar', '')
@@ -183,7 +183,7 @@ describe('defineCustomElement', () => {
       e.setAttribute('foo-bar', '2e1')
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe(
-        `20 number true boolean 12345 string`
+        `20 number true boolean 12345 string`,
       )
 
       e.setAttribute('baz', '2e1')
@@ -195,11 +195,11 @@ describe('defineCustomElement', () => {
     test('attr casting w/ programmatic creation', () => {
       const E = defineCustomElement({
         props: {
-          foo: Number
+          foo: Number,
         },
         render() {
           return `foo type: ${typeof this.foo}`
-        }
+        },
       })
       customElements.define('my-element-programmatic', E)
       const el = document.createElement('my-element-programmatic') as any
@@ -212,7 +212,7 @@ describe('defineCustomElement', () => {
       const E = defineCustomElement({
         props: {
           foo: String,
-          dataAge: Number
+          dataAge: Number,
         },
         setup(props) {
           expect(props.foo).toBe('hello')
@@ -220,7 +220,7 @@ describe('defineCustomElement', () => {
         },
         render() {
           return h('div', `foo: ${this.foo}`)
-        }
+        },
       })
       const el = document.createElement('my-el-upgrade') as any
       el.foo = 'hello'
@@ -238,7 +238,7 @@ describe('defineCustomElement', () => {
       const E = defineCustomElement({
         props: {
           foo: String,
-          post: Object
+          post: Object,
         },
         setup(props) {
           expect(props.foo).toBe('hello')
@@ -246,7 +246,7 @@ describe('defineCustomElement', () => {
         },
         render() {
           return JSON.stringify(this.post)
-        }
+        },
       })
       customElements.define('my-el-preconnect', E)
       const el = document.createElement('my-el-preconnect') as any
@@ -262,7 +262,7 @@ describe('defineCustomElement', () => {
       const E = defineCustomElement({
         render() {
           return h('div', 'foo')
-        }
+        },
       })
       customElements.define('my-element-noprops', E)
       const el = document.createElement('my-element-noprops')
@@ -275,12 +275,12 @@ describe('defineCustomElement', () => {
     test('set number value in dom property', () => {
       const E = defineCustomElement({
         props: {
-          'max-age': Number
+          'max-age': Number,
         },
         render() {
-          // @ts-ignore
+          // @ts-expect-error
           return `max age: ${this.maxAge}/type: ${typeof this.maxAge}`
-        }
+        },
       })
       customElements.define('my-element-number-property', E)
       const el = document.createElement('my-element-number-property') as any
@@ -295,7 +295,7 @@ describe('defineCustomElement', () => {
     const E = defineCustomElement({
       render() {
         return [h('div', null, this.$attrs.foo as string)]
-      }
+      },
     })
     customElements.define('my-el-attrs', E)
 
@@ -311,7 +311,7 @@ describe('defineCustomElement', () => {
 
     test('non-declared properties should not show up in $attrs', () => {
       const e = new E()
-      // @ts-ignore
+      // @ts-expect-error
       e.foo = '123'
       container.appendChild(e)
       expect(e.shadowRoot!.innerHTML).toBe('<div></div>')
@@ -329,9 +329,9 @@ describe('defineCustomElement', () => {
             },
             onMousedown: () => {
               emit('myEvent', 1) // validate hyphenation
-            }
+            },
           })
-      }
+      },
     })
     const E = defineCustomElement(CompDef)
     customElements.define('my-el-emits', E)
@@ -352,7 +352,7 @@ describe('defineCustomElement', () => {
       e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
       expect(spy).toHaveBeenCalledTimes(1)
       expect(spy.mock.calls[0][0]).toMatchObject({
-        detail: [1]
+        detail: [1],
       })
     })
 
@@ -386,15 +386,15 @@ describe('defineCustomElement', () => {
       e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
       expect(spy).toHaveBeenCalled()
       expect(spy.mock.calls[0][0]).toMatchObject({
-        detail: [1]
+        detail: [1],
       })
     })
     // #7293
     test('emit in an async component wrapper with properties bound', async () => {
       const E = defineCustomElement(
         defineAsyncComponent(
-          () => new Promise<typeof CompDef>(res => res(CompDef as any))
-        )
+          () => new Promise<typeof CompDef>(res => res(CompDef as any)),
+        ),
       )
       customElements.define('my-async-el-props-emits', E)
       container.innerHTML = `<my-async-el-props-emits id="my_async_el_props_emits"></my-async-el-props-emits>`
@@ -407,7 +407,7 @@ describe('defineCustomElement', () => {
       e.shadowRoot!.childNodes[0].dispatchEvent(new CustomEvent('click'))
       expect(spy).toHaveBeenCalled()
       expect(spy.mock.calls[0][0]).toMatchObject({
-        detail: [1]
+        detail: [1],
       })
     })
   })
@@ -418,12 +418,12 @@ describe('defineCustomElement', () => {
         return [
           h('div', null, [
             renderSlot(this.$slots, 'default', undefined, () => [
-              h('div', 'fallback')
-            ])
+              h('div', 'fallback'),
+            ]),
           ]),
-          h('div', null, renderSlot(this.$slots, 'named'))
+          h('div', null, renderSlot(this.$slots, 'named')),
         ]
-      }
+      },
     })
     customElements.define('my-el-slots', E)
 
@@ -433,7 +433,7 @@ describe('defineCustomElement', () => {
       // native slots allocation does not affect innerHTML, so we just
       // verify that we've rendered the correct native slots here...
       expect(e.shadowRoot!.innerHTML).toBe(
-        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`
+        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`,
       )
     })
   })
@@ -443,7 +443,7 @@ describe('defineCustomElement', () => {
       setup() {
         const foo = inject<Ref>('foo')!
         return () => h('div', foo.value)
-      }
+      },
     })
     customElements.define('my-consumer', Consumer)
 
@@ -451,11 +451,11 @@ describe('defineCustomElement', () => {
       const foo = ref('injected!')
       const Provider = defineCustomElement({
         provide: {
-          foo
+          foo,
         },
         render() {
           return h('my-consumer')
-        }
+        },
       })
       customElements.define('my-provider', Provider)
       container.innerHTML = `<my-provider><my-provider>`
@@ -473,11 +473,11 @@ describe('defineCustomElement', () => {
       const foo = ref('injected!')
       const Provider = defineCustomElement({
         provide: {
-          foo
+          foo,
         },
         render() {
           return renderSlot(this.$slots, 'default')
-        }
+        },
       })
       customElements.define('my-provider-2', Provider)
 
@@ -496,19 +496,19 @@ describe('defineCustomElement', () => {
       const fooB = ref('FooB!')
       const ProviderA = defineCustomElement({
         provide: {
-          fooA
+          fooA,
         },
         render() {
           return h('provider-b')
-        }
+        },
       })
       const ProviderB = defineCustomElement({
         provide: {
-          fooB
+          fooB,
         },
         render() {
           return h('my-multi-consumer')
-        }
+        },
       })
 
       const Consumer = defineCustomElement({
@@ -516,7 +516,7 @@ describe('defineCustomElement', () => {
           const fooA = inject<Ref>('fooA')!
           const fooB = inject<Ref>('fooB')!
           return () => h('div', `${fooA.value} ${fooB.value}`)
-        }
+        },
       })
 
       customElements.define('provider-a', ProviderA)
@@ -533,7 +533,7 @@ describe('defineCustomElement', () => {
       fooB.value = 'changedB!'
       await nextTick()
       expect(consumer.shadowRoot!.innerHTML).toBe(
-        `<div>changedA! changedB!</div>`
+        `<div>changedA! changedB!</div>`,
       )
     })
   })
@@ -544,7 +544,7 @@ describe('defineCustomElement', () => {
         styles: [`div { color: red; }`],
         render() {
           return h('div', 'hello')
-        }
+        },
       })
       customElements.define('my-el-with-styles', Foo)
       container.innerHTML = `<my-el-with-styles></my-el-with-styles>`
@@ -565,9 +565,9 @@ describe('defineCustomElement', () => {
             styles: [`div { color: red }`],
             render(this: any) {
               return h('div', null, this.msg)
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async', E)
       container.innerHTML =
@@ -584,10 +584,10 @@ describe('defineCustomElement', () => {
 
       // should inject styles
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>hello</div>`
+        `<style>div { color: red }</style><div>hello</div>`,
       )
       expect(e2.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>world</div>`
+        `<style>div { color: red }</style><div>world</div>`,
       )
 
       // attr
@@ -595,7 +595,7 @@ describe('defineCustomElement', () => {
       await nextTick()
       expect((e1 as any).msg).toBe('attr')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>attr</div>`
+        `<style>div { color: red }</style><div>attr</div>`,
       )
 
       // props
@@ -603,7 +603,7 @@ describe('defineCustomElement', () => {
       ;(e1 as any).msg = 'prop'
       expect(e1.getAttribute('msg')).toBe('prop')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<style>div { color: red }</style><div>prop</div>`
+        `<style>div { color: red }</style><div>prop</div>`,
       )
     })
 
@@ -617,9 +617,9 @@ describe('defineCustomElement', () => {
             },
             render(this: any) {
               return h('div', this.msg)
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async-2', E)
 
@@ -658,9 +658,9 @@ describe('defineCustomElement', () => {
             },
             render(this: any) {
               return h('div', this.n + ',' + typeof this.n)
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async-3', E)
       container.innerHTML = `<my-el-async-3 n="2e1"></my-el-async-3>`
@@ -679,14 +679,14 @@ describe('defineCustomElement', () => {
               return [
                 h('div', null, [
                   renderSlot(this.$slots, 'default', undefined, () => [
-                    h('div', 'fallback')
-                  ])
+                    h('div', 'fallback'),
+                  ]),
                 ]),
-                h('div', null, renderSlot(this.$slots, 'named'))
+                h('div', null, renderSlot(this.$slots, 'named')),
               ]
-            }
+            },
           })
-        })
+        }),
       )
       customElements.define('my-el-async-slots', E)
       container.innerHTML = `<my-el-async-slots><span>hi</span></my-el-async-slots>`
@@ -695,7 +695,7 @@ describe('defineCustomElement', () => {
 
       const e = container.childNodes[0] as VueElement
       expect(e.shadowRoot!.innerHTML).toBe(
-        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`
+        `<div><slot><div>fallback</div></slot></div><div><slot name="named"></slot></div>`,
       )
     })
   })
diff --git a/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts b/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
index 9d2135a4070..a02cf0f7807 100644
--- a/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
+++ b/packages/runtime-dom/__tests__/customizedBuiltIn.spec.ts
@@ -1,8 +1,8 @@
-import { vi, SpyInstance } from 'vitest'
-import { render, h } from '@vue/runtime-dom'
+import type { MockInstance } from 'vitest'
+import { h, render } from '@vue/runtime-dom'
 
 describe('customized built-in elements support', () => {
-  let createElement: SpyInstance
+  let createElement: MockInstance
   afterEach(() => {
     createElement.mockRestore()
   })
@@ -13,7 +13,7 @@ describe('customized built-in elements support', () => {
     render(h('button', { is: 'plastic-button' }), root)
     expect(createElement.mock.calls[0]).toMatchObject([
       'button',
-      { is: 'plastic-button' }
+      { is: 'plastic-button' },
     ])
     // should also render the attribute
     expect(root.innerHTML).toBe(`<button is="plastic-button"></button>`)
diff --git a/packages/runtime-dom/__tests__/directives/vCloak.spec.ts b/packages/runtime-dom/__tests__/directives/vCloak.spec.ts
index 813147cc332..845bb540adb 100644
--- a/packages/runtime-dom/__tests__/directives/vCloak.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vCloak.spec.ts
@@ -5,7 +5,7 @@ describe('vCloak', () => {
     const root = document.createElement('div')
     root.setAttribute('v-cloak', '')
     createApp({
-      render() {}
+      render() {},
     }).mount(root)
     expect(root.hasAttribute('v-cloak')).toBe(false)
   })
diff --git a/packages/runtime-dom/__tests__/directives/vModel.spec.ts b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
index 73b8f18afc0..6cc7b53e2c2 100644
--- a/packages/runtime-dom/__tests__/directives/vModel.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vModel.spec.ts
@@ -1,12 +1,12 @@
 import {
+  type VNode,
+  defineComponent,
   h,
-  render,
   nextTick,
-  defineComponent,
+  ref,
+  render,
   vModelDynamic,
   withDirectives,
-  VNode,
-  ref
 } from '@vue/runtime-dom'
 
 const triggerEvent = (type: string, el: Element) => {
@@ -41,12 +41,12 @@ describe('vModel', () => {
               'onUpdate:modelValue': setValue.bind(this),
               onInput: () => {
                 manualListener(data.value)
-              }
+              },
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -80,12 +80,12 @@ describe('vModel', () => {
           withVModel(
             h('input', {
               type: 'number',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -101,6 +101,61 @@ describe('vModel', () => {
     expect(data.value).toEqual(1)
   })
 
+  // #7003
+  it('should work with number input and be able to update rendering correctly', async () => {
+    const setValue1 = function (this: any, value: any) {
+      this.value1 = value
+    }
+    const setValue2 = function (this: any, value: any) {
+      this.value2 = value
+    }
+    const component = defineComponent({
+      data() {
+        return { value1: 1.002, value2: 1.002 }
+      },
+      render() {
+        return [
+          withVModel(
+            h('input', {
+              id: 'input_num1',
+              type: 'number',
+              'onUpdate:modelValue': setValue1.bind(this),
+            }),
+            this.value1,
+          ),
+          withVModel(
+            h('input', {
+              id: 'input_num2',
+              type: 'number',
+              'onUpdate:modelValue': setValue2.bind(this),
+            }),
+            this.value2,
+          ),
+        ]
+      },
+    })
+    render(h(component), root)
+    const data = root._vnode.component.data
+
+    const inputNum1 = root.querySelector('#input_num1')!
+    expect(inputNum1.value).toBe('1.002')
+
+    const inputNum2 = root.querySelector('#input_num2')!
+    expect(inputNum2.value).toBe('1.002')
+
+    inputNum1.value = '1.00'
+    triggerEvent('input', inputNum1)
+    await nextTick()
+    expect(data.value1).toBe(1)
+
+    inputNum2.value = '1.00'
+    triggerEvent('input', inputNum2)
+    await nextTick()
+    expect(data.value2).toBe(1)
+
+    expect(inputNum1.value).toBe('1.00')
+  })
+
   it('should work with multiple listeners', async () => {
     const spy = vi.fn()
     const component = defineComponent({
@@ -111,12 +166,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('input', {
-              'onUpdate:modelValue': [setValue.bind(this), spy]
+              'onUpdate:modelValue': [setValue.bind(this), spy],
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -140,12 +195,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('input', {
-              'onUpdate:modelValue': toggle.value ? spy1 : spy2
+              'onUpdate:modelValue': toggle.value ? spy1 : spy2,
             }),
-            'foo'
-          )
+            'foo',
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -176,12 +231,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('textarea', {
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -210,52 +265,52 @@ describe('vModel', () => {
               class: 'number',
               'onUpdate:modelValue': (val: any) => {
                 this.number = val
-              }
+              },
             }),
             this.number,
             {
-              number: true
-            }
+              number: true,
+            },
           ),
           withVModel(
             h('input', {
               class: 'trim',
               'onUpdate:modelValue': (val: any) => {
                 this.trim = val
-              }
+              },
             }),
             this.trim,
             {
-              trim: true
-            }
+              trim: true,
+            },
           ),
           withVModel(
             h('input', {
               class: 'trim-number',
               'onUpdate:modelValue': (val: any) => {
                 this.trimNumber = val
-              }
+              },
             }),
             this.trimNumber,
             {
               trim: true,
-              number: true
-            }
+              number: true,
+            },
           ),
           withVModel(
             h('input', {
               class: 'lazy',
               'onUpdate:modelValue': (val: any) => {
                 this.lazy = val
-              }
+              },
             }),
             this.lazy,
             {
-              lazy: true
-            }
-          )
+              lazy: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -304,12 +359,12 @@ describe('vModel', () => {
               min: 1,
               max: 100,
               class: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
             this.value,
             {
-              number: true
-            }
+              number: true,
+            },
           ),
           withVModel(
             h('input', {
@@ -317,15 +372,15 @@ describe('vModel', () => {
               min: 1,
               max: 100,
               class: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
             this.value,
             {
-              lazy: true
-            }
-          )
+              lazy: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -389,12 +444,12 @@ describe('vModel', () => {
           withVModel(
             h('input', {
               type: 'checkbox',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -432,12 +487,12 @@ describe('vModel', () => {
               type: 'checkbox',
               'true-value': 'yes',
               'false-value': 'no',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -478,12 +533,12 @@ describe('vModel', () => {
               type: 'checkbox',
               'true-value': { yes: 'yes' },
               'false-value': { no: 'no' },
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -521,21 +576,21 @@ describe('vModel', () => {
               type: 'checkbox',
               class: 'foo',
               value: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
+            this.value,
           ),
           withVModel(
             h('input', {
               type: 'checkbox',
               class: 'bar',
               value: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -591,21 +646,21 @@ describe('vModel', () => {
               type: 'checkbox',
               class: 'foo',
               value: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
+            this.value,
           ),
           withVModel(
             h('input', {
               type: 'checkbox',
               class: 'bar',
               value: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -661,21 +716,21 @@ describe('vModel', () => {
               type: 'radio',
               class: 'foo',
               value: 'foo',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
+            this.value,
           ),
           withVModel(
             h('input', {
               type: 'radio',
               class: 'bar',
               value: 'bar',
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -721,14 +776,14 @@ describe('vModel', () => {
               'select',
               {
                 value: null,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: 'foo' }), h('option', { value: 'bar' })]
+              [h('option', { value: 'foo' }), h('option', { value: 'bar' })],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -778,14 +833,14 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: 'foo' }), h('option', { value: 'bar' })]
+              [h('option', { value: 'foo' }), h('option', { value: 'bar' })],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -839,17 +894,17 @@ describe('vModel', () => {
               'select',
               {
                 value: null,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: '1' }), h('option', { value: '2' })]
+              [h('option', { value: '1' }), h('option', { value: '2' })],
             ),
             this.value,
             {
-              number: true
-            }
-          )
+              number: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -877,17 +932,17 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: '1' }), h('option', { value: '2' })]
+              [h('option', { value: '1' }), h('option', { value: '2' })],
             ),
             this.value,
             {
-              number: true
-            }
-          )
+              number: true,
+            },
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -945,17 +1000,17 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
               [
                 h('option', { value: fooValue }),
-                h('option', { value: barValue })
-              ]
+                h('option', { value: barValue }),
+              ],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -982,15 +1037,25 @@ describe('vModel', () => {
     await nextTick()
     expect(data.value).toMatchObject([fooValue, barValue])
 
+    // reset
     foo.selected = false
     bar.selected = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toMatchObject([])
+
     data.value = [fooValue, barValue]
     await nextTick()
     expect(foo.selected).toEqual(true)
     expect(bar.selected).toEqual(true)
 
+    // reset
     foo.selected = false
     bar.selected = false
+    triggerEvent('change', input)
+    await nextTick()
+    expect(data.value).toMatchObject([])
+
     data.value = [{ foo: 1 }, { bar: 1 }]
     await nextTick()
     // looseEqual
@@ -1011,14 +1076,14 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
-              [h('option', { value: 'foo' }), h('option', { value: 'bar' })]
+              [h('option', { value: 'foo' }), h('option', { value: 'bar' })],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1079,17 +1144,17 @@ describe('vModel', () => {
               {
                 value: null,
                 multiple: true,
-                'onUpdate:modelValue': setValue.bind(this)
+                'onUpdate:modelValue': setValue.bind(this),
               },
               [
                 h('option', { value: fooValue }),
-                h('option', { value: barValue })
-              ]
+                h('option', { value: barValue }),
+              ],
             ),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
@@ -1141,12 +1206,12 @@ describe('vModel', () => {
         return [
           withVModel(
             h('input', {
-              'onUpdate:modelValue': setValue.bind(this)
+              'onUpdate:modelValue': setValue.bind(this),
             }),
-            this.value
-          )
+            this.value,
+          ),
         ]
-      }
+      },
     })
     render(h(component), root)
 
diff --git a/packages/runtime-dom/__tests__/directives/vOn.spec.ts b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
index 2a4b02478f5..03620f747e7 100644
--- a/packages/runtime-dom/__tests__/directives/vOn.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
@@ -1,14 +1,14 @@
 import { patchEvent } from '../../src/modules/events'
-import { withModifiers, withKeys } from '@vue/runtime-dom'
+import { withKeys, withModifiers } from '@vue/runtime-dom'
 
 function triggerEvent(
   target: Element,
   event: string,
-  process?: (e: any) => any
+  process?: (e: any) => any,
 ) {
   const e = new Event(event, {
     bubbles: true,
-    cancelable: true
+    cancelable: true,
   })
   if (event === 'click') {
     ;(e as any).button = 0
@@ -51,7 +51,7 @@ describe('runtime-dom: v-on directive', () => {
       // <div @keyup[keyName].esc="test"/>
       const nextValue = withKeys(withModifiers(fn, [keyName]), [
         'esc',
-        'arrow-left'
+        'arrow-left',
       ])
       patchEvent(el, 'onKeyup', null, nextValue, null)
 
@@ -135,4 +135,32 @@ describe('runtime-dom: v-on directive', () => {
     handler(event, 'value', true)
     expect(fn).toBeCalledWith(event, 'value', true)
   })
+
+  it('withKeys cache wrapped listener separately for different modifiers', () => {
+    const el1 = document.createElement('button')
+    const el2 = document.createElement('button')
+    const fn = vi.fn()
+    const handler1 = withKeys(fn, ['a'])
+    const handler2 = withKeys(fn, ['b'])
+    expect(handler1 === handler2).toBe(false)
+    patchEvent(el1, 'onKeyup', null, handler1, null)
+    patchEvent(el2, 'onKeyup', null, handler2, null)
+    triggerEvent(el1, 'keyup', e => (e.key = 'a'))
+    triggerEvent(el2, 'keyup', e => (e.key = 'b'))
+    expect(fn).toBeCalledTimes(2)
+  })
+
+  it('withModifiers cache wrapped listener separately for different modifiers', () => {
+    const el1 = document.createElement('button')
+    const el2 = document.createElement('button')
+    const fn = vi.fn()
+    const handler1 = withModifiers(fn, ['ctrl'])
+    const handler2 = withModifiers(fn, ['shift'])
+    expect(handler1 === handler2).toBe(false)
+    patchEvent(el1, 'onClick', null, handler1, null)
+    patchEvent(el2, 'onClick', null, handler2, null)
+    triggerEvent(el1, 'click', e => (e.ctrlKey = true))
+    triggerEvent(el2, 'click', e => (e.shiftKey = true))
+    expect(fn).toBeCalledTimes(2)
+  })
 })
diff --git a/packages/runtime-dom/__tests__/directives/vShow.spec.ts b/packages/runtime-dom/__tests__/directives/vShow.spec.ts
index 545e22b9c75..fddafaaf823 100644
--- a/packages/runtime-dom/__tests__/directives/vShow.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vShow.spec.ts
@@ -1,13 +1,13 @@
 import {
-  withDirectives,
+  type VNode,
   defineComponent,
   h,
   nextTick,
-  VNode,
   ref,
-  watch
+  watch,
+  withDirectives,
 } from '@vue/runtime-core'
-import { render, Transition, vShow } from '@vue/runtime-dom'
+import { Transition, render, vShow } from '@vue/runtime-dom'
 
 const withVShow = (node: VNode, exp: any) =>
   withDirectives(node, [[vShow, exp]])
@@ -26,11 +26,11 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [withVShow(h('div'), this.value)]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('')
   })
@@ -42,11 +42,11 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [withVShow(h('div'), this.value)]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
   })
@@ -58,11 +58,11 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [withVShow(h('div'), this.value)]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
     const data = root._vnode.component.data
 
     expect($div.style.display).toEqual('')
@@ -107,13 +107,13 @@ describe('runtime-dom: v-show directive', () => {
       },
       render() {
         return [
-          withVShow(h('div', { style: { display: 'block' } }), this.value)
+          withVShow(h('div', { style: { display: 'block' } }), this.value),
         ]
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
     const data = root._vnode.component.data
 
     expect($div.style.display).toEqual('block')
@@ -134,11 +134,11 @@ describe('runtime-dom: v-show directive', () => {
     const component = defineComponent({
       render() {
         return withVShow(h('div', { style: style.value }), display.value)
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
 
@@ -151,6 +151,32 @@ describe('runtime-dom: v-show directive', () => {
     expect($div.style.display).toEqual('')
   })
 
+  test('the value of `display` set by v-show should not be overwritten by the style attribute when updated (object value)', async () => {
+    const style = ref({
+      display: 'block',
+      width: '100px',
+    })
+    const display = ref(false)
+    const component = defineComponent({
+      render() {
+        return withVShow(h('div', { style: style.value }), display.value)
+      },
+    })
+    render(h(component), root)
+
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    style.value.width = '50px'
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    display.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('block')
+  })
+
   // #2583, #2757
   test('the value of `display` set by v-show should not be overwritten by the style attribute when updated (with Transition)', async () => {
     const style = ref('width: 100px')
@@ -165,15 +191,15 @@ describe('runtime-dom: v-show directive', () => {
           return h(Transition, () =>
             withVShow(
               h('div', { style: style.value }, innerValue.value),
-              display.value
-            )
+              display.value,
+            ),
           )
         }
-      }
+      },
     })
     render(h(component), root)
 
-    const $div = root.querySelector('div')
+    const $div = root.children[0]
 
     expect($div.style.display).toEqual('none')
 
@@ -185,4 +211,102 @@ describe('runtime-dom: v-show directive', () => {
     await nextTick()
     expect($div.style.display).toEqual('')
   })
+
+  // #10151
+  test('should respect the display value when v-show value is true', async () => {
+    const isVisible = ref(false)
+    const useDisplayStyle = ref(true)
+    const compStyle = ref({
+      display: 'none',
+    })
+    const withoutDisplayStyle = {
+      margin: '10px',
+    }
+
+    const Component = {
+      setup() {
+        return () => {
+          return withVShow(
+            h('div', {
+              style: useDisplayStyle.value
+                ? compStyle.value
+                : withoutDisplayStyle,
+            }),
+            isVisible.value,
+          )
+        }
+      },
+    }
+    render(h(Component), root)
+
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    compStyle.value.display = 'block'
+    await nextTick()
+    expect($div.style.display).toEqual('block')
+
+    compStyle.value.display = 'inline-block'
+    await nextTick()
+    expect($div.style.display).toEqual('inline-block')
+
+    isVisible.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('inline-block')
+
+    useDisplayStyle.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('')
+    expect(getComputedStyle($div).display).toEqual('block')
+
+    isVisible.value = false
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('')
+  })
+
+  // #10294
+  test('should record display by vShowOldKey only when display exists in style', async () => {
+    const isVisible = ref(false)
+    const style = ref({
+      margin: '10px',
+    })
+
+    const Component = {
+      setup() {
+        return () => {
+          return withVShow(
+            h('div', {
+              style: style.value,
+            }),
+            isVisible.value,
+          )
+        }
+      },
+    }
+    render(h(Component), root)
+    const $div = root.children[0]
+
+    expect($div.style.display).toEqual('none')
+
+    style.value.margin = '20px'
+    await nextTick()
+    expect($div.style.display).toEqual('none')
+
+    isVisible.value = true
+    await nextTick()
+    expect($div.style.display).toEqual('')
+  })
 })
diff --git a/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts
index bb65082add1..53868e74dc2 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssModule.spec.ts
@@ -1,4 +1,4 @@
-import { render, h, nodeOps } from '@vue/runtime-test'
+import { h, nodeOps, render } from '@vue/runtime-test'
 import { useCssModule } from '../../src/helpers/useCssModule'
 
 describe('useCssModule', () => {
@@ -10,9 +10,9 @@ describe('useCssModule', () => {
         __cssModules: modules,
         setup() {
           res = useCssModule(name)
-        }
+        },
       }),
-      nodeOps.createElement('div')
+      nodeOps.createElement('div'),
     )
     return res
   }
@@ -20,8 +20,8 @@ describe('useCssModule', () => {
   test('basic usage', () => {
     const modules = {
       $style: {
-        red: 'red'
-      }
+        red: 'red',
+      },
     }
     expect(mountWithModule(modules)).toMatchObject(modules.$style)
   })
@@ -29,8 +29,8 @@ describe('useCssModule', () => {
   test('basic usage', () => {
     const modules = {
       foo: {
-        red: 'red'
-      }
+        red: 'red',
+      },
     }
     expect(mountWithModule(modules, 'foo')).toMatchObject(modules.foo)
   })
diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
index 7d24ec0f434..e26b9dfb45e 100644
--- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
+++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -1,15 +1,15 @@
 import {
-  ref,
-  render,
-  useCssVars,
+  type ComponentOptions,
+  type FunctionalComponent,
+  Suspense,
+  Teleport,
   createStaticVNode,
   h,
-  reactive,
   nextTick,
-  ComponentOptions,
-  Suspense,
-  Teleport,
-  FunctionalComponent
+  reactive,
+  ref,
+  render,
+  useCssVars,
 } from '@vue/runtime-dom'
 
 describe('useCssVars', () => {
@@ -36,13 +36,13 @@ describe('useCssVars', () => {
       setup() {
         // test receiving render context
         useCssVars((ctx: any) => ({
-          color: ctx.color
+          color: ctx.color,
         }))
         return state
       },
       render() {
         return h('div')
-      }
+      },
     }))
   })
 
@@ -51,7 +51,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => [h('div'), h('div')]
-      }
+      },
     }))
   })
 
@@ -62,7 +62,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => h(Child)
-      }
+      },
     }))
   })
 
@@ -81,7 +81,7 @@ describe('useCssVars', () => {
           }
         })
         return asyncPromise
-      }
+      },
     }
 
     const App = {
@@ -90,9 +90,9 @@ describe('useCssVars', () => {
         return () =>
           h(Suspense, null, {
             default: h(AsyncComp),
-            fallback: h('div', 'fallback')
+            fallback: h('div', 'fallback'),
           })
-      }
+      },
     }
 
     render(h(App), root)
@@ -127,7 +127,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => (value.value ? [h('div')] : [h('div'), h('div')])
-      }
+      },
     }
 
     render(h(App), root)
@@ -157,9 +157,9 @@ describe('useCssVars', () => {
         useCssVars(() => state)
         return () =>
           h(Child, null, () =>
-            value.value ? [h('div')] : [h('div'), h('div')]
+            value.value ? [h('div')] : [h('div'), h('div')],
           )
-      }
+      },
     }
 
     render(h(App), root)
@@ -186,9 +186,9 @@ describe('useCssVars', () => {
         return () => [
           h('div'),
           createStaticVNode('<div>1</div><div><span>2</span></div>', 2),
-          h('div')
+          h('div'),
         ]
-      }
+      },
     }
 
     render(h(App), root)
@@ -208,7 +208,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => [h(Teleport, { to: target }, [h('div')])]
-      }
+      },
     }
 
     render(h(App), root)
@@ -232,7 +232,7 @@ describe('useCssVars', () => {
       setup() {
         useCssVars(() => state)
         return () => h(Child, () => [h(Teleport, { to: target }, [h('div')])])
-      }
+      },
     }
 
     render(h(App), root)
@@ -255,10 +255,10 @@ describe('useCssVars', () => {
         return () => [
           h(Teleport, { to: target }, [
             h('div'),
-            toggle.value ? h('div') : null
-          ])
+            toggle.value ? h('div') : null,
+          ]),
         ]
-      }
+      },
     }
 
     render(h(App), root)
@@ -275,4 +275,53 @@ describe('useCssVars', () => {
       expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
     }
   })
+
+  test('with teleport(disabled)', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const target = document.body
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => [h(Teleport, { to: target, disabled: true }, [h('div')])]
+      },
+    }
+
+    expect(() => render(h(App), root)).not.toThrow(TypeError)
+    await nextTick()
+    expect(target.children.length).toBe(0)
+  })
+
+  test('with string style', async () => {
+    document.body.innerHTML = ''
+    const state = reactive({ color: 'red' })
+    const root = document.createElement('div')
+    const disabled = ref(false)
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        return () => [
+          h(
+            'div',
+            { style: disabled.value ? 'pointer-events: none' : undefined },
+            'foo',
+          ),
+        ]
+      },
+    }
+    render(h(App), root)
+    await nextTick()
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+    disabled.value = true
+    await nextTick()
+
+    for (const c of [].slice.call(root.children as any)) {
+      expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
+    }
+  })
 })
diff --git a/packages/runtime-dom/__tests__/nodeOps.spec.ts b/packages/runtime-dom/__tests__/nodeOps.spec.ts
index 2573974c955..e185f14d8dd 100644
--- a/packages/runtime-dom/__tests__/nodeOps.spec.ts
+++ b/packages/runtime-dom/__tests__/nodeOps.spec.ts
@@ -2,8 +2,8 @@ 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, {
-      multiple: ''
+    const el = nodeOps.createElement('select', undefined, undefined, {
+      multiple: '',
     }) as HTMLSelectElement
     const option1 = nodeOps.createElement('option') as HTMLOptionElement
     const option2 = 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,9 +98,9 @@ describe('runtime-dom: node-ops', () => {
         content,
         parent,
         anchor,
-        false,
+        undefined,
         cached.firstChild,
-        cached.lastChild
+        cached.lastChild,
       )
       expect(parent.innerHTML).toBe(content + existing)
       expect(nodes[0]).toBe(parent.firstChild)
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..8651d12eb7e 100644
--- a/packages/runtime-dom/__tests__/patchClass.spec.ts
+++ b/packages/runtime-dom/__tests__/patchClass.spec.ts
@@ -1,5 +1,8 @@
 import { patchProp } from '../src/patchProp'
-import { ElementWithTransition, vtcKey } from '../src/components/Transition'
+import {
+  type ElementWithTransition,
+  vtcKey,
+} from '../src/components/Transition'
 import { svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: class patching', () => {
@@ -25,7 +28,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/__tests__/patchEvents.spec.ts b/packages/runtime-dom/__tests__/patchEvents.spec.ts
index d332977df96..1b08f85caa4 100644
--- a/packages/runtime-dom/__tests__/patchEvents.spec.ts
+++ b/packages/runtime-dom/__tests__/patchEvents.spec.ts
@@ -176,7 +176,7 @@ describe(`runtime-dom: events patching`, () => {
     }
     window.customElements.define('test-element', TestElement)
     const testElement = document.createElement('test-element', {
-      is: 'test-element'
+      is: 'test-element',
     })
     const fn1 = vi.fn()
     const fn2 = vi.fn()
diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index bf6362e7a0c..7c356f1a66c 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -1,5 +1,5 @@
 import { patchProp } from '../src/patchProp'
-import { render, h } from '../src'
+import { h, render } from '../src'
 
 describe('runtime-dom: props patching', () => {
   test('basic', () => {
@@ -106,7 +106,7 @@ describe('runtime-dom: props patching', () => {
     const fn = vi.fn()
     const comp = {
       render: () => 'foo',
-      unmounted: fn
+      unmounted: fn,
     }
     const root = document.createElement('div')
     render(h('div', null, [h(comp)]), root)
@@ -122,7 +122,7 @@ describe('runtime-dom: props patching', () => {
     const fn = vi.fn()
     const comp = {
       render: () => 'foo',
-      unmounted: fn
+      unmounted: fn,
     }
     const root = document.createElement('div')
     render(h('div', null, [h(comp)]), root)
@@ -137,7 +137,7 @@ describe('runtime-dom: props patching', () => {
     const fn = vi.fn()
     const comp = {
       render: () => 'foo',
-      unmounted: fn
+      unmounted: fn,
     }
     const root = document.createElement('div')
     render(h('div', null, [h(comp)]), root)
@@ -169,7 +169,7 @@ describe('runtime-dom: props patching', () => {
     Object.defineProperty(el, 'someProp', {
       set() {
         throw new TypeError('Invalid type')
-      }
+      },
     })
     patchProp(el, 'someProp', null, 'foo')
 
@@ -265,7 +265,7 @@ describe('runtime-dom: props patching', () => {
     patchProp(el, 'willValidate', true, null)
     expect(el.willValidate).toBe(true)
     expect(
-      'Failed setting prop "willValidate" on <select>'
+      'Failed setting prop "willValidate" on <select>',
     ).toHaveBeenWarnedLast()
   })
 
@@ -274,9 +274,9 @@ describe('runtime-dom: props patching', () => {
     render(
       h('select', { value: 'foo' }, [
         h('option', { value: 'foo' }, 'foo'),
-        h('option', { value: 'bar' }, 'bar')
+        h('option', { value: 'bar' }, 'bar'),
       ]),
-      root
+      root,
     )
     const el = root.children[0] as HTMLSelectElement
     expect(el.value).toBe('foo')
@@ -284,13 +284,29 @@ describe('runtime-dom: props patching', () => {
     render(
       h('select', { value: 'baz' }, [
         h('option', { value: 'foo' }, 'foo'),
-        h('option', { value: 'baz' }, 'baz')
+        h('option', { value: 'baz' }, 'baz'),
       ]),
-      root
+      root,
     )
     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')
+  })
+
+  // # 9762 should fallthrough to `key in el` logic for non embedded tags
+  test('width and height on custom elements', () => {
+    const el = document.createElement('foobar')
+    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/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index eeb60fb7eac..e7cd0984a19 100644
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -16,7 +16,7 @@ describe(`runtime-dom: style patching`, () => {
       get(): any {
         return value
       },
-      set: fn
+      set: fn,
     })
     patchProp(el, 'style', value, value)
     expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
@@ -39,7 +39,7 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     patchProp(el, 'style', null, {
       color: undefined,
-      borderRadius: null
+      borderRadius: null,
     })
     expect(el.style.cssText.replace(/\s/g, '')).toBe('')
 
@@ -47,7 +47,7 @@ describe(`runtime-dom: style patching`, () => {
       el,
       'style',
       { color: 'red' },
-      { color: null, borderRadius: undefined }
+      { color: null, borderRadius: undefined },
     )
     expect(el.style.cssText.replace(/\s/g, '')).toBe('')
   })
@@ -62,7 +62,7 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     patchProp(el, 'style', {}, { marginRight: '10px !important' })
     expect(el.style.cssText.replace(/\s/g, '')).toBe(
-      'margin-right:10px!important;'
+      'margin-right:10px!important;',
     )
   })
 
@@ -91,12 +91,12 @@ describe(`runtime-dom: style patching`, () => {
     const el = document.createElement('div')
     patchProp(el, 'style', null, { color: 'red;' })
     expect(
-      `Unexpected semicolon at the end of 'color' style value: 'red;'`
+      `Unexpected semicolon at the end of 'color' style value: 'red;'`,
     ).toHaveBeenWarned()
 
     patchProp(el, 'style', null, { '--custom': '100; ' })
     expect(
-      `Unexpected semicolon at the end of '--custom' style value: '100; '`
+      `Unexpected semicolon at the end of '--custom' style value: '100; '`,
     ).toHaveBeenWarned()
   })
 
@@ -112,7 +112,7 @@ describe(`runtime-dom: style patching`, () => {
       el as any,
       'style',
       { borderBottom: '1px solid red' },
-      { border: '1px solid green' }
+      { border: '1px solid green' },
     )
     expect(el.style.border).toBe('1px solid green')
     expect(el.style.borderBottom).toBe('1px solid green')
@@ -131,8 +131,8 @@ describe(`runtime-dom: style patching`, () => {
         },
         getPropertyValue(key: string) {
           return store[key]
-        }
-      }
+        },
+      },
     }
   }
 
@@ -154,7 +154,7 @@ describe(`runtime-dom: style patching`, () => {
       el as any,
       'style',
       {},
-      { display: ['-webkit-box', '-ms-flexbox', 'flex'] }
+      { display: ['-webkit-box', '-ms-flexbox', 'flex'] },
     )
     expect(el.style.display).toBe('flex')
   })
diff --git a/packages/runtime-dom/package.json b/packages/runtime-dom/package.json
index 3de508580aa..89c805a73df 100644
--- a/packages/runtime-dom/package.json
+++ b/packages/runtime-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",
@@ -10,6 +10,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/runtime-dom.d.ts",
+      "node": {
+        "production": "./dist/runtime-dom.cjs.prod.js",
+        "development": "./dist/runtime-dom.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/runtime-dom.esm-bundler.js",
+      "import": "./dist/runtime-dom.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "buildOptions": {
     "name": "VueRuntimeDOM",
@@ -35,8 +49,8 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-dom#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/runtime-core": "3.3.5",
-    "csstype": "^3.1.2"
+    "@vue/shared": "workspace:*",
+    "@vue/runtime-core": "workspace:*",
+    "csstype": "^3.1.3"
   }
 }
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 3af3f795b8e..01ce2bad464 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -1,27 +1,27 @@
 import {
-  ComponentOptionsMixin,
-  ComponentOptionsWithArrayProps,
-  ComponentOptionsWithObjectProps,
-  ComponentOptionsWithoutProps,
-  ComponentPropsOptions,
-  ComponentPublicInstance,
-  ComputedOptions,
-  EmitsOptions,
-  MethodOptions,
-  RenderFunction,
-  SetupContext,
-  ComponentInternalInstance,
-  VNode,
-  RootHydrateFunction,
-  ExtractPropTypes,
+  type ComponentInjectOptions,
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  type ComponentOptionsMixin,
+  type ComponentOptionsWithArrayProps,
+  type ComponentOptionsWithObjectProps,
+  type ComponentOptionsWithoutProps,
+  type ComponentPropsOptions,
+  type ComputedOptions,
+  type ConcreteComponent,
+  type DefineComponent,
+  type EmitsOptions,
+  type ExtractPropTypes,
+  type MethodOptions,
+  type RenderFunction,
+  type RootHydrateFunction,
+  type SetupContext,
+  type SlotsType,
+  type VNode,
   createVNode,
   defineComponent,
   nextTick,
   warn,
-  ConcreteComponent,
-  ComponentOptions,
-  ComponentInjectOptions,
-  SlotsType
 } from '@vue/runtime-core'
 import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
 import { hydrate, render } from '.'
@@ -37,8 +37,8 @@ export type VueElementConstructor<P = {}> = {
 export function defineCustomElement<Props, RawBindings = object>(
   setup: (
     props: Readonly<Props>,
-    ctx: SetupContext
-  ) => RawBindings | RenderFunction
+    ctx: SetupContext,
+  ) => RawBindings | RenderFunction,
 ): VueElementConstructor<Props>
 
 // overload 2: object format with no props
@@ -54,7 +54,7 @@ export function defineCustomElement<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   options: ComponentOptionsWithoutProps<
     Props,
@@ -69,7 +69,7 @@ export function defineCustomElement<
     I,
     II,
     S
-  > & { styles?: string[] }
+  > & { styles?: string[] },
 ): VueElementConstructor<Props>
 
 // overload 3: object format with array props declaration
@@ -85,7 +85,7 @@ export function defineCustomElement<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   options: ComponentOptionsWithArrayProps<
     PropNames,
@@ -100,7 +100,7 @@ export function defineCustomElement<
     I,
     II,
     S
-  > & { styles?: string[] }
+  > & { styles?: string[] },
 ): VueElementConstructor<{ [K in PropNames]: any }>
 
 // overload 4: object format with object props declaration
@@ -116,7 +116,7 @@ export function defineCustomElement<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  S extends SlotsType = {}
+  S extends SlotsType = {},
 >(
   options: ComponentOptionsWithObjectProps<
     PropsOptions,
@@ -131,19 +131,19 @@ export function defineCustomElement<
     I,
     II,
     S
-  > & { styles?: string[] }
+  > & { styles?: string[] },
 ): VueElementConstructor<ExtractPropTypes<PropsOptions>>
 
 // overload 5: defining a custom element from the returned value of
 // `defineComponent`
-export function defineCustomElement(options: {
-  new (...args: any[]): ComponentPublicInstance
-}): VueElementConstructor
+export function defineCustomElement<P>(
+  options: DefineComponent<P, any, any, any>,
+): VueElementConstructor<ExtractPropTypes<P>>
 
 /*! #__NO_SIDE_EFFECTS__ */
 export function defineCustomElement(
   options: any,
-  hydrate?: RootHydrateFunction
+  hydrate?: RootHydrateFunction,
 ): VueElementConstructor {
   const Comp = defineComponent(options) as any
   class VueCustomElement extends VueElement {
@@ -158,7 +158,7 @@ export function defineCustomElement(
 
 /*! #__NO_SIDE_EFFECTS__ */
 export const defineSSRCustomElement = ((options: any) => {
-  // @ts-ignore
+  // @ts-expect-error
   return defineCustomElement(options, hydrate)
 }) as typeof defineCustomElement
 
@@ -182,7 +182,7 @@ export class VueElement extends BaseClass {
   constructor(
     private _def: InnerComponentDef,
     private _props: Record<string, any> = {},
-    hydrate?: RootHydrateFunction
+    hydrate?: RootHydrateFunction,
   ) {
     super()
     if (this.shadowRoot && hydrate) {
@@ -191,7 +191,7 @@ export class VueElement extends BaseClass {
       if (__DEV__ && this.shadowRoot) {
         warn(
           `Custom element has pre-rendered declarative shadow root but is not ` +
-            `defined as hydratable. Use \`defineSSRCustomElement\`.`
+            `defined as hydratable. Use \`defineSSRCustomElement\`.`,
         )
       }
       this.attachShadow({ mode: 'open' })
@@ -307,7 +307,7 @@ export class VueElement extends BaseClass {
         },
         set(val) {
           this._setProp(key, val)
-        }
+        },
       })
     }
   }
@@ -335,7 +335,7 @@ export class VueElement extends BaseClass {
     key: string,
     val: any,
     shouldReflect = true,
-    shouldUpdate = true
+    shouldUpdate = true,
   ) {
     if (val !== this._props[key]) {
       this._props[key] = val
@@ -382,8 +382,8 @@ export class VueElement extends BaseClass {
         const dispatch = (event: string, args: any[]) => {
           this.dispatchEvent(
             new CustomEvent(event, {
-              detail: args
-            })
+              detail: args,
+            }),
           )
         }
 
diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index b0675213298..cce247fe1ae 100644
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -1,14 +1,14 @@
 import {
   BaseTransition,
-  BaseTransitionProps,
+  type BaseTransitionProps,
   BaseTransitionPropsValidators,
-  h,
+  DeprecationTypes,
+  type FunctionalComponent,
   assertNumber,
-  FunctionalComponent,
   compatUtils,
-  DeprecationTypes
+  h,
 } from '@vue/runtime-core'
-import { isObject, toNumber, extend, isArray } from '@vue/shared'
+import { extend, isArray, isObject, toNumber } from '@vue/shared'
 
 const TRANSITION = 'transition'
 const ANIMATION = 'animation'
@@ -46,7 +46,7 @@ export interface ElementWithTransition extends HTMLElement {
 // base Transition component, with DOM-specific logic.
 export const Transition: FunctionalComponent<TransitionProps> = (
   props,
-  { slots }
+  { slots },
 ) => h(BaseTransition, resolveTransitionProps(props), slots)
 
 Transition.displayName = 'Transition'
@@ -60,7 +60,7 @@ const DOMTransitionPropsValidators = {
   type: String,
   css: {
     type: Boolean,
-    default: true
+    default: true,
   },
   duration: [String, Number, Object],
   enterFromClass: String,
@@ -71,14 +71,14 @@ const DOMTransitionPropsValidators = {
   appearToClass: String,
   leaveFromClass: String,
   leaveActiveClass: String,
-  leaveToClass: String
+  leaveToClass: String,
 }
 
 export const TransitionPropsValidators = (Transition.props =
   /*#__PURE__*/ extend(
     {},
     BaseTransitionPropsValidators as any,
-    DOMTransitionPropsValidators
+    DOMTransitionPropsValidators,
   ))
 
 /**
@@ -87,7 +87,7 @@ export const TransitionPropsValidators = (Transition.props =
  */
 const callHook = (
   hook: Function | Function[] | undefined,
-  args: any[] = []
+  args: any[] = [],
 ) => {
   if (isArray(hook)) {
     hook.forEach(h => h(...args))
@@ -101,7 +101,7 @@ const callHook = (
  * intends to explicitly control the end of the transition.
  */
 const hasExplicitCallback = (
-  hook: Function | Function[] | undefined
+  hook: Function | Function[] | undefined,
 ): boolean => {
   return hook
     ? isArray(hook)
@@ -111,7 +111,7 @@ const hasExplicitCallback = (
 }
 
 export function resolveTransitionProps(
-  rawProps: TransitionProps
+  rawProps: TransitionProps,
 ): BaseTransitionProps<Element> {
   const baseProps: BaseTransitionProps<Element> = {}
   for (const key in rawProps) {
@@ -136,7 +136,7 @@ export function resolveTransitionProps(
     appearToClass = enterToClass,
     leaveFromClass = `${name}-leave-from`,
     leaveActiveClass = `${name}-leave-active`,
-    leaveToClass = `${name}-leave-to`
+    leaveToClass = `${name}-leave-to`,
   } = rawProps
 
   // legacy transition class compat
@@ -170,7 +170,7 @@ export function resolveTransitionProps(
     onLeaveCancelled,
     onBeforeAppear = onBeforeEnter,
     onAppear = onEnter,
-    onAppearCancelled = onEnterCancelled
+    onAppearCancelled = onEnterCancelled,
   } = baseProps
 
   const finishEnter = (el: Element, isAppear: boolean, done?: () => void) => {
@@ -181,7 +181,7 @@ export function resolveTransitionProps(
 
   const finishLeave = (
     el: Element & { _isLeaving?: boolean },
-    done?: () => void
+    done?: () => void,
   ) => {
     el._isLeaving = false
     removeTransitionClass(el, leaveFromClass)
@@ -269,12 +269,12 @@ export function resolveTransitionProps(
     onLeaveCancelled(el) {
       finishLeave(el)
       callHook(onLeaveCancelled, [el])
-    }
+    },
   } as BaseTransitionProps<Element>)
 }
 
 function normalizeDuration(
-  duration: TransitionProps['duration']
+  duration: TransitionProps['duration'],
 ): [number, number] | null {
   if (duration == null) {
     return null
@@ -325,7 +325,7 @@ function whenTransitionEnds(
   el: Element & { _endId?: number },
   expectedType: TransitionProps['type'] | undefined,
   explicitTimeout: number | null,
-  resolve: () => void
+  resolve: () => void,
 ) {
   const id = (el._endId = ++endId)
   const resolveIfNotStale = () => {
@@ -376,7 +376,7 @@ type StylePropertiesKey =
 
 export function getTransitionInfo(
   el: Element,
-  expectedType?: TransitionProps['type']
+  expectedType?: TransitionProps['type'],
 ): CSSTransitionInfo {
   const styles = window.getComputedStyle(el) as Pick<
     CSSStyleDeclaration,
@@ -425,13 +425,13 @@ export function getTransitionInfo(
   const hasTransform =
     type === TRANSITION &&
     /\b(transform|all)(,|$)/.test(
-      getStyleProperties(`${TRANSITION}Property`).toString()
+      getStyleProperties(`${TRANSITION}Property`).toString(),
     )
   return {
     type,
     timeout,
     propCount,
-    hasTransform
+    hasTransform,
   }
 }
 
diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts
index fc5d260b91e..f98e82b2734 100644
--- a/packages/runtime-dom/src/components/TransitionGroup.ts
+++ b/packages/runtime-dom/src/components/TransitionGroup.ts
@@ -1,30 +1,30 @@
 import {
-  TransitionProps,
+  type ElementWithTransition,
+  type TransitionProps,
+  TransitionPropsValidators,
   addTransitionClass,
-  removeTransitionClass,
-  ElementWithTransition,
+  forceReflow,
   getTransitionInfo,
+  removeTransitionClass,
   resolveTransitionProps,
-  TransitionPropsValidators,
-  forceReflow,
-  vtcKey
+  vtcKey,
 } from './Transition'
 import {
+  type ComponentOptions,
+  DeprecationTypes,
   Fragment,
-  VNode,
-  warn,
-  resolveTransitionHooks,
-  useTransitionState,
-  getTransitionRawChildren,
-  getCurrentInstance,
-  setTransitionHooks,
+  type SetupContext,
+  type VNode,
+  compatUtils,
   createVNode,
+  getCurrentInstance,
+  getTransitionRawChildren,
   onUpdated,
-  SetupContext,
+  resolveTransitionHooks,
+  setTransitionHooks,
   toRaw,
-  compatUtils,
-  DeprecationTypes,
-  ComponentOptions
+  useTransitionState,
+  warn,
 } from '@vue/runtime-core'
 import { extend } from '@vue/shared'
 
@@ -42,7 +42,7 @@ const TransitionGroupImpl: ComponentOptions = {
 
   props: /*#__PURE__*/ extend({}, TransitionPropsValidators, {
     tag: String,
-    moveClass: String
+    moveClass: String,
   }),
 
   setup(props: TransitionGroupProps, { slots }: SetupContext) {
@@ -62,7 +62,7 @@ const TransitionGroupImpl: ComponentOptions = {
         !hasCSSTransform(
           prevChildren[0].el as ElementWithTransition,
           instance.vnode.el as Node,
-          moveClass
+          moveClass,
         )
       ) {
         return
@@ -106,7 +106,7 @@ const TransitionGroupImpl: ComponentOptions = {
         !rawProps.tag &&
         compatUtils.checkCompatEnabled(
           DeprecationTypes.TRANSITION_GROUP_ROOT,
-          instance.parent
+          instance.parent,
         )
       ) {
         tag = 'span'
@@ -120,7 +120,7 @@ const TransitionGroupImpl: ComponentOptions = {
         if (child.key != null) {
           setTransitionHooks(
             child,
-            resolveTransitionHooks(child, cssTransitionProps, state, instance)
+            resolveTransitionHooks(child, cssTransitionProps, state, instance),
           )
         } else if (__DEV__) {
           warn(`<TransitionGroup> children must be keyed.`)
@@ -132,7 +132,7 @@ const TransitionGroupImpl: ComponentOptions = {
           const child = prevChildren[i]
           setTransitionHooks(
             child,
-            resolveTransitionHooks(child, cssTransitionProps, state, instance)
+            resolveTransitionHooks(child, cssTransitionProps, state, instance),
           )
           positionMap.set(child, (child.el as Element).getBoundingClientRect())
         }
@@ -140,7 +140,7 @@ const TransitionGroupImpl: ComponentOptions = {
 
       return createVNode(tag, null, children)
     }
-  }
+  },
 }
 
 if (__COMPAT__) {
@@ -192,7 +192,7 @@ function applyTranslation(c: VNode): VNode | undefined {
 function hasCSSTransform(
   el: ElementWithTransition,
   root: Node,
-  moveClass: string
+  moveClass: string,
 ): boolean {
   // Detect whether an element with the move class applied has
   // CSS transitions. Since the element may be inside an entering
diff --git a/packages/runtime-dom/src/directives/vModel.ts b/packages/runtime-dom/src/directives/vModel.ts
index 89cd5f9d49f..b2450b3cfb4 100644
--- a/packages/runtime-dom/src/directives/vModel.ts
+++ b/packages/runtime-dom/src/directives/vModel.ts
@@ -1,18 +1,19 @@
 import {
-  ObjectDirective,
-  VNode,
-  DirectiveHook,
-  DirectiveBinding,
-  warn
+  type DirectiveBinding,
+  type DirectiveHook,
+  type ObjectDirective,
+  type VNode,
+  nextTick,
+  warn,
 } from '@vue/runtime-core'
 import { addEventListener } from '../modules/events'
 import {
+  invokeArrayFns,
   isArray,
+  isSet,
   looseEqual,
   looseIndexOf,
-  invokeArrayFns,
   looseToNumber,
-  isSet
 } from '@vue/shared'
 
 type AssignerFn = (value: any) => void
@@ -38,7 +39,9 @@ function onCompositionEnd(e: Event) {
 
 const assignKey = Symbol('_assign')
 
-type ModelDirective<T> = ObjectDirective<T & { [assignKey]: AssignerFn }>
+type ModelDirective<T> = ObjectDirective<
+  T & { [assignKey]: AssignerFn; _assigning?: boolean }
+>
 
 // We are exporting the v-model runtime directly as vnode hooks so that it can
 // be tree-shaken in case v-model is never used.
@@ -83,25 +86,26 @@ export const vModelText: ModelDirective<
     el[assignKey] = getModelAssigner(vnode)
     // avoid clearing unresolved text. #2302
     if ((el as any).composing) return
+
+    const elValue =
+      number || el.type === 'number' ? looseToNumber(el.value) : el.value
+    const newValue = value == null ? '' : value
+
+    if (elValue === newValue) {
+      return
+    }
+
     if (document.activeElement === el && el.type !== 'range') {
       if (lazy) {
         return
       }
-      if (trim && el.value.trim() === value) {
+      if (trim && el.value.trim() === newValue) {
         return
       }
-      if (
-        (number || el.type === 'number') &&
-        looseToNumber(el.value) === value
-      ) {
-        return
-      }
-    }
-    const newValue = value == null ? '' : value
-    if (el.value !== newValue) {
-      el.value = newValue
     }
-  }
+
+    el.value = newValue
+  },
 }
 
 export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
@@ -142,13 +146,13 @@ export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
   beforeUpdate(el, binding, vnode) {
     el[assignKey] = getModelAssigner(vnode)
     setChecked(el, binding, vnode)
-  }
+  },
 }
 
 function setChecked(
   el: HTMLInputElement,
   { value, oldValue }: DirectiveBinding,
-  vnode: VNode
+  vnode: VNode,
 ) {
   // store the v-model value on the element so it can be accessed by the
   // change listener.
@@ -175,7 +179,7 @@ export const vModelRadio: ModelDirective<HTMLInputElement> = {
     if (value !== oldValue) {
       el.checked = looseEqual(value, vnode.props!.value)
     }
-  }
+  },
 }
 
 export const vModelSelect: ModelDirective<HTMLSelectElement> = {
@@ -187,47 +191,68 @@ export const vModelSelect: ModelDirective<HTMLSelectElement> = {
       const selectedVal = Array.prototype.filter
         .call(el.options, (o: HTMLOptionElement) => o.selected)
         .map((o: HTMLOptionElement) =>
-          number ? looseToNumber(getValue(o)) : getValue(o)
+          number ? looseToNumber(getValue(o)) : getValue(o),
         )
       el[assignKey](
         el.multiple
           ? isSetModel
             ? new Set(selectedVal)
             : selectedVal
-          : selectedVal[0]
+          : selectedVal[0],
       )
+      el._assigning = true
+      nextTick(() => {
+        el._assigning = false
+      })
     })
     el[assignKey] = getModelAssigner(vnode)
   },
   // set value in mounted & updated because <select> relies on its children
   // <option>s.
-  mounted(el, { value }) {
-    setSelected(el, value)
+  mounted(el, { value, oldValue, modifiers: { number } }) {
+    setSelected(el, value, oldValue, number)
   },
   beforeUpdate(el, _binding, vnode) {
     el[assignKey] = getModelAssigner(vnode)
   },
-  updated(el, { value }) {
-    setSelected(el, value)
-  }
+  updated(el, { value, oldValue, modifiers: { number } }) {
+    if (!el._assigning) {
+      setSelected(el, value, oldValue, number)
+    }
+  },
 }
 
-function setSelected(el: HTMLSelectElement, value: any) {
+function setSelected(
+  el: HTMLSelectElement,
+  value: any,
+  oldValue: any,
+  number: boolean,
+) {
   const isMultiple = el.multiple
-  if (isMultiple && !isArray(value) && !isSet(value)) {
+  const isArrayValue = isArray(value)
+  if (isMultiple && !isArrayValue && !isSet(value)) {
     __DEV__ &&
       warn(
         `<select multiple v-model> expects an Array or Set value for its binding, ` +
-          `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`
+          `but got ${Object.prototype.toString.call(value).slice(8, -1)}.`,
       )
     return
   }
+
   for (let i = 0, l = el.options.length; i < l; i++) {
     const option = el.options[i]
     const optionValue = getValue(option)
     if (isMultiple) {
-      if (isArray(value)) {
-        option.selected = looseIndexOf(value, optionValue) > -1
+      if (isArrayValue) {
+        const optionType = typeof optionValue
+        // fast path for string / number values
+        if (optionType === 'string' || optionType === 'number') {
+          option.selected = value.includes(
+            number ? looseToNumber(optionValue) : optionValue,
+          )
+        } else {
+          option.selected = looseIndexOf(value, optionValue) > -1
+        }
       } else {
         option.selected = value.has(optionValue)
       }
@@ -251,7 +276,7 @@ function getValue(el: HTMLOptionElement | HTMLInputElement) {
 // retrieve raw value for true-value and false-value set via :true-value or :false-value bindings
 function getCheckboxValue(
   el: HTMLInputElement & { _trueValue?: any; _falseValue?: any },
-  checked: boolean
+  checked: boolean,
 ) {
   const key = checked ? '_trueValue' : '_falseValue'
   return key in el ? el[key] : checked
@@ -271,7 +296,7 @@ export const vModelDynamic: ObjectDirective<
   },
   updated(el, binding, vnode, prevVNode) {
     callModelHook(el, binding, vnode, prevVNode, 'updated')
-  }
+  },
 }
 
 function resolveDynamicModel(tagName: string, type: string | undefined) {
@@ -297,11 +322,11 @@ function callModelHook(
   binding: DirectiveBinding,
   vnode: VNode,
   prevVNode: VNode | null,
-  hook: keyof ObjectDirective
+  hook: keyof ObjectDirective,
 ) {
   const modelToUse = resolveDynamicModel(
     el.tagName,
-    vnode.props && vnode.props.type
+    vnode.props && vnode.props.type,
   )
   const fn = modelToUse[hook] as DirectiveHook
   fn && fn(el, binding, vnode, prevVNode)
@@ -339,7 +364,7 @@ export function initVModelForSSR() {
     const modelToUse = resolveDynamicModel(
       // resolveDynamicModel expects an uppercase tag name, but vnode.type is lowercase
       vnode.type.toUpperCase(),
-      vnode.props && vnode.props.type
+      vnode.props && vnode.props.type,
     )
     if (modelToUse.getSSRProps) {
       return modelToUse.getSSRProps(binding, vnode)
diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
index 06e596266cf..5a7d9e4af4a 100644
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/packages/runtime-dom/src/directives/vOn.ts
@@ -1,9 +1,9 @@
 import {
-  getCurrentInstance,
+  type ComponentInternalInstance,
   DeprecationTypes,
-  LegacyConfig,
+  type LegacyConfig,
   compatUtils,
-  ComponentInternalInstance
+  getCurrentInstance,
 } from '@vue/runtime-core'
 import { hyphenate, isArray } from '@vue/shared'
 
@@ -26,20 +26,30 @@ const modifierGuards: Record<
   middle: e => 'button' in e && (e as MouseEvent).button !== 1,
   right: e => 'button' in e && (e as MouseEvent).button !== 2,
   exact: (e, modifiers) =>
-    systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m))
+    systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m)),
 }
 
 /**
  * @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 = <
+  T extends (event: Event, ...args: unknown[]) => any,
+>(
+  fn: T & { _withMods?: { [key: string]: T } },
+  modifiers: string[],
+) => {
+  const cache = fn._withMods || (fn._withMods = {})
+  const cacheKey = modifiers.join('.')
+  return (
+    cache[cacheKey] ||
+    (cache[cacheKey] = ((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)
+  )
 }
 
 // Kept for 2.x compat.
@@ -51,13 +61,16 @@ const keyNames: Record<string, string | string[]> = {
   left: 'arrow-left',
   right: 'arrow-right',
   down: 'arrow-down',
-  delete: 'backspace'
+  delete: 'backspace',
 }
 
 /**
  * @private
  */
-export const withKeys = (fn: Function, modifiers: string[]) => {
+export const withKeys = <T extends (event: KeyboardEvent) => any>(
+  fn: T & { _withKeys?: { [k: string]: T } },
+  modifiers: string[],
+) => {
   let globalKeyCodes: LegacyConfig['keyCodes']
   let instance: ComponentInternalInstance | null = null
   if (__COMPAT__) {
@@ -72,45 +85,51 @@ export const withKeys = (fn: Function, modifiers: string[]) => {
     if (__DEV__ && modifiers.some(m => /^\d+$/.test(m))) {
       compatUtils.warnDeprecation(
         DeprecationTypes.V_ON_KEYCODE_MODIFIER,
-        instance
+        instance,
       )
     }
   }
 
-  return (event: KeyboardEvent) => {
-    if (!('key' in event)) {
-      return
-    }
+  const cache: { [k: string]: T } = fn._withKeys || (fn._withKeys = {})
+  const cacheKey = modifiers.join('.')
 
-    const eventKey = hyphenate(event.key)
-    if (modifiers.some(k => k === eventKey || keyNames[k] === eventKey)) {
-      return fn(event)
-    }
+  return (
+    cache[cacheKey] ||
+    (cache[cacheKey] = (event => {
+      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)
+              }
             }
           }
         }
       }
-    }
-  }
+    }) as T)
+  )
 }
diff --git a/packages/runtime-dom/src/directives/vShow.ts b/packages/runtime-dom/src/directives/vShow.ts
index b848ec9980f..4bf6779edfd 100644
--- a/packages/runtime-dom/src/directives/vShow.ts
+++ b/packages/runtime-dom/src/directives/vShow.ts
@@ -1,4 +1,4 @@
-import { ObjectDirective } from '@vue/runtime-core'
+import type { ObjectDirective } from '@vue/runtime-core'
 
 export const vShowOldKey = Symbol('_vod')
 
@@ -7,7 +7,7 @@ interface VShowElement extends HTMLElement {
   [vShowOldKey]: string
 }
 
-export const vShow: ObjectDirective<VShowElement> = {
+export const vShow: ObjectDirective<VShowElement> & { name?: 'show' } = {
   beforeMount(el, { value }, { transition }) {
     el[vShowOldKey] = el.style.display === 'none' ? '' : el.style.display
     if (transition && value) {
@@ -22,7 +22,11 @@ export const vShow: ObjectDirective<VShowElement> = {
     }
   },
   updated(el, { value, oldValue }, { transition }) {
-    if (!value === !oldValue) return
+    if (
+      !value === !oldValue &&
+      (el.style.display === el[vShowOldKey] || !value)
+    )
+      return
     if (transition) {
       if (value) {
         transition.beforeEnter(el)
@@ -39,7 +43,11 @@ export const vShow: ObjectDirective<VShowElement> = {
   },
   beforeUnmount(el, { value }) {
     setDisplay(el, value)
-  }
+  },
+}
+
+if (__DEV__) {
+  vShow.name = 'show'
 }
 
 function setDisplay(el: VShowElement, value: unknown): void {
diff --git a/packages/runtime-dom/src/helpers/useCssModule.ts b/packages/runtime-dom/src/helpers/useCssModule.ts
index d96dc69c342..464951f1c45 100644
--- a/packages/runtime-dom/src/helpers/useCssModule.ts
+++ b/packages/runtime-dom/src/helpers/useCssModule.ts
@@ -1,4 +1,4 @@
-import { warn, getCurrentInstance } from '@vue/runtime-core'
+import { getCurrentInstance, warn } from '@vue/runtime-core'
 import { EMPTY_OBJ } from '@vue/shared'
 
 export function useCssModule(name = '$style'): Record<string, string> {
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
index e0a95c9ca99..1666e3cb3dc 100644
--- a/packages/runtime-dom/src/helpers/useCssVars.ts
+++ b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -1,15 +1,16 @@
 import {
-  getCurrentInstance,
-  warn,
-  VNode,
   Fragment,
   Static,
-  watchPostEffect,
+  type VNode,
+  getCurrentInstance,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  warn,
+  watchPostEffect,
 } from '@vue/runtime-core'
 import { ShapeFlags } from '@vue/shared'
 
+export const CSS_VAR_TEXT = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
 /**
  * Runtime helper for SFC's CSS variable injection feature.
  * @private
@@ -27,10 +28,14 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
 
   const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
     Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
     ).forEach(node => setVarsOnNode(node, vars))
   })
 
+  if (__DEV__) {
+    instance.getCssVars = () => getter(instance.proxy)
+  }
+
   const setVars = () => {
     const vars = getter(instance.proxy)
     setVarsOnVNode(instance.subTree, vars)
@@ -79,8 +84,11 @@ function setVarsOnVNode(vnode: VNode, vars: Record<string, string>) {
 function setVarsOnNode(el: Node, vars: Record<string, string>) {
   if (el.nodeType === 1) {
     const style = (el as HTMLElement).style
+    let cssText = ''
     for (const key in vars) {
       style.setProperty(`--${key}`, vars[key])
+      cssText += `--${key}: ${vars[key]};`
     }
+    ;(style as any)[CSS_VAR_TEXT] = cssText
   }
 }
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ad818a34bb7..44ada3d935f 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -1,27 +1,29 @@
 import {
-  createRenderer,
+  type App,
+  type CreateAppFunction,
+  DeprecationTypes,
+  type ElementNamespace,
+  type HydrationRenderer,
+  type Renderer,
+  type RootHydrateFunction,
+  type RootRenderFunction,
+  compatUtils,
   createHydrationRenderer,
-  warn,
-  RootRenderFunction,
-  CreateAppFunction,
-  Renderer,
-  HydrationRenderer,
-  App,
-  RootHydrateFunction,
+  createRenderer,
   isRuntimeOnly,
-  DeprecationTypes,
-  compatUtils
+  warn,
 } from '@vue/runtime-core'
 import { nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
 // Importing from the compiler, will be tree-shaken in prod
 import {
+  NOOP,
+  extend,
   isFunction,
-  isString,
   isHTMLTag,
+  isMathMLTag,
   isSVGTag,
-  extend,
-  NOOP
+  isString,
 } from '@vue/shared'
 
 declare module '@vue/reactivity' {
@@ -89,7 +91,7 @@ export const createApp = ((...args) => {
           if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {
             compatUtils.warnDeprecation(
               DeprecationTypes.GLOBAL_MOUNT_CONTAINER,
-              null
+              null,
             )
             break
           }
@@ -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,19 +124,31 @@ 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),
-    writable: false
+    value: (tag: string) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
+    writable: false,
   })
 }
 
@@ -149,9 +163,9 @@ function injectCompilerOptionsCheck(app: App) {
       set() {
         warn(
           `The \`isCustomElement\` config option is deprecated. Use ` +
-            `\`compilerOptions.isCustomElement\` instead.`
+            `\`compilerOptions.isCustomElement\` instead.`,
         )
-      }
+      },
     })
 
     const compilerOptions = app.config.compilerOptions
@@ -171,19 +185,19 @@ function injectCompilerOptionsCheck(app: App) {
       },
       set() {
         warn(msg)
-      }
+      },
     })
   }
 }
 
 function normalizeContainer(
-  container: Element | ShadowRoot | string
+  container: Element | ShadowRoot | string,
 ): Element | null {
   if (isString(container)) {
     const res = document.querySelector(container)
     if (__DEV__ && !res) {
       warn(
-        `Failed to mount app: mount target selector "${container}" returned null.`
+        `Failed to mount app: mount target selector "${container}" returned null.`,
       )
     }
     return res
@@ -195,7 +209,7 @@ function normalizeContainer(
     container.mode === 'closed'
   ) {
     warn(
-      `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`
+      `mounting on a ShadowRoot with \`{mode: "closed"}\` may lead to unpredictable bugs`,
     )
   }
   return container as any
@@ -206,7 +220,7 @@ export {
   defineCustomElement,
   defineSSRCustomElement,
   VueElement,
-  type VueElementConstructor
+  type VueElementConstructor,
 } from './apiCustomElement'
 
 // SFC CSS utilities
@@ -217,7 +231,7 @@ export { useCssVars } from './helpers/useCssVars'
 export { Transition, type TransitionProps } from './components/Transition'
 export {
   TransitionGroup,
-  type TransitionGroupProps
+  type TransitionGroupProps,
 } from './components/TransitionGroup'
 
 // **Internal** DOM-only runtime directive helpers
@@ -226,7 +240,7 @@ export {
   vModelCheckbox,
   vModelRadio,
   vModelSelect,
-  vModelDynamic
+  vModelDynamic,
 } from './directives/vModel'
 export { withModifiers, withKeys } from './directives/vOn'
 export { vShow } from './directives/vShow'
diff --git a/packages/runtime-dom/src/jsx.ts b/packages/runtime-dom/src/jsx.ts
index d3c0332c7c3..b59099f0286 100644
--- a/packages/runtime-dom/src/jsx.ts
+++ b/packages/runtime-dom/src/jsx.ts
@@ -26,7 +26,7 @@
 //                 Kanitkorn Sujautra <https://github.com/lukyth>
 //                 Sebastian Silbermann <https://github.com/eps1lon>
 
-import * as CSS from 'csstype'
+import type * as CSS from 'csstype'
 
 export interface CSSProperties
   extends CSS.Properties<string | number>,
@@ -46,7 +46,7 @@ type Booleanish = boolean | 'true' | 'false'
 type Numberish = number | string
 
 // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
-interface AriaAttributes {
+export interface AriaAttributes {
   /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
   'aria-activedescendant'?: string
   /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
@@ -188,7 +188,17 @@ interface AriaAttributes {
    * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
    * @see aria-atomic.
    */
-  'aria-relevant'?: 'additions' | 'additions text' | 'all' | 'removals' | 'text'
+  'aria-relevant'?:
+    | 'additions'
+    | 'additions removals'
+    | 'additions text'
+    | 'all'
+    | 'removals'
+    | 'removals additions'
+    | 'removals text'
+    | 'text'
+    | 'text additions'
+    | 'text removals'
   /** Indicates that user input is required on the element before a form may be submitted. */
   'aria-required'?: Booleanish
   /** Defines a human-readable, author-localized description for the role of an element. */
@@ -234,7 +244,13 @@ interface AriaAttributes {
 }
 
 // Vue's style normalization supports nested arrays
-export type StyleValue = string | CSSProperties | Array<StyleValue>
+export type StyleValue =
+  | false
+  | null
+  | undefined
+  | string
+  | CSSProperties
+  | Array<StyleValue>
 
 export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
   innerHTML?: string
@@ -244,7 +260,7 @@ export interface HTMLAttributes extends AriaAttributes, EventHandlers<Events> {
 
   // Standard HTML Attributes
   accesskey?: string
-  contenteditable?: Booleanish | 'inherit'
+  contenteditable?: Booleanish | 'inherit' | 'plaintext-only'
   contextmenu?: string
   dir?: string
   draggable?: Booleanish
@@ -367,7 +383,7 @@ export interface ButtonHTMLAttributes extends HTMLAttributes {
   formtarget?: string
   name?: string
   type?: 'submit' | 'reset' | 'button'
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number
 }
 
 export interface CanvasHTMLAttributes extends HTMLAttributes {
@@ -385,11 +401,12 @@ export interface ColgroupHTMLAttributes extends HTMLAttributes {
 }
 
 export interface DataHTMLAttributes extends HTMLAttributes {
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number
 }
 
 export interface DetailsHTMLAttributes extends HTMLAttributes {
   open?: Booleanish
+  onToggle?: Event
 }
 
 export interface DelHTMLAttributes extends HTMLAttributes {
@@ -433,13 +450,17 @@ export interface IframeHTMLAttributes extends HTMLAttributes {
   allow?: string
   allowfullscreen?: Booleanish
   allowtransparency?: Booleanish
+  /** @deprecated */
   frameborder?: Numberish
   height?: Numberish
+  /** @deprecated */
   marginheight?: Numberish
+  /** @deprecated */
   marginwidth?: Numberish
   name?: string
   referrerpolicy?: HTMLAttributeReferrerPolicy
   sandbox?: string
+  /** @deprecated */
   scrolling?: string
   seamless?: Booleanish
   src?: string
@@ -452,13 +473,13 @@ export interface ImgHTMLAttributes extends HTMLAttributes {
   crossorigin?: 'anonymous' | 'use-credentials' | ''
   decoding?: 'async' | 'auto' | 'sync'
   height?: Numberish
+  loading?: 'eager' | 'lazy'
   referrerpolicy?: HTMLAttributeReferrerPolicy
   sizes?: string
   src?: string
   srcset?: string
   usemap?: string
   width?: Numberish
-  loading?: 'lazy' | 'eager'
 }
 
 export interface InsHTMLAttributes extends HTMLAttributes {
@@ -500,6 +521,14 @@ export interface InputHTMLAttributes extends HTMLAttributes {
   checked?: Booleanish | any[] | Set<any> // for IDE v-model multi-checkbox support
   crossorigin?: string
   disabled?: Booleanish
+  enterKeyHint?:
+    | 'enter'
+    | 'done'
+    | 'go'
+    | 'next'
+    | 'previous'
+    | 'search'
+    | 'send'
   form?: string
   formaction?: string
   formenctype?: string
@@ -543,7 +572,7 @@ export interface LabelHTMLAttributes extends HTMLAttributes {
 }
 
 export interface LiHTMLAttributes extends HTMLAttributes {
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number
 }
 
 export interface LinkHTMLAttributes extends HTMLAttributes {
@@ -557,6 +586,7 @@ export interface LinkHTMLAttributes extends HTMLAttributes {
   rel?: string
   sizes?: string
   type?: string
+  charset?: string
 }
 
 export interface MapHTMLAttributes extends HTMLAttributes {
@@ -594,7 +624,7 @@ export interface MeterHTMLAttributes extends HTMLAttributes {
   max?: Numberish
   min?: Numberish
   optimum?: Numberish
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number
 }
 
 export interface QuoteHTMLAttributes extends HTMLAttributes {
@@ -639,16 +669,17 @@ export interface OutputHTMLAttributes extends HTMLAttributes {
 
 export interface ParamHTMLAttributes extends HTMLAttributes {
   name?: string
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number
 }
 
 export interface ProgressHTMLAttributes extends HTMLAttributes {
   max?: Numberish
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number
 }
 
 export interface ScriptHTMLAttributes extends HTMLAttributes {
   async?: Booleanish
+  /** @deprecated */
   charset?: string
   crossorigin?: string
   defer?: Booleanish
@@ -691,6 +722,7 @@ export interface TableHTMLAttributes extends HTMLAttributes {
   cellpadding?: Numberish
   cellspacing?: Numberish
   summary?: string
+  width?: Numberish
 }
 
 export interface TextareaHTMLAttributes extends HTMLAttributes {
@@ -707,7 +739,7 @@ export interface TextareaHTMLAttributes extends HTMLAttributes {
   readonly?: Booleanish
   required?: Booleanish
   rows?: Numberish
-  value?: string | string[] | number
+  value?: string | ReadonlyArray<string> | number | null
   wrap?: string
 }
 
@@ -717,6 +749,9 @@ export interface TdHTMLAttributes extends HTMLAttributes {
   headers?: string
   rowspan?: Numberish
   scope?: string
+  abbr?: string
+  height?: Numberish
+  width?: Numberish
   valign?: 'top' | 'middle' | 'bottom' | 'baseline'
 }
 
@@ -726,6 +761,7 @@ export interface ThHTMLAttributes extends HTMLAttributes {
   headers?: string
   rowspan?: Numberish
   scope?: string
+  abbr?: string
 }
 
 export interface TimeHTMLAttributes extends HTMLAttributes {
@@ -746,6 +782,7 @@ export interface VideoHTMLAttributes extends MediaHTMLAttributes {
   poster?: string
   width?: Numberish
   disablePictureInPicture?: Booleanish
+  disableRemotePlayback?: Booleanish
 }
 
 export interface WebViewHTMLAttributes extends HTMLAttributes {
@@ -794,6 +831,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
   // Other HTML properties supported by SVG elements in browsers
   role?: string
   tabindex?: Numberish
+  crossOrigin?: 'anonymous' | 'use-credentials' | ''
 
   // SVG Specific attributes
   'accent-height'?: Numberish
@@ -1039,6 +1077,7 @@ export interface SVGAttributes extends AriaAttributes, EventHandlers<Events> {
   xlinkTitle?: string
   xlinkType?: string
   xmlns?: string
+  xmlnsXlink?: string
   y1?: Numberish
   y2?: Numberish
   y?: Numberish
@@ -1347,7 +1386,7 @@ type EventHandlers<E> = {
     : (payload: E[K]) => void
 }
 
-import { VNodeRef } from '@vue/runtime-core'
+import type { VNodeRef } from '@vue/runtime-core'
 
 export type ReservedProps = {
   key?: string | number | symbol
diff --git a/packages/runtime-dom/src/modules/attrs.ts b/packages/runtime-dom/src/modules/attrs.ts
index 41648ed50dc..ff3ce36bf52 100644
--- a/packages/runtime-dom/src/modules/attrs.ts
+++ b/packages/runtime-dom/src/modules/attrs.ts
@@ -1,13 +1,13 @@
 import {
+  NOOP,
   includeBooleanAttr,
   isSpecialBooleanAttr,
   makeMap,
-  NOOP
 } from '@vue/shared'
 import {
+  type ComponentInternalInstance,
+  DeprecationTypes,
   compatUtils,
-  ComponentInternalInstance,
-  DeprecationTypes
 } from '@vue/runtime-core'
 
 export const xlinkNS = 'http://www.w3.org/1999/xlink'
@@ -17,7 +17,7 @@ export function patchAttr(
   key: string,
   value: any,
   isSVG: boolean,
-  instance?: ComponentInternalInstance | null
+  instance?: ComponentInternalInstance | null,
 ) {
   if (isSVG && key.startsWith('xlink:')) {
     if (value == null) {
@@ -50,15 +50,15 @@ export function compatCoerceAttr(
   el: Element,
   key: string,
   value: unknown,
-  instance: ComponentInternalInstance | null = null
+  instance: ComponentInternalInstance | null = null,
 ): boolean {
   if (isEnumeratedAttr(key)) {
     const v2CoercedValue =
       value === null
         ? 'false'
         : typeof value !== 'boolean' && value !== undefined
-        ? 'true'
-        : null
+          ? 'true'
+          : null
     if (
       v2CoercedValue &&
       compatUtils.softAssertCompatEnabled(
@@ -66,7 +66,7 @@ export function compatCoerceAttr(
         instance,
         key,
         value,
-        v2CoercedValue
+        v2CoercedValue,
       )
     ) {
       el.setAttribute(key, v2CoercedValue)
@@ -78,7 +78,7 @@ export function compatCoerceAttr(
     compatUtils.softAssertCompatEnabled(
       DeprecationTypes.ATTR_FALSE_VALUE,
       instance,
-      key
+      key,
     )
   ) {
     el.removeAttribute(key)
diff --git a/packages/runtime-dom/src/modules/class.ts b/packages/runtime-dom/src/modules/class.ts
index bf2c6280c77..d4f6c6d9097 100644
--- a/packages/runtime-dom/src/modules/class.ts
+++ b/packages/runtime-dom/src/modules/class.ts
@@ -1,4 +1,4 @@
-import { ElementWithTransition, vtcKey } from '../components/Transition'
+import { type ElementWithTransition, vtcKey } from '../components/Transition'
 
 // compiler should normalize class + :class bindings on the same element
 // into a single binding ['staticClass', dynamic]
diff --git a/packages/runtime-dom/src/modules/events.ts b/packages/runtime-dom/src/modules/events.ts
index 884c55c9232..0335b6be0db 100644
--- a/packages/runtime-dom/src/modules/events.ts
+++ b/packages/runtime-dom/src/modules/events.ts
@@ -1,8 +1,8 @@
 import { hyphenate, isArray } from '@vue/shared'
 import {
+  type ComponentInternalInstance,
   ErrorCodes,
-  ComponentInternalInstance,
-  callWithAsyncErrorHandling
+  callWithAsyncErrorHandling,
 } from '@vue/runtime-core'
 
 interface Invoker extends EventListener {
@@ -16,7 +16,7 @@ export function addEventListener(
   el: Element,
   event: string,
   handler: EventListener,
-  options?: EventListenerOptions
+  options?: EventListenerOptions,
 ) {
   el.addEventListener(event, handler, options)
 }
@@ -25,7 +25,7 @@ export function removeEventListener(
   el: Element,
   event: string,
   handler: EventListener,
-  options?: EventListenerOptions
+  options?: EventListenerOptions,
 ) {
   el.removeEventListener(event, handler, options)
 }
@@ -37,7 +37,7 @@ export function patchEvent(
   rawName: string,
   prevValue: EventValue | null,
   nextValue: EventValue | null,
-  instance: ComponentInternalInstance | null = null
+  instance: ComponentInternalInstance | null = null,
 ) {
   // vei = vue event invokers
   const invokers = el[veiKey] || (el[veiKey] = {})
@@ -84,7 +84,7 @@ const getNow = () =>
 
 function createInvoker(
   initialValue: EventValue,
-  instance: ComponentInternalInstance | null
+  instance: ComponentInternalInstance | null,
 ) {
   const invoker: Invoker = (e: Event & { _vts?: number }) => {
     // async edge case vuejs/vue#6566
@@ -108,7 +108,7 @@ function createInvoker(
       patchStopImmediatePropagation(e, invoker.value),
       instance,
       ErrorCodes.NATIVE_EVENT_HANDLER,
-      [e]
+      [e],
     )
   }
   invoker.value = initialValue
@@ -118,7 +118,7 @@ function createInvoker(
 
 function patchStopImmediatePropagation(
   e: Event,
-  value: EventValue
+  value: EventValue,
 ): EventValue {
   if (isArray(value)) {
     const originalStop = e.stopImmediatePropagation
diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts
index cdf9d84cf5d..3c09a127941 100644
--- a/packages/runtime-dom/src/modules/props.ts
+++ b/packages/runtime-dom/src/modules/props.ts
@@ -2,7 +2,7 @@
 // Reason: potentially setting innerHTML.
 // This can come from explicit usage of v-html or innerHTML as a prop in render
 
-import { warn, DeprecationTypes, compatUtils } from '@vue/runtime-core'
+import { DeprecationTypes, compatUtils, warn } from '@vue/runtime-core'
 import { includeBooleanAttr } from '@vue/shared'
 
 // functions. The user is responsible for using them with only trusted content.
@@ -16,7 +16,7 @@ export function patchDOMProp(
   prevChildren: any,
   parentComponent: any,
   parentSuspense: any,
-  unmountChildren: any
+  unmountChildren: any,
 ) {
   if (key === 'innerHTML' || key === 'textContent') {
     if (prevChildren) {
@@ -71,7 +71,7 @@ export function patchDOMProp(
       value === false &&
       compatUtils.isCompatEnabled(
         DeprecationTypes.ATTR_FALSE_VALUE,
-        parentComponent
+        parentComponent,
       )
     ) {
       const type = typeof el[key]
@@ -80,7 +80,7 @@ export function patchDOMProp(
           compatUtils.warnDeprecation(
             DeprecationTypes.ATTR_FALSE_VALUE,
             parentComponent,
-            key
+            key,
           )
         value = type === 'number' ? 0 : ''
         needRemove = true
@@ -99,7 +99,7 @@ export function patchDOMProp(
       warn(
         `Failed setting prop "${key}" on <${tag.toLowerCase()}>: ` +
           `value ${value} is invalid.`,
-        e
+        e,
       )
     }
   }
diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index c18fd8aa9d5..9f897a6b2b0 100644
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -1,12 +1,17 @@
-import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
+import { capitalize, hyphenate, isArray, isString } from '@vue/shared'
 import { camelize, warn } from '@vue/runtime-core'
 import { vShowOldKey } from '../directives/vShow'
+import { CSS_VAR_TEXT } from '../helpers/useCssVars'
 
 type Style = string | Record<string, string | string[]> | null
 
+const displayRE = /(^|;)\s*display\s*:/
+
 export function patchStyle(el: Element, prev: Style, next: Style) {
   const style = (el as HTMLElement).style
   const isCssString = isString(next)
+  const currentDisplay = style.display
+  let hasControlledDisplay = false
   if (next && !isCssString) {
     if (prev && !isString(prev)) {
       for (const key in prev) {
@@ -16,23 +21,32 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
       }
     }
     for (const key in next) {
+      if (key === 'display') {
+        hasControlledDisplay = true
+      }
       setStyle(style, key, next[key])
     }
   } else {
-    const currentDisplay = style.display
     if (isCssString) {
       if (prev !== next) {
+        // #9821
+        const cssVarText = (style as any)[CSS_VAR_TEXT]
+        if (cssVarText) {
+          ;(next as string) += ';' + cssVarText
+        }
         style.cssText = next as string
+        hasControlledDisplay = displayRE.test(next)
       }
     } else if (prev) {
       el.removeAttribute('style')
     }
-    // indicates that the `display` of the element is controlled by `v-show`,
-    // so we always keep the current `display` value regardless of the `style`
-    // value, thus handing over control to `v-show`.
-    if (vShowOldKey in el) {
-      style.display = currentDisplay
-    }
+  }
+  // indicates that the `display` of the element is controlled by `v-show`,
+  // so we always keep the current `display` value regardless of the `style`
+  // value, thus handing over control to `v-show`.
+  if (vShowOldKey in el) {
+    el[vShowOldKey] = hasControlledDisplay ? style.display : ''
+    style.display = currentDisplay
   }
 }
 
@@ -42,7 +56,7 @@ const importantRE = /\s*!important$/
 function setStyle(
   style: CSSStyleDeclaration,
   name: string,
-  val: string | string[]
+  val: string | string[],
 ) {
   if (isArray(val)) {
     val.forEach(v => setStyle(style, name, v))
@@ -51,7 +65,7 @@ function setStyle(
     if (__DEV__) {
       if (semicolonRE.test(val)) {
         warn(
-          `Unexpected semicolon at the end of '${name}' style value: '${val}'`
+          `Unexpected semicolon at the end of '${name}' style value: '${val}'`,
         )
       }
     }
@@ -65,7 +79,7 @@ function setStyle(
         style.setProperty(
           hyphenate(prefixed),
           val.replace(importantRE, ''),
-          'important'
+          'important',
         )
       } else {
         style[prefixed as any] = val
diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index daf56fc6f3a..a318000aa91 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'
+import type { 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)
@@ -86,7 +96,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       // first
       before ? before.nextSibling! : parent.firstChild!,
       // last
-      anchor ? anchor.previousSibling! : parent.lastChild!
+      anchor ? anchor.previousSibling! : parent.lastChild!,
     ]
-  }
+  },
 }
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 6d65a63a88c..ef0197ed23c 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -3,10 +3,15 @@ import { patchStyle } from './modules/style'
 import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
-import { isOn, isString, isFunction, isModelListener } from '@vue/shared'
-import { RendererOptions } from '@vue/runtime-core'
+import { isFunction, isModelListener, isOn, isString } from '@vue/shared'
+import type { 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
 
 type DOMRendererOptions = RendererOptions<Node, Element>
 
@@ -15,12 +20,13 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
   key,
   prevValue,
   nextValue,
-  isSVG = false,
+  namespace,
   prevChildren,
   parentComponent,
   parentSuspense,
-  unmountChildren
+  unmountChildren,
 ) => {
+  const isSVG = namespace === 'svg'
   if (key === 'class') {
     patchClass(el, nextValue, isSVG)
   } else if (key === 'style') {
@@ -34,8 +40,8 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
     key[0] === '.'
       ? ((key = key.slice(1)), true)
       : key[0] === '^'
-      ? ((key = key.slice(1)), false)
-      : shouldSetAsProp(el, key, nextValue, isSVG)
+        ? ((key = key.slice(1)), false)
+        : shouldSetAsProp(el, key, nextValue, isSVG)
   ) {
     patchDOMProp(
       el,
@@ -44,7 +50,7 @@ export const patchProp: DOMRendererOptions['patchProp'] = (
       prevChildren,
       parentComponent,
       parentSuspense,
-      unmountChildren
+      unmountChildren,
     )
   } else {
     // special case for <input v-model type="checkbox"> with
@@ -64,7 +70,7 @@ function shouldSetAsProp(
   el: Element,
   key: string,
   value: unknown,
-  isSVG: boolean
+  isSVG: boolean,
 ) {
   if (isSVG) {
     // most keys must be set as attribute on svg elements to work
@@ -73,7 +79,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
@@ -105,8 +111,21 @@ function shouldSetAsProp(
     return false
   }
 
+  // #8780 the width or height of embedded tags must be set as attribute
+  if (key === 'width' || key === 'height') {
+    const tag = el.tagName
+    if (
+      tag === 'IMG' ||
+      tag === 'VIDEO' ||
+      tag === 'CANVAS' ||
+      tag === 'SOURCE'
+    ) {
+      return false
+    }
+  }
+
   // 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/runtime-test/__tests__/testRuntime.spec.ts b/packages/runtime-test/__tests__/testRuntime.spec.ts
index b148e72a48b..2b6e12c4769 100644
--- a/packages/runtime-test/__tests__/testRuntime.spec.ts
+++ b/packages/runtime-test/__tests__/testRuntime.spec.ts
@@ -1,18 +1,18 @@
 import {
+  NodeOpTypes,
+  type TestElement,
+  TestNodeTypes,
+  type TestText,
+  dumpOps,
   h,
-  render,
+  nextTick,
   nodeOps,
-  TestNodeTypes,
-  TestElement,
-  TestText,
-  ref,
   reactive,
-  dumpOps,
+  ref,
+  render,
   resetOps,
-  NodeOpTypes,
-  nextTick,
   serialize,
-  triggerEvent
+  triggerEvent,
 } from '../src'
 
 describe('test renderer', () => {
@@ -22,11 +22,11 @@ describe('test renderer', () => {
       h(
         'div',
         {
-          id: 'test'
+          id: 'test',
         },
-        'hello'
+        'hello',
       ),
-      root
+      root,
     )
 
     expect(root.children.length).toBe(1)
@@ -44,7 +44,7 @@ describe('test renderer', () => {
   it('should record ops', async () => {
     const state = reactive({
       id: 'test',
-      text: 'hello'
+      text: 'hello',
     })
 
     const App = {
@@ -52,11 +52,11 @@ describe('test renderer', () => {
         return h(
           'div',
           {
-            id: state.id
+            id: state.id,
           },
-          state.text
+          state.text,
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
 
@@ -70,13 +70,13 @@ describe('test renderer', () => {
       type: NodeOpTypes.CREATE,
       nodeType: TestNodeTypes.ELEMENT,
       tag: 'div',
-      targetNode: root.children[0]
+      targetNode: root.children[0],
     })
 
     expect(ops[1]).toEqual({
       type: NodeOpTypes.SET_ELEMENT_TEXT,
       text: 'hello',
-      targetNode: root.children[0]
+      targetNode: root.children[0],
     })
 
     expect(ops[2]).toEqual({
@@ -84,14 +84,14 @@ describe('test renderer', () => {
       targetNode: root.children[0],
       propKey: 'id',
       propPrevValue: null,
-      propNextValue: 'test'
+      propNextValue: 'test',
     })
 
     expect(ops[3]).toEqual({
       type: NodeOpTypes.INSERT,
       targetNode: root.children[0],
       parentNode: root,
-      refNode: null
+      refNode: null,
     })
 
     // test update ops
@@ -105,7 +105,7 @@ describe('test renderer', () => {
     expect(updateOps[0]).toEqual({
       type: NodeOpTypes.SET_ELEMENT_TEXT,
       targetNode: root.children[0],
-      text: 'bar'
+      text: 'bar',
     })
 
     expect(updateOps[1]).toEqual({
@@ -113,7 +113,7 @@ describe('test renderer', () => {
       targetNode: root.children[0],
       propKey: 'id',
       propPrevValue: 'test',
-      propNextValue: 'foo'
+      propNextValue: 'foo',
     })
   })
 
@@ -124,16 +124,16 @@ describe('test renderer', () => {
           'div',
           {
             id: 'test',
-            boolean: ''
+            boolean: '',
           },
-          [h('span', 'foo'), 'hello']
+          [h('span', 'foo'), 'hello'],
         )
-      }
+      },
     }
     const root = nodeOps.createElement('div')
     render(h(App), root)
     expect(serialize(root)).toEqual(
-      `<div><div id="test" boolean><span>foo</span>hello</div></div>`
+      `<div><div id="test" boolean><span>foo</span>hello</div></div>`,
     )
     // indented output
     expect(serialize(root, 2)).toEqual(
@@ -144,7 +144,7 @@ describe('test renderer', () => {
     </span>
     hello
   </div>
-</div>`
+</div>`,
     )
   })
 
@@ -157,9 +157,9 @@ describe('test renderer', () => {
         {
           onClick: () => {
             count.value++
-          }
+          },
         },
-        count.value
+        count.value,
       )
     }
 
@@ -185,10 +185,10 @@ describe('test renderer', () => {
             },
             () => {
               count2.value++
-            }
-          ]
+            },
+          ],
         },
-        `${count.value}, ${count2.value}`
+        `${count.value}, ${count2.value}`,
       )
     }
 
diff --git a/packages/runtime-test/package.json b/packages/runtime-test/package.json
index fec3ca51d40..c0586a8a24f 100644
--- a/packages/runtime-test/package.json
+++ b/packages/runtime-test/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@vue/runtime-test",
-  "version": "3.3.5",
-  "description": "@vue/runtime-test",
   "private": true,
+  "version": "0.0.0",
+  "description": "@vue/runtime-test",
   "main": "index.js",
   "module": "dist/runtime-test.esm-bundler.js",
   "types": "dist/runtime-test.d.ts",
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-test#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/runtime-core": "3.3.5"
+    "@vue/shared": "workspace:*",
+    "@vue/runtime-core": "workspace:*"
   }
 }
diff --git a/packages/runtime-test/src/index.ts b/packages/runtime-test/src/index.ts
index e90d611928e..ba11f60c2c1 100644
--- a/packages/runtime-test/src/index.ts
+++ b/packages/runtime-test/src/index.ts
@@ -1,16 +1,16 @@
 import {
+  type CreateAppFunction,
+  type RootRenderFunction,
+  type VNode,
   createRenderer,
-  VNode,
-  RootRenderFunction,
-  CreateAppFunction
 } from '@vue/runtime-core'
-import { nodeOps, TestElement } from './nodeOps'
+import { type TestElement, nodeOps } from './nodeOps'
 import { patchProp } from './patchProp'
 import { serializeInner } from './serialize'
 import { extend } from '@vue/shared'
 
 const { render: baseRender, createApp: baseCreateApp } = createRenderer(
-  extend({ patchProp }, nodeOps)
+  extend({ patchProp }, nodeOps),
 )
 
 export const render = baseRender as RootRenderFunction<TestElement>
diff --git a/packages/runtime-test/src/nodeOps.ts b/packages/runtime-test/src/nodeOps.ts
index a3a8012f280..e338fd52000 100644
--- a/packages/runtime-test/src/nodeOps.ts
+++ b/packages/runtime-test/src/nodeOps.ts
@@ -1,18 +1,18 @@
 import { markRaw } from '@vue/reactivity'
 
-export const enum TestNodeTypes {
+export enum TestNodeTypes {
   TEXT = 'text',
   ELEMENT = 'element',
-  COMMENT = 'comment'
+  COMMENT = 'comment',
 }
 
-export const enum NodeOpTypes {
+export enum NodeOpTypes {
   CREATE = 'create',
   INSERT = 'insert',
   REMOVE = 'remove',
   SET_TEXT = 'setText',
   SET_ELEMENT_TEXT = 'setElementText',
-  PATCH = 'patch'
+  PATCH = 'patch',
 }
 
 export interface TestElement {
@@ -79,13 +79,13 @@ function createElement(tag: string): TestElement {
     children: [],
     props: {},
     parentNode: null,
-    eventListeners: null
+    eventListeners: null,
   }
   logNodeOp({
     type: NodeOpTypes.CREATE,
     nodeType: TestNodeTypes.ELEMENT,
     targetNode: node,
-    tag
+    tag,
   })
   // avoid test nodes from being observed
   markRaw(node)
@@ -97,13 +97,13 @@ function createText(text: string): TestText {
     id: nodeId++,
     type: TestNodeTypes.TEXT,
     text,
-    parentNode: null
+    parentNode: null,
   }
   logNodeOp({
     type: NodeOpTypes.CREATE,
     nodeType: TestNodeTypes.TEXT,
     targetNode: node,
-    text
+    text,
   })
   // avoid test nodes from being observed
   markRaw(node)
@@ -115,13 +115,13 @@ function createComment(text: string): TestComment {
     id: nodeId++,
     type: TestNodeTypes.COMMENT,
     text,
-    parentNode: null
+    parentNode: null,
   }
   logNodeOp({
     type: NodeOpTypes.CREATE,
     nodeType: TestNodeTypes.COMMENT,
     targetNode: node,
-    text
+    text,
   })
   // avoid test nodes from being observed
   markRaw(node)
@@ -132,7 +132,7 @@ function setText(node: TestText, text: string) {
   logNodeOp({
     type: NodeOpTypes.SET_TEXT,
     targetNode: node,
-    text
+    text,
   })
   node.text = text
 }
@@ -151,7 +151,7 @@ function insert(child: TestNode, parent: TestElement, ref?: TestNode | null) {
     type: NodeOpTypes.INSERT,
     targetNode: child,
     parentNode: parent,
-    refNode: ref
+    refNode: ref,
   })
   // remove the node first, but don't log it as a REMOVE op
   remove(child, false)
@@ -173,7 +173,7 @@ function remove(child: TestNode, logOp = true) {
       logNodeOp({
         type: NodeOpTypes.REMOVE,
         targetNode: child,
-        parentNode: parent
+        parentNode: parent,
       })
     }
     const i = parent.children.indexOf(child)
@@ -192,7 +192,7 @@ function setElementText(el: TestElement, text: string) {
   logNodeOp({
     type: NodeOpTypes.SET_ELEMENT_TEXT,
     targetNode: el,
-    text
+    text,
   })
   el.children.forEach(c => {
     c.parentNode = null
@@ -205,8 +205,8 @@ function setElementText(el: TestElement, text: string) {
         id: nodeId++,
         type: TestNodeTypes.TEXT,
         text,
-        parentNode: el
-      }
+        parentNode: el,
+      },
     ]
   }
 }
@@ -243,5 +243,5 @@ export const nodeOps = {
   parentNode,
   nextSibling,
   querySelector,
-  setScopeId
+  setScopeId,
 }
diff --git a/packages/runtime-test/src/patchProp.ts b/packages/runtime-test/src/patchProp.ts
index 3ebc64d1b04..f10b5364746 100644
--- a/packages/runtime-test/src/patchProp.ts
+++ b/packages/runtime-test/src/patchProp.ts
@@ -1,18 +1,18 @@
-import { TestElement, logNodeOp, NodeOpTypes } from './nodeOps'
+import { NodeOpTypes, type TestElement, logNodeOp } from './nodeOps'
 import { isOn } from '@vue/shared'
 
 export function patchProp(
   el: TestElement,
   key: string,
   prevValue: any,
-  nextValue: any
+  nextValue: any,
 ) {
   logNodeOp({
     type: NodeOpTypes.PATCH,
     targetNode: el,
     propKey: key,
     propPrevValue: prevValue,
-    propNextValue: nextValue
+    propNextValue: nextValue,
   })
   el.props[key] = nextValue
   if (isOn(key)) {
diff --git a/packages/runtime-test/src/serialize.ts b/packages/runtime-test/src/serialize.ts
index 21cfb2e1a05..e8871945be1 100644
--- a/packages/runtime-test/src/serialize.ts
+++ b/packages/runtime-test/src/serialize.ts
@@ -1,16 +1,16 @@
 import {
-  TestElement,
-  TestNode,
+  type TestComment,
+  type TestElement,
+  type TestNode,
   TestNodeTypes,
-  TestText,
-  TestComment
+  type TestText,
 } from './nodeOps'
 import { isOn } from '@vue/shared'
 
 export function serialize(
   node: TestNode,
   indent: number = 0,
-  depth: number = 0
+  depth: number = 0,
 ): string {
   if (node.type === TestNodeTypes.ELEMENT) {
     return serializeElement(node, indent, depth)
@@ -22,7 +22,7 @@ export function serialize(
 export function serializeInner(
   node: TestElement,
   indent: number = 0,
-  depth: number = 0
+  depth: number = 0,
 ) {
   const newLine = indent ? `\n` : ``
   return node.children.length
@@ -35,7 +35,7 @@ export function serializeInner(
 function serializeElement(
   node: TestElement,
   indent: number,
-  depth: number
+  depth: number,
 ): string {
   const props = Object.keys(node.props)
     .map(key => {
@@ -43,8 +43,8 @@ function serializeElement(
       return isOn(key) || value == null
         ? ``
         : value === ``
-        ? key
-        : `${key}=${JSON.stringify(value)}`
+          ? key
+          : `${key}=${JSON.stringify(value)}`
     })
     .filter(Boolean)
     .join(' ')
@@ -59,7 +59,7 @@ function serializeElement(
 function serializeText(
   node: TestText | TestComment,
   indent: number,
-  depth: number
+  depth: number,
 ): string {
   const padding = indent ? ` `.repeat(indent).repeat(depth) : ``
   return (
diff --git a/packages/runtime-test/src/triggerEvent.ts b/packages/runtime-test/src/triggerEvent.ts
index 89ee71f208f..94ccd2badcd 100644
--- a/packages/runtime-test/src/triggerEvent.ts
+++ b/packages/runtime-test/src/triggerEvent.ts
@@ -1,10 +1,10 @@
 import { isArray } from '@vue/shared'
-import { TestElement } from './nodeOps'
+import type { TestElement } from './nodeOps'
 
 export function triggerEvent(
   el: TestElement,
   event: string,
-  payload: any[] = []
+  payload: any[] = [],
 ) {
   const { eventListeners } = el
   if (eventListeners) {
diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts
index 0abaebf088e..705cb2a8b6f 100644
--- a/packages/server-renderer/__tests__/render.spec.ts
+++ b/packages/server-renderer/__tests__/render.spec.ts
@@ -1,30 +1,33 @@
 import {
+  type ComponentOptions,
+  KeepAlive,
+  Transition,
+  computed,
   createApp,
-  h,
   createCommentVNode,
-  resolveComponent,
-  ComponentOptions,
-  ref,
-  defineComponent,
-  createTextVNode,
+  createSSRApp,
   createStaticVNode,
-  withCtx,
-  KeepAlive,
-  Transition,
-  watchEffect,
+  createTextVNode,
   createVNode,
-  resolveDynamicComponent,
-  renderSlot,
+  defineComponent,
+  getCurrentInstance,
+  h,
   onErrorCaptured,
   onServerPrefetch,
-  getCurrentInstance
+  reactive,
+  ref,
+  renderSlot,
+  resolveComponent,
+  resolveDynamicComponent,
+  watchEffect,
+  withCtx,
 } from 'vue'
 import { escapeHtml } from '@vue/shared'
 import { renderToString } from '../src/renderToString'
-import { renderToNodeStream, pipeToNodeWritable } from '../src/renderToStream'
-import { ssrRenderSlot, SSRSlot } from '../src/helpers/ssrRenderSlot'
+import { pipeToNodeWritable, renderToNodeStream } from '../src/renderToStream'
+import { type SSRSlot, ssrRenderSlot } from '../src/helpers/ssrRenderSlot'
 import { ssrRenderComponent } from '../src/helpers/ssrRenderComponent'
-import { Readable, Transform } from 'stream'
+import { type Readable, Transform } from 'node:stream'
 import { ssrRenderVNode } from '../src'
 
 const promisifyStream = (stream: Readable) => {
@@ -51,7 +54,7 @@ const pipeToWritable = (app: any, context?: any) => {
     transform(data, _encoding, cb) {
       this.push(data)
       cb()
-    }
+    },
   })
   pipeToNodeWritable(app, context, stream)
   return promisifyStream(stream)
@@ -69,10 +72,10 @@ function testRender(type: string, render: typeof renderToString) {
         render() {
           const Foo = resolveComponent('foo') as ComponentOptions
           return h(Foo)
-        }
+        },
       })
       app.component('foo', {
-        render: () => h('div', 'foo')
+        render: () => h('div', 'foo'),
       })
       const html = await render(app)
       expect(html).toBe(`<div>foo</div>`)
@@ -88,9 +91,9 @@ function testRender(type: string, render: typeof renderToString) {
               },
               render(this: any) {
                 return h('div', this.msg)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -101,9 +104,9 @@ function testRender(type: string, render: typeof renderToString) {
               setup() {
                 const msg = ref('hello')
                 return () => h('div', msg.value)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -114,9 +117,9 @@ function testRender(type: string, render: typeof renderToString) {
               defineComponent(() => {
                 const msg = ref('hello')
                 return () => h('div', msg.value)
-              })
-            )
-          )
+              }),
+            ),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -131,11 +134,11 @@ function testRender(type: string, render: typeof renderToString) {
                   },
                   render() {
                     return h('div', this.msg)
-                  }
-                })
-              })
-            )
-          )
+                  },
+                }),
+              }),
+            ),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -151,12 +154,12 @@ function testRender(type: string, render: typeof renderToString) {
                     },
                     render() {
                       return h('div', this.msg)
-                    }
-                  })
-                ]
-              })
-            )
-          )
+                    },
+                  }),
+                ],
+              }),
+            ),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -169,9 +172,9 @@ function testRender(type: string, render: typeof renderToString) {
               },
               ssrRender(ctx, push) {
                 push(`<div>${ctx.msg}</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
@@ -180,7 +183,7 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           render(this: any) {
             return h('div', this.msg)
-          }
+          },
         }
 
         expect(
@@ -188,9 +191,9 @@ function testRender(type: string, render: typeof renderToString) {
             createApp({
               render() {
                 return h('div', ['parent', h(Child, { msg: 'hello' })])
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>hello</div></div>`)
       })
 
@@ -199,7 +202,7 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.msg}</div>`)
-          }
+          },
         }
 
         expect(
@@ -209,19 +212,19 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`<div>parent`)
                 push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent))
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>hello</div></div>`)
       })
 
       test('nested template components', async () => {
         const Child = {
           props: ['msg'],
-          template: `<div>{{ msg }}</div>`
+          template: `<div>{{ msg }}</div>`,
         }
         const app = createApp({
-          template: `<div>parent<Child msg="hello" /></div>`
+          template: `<div>parent<Child msg="hello" /></div>`,
         })
         app.component('Child', Child)
 
@@ -230,19 +233,19 @@ function testRender(type: string, render: typeof renderToString) {
 
       test('template components with dynamic class attribute after static', async () => {
         const app = createApp({
-          template: `<div><div class="child" :class="'dynamic'"></div></div>`
+          template: `<div><div class="child" :class="'dynamic'"></div></div>`,
         })
         expect(await render(app)).toBe(
-          `<div><div class="dynamic child"></div></div>`
+          `<div><div class="dynamic child"></div></div>`,
         )
       })
 
       test('template components with dynamic class attribute before static', async () => {
         const app = createApp({
-          template: `<div><div :class="'dynamic'" class="child"></div></div>`
+          template: `<div><div :class="'dynamic'" class="child"></div></div>`,
         })
         expect(await render(app)).toBe(
-          `<div><div class="dynamic child"></div></div>`
+          `<div><div class="dynamic child"></div></div>`,
         )
       })
 
@@ -251,19 +254,19 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.msg}</div>`)
-          }
+          },
         }
 
         const VNodeChild = {
           props: ['msg'],
           render(this: any) {
             return h('div', this.msg)
-          }
+          },
         }
 
         const TemplateChild = {
           props: ['msg'],
-          template: `<div>{{ msg }}</div>`
+          template: `<div>{{ msg }}</div>`,
         }
 
         expect(
@@ -276,26 +279,31 @@ function testRender(type: string, render: typeof renderToString) {
                     OptimizedChild,
                     { msg: 'opt' },
                     null,
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(
-                  ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent)
+                  ssrRenderComponent(
+                    VNodeChild,
+                    { msg: 'vnode' },
+                    null,
+                    parent,
+                  ),
                 )
                 push(
                   ssrRenderComponent(
                     TemplateChild,
                     { msg: 'template' },
                     null,
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
-          `<div>parent<div>opt</div><div>vnode</div><div>template</div></div>`
+          `<div>parent<div>opt</div><div>vnode</div><div>template</div></div>`,
         )
       })
 
@@ -304,12 +312,12 @@ function testRender(type: string, render: typeof renderToString) {
           // should wait for resolved render context from setup()
           async setup() {
             return {
-              msg: 'hello'
+              msg: 'hello',
             }
           },
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.msg}</div>`)
-          }
+          },
         }
 
         expect(
@@ -319,9 +327,9 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`<div>parent`)
                 push(ssrRenderComponent(Child, null, null, parent))
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>hello</div></div>`)
       })
 
@@ -330,24 +338,24 @@ function testRender(type: string, render: typeof renderToString) {
           props: ['msg'],
           async setup(props: any) {
             return {
-              localMsg: props.msg + '!'
+              localMsg: props.msg + '!',
             }
           },
           ssrRender(ctx: any, push: any) {
             push(`<div>${ctx.localMsg}</div>`)
-          }
+          },
         }
 
         const VNodeChild = {
           props: ['msg'],
           async setup(props: any) {
             return {
-              localMsg: props.msg + '!'
+              localMsg: props.msg + '!',
             }
           },
           render(this: any) {
             return h('div', this.localMsg)
-          }
+          },
         }
 
         expect(
@@ -360,16 +368,21 @@ function testRender(type: string, render: typeof renderToString) {
                     OptimizedChild,
                     { msg: 'opt' },
                     null,
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(
-                  ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent)
+                  ssrRenderComponent(
+                    VNodeChild,
+                    { msg: 'vnode' },
+                    null,
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(`<div>parent<div>opt!</div><div>vnode!</div></div>`)
       })
     })
@@ -388,10 +401,10 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`fallback`)
               },
               push,
-              parent
+              parent,
             )
             push(`</div>`)
-          }
+          },
         }
 
         expect(
@@ -409,19 +422,19 @@ function testRender(type: string, render: typeof renderToString) {
                         push(`<span>${msg}</span>`)
                       }) as SSRSlot,
                       // important to avoid slots being normalized
-                      _: 1 as any
+                      _: 1 as any,
                     },
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
           `<div>parent<div class="child">` +
             `<!--[--><span>from slot</span><!--]-->` +
-            `</div></div>`
+            `</div></div>`,
         )
 
         // test fallback
@@ -432,11 +445,11 @@ function testRender(type: string, render: typeof renderToString) {
                 push(`<div>parent`)
                 push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent))
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
-          `<div>parent<div class="child"><!--[-->fallback<!--]--></div></div>`
+          `<div>parent<div class="child"><!--[-->fallback<!--]--></div></div>`,
         )
       })
 
@@ -451,10 +464,10 @@ function testRender(type: string, render: typeof renderToString) {
               { msg: 'from slot' },
               null,
               push,
-              parent
+              parent,
             )
             push(`</div>`)
-          }
+          },
         }
 
         expect(
@@ -470,37 +483,37 @@ function testRender(type: string, render: typeof renderToString) {
                       // bailed slots returning raw vnodes
                       default: ({ msg }: any) => {
                         return h('span', msg)
-                      }
+                      },
                     },
-                    parent
-                  )
+                    parent,
+                  ),
                 )
                 push(`</div>`)
-              }
-            })
-          )
+              },
+            }),
+          ),
         ).toBe(
           `<div>parent<div class="child">` +
             `<!--[--><span>from slot</span><!--]-->` +
-            `</div></div>`
+            `</div></div>`,
         )
       })
 
       test('nested components with template slots', async () => {
         const Child = {
           props: ['msg'],
-          template: `<div class="child"><slot msg="from slot"></slot></div>`
+          template: `<div class="child"><slot msg="from slot"></slot></div>`,
         }
 
         const app = createApp({
           components: { Child },
-          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
+          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`,
         })
 
         expect(await render(app)).toBe(
           `<div>parent<div class="child">` +
             `<!--[--><span>from slot</span><!--]-->` +
-            `</div></div>`
+            `</div></div>`,
         )
       })
 
@@ -511,15 +524,15 @@ function testRender(type: string, render: typeof renderToString) {
             return h(
               'div',
               {
-                class: 'child'
+                class: 'child',
               },
-              this.$slots.default({ msg: 'from slot' })
+              this.$slots.default({ msg: 'from slot' }),
             )
-          }
+          },
         }
 
         const app = createApp({
-          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`
+          template: `<div>parent<Child v-slot="{ msg }"><span>{{ msg }}</span></Child></div>`,
         })
         app.component('Child', Child)
 
@@ -527,69 +540,69 @@ function testRender(type: string, render: typeof renderToString) {
           `<div>parent<div class="child">` +
             // no comment anchors because slot is used directly as element children
             `<span>from slot</span>` +
-            `</div></div>`
+            `</div></div>`,
         )
       })
 
       test('template slots forwarding', async () => {
         const Child = {
-          template: `<div><slot/></div>`
+          template: `<div><slot/></div>`,
         }
 
         const Parent = {
           components: { Child },
-          template: `<Child><slot/></Child>`
+          template: `<Child><slot/></Child>`,
         }
 
         const app = createApp({
           components: { Parent },
-          template: `<Parent>hello</Parent>`
+          template: `<Parent>hello</Parent>`,
         })
 
         expect(await render(app)).toBe(
-          `<div><!--[--><!--[-->hello<!--]--><!--]--></div>`
+          `<div><!--[--><!--[-->hello<!--]--><!--]--></div>`,
         )
       })
 
       test('template slots forwarding, empty slot', async () => {
         const Child = {
-          template: `<div><slot/></div>`
+          template: `<div><slot/></div>`,
         }
 
         const Parent = {
           components: { Child },
-          template: `<Child><slot/></Child>`
+          template: `<Child><slot/></Child>`,
         }
 
         const app = createApp({
           components: { Parent },
-          template: `<Parent></Parent>`
+          template: `<Parent></Parent>`,
         })
 
         expect(await render(app)).toBe(
           // should only have a single fragment
-          `<div><!--[--><!--]--></div>`
+          `<div><!--[--><!--]--></div>`,
         )
       })
 
       test('template slots forwarding, empty slot w/ fallback', async () => {
         const Child = {
-          template: `<div><slot>fallback</slot></div>`
+          template: `<div><slot>fallback</slot></div>`,
         }
 
         const Parent = {
           components: { Child },
-          template: `<Child><slot/></Child>`
+          template: `<Child><slot/></Child>`,
         }
 
         const app = createApp({
           components: { Parent },
-          template: `<Parent></Parent>`
+          template: `<Parent></Parent>`,
         })
 
         expect(await render(app)).toBe(
           // should only have a single fragment
-          `<div><!--[-->fallback<!--]--></div>`
+          `<div><!--[-->fallback<!--]--></div>`,
         )
       })
     })
@@ -597,7 +610,9 @@ function testRender(type: string, render: typeof renderToString) {
     describe('vnode element', () => {
       test('props', async () => {
         expect(
-          await render(h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello'))
+          await render(
+            h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello'),
+          ),
         ).toBe(`<div id="foo&amp;" class="bar baz">hello</div>`)
       })
 
@@ -612,11 +627,11 @@ function testRender(type: string, render: typeof renderToString) {
               'foo',
               h('span', 'bar'),
               [h('span', 'baz')],
-              createCommentVNode('qux')
-            ])
-          )
+              createCommentVNode('qux'),
+            ]),
+          ),
         ).toBe(
-          `<div>foo<span>bar</span><!--[--><span>baz</span><!--]--><!--qux--></div>`
+          `<div>foo<span>bar</span><!--[--><span>baz</span><!--]--><!--qux--></div>`,
         )
       })
 
@@ -630,11 +645,11 @@ function testRender(type: string, render: typeof renderToString) {
             h(
               'div',
               {
-                innerHTML: `<span>hello</span>`
+                innerHTML: `<span>hello</span>`,
               },
-              'ignored'
-            )
-          )
+              'ignored',
+            ),
+          ),
         ).toBe(`<div><span>hello</span></div>`)
       })
 
@@ -644,11 +659,11 @@ function testRender(type: string, render: typeof renderToString) {
             h(
               'div',
               {
-                textContent: `<span>hello</span>`
+                textContent: `<span>hello</span>`,
               },
-              'ignored'
-            )
-          )
+              'ignored',
+            ),
+          ),
         ).toBe(`<div>${escapeHtml(`<span>hello</span>`)}</div>`)
       })
 
@@ -658,11 +673,11 @@ function testRender(type: string, render: typeof renderToString) {
             h(
               'textarea',
               {
-                value: `<span>hello</span>`
+                value: `<span>hello</span>`,
               },
-              'ignored'
-            )
-          )
+              'ignored',
+            ),
+          ),
         ).toBe(`<textarea>${escapeHtml(`<span>hello</span>`)}</textarea>`)
       })
     })
@@ -670,17 +685,17 @@ function testRender(type: string, render: typeof renderToString) {
     describe('vnode component', () => {
       test('KeepAlive', async () => {
         const MyComp = {
-          render: () => h('p', 'hello')
+          render: () => h('p', 'hello'),
         }
         expect(await render(h(KeepAlive, () => h(MyComp)))).toBe(`<p>hello</p>`)
       })
 
       test('Transition', async () => {
         const MyComp = {
-          render: () => h('p', 'hello')
+          render: () => h('p', 'hello'),
         }
         expect(await render(h(Transition, () => h(MyComp)))).toBe(
-          `<p>hello</p>`
+          `<p>hello</p>`,
         )
       })
     })
@@ -688,7 +703,7 @@ function testRender(type: string, render: typeof renderToString) {
     describe('raw vnode types', () => {
       test('Text', async () => {
         expect(await render(createTextVNode('hello <div>'))).toBe(
-          `hello &lt;div&gt;`
+          `hello &lt;div&gt;`,
         )
       })
 
@@ -700,9 +715,9 @@ function testRender(type: string, render: typeof renderToString) {
               createCommentVNode('>foo'),
               createCommentVNode('->foo'),
               createCommentVNode('<!--foo-->'),
-              createCommentVNode('--!>foo<!-')
-            ])
-          )
+              createCommentVNode('--!>foo<!-'),
+            ]),
+          ),
         ).toBe(`<div><!--foo--><!--foo--><!--foo--><!--foo--></div>`)
       })
 
@@ -721,7 +736,7 @@ function testRender(type: string, render: typeof renderToString) {
           __scopeId: 'data-v-test',
           render() {
             return h('div')
-          }
+          },
         }
         expect(await render(h(Foo))).toBe(`<div data-v-test></div>`)
       })
@@ -731,22 +746,22 @@ function testRender(type: string, render: typeof renderToString) {
           __scopeId: 'data-v-child',
           render: function (this: any) {
             return h('div', null, [renderSlot(this.$slots, 'default')])
-          }
+          },
         }
 
         const Parent = {
           __scopeId: 'data-v-test',
           render: () => {
             return h(Child, null, {
-              default: withCtx(() => [h('span', 'slot')])
+              default: withCtx(() => [h('span', 'slot')]),
             })
-          }
+          },
         }
 
         expect(await render(h(Parent))).toBe(
           `<div data-v-child data-v-test>` +
             `<!--[--><span data-v-test data-v-child-s>slot</span><!--]-->` +
-            `</div>`
+            `</div>`,
         )
       })
     })
@@ -759,20 +774,20 @@ function testRender(type: string, render: typeof renderToString) {
               data() {
                 return { msg: 'hello' }
               },
-              template: `<div>{{ msg }}</div>`
-            })
-          )
+              template: `<div>{{ msg }}</div>`,
+            }),
+          ),
         ).toBe(`<div>hello</div>`)
       })
 
       test('handle compiler errors', async () => {
         await render(
           // render different content since compilation is cached
-          createApp({ template: `<div>${type}</` })
+          createApp({ template: `<div>${type}</` }),
         )
 
         expect(
-          `Template compilation error: Unexpected EOF in tag.`
+          `Template compilation error: Unexpected EOF in tag.`,
         ).toHaveBeenWarned()
         expect(`Element is missing end tag`).toHaveBeenWarned()
       })
@@ -787,8 +802,8 @@ function testRender(type: string, render: typeof renderToString) {
               data() {
                 return { msg: null }
               },
-              template: `<div>{{ msg.text }}</div>`
-            })
+              template: `<div>{{ msg.text }}</div>`,
+            }),
           )
         } catch {}
         expect(getCurrentInstance()).toBe(prev)
@@ -804,8 +819,8 @@ function testRender(type: string, render: typeof renderToString) {
               data() {
                 throw new Error()
               },
-              template: `<div>hello</div>`
-            })
+              template: `<div>hello</div>`,
+            }),
           )
         } catch {}
         expect(getCurrentInstance()).toBe(null)
@@ -821,7 +836,7 @@ function testRender(type: string, render: typeof renderToString) {
       const Child = {
         created() {
           throw new Error()
-        }
+        },
       }
       try {
         await render(
@@ -829,12 +844,12 @@ function testRender(type: string, render: typeof renderToString) {
             errorCaptured() {
               throw new Error()
             },
-            render: () => h(Child)
-          })
+            render: () => h(Child),
+          }),
         )
       } catch {}
       expect(
-        'Unhandled error during execution of errorCaptured hook'
+        'Unhandled error during execution of errorCaptured hook',
       ).toHaveBeenWarned()
       expect(getCurrentInstance()).toBe(null)
     })
@@ -844,7 +859,7 @@ function testRender(type: string, render: typeof renderToString) {
       const app = createApp({
         data() {
           return {
-            msg: ''
+            msg: '',
           }
         },
         async serverPrefetch() {
@@ -852,7 +867,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('div', this.msg)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
@@ -867,17 +882,17 @@ function testRender(type: string, render: typeof renderToString) {
         async setup() {
           return Promise.reject('async child error')
         },
-        template: `<div>asyncChildren</div>`
+        template: `<div>asyncChildren</div>`,
       })
       const app = createApp({
         name: 'App',
         components: {
-          asyncChildren
+          asyncChildren,
         },
         template: `<div class="app"><async-children /></div>`,
         errorCaptured(error) {
           fn(error)
-        }
+        },
       })
 
       app.config.errorHandler = error => {
@@ -901,7 +916,7 @@ function testRender(type: string, render: typeof renderToString) {
         setup: () => {
           watchEffect(onInvalidate => onInvalidate(noop))
         },
-        render: noop
+        render: noop,
       })
       expect(await render(app)).toBe('<!---->')
     })
@@ -915,11 +930,11 @@ function testRender(type: string, render: typeof renderToString) {
               A: {
                 ssrRender(_ctx, _push) {
                   _push(`<div>A</div>`)
-                }
+                },
               },
               B: {
-                render: () => h('div', 'B')
-              }
+                render: () => h('div', 'B'),
+              },
             },
             ssrRender(_ctx, _push, _parent) {
               const A: any = resolveComponent('A')
@@ -927,11 +942,11 @@ function testRender(type: string, render: typeof renderToString) {
               ssrRenderVNode(
                 _push,
                 createVNode(resolveDynamicComponent('B'), null, null),
-                _parent
+                _parent,
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div>A</div><div>B</div>`)
     })
 
@@ -944,12 +959,12 @@ function testRender(type: string, render: typeof renderToString) {
             message.value = await msg
           })
           return {
-            message
+            message,
           }
         },
         render() {
           return h('div', this.message)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
@@ -976,12 +991,12 @@ function testRender(type: string, render: typeof renderToString) {
           return {
             message,
             message2,
-            message3
+            message3,
           }
         },
         render() {
           return h('div', `${this.message} ${this.message2} ${this.message3}`)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello hi bonjour</div>`)
@@ -1007,7 +1022,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('div', '')
-        }
+        },
       })
       await render(app)
       expect(first).toHaveBeenCalled()
@@ -1022,7 +1037,7 @@ function testRender(type: string, render: typeof renderToString) {
       const app = createApp({
         data() {
           return {
-            message: ''
+            message: '',
           }
         },
 
@@ -1036,12 +1051,12 @@ function testRender(type: string, render: typeof renderToString) {
             message2.value = await msg2
           })
           return {
-            message2
+            message2,
           }
         },
         render() {
           return h('div', `${this.message} ${this.message2}`)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello hi</div>`)
@@ -1052,19 +1067,19 @@ function testRender(type: string, render: typeof renderToString) {
       const app = createApp({
         data() {
           return {
-            msg: ''
+            msg: '',
           }
         },
         mixins: [
           {
             async serverPrefetch() {
               this.msg = await msg
-            }
-          }
+            },
+          },
         ],
         render() {
           return h('div', this.msg)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>hello</div>`)
@@ -1079,27 +1094,27 @@ function testRender(type: string, render: typeof renderToString) {
           return {
             foo: '',
             bar: '',
-            baz: ''
+            baz: '',
           }
         },
         mixins: [
           {
             async serverPrefetch() {
               this.foo = await foo
-            }
+            },
           },
           {
             async serverPrefetch() {
               this.bar = await bar
-            }
-          }
+            },
+          },
         ],
         async serverPrefetch() {
           this.baz = await baz
         },
         render() {
           return h('div', `${this.foo}${this.bar}${this.baz}`)
-        }
+        },
       })
       const html = await render(app)
       expect(html).toBe(`<div>foobarbaz</div>`)
@@ -1117,7 +1132,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('span')
-        }
+        },
       }
 
       const app = createApp({
@@ -1129,7 +1144,7 @@ function testRender(type: string, render: typeof renderToString) {
         },
         render() {
           return h('div', h(Child))
-        }
+        },
       })
 
       try {
@@ -1140,5 +1155,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__/ssrAttrFallthrough.spec.ts b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
index fb974f97923..e8cfa75e77c 100644
--- a/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
+++ b/packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts
@@ -4,11 +4,11 @@ import { renderToString } from '../src/renderToString'
 describe('ssr: attr fallthrough', () => {
   test('basic', async () => {
     const Child = {
-      template: `<div class="foo" />`
+      template: `<div class="foo" />`,
     }
     const Parent = {
       components: { Child },
-      template: `<child class="bar"/>`
+      template: `<child class="bar"/>`,
     }
     const app = createApp(Parent)
     expect(await renderToString(app)).toBe(`<div class="foo bar"></div>`)
@@ -17,62 +17,62 @@ describe('ssr: attr fallthrough', () => {
   test('with v-if', async () => {
     const Child = {
       props: ['ok'],
-      template: `<div v-if="ok" class="foo" /><span v-else />`
+      template: `<div v-if="ok" class="foo" /><span v-else />`,
     }
     const Parent = {
       props: ['ok'],
       components: { Child },
-      template: `<child :ok="ok" class="bar"/>`
+      template: `<child :ok="ok" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent, { ok: true }))).toBe(
-      `<div class="foo bar"></div>`
+      `<div class="foo bar"></div>`,
     )
     expect(await renderToString(createApp(Parent, { ok: false }))).toBe(
-      `<span class="bar"></span>`
+      `<span class="bar"></span>`,
     )
   })
 
   test('with v-model', async () => {
     const Child = {
       props: ['text'],
-      template: `<input v-model="text">`
+      template: `<input v-model="text">`,
     }
     const Parent = {
       components: { Child },
-      template: `<child text="hello" class="bar"/>`
+      template: `<child text="hello" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent))).toBe(
-      `<input class="bar" value="hello">`
+      `<input class="bar" value="hello">`,
     )
   })
 
   test('with v-bind', async () => {
     const Child = {
       props: ['obj'],
-      template: `<div v-bind="obj" />`
+      template: `<div v-bind="obj" />`,
     }
     const Parent = {
       components: { Child },
-      template: `<child :obj="{ class: 'foo' }" class="bar"/>`
+      template: `<child :obj="{ class: 'foo' }" class="bar"/>`,
     }
     expect(await renderToString(createApp(Parent))).toBe(
-      `<div class="foo bar"></div>`
+      `<div class="foo bar"></div>`,
     )
   })
 
   test('nested fallthrough', async () => {
     const Child = {
       props: ['id'],
-      template: `<div :id="id"></div>`
+      template: `<div :id="id"></div>`,
     }
     const Parent = {
       components: { Child },
-      template: `<child id="foo" class="bar"/>`
+      template: `<child id="foo" class="bar"/>`,
     }
     // pass to parent, fallthrough to child and merge
     const app = createApp(Parent, { class: 'baz' })
     expect(await renderToString(app)).toBe(
-      `<div id="foo" class="bar baz"></div>`
+      `<div id="foo" class="bar baz"></div>`,
     )
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts b/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts
index 34fcd4ef48b..ce5f6233e34 100644
--- a/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts
+++ b/packages/server-renderer/__tests__/ssrCompilerOptions.spec.ts
@@ -4,7 +4,7 @@ import { renderToString } from '../src/renderToString'
 describe('ssr: compiler options', () => {
   test('config.isCustomElement (deprecated)', async () => {
     const app = createApp({
-      template: `<div><x-button/></div>`
+      template: `<div><x-button/></div>`,
     })
     app.config.isCustomElement = tag => tag.startsWith('x-')
     expect(await renderToString(app)).toBe(`<div><x-button></x-button></div>`)
@@ -12,7 +12,7 @@ describe('ssr: compiler options', () => {
 
   test('config.compilerOptions.isCustomElement', async () => {
     const app = createApp({
-      template: `<div><x-panel/></div>`
+      template: `<div><x-panel/></div>`,
     })
     app.config.compilerOptions.isCustomElement = tag => tag.startsWith('x-')
     expect(await renderToString(app)).toBe(`<div><x-panel></x-panel></div>`)
@@ -22,31 +22,31 @@ describe('ssr: compiler options', () => {
     const app = createApp({
       template: `<div><x-card/><y-child/></div>`,
       compilerOptions: {
-        isCustomElement: (tag: string) => tag.startsWith('x-')
+        isCustomElement: (tag: string) => tag.startsWith('x-'),
       },
       components: {
         YChild: {
-          template: `<div><y-button/></div>`
-        }
-      }
+          template: `<div><y-button/></div>`,
+        },
+      },
     })
     app.config.compilerOptions.isCustomElement = tag => tag.startsWith('y-')
     expect(await renderToString(app)).toBe(
-      `<div><x-card></x-card><div><y-button></y-button></div></div>`
+      `<div><x-card></x-card><div><y-button></y-button></div></div>`,
     )
   })
 
   test('component.delimiters (deprecated)', async () => {
     const app = createApp({
       template: `<div>[[ 1 + 1 ]]</div>`,
-      delimiters: ['[[', ']]']
+      delimiters: ['[[', ']]'],
     })
     expect(await renderToString(app)).toBe(`<div>2</div>`)
   })
 
   test('config.compilerOptions.delimiters', async () => {
     const app = createApp({
-      template: `<div>[( 1 + 1 )]</div>`
+      template: `<div>[( 1 + 1 )]</div>`,
     })
     app.config.compilerOptions.delimiters = ['[(', ')]']
     expect(await renderToString(app)).toBe(`<div>2</div>`)
@@ -56,13 +56,13 @@ describe('ssr: compiler options', () => {
     const app = createApp({
       template: `<div>[[ 1 + 1 ]]<ChildComponent/></div>`,
       compilerOptions: {
-        delimiters: ['[[', ']]']
+        delimiters: ['[[', ']]'],
       },
       components: {
         ChildComponent: {
-          template: `<div>(( 2 + 2 ))</div>`
-        }
-      }
+          template: `<div>(( 2 + 2 ))</div>`,
+        },
+      },
     })
     app.config.compilerOptions.delimiters = ['((', '))']
     expect(await renderToString(app)).toBe(`<div>2<div>4</div></div>`)
@@ -72,17 +72,17 @@ describe('ssr: compiler options', () => {
     const app = createApp({
       template: `<div><span>Hello   world</span><ChildComponent/></div>`,
       compilerOptions: {
-        whitespace: 'condense'
+        whitespace: 'condense',
       },
       components: {
         ChildComponent: {
-          template: `<span>Hello   world</span>`
-        }
-      }
+          template: `<span>Hello   world</span>`,
+        },
+      },
     })
     app.config.compilerOptions.whitespace = 'preserve'
     expect(await renderToString(app)).toBe(
-      `<div><span>Hello world</span><span>Hello   world</span></div>`
+      `<div><span>Hello world</span><span>Hello   world</span></div>`,
     )
   })
 
@@ -93,24 +93,24 @@ describe('ssr: compiler options', () => {
       template: `<div><ChildOne/><ChildTwo/><ChildThree/></div>`,
       components: {
         ChildOne: {
-          template
+          template,
         },
         ChildTwo: {
           template,
           compilerOptions: {
-            whitespace: 'preserve'
-          }
+            whitespace: 'preserve',
+          },
         },
         ChildThree: {
           template,
           compilerOptions: {
-            delimiters: ['[[', ']]']
-          }
-        }
-      }
+            delimiters: ['[[', ']]'],
+          },
+        },
+      },
     })
     expect(await renderToString(app)).toBe(
-      `<div><div>2 [[1 + 1]]</div><div>2   [[1 + 1]]</div><div>{{1 + 1}} 2</div></div>`
+      `<div><div>2 [[1 + 1]]</div><div>2   [[1 + 1]]</div><div>{{1 + 1}} 2</div></div>`,
     )
   })
 
@@ -124,21 +124,21 @@ describe('ssr: compiler options', () => {
         MyChild: {
           template,
           compilerOptions: {
-            isCustomElement: tag => tag.startsWith('x-')
+            isCustomElement: tag => tag.startsWith('x-'),
           },
           components: {
             MyChild: {
               template,
               compilerOptions: {
-                isCustomElement: tag => tag.startsWith('My')
-              }
-            }
-          }
-        }
-      }
+                isCustomElement: tag => tag.startsWith('My'),
+              },
+            },
+          },
+        },
+      },
     })
     expect(await renderToString(app)).toBe(
-      `<div><div><div><MyChild></MyChild></div></div></div>`
+      `<div><div><div><MyChild></MyChild></div></div></div>`,
     )
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrComputed.spec.ts b/packages/server-renderer/__tests__/ssrComputed.spec.ts
index 5c5850e006d..646fa83731c 100644
--- a/packages/server-renderer/__tests__/ssrComputed.spec.ts
+++ b/packages/server-renderer/__tests__/ssrComputed.spec.ts
@@ -1,4 +1,4 @@
-import { createSSRApp, defineComponent, h, computed, reactive } from 'vue'
+import { computed, createSSRApp, defineComponent, h, reactive } from 'vue'
 import { renderToString } from '../src/renderToString'
 
 // #5208 reported memory leak of keeping computed alive during SSR
@@ -17,7 +17,7 @@ test('computed reactivity during SSR', async () => {
     // pretend to fetch some data from an api
     async fetchData() {
       this.state.items = ['hello', 'world']
-    }
+    },
   }
 
   const getterSpy = vi.fn()
@@ -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/__tests__/ssrDirectives.spec.ts b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
index e52ef2db69f..d3ced89b3d2 100644
--- a/packages/server-renderer/__tests__/ssrDirectives.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -2,13 +2,13 @@ import { renderToString } from '../src/renderToString'
 import {
   createApp,
   h,
-  withDirectives,
-  vShow,
-  vModelText,
-  vModelRadio,
+  resolveDirective,
   vModelCheckbox,
   vModelDynamic,
-  resolveDirective
+  vModelRadio,
+  vModelText,
+  vShow,
+  withDirectives,
 } from 'vue'
 import { ssrGetDirectiveProps, ssrRenderAttrs } from '../src'
 
@@ -18,17 +18,17 @@ describe('ssr: directives', () => {
       expect(
         await renderToString(
           createApp({
-            template: `<div v-show="true"/>`
-          })
-        )
+            template: `<div v-show="true"/>`,
+          }),
+        ),
       ).toBe(`<div style=""></div>`)
 
       expect(
         await renderToString(
           createApp({
-            template: `<div v-show="false"/>`
-          })
-        )
+            template: `<div v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="display:none;"></div>`)
     })
 
@@ -36,9 +36,9 @@ describe('ssr: directives', () => {
       expect(
         await renderToString(
           createApp({
-            template: `<div style="color:red" v-show="false"/>`
-          })
-        )
+            template: `<div style="color:red" v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="color:red;display:none;"></div>`)
     })
 
@@ -47,9 +47,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ style: { color: 'red' } }),
-            template: `<div :style="style" v-show="false"/>`
-          })
-        )
+            template: `<div :style="style" v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="color:red;display:none;"></div>`)
     })
 
@@ -58,9 +58,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ style: { color: 'red' } }),
-            template: `<div :style="style" style="font-size:12;" v-show="false"/>`
-          })
-        )
+            template: `<div :style="style" style="font-size:12;" v-show="false"/>`,
+          }),
+        ),
       ).toBe(`<div style="color:red;font-size:12;display:none;"></div>`)
     })
   })
@@ -71,9 +71,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ text: 'hello' }),
-            template: `<input v-model="text">`
-          })
-        )
+            template: `<input v-model="text">`,
+          }),
+        ),
       ).toBe(`<input value="hello">`)
     })
 
@@ -82,18 +82,18 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ selected: 'foo' }),
-            template: `<input type="radio" value="foo" v-model="selected">`
-          })
-        )
+            template: `<input type="radio" value="foo" v-model="selected">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="foo" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ selected: 'foo' }),
-            template: `<input type="radio" value="bar" v-model="selected">`
-          })
-        )
+            template: `<input type="radio" value="bar" v-model="selected">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="bar">`)
 
       // non-string values
@@ -101,9 +101,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ selected: 'foo' }),
-            template: `<input type="radio" :value="{}" v-model="selected">`
-          })
-        )
+            template: `<input type="radio" :value="{}" v-model="selected">`,
+          }),
+        ),
       ).toBe(`<input type="radio">`)
     })
 
@@ -112,22 +112,22 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ model: 1 }),
-            template: `<select v-model="model"><option value="0"></option><option value="1"></option></select>`
-          })
-        )
+            template: `<select v-model="model"><option value="0"></option><option value="1"></option></select>`,
+          }),
+        ),
       ).toBe(
-        `<select><option value="0"></option><option value="1" selected></option></select>`
+        `<select><option value="0"></option><option value="1" selected></option></select>`,
       )
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ model: [0, 1] }),
-            template: `<select multiple v-model="model"><option value="0"></option><option value="1"></option></select>`
-          })
-        )
+            template: `<select multiple v-model="model"><option value="0"></option><option value="1"></option></select>`,
+          }),
+        ),
       ).toBe(
-        `<select multiple><option value="0" selected></option><option value="1" selected></option></select>`
+        `<select multiple><option value="0" selected></option><option value="1" selected></option></select>`,
       )
     })
 
@@ -136,36 +136,36 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ checked: true }),
-            template: `<input type="checkbox" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ checked: false }),
-            template: `<input type="checkbox" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ checked: ['foo'] }),
-            template: `<input type="checkbox" value="foo" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" value="foo" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ checked: [] }),
-            template: `<input type="checkbox" value="foo" v-model="checked">`
-          })
-        )
+            template: `<input type="checkbox" value="foo" v-model="checked">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo">`)
     })
 
@@ -174,9 +174,9 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ foo: 'hello' }),
-            template: `<textarea v-model="foo"/>`
-          })
-        )
+            template: `<textarea v-model="foo"/>`,
+          }),
+        ),
       ).toBe(`<textarea>hello</textarea>`)
     })
 
@@ -185,63 +185,63 @@ describe('ssr: directives', () => {
         await renderToString(
           createApp({
             data: () => ({ type: 'text', model: 'hello' }),
-            template: `<input :type="type" v-model="model">`
-          })
-        )
+            template: `<input :type="type" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="text" value="hello">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: true }),
-            template: `<input :type="type" v-model="model">`
-          })
-        )
+            template: `<input :type="type" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: false }),
-            template: `<input :type="type" v-model="model">`
-          })
-        )
+            template: `<input :type="type" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: ['hello'] }),
-            template: `<input :type="type" value="hello" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="hello" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="hello" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'checkbox', model: [] }),
-            template: `<input :type="type" value="hello" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="hello" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="hello">`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'radio', model: 'hello' }),
-            template: `<input :type="type" value="hello" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="hello" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
 
       expect(
         await renderToString(
           createApp({
             data: () => ({ type: 'radio', model: 'hello' }),
-            template: `<input :type="type" value="bar" v-model="model">`
-          })
-        )
+            template: `<input :type="type" value="bar" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="bar">`)
     })
 
@@ -251,11 +251,11 @@ describe('ssr: directives', () => {
           createApp({
             data: () => ({
               obj: { type: 'radio', value: 'hello' },
-              model: 'hello'
+              model: 'hello',
             }),
-            template: `<input v-bind="obj" v-model="model">`
-          })
-        )
+            template: `<input v-bind="obj" v-model="model">`,
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
     })
   })
@@ -267,9 +267,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('div'), [[vShow, true]])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div></div>`)
 
       expect(
@@ -277,9 +277,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('div'), [[vShow, false]])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div style="display:none;"></div>`)
     })
 
@@ -291,14 +291,14 @@ describe('ssr: directives', () => {
               return withDirectives(
                 h('div', {
                   style: {
-                    color: 'red'
-                  }
+                    color: 'red',
+                  },
                 }),
-                [[vShow, false]]
+                [[vShow, false]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<div style="color:red;display:none;"></div>`)
     })
   })
@@ -310,9 +310,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input'), [[vModelText, 'hello']])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input value="hello">`)
     })
 
@@ -323,11 +323,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelRadio, 'hello']]
+                [[vModelRadio, 'hello']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
 
       expect(
@@ -336,11 +336,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelRadio, 'foo']]
+                [[vModelRadio, 'foo']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello">`)
     })
 
@@ -350,11 +350,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelCheckbox, true]
+                [vModelCheckbox, true],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
@@ -362,11 +362,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelCheckbox, false]
+                [vModelCheckbox, false],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
@@ -375,11 +375,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelCheckbox, ['foo']]]
+                [[vModelCheckbox, ['foo']]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo" checked>`)
 
       expect(
@@ -388,11 +388,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelCheckbox, []]]
+                [[vModelCheckbox, []]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo">`)
     })
   })
@@ -404,9 +404,9 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input'), [[vModelDynamic, 'hello']])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input value="hello">`)
     })
 
@@ -417,11 +417,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelDynamic, 'hello']]
+                [[vModelDynamic, 'hello']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello" checked>`)
 
       expect(
@@ -430,11 +430,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'radio', value: 'hello' }),
-                [[vModelDynamic, 'foo']]
+                [[vModelDynamic, 'foo']],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="radio" value="hello">`)
     })
 
@@ -444,11 +444,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelDynamic, true]
+                [vModelDynamic, true],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" checked>`)
 
       expect(
@@ -456,11 +456,11 @@ describe('ssr: directives', () => {
           createApp({
             render() {
               return withDirectives(h('input', { type: 'checkbox' }), [
-                [vModelDynamic, false]
+                [vModelDynamic, false],
               ])
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox">`)
 
       expect(
@@ -469,11 +469,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelDynamic, ['foo']]]
+                [[vModelDynamic, ['foo']]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo" checked>`)
 
       expect(
@@ -482,11 +482,11 @@ describe('ssr: directives', () => {
             render() {
               return withDirectives(
                 h('input', { type: 'checkbox', value: 'foo' }),
-                [[vModelDynamic, []]]
+                [[vModelDynamic, []]],
               )
-            }
-          })
-        )
+            },
+          }),
+        ),
       ).toBe(`<input type="checkbox" value="foo">`)
     })
   })
@@ -501,14 +501,14 @@ describe('ssr: directives', () => {
                 {
                   getSSRProps({ value }) {
                     return { id: value }
-                  }
+                  },
                 },
-                'foo'
-              ]
+                'foo',
+              ],
             ])
-          }
-        })
-      )
+          },
+        }),
+      ),
     ).toBe(`<div id="foo"></div>`)
   })
 
@@ -518,28 +518,28 @@ describe('ssr: directives', () => {
         createApp({
           data() {
             return {
-              x: 'foo'
+              x: 'foo',
             }
           },
           directives: {
             xxx: {
               getSSRProps({ value, arg, modifiers }) {
                 return { id: [value, arg, modifiers.ok].join('-') }
-              }
-            }
+              },
+            },
           },
           ssrRender(_ctx, _push, _parent, _attrs) {
             const _directive_xxx = resolveDirective('xxx')!
             _push(
               `<div${ssrRenderAttrs(
                 ssrGetDirectiveProps(_ctx, _directive_xxx, _ctx.x, 'arg', {
-                  ok: true
-                })
-              )}></div>`
+                  ok: true,
+                }),
+              )}></div>`,
             )
-          }
-        })
-      )
+          },
+        }),
+      ),
     ).toBe(`<div id="foo-arg-true"></div>`)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
index dff16c781b8..caeb88397b1 100644
--- a/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDynamicComponent.spec.ts
@@ -8,12 +8,12 @@ describe('ssr: dynamic component', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<component :is="'one'"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="'one'"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><span>slot</span><!--]--></div>`)
   })
 
@@ -21,28 +21,28 @@ describe('ssr: dynamic component', () => {
     expect(
       await renderToString(
         createApp({
-          template: `<component :is="'p'"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="'p'"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<p><span>slot</span></p>`)
   })
 
   test('resolve to component vnode', async () => {
     const Child = {
       props: ['id'],
-      template: `<div>{{ id }}<slot/></div>`
+      template: `<div>{{ id }}<slot/></div>`,
     }
     expect(
       await renderToString(
         createApp({
           setup() {
             return {
-              vnode: createVNode(Child, { id: 'test' })
+              vnode: createVNode(Child, { id: 'test' }),
             }
           },
-          template: `<component :is="vnode"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="vnode"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<div>test<!--[--><span>slot</span><!--]--></div>`)
   })
 
@@ -52,12 +52,12 @@ describe('ssr: dynamic component', () => {
         createApp({
           setup() {
             return {
-              vnode: createVNode('div', { id: 'test' })
+              vnode: createVNode('div', { id: 'test' }),
             }
           },
-          template: `<component :is="vnode"><span>slot</span></component>`
-        })
-      )
+          template: `<component :is="vnode"><span>slot</span></component>`,
+        }),
+      ),
     ).toBe(`<div id="test"><span>slot</span></div>`)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrInterpolate.spec.ts b/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
index fc9a4a3b40d..11177c84a01 100644
--- a/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
+++ b/packages/server-renderer/__tests__/ssrInterpolate.spec.ts
@@ -7,23 +7,23 @@ test('ssr: interpolate', () => {
   expect(ssrInterpolate(`<div>`)).toBe(`&lt;div&gt;`)
   // should escape interpolated values
   expect(ssrInterpolate([1, 2, 3])).toBe(
-    escapeHtml(JSON.stringify([1, 2, 3], null, 2))
+    escapeHtml(JSON.stringify([1, 2, 3], null, 2)),
   )
   expect(
     ssrInterpolate({
       foo: 1,
-      bar: `<div>`
-    })
+      bar: `<div>`,
+    }),
   ).toBe(
     escapeHtml(
       JSON.stringify(
         {
           foo: 1,
-          bar: `<div>`
+          bar: `<div>`,
         },
         null,
-        2
-      )
-    )
+        2,
+      ),
+    ),
   )
 })
diff --git a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
index 2439c351452..53b44728cfa 100644
--- a/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts
@@ -1,8 +1,8 @@
 import {
+  ssrRenderAttr,
   ssrRenderAttrs,
   ssrRenderClass,
   ssrRenderStyle,
-  ssrRenderAttr
 } from '../src/helpers/ssrRenderAttrs'
 import { escapeHtml } from '@vue/shared'
 
@@ -14,8 +14,8 @@ describe('ssr: renderAttrs', () => {
         ref_key: 'foo',
         ref_for: 'bar',
         ref: () => {},
-        onClick: () => {}
-      })
+        onClick: () => {},
+      }),
     ).toBe('')
   })
 
@@ -23,24 +23,24 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs({
         id: 'foo',
-        title: 'bar'
-      })
+        title: 'bar',
+      }),
     ).toBe(` id="foo" title="bar"`)
   })
 
   test('empty value attrs', () => {
     expect(
       ssrRenderAttrs({
-        'data-v-abc': ''
-      })
+        'data-v-abc': '',
+      }),
     ).toBe(` data-v-abc`)
   })
 
   test('escape attrs', () => {
     expect(
       ssrRenderAttrs({
-        id: '"><script'
-      })
+        id: '"><script',
+      }),
     ).toBe(` id="&quot;&gt;&lt;script"`)
   })
 
@@ -50,8 +50,8 @@ describe('ssr: renderAttrs', () => {
         checked: true,
         multiple: false,
         readonly: 0,
-        disabled: ''
-      })
+        disabled: '',
+      }),
     ).toBe(` checked disabled`) // boolean attr w/ false should be ignored
   })
 
@@ -60,8 +60,8 @@ describe('ssr: renderAttrs', () => {
       ssrRenderAttrs({
         foo: false,
         title: null,
-        baz: undefined
-      })
+        baz: undefined,
+      }),
     ).toBe(` foo="false"`) // non boolean should render `false` as is
   })
 
@@ -70,8 +70,8 @@ describe('ssr: renderAttrs', () => {
       ssrRenderAttrs({
         foo: {},
         bar: [],
-        baz: () => {}
-      })
+        baz: () => {},
+      }),
     ).toBe(``)
   })
 
@@ -79,8 +79,8 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs({
         readOnly: true, // simple lower case conversion
-        htmlFor: 'foobar' // special cases
-      })
+        htmlFor: 'foobar', // special cases
+      }),
     ).toBe(` readonly for="foobar"`)
   })
 
@@ -88,10 +88,10 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs(
         {
-          fooBar: 'ok'
+          fooBar: 'ok',
         },
-        'my-el'
-      )
+        'my-el',
+      ),
     ).toBe(` fooBar="ok"`)
   })
 
@@ -99,10 +99,10 @@ describe('ssr: renderAttrs', () => {
     expect(
       ssrRenderAttrs(
         {
-          viewBox: 'foo'
+          viewBox: 'foo',
         },
-        'svg'
-      )
+        'svg',
+      ),
     ).toBe(` viewBox="foo"`)
   })
 })
@@ -119,7 +119,7 @@ describe('ssr: renderAttr', () => {
 
   test('escape', () => {
     expect(ssrRenderAttr('foo', '<script>')).toBe(
-      ` foo="${escapeHtml(`<script>`)}"`
+      ` foo="${escapeHtml(`<script>`)}"`,
     )
   })
 })
@@ -128,8 +128,8 @@ describe('ssr: renderClass', () => {
   test('via renderProps', () => {
     expect(
       ssrRenderAttrs({
-        class: ['foo', 'bar']
-      })
+        class: ['foo', 'bar'],
+      }),
     ).toBe(` class="foo bar"`)
   })
 
@@ -152,9 +152,9 @@ describe('ssr: renderStyle', () => {
         style: {
           color: 'red',
           '--a': 2,
-          '-webkit-line-clamp': 1
-        }
-      })
+          '-webkit-line-clamp': 1,
+        },
+      }),
     ).toBe(` style="color:red;--a:2;-webkit-line-clamp:1;"`)
   })
 
@@ -162,14 +162,14 @@ describe('ssr: renderStyle', () => {
     expect(ssrRenderStyle(`color:red`)).toBe(`color:red`)
     expect(
       ssrRenderStyle({
-        color: `red`
-      })
+        color: `red`,
+      }),
     ).toBe(`color:red;`)
     expect(
       ssrRenderStyle([
         { color: `red` },
-        { fontSize: `15px` } // case conversion
-      ])
+        { fontSize: `15px` }, // case conversion
+      ]),
     ).toBe(`color:red;font-size:15px;`)
   })
 
@@ -177,8 +177,8 @@ describe('ssr: renderStyle', () => {
     expect(
       ssrRenderStyle({
         fontSize: null, // invalid value should be ignored
-        opacity: 0.5
-      })
+        opacity: 0.5,
+      }),
     ).toBe(`opacity:0.5;`)
   })
 
@@ -186,8 +186,8 @@ describe('ssr: renderStyle', () => {
     expect(ssrRenderStyle(`"><script`)).toBe(`&quot;&gt;&lt;script`)
     expect(
       ssrRenderStyle({
-        color: `"><script`
-      })
+        color: `"><script`,
+      }),
     ).toBe(`color:&quot;&gt;&lt;script;`)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrRenderList.spec.ts b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
index 56c9b7c3593..f8dcb293059 100644
--- a/packages/server-renderer/__tests__/ssrRenderList.spec.ts
+++ b/packages/server-renderer/__tests__/ssrRenderList.spec.ts
@@ -9,7 +9,7 @@ describe('ssr: renderList', () => {
 
   it('should render items in an array', () => {
     ssrRenderList(['1', '2', '3'], (item, index) =>
-      stack.push(`node ${index}: ${item}`)
+      stack.push(`node ${index}: ${item}`),
     )
     expect(stack).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
@@ -27,13 +27,13 @@ describe('ssr: renderList', () => {
   it('should warn when given a non-integer N', () => {
     ssrRenderList(3.1, () => {})
     expect(
-      `The v-for range expect an integer value but got 3.1.`
+      `The v-for range expect an integer value but got 3.1.`,
     ).toHaveBeenWarned()
   })
 
   it('should render properties in an object', () => {
     ssrRenderList({ a: 1, b: 2, c: 3 }, (item, key, index) =>
-      stack.push(`node ${index}/${key}: ${item}`)
+      stack.push(`node ${index}/${key}: ${item}`),
     )
     expect(stack).toEqual(['node 0/a: 1', 'node 1/b: 2', 'node 2/c: 3'])
   })
@@ -46,14 +46,14 @@ describe('ssr: renderList', () => {
     }
 
     ssrRenderList(iterable(), (item, index) =>
-      stack.push(`node ${index}: ${item}`)
+      stack.push(`node ${index}: ${item}`),
     )
     expect(stack).toEqual(['node 0: 1', 'node 1: 2', 'node 2: 3'])
   })
 
   it('should not render items when source is undefined', () => {
     ssrRenderList(undefined, (item, index) =>
-      stack.push(`node ${index}: ${item}`)
+      stack.push(`node ${index}: ${item}`),
     )
     expect(stack).toEqual([])
   })
diff --git a/packages/server-renderer/__tests__/ssrScopeId.spec.ts b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
index 2637fd78402..f9d356065d0 100644
--- a/packages/server-renderer/__tests__/ssrScopeId.spec.ts
+++ b/packages/server-renderer/__tests__/ssrScopeId.spec.ts
@@ -1,20 +1,20 @@
 import { createApp, h, mergeProps, withCtx } from 'vue'
 import { renderToString } from '../src/renderToString'
-import { ssrRenderComponent, ssrRenderAttrs, ssrRenderSlot } from '../src'
+import { ssrRenderAttrs, ssrRenderComponent, ssrRenderSlot } from '../src'
 
 describe('ssr: scopedId runtime behavior', () => {
   test('id on component root', async () => {
     const Child = {
       ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)}></div>`)
-      }
+      },
     }
 
     const Comp = {
       __scopeId: 'parent',
       ssrRender: (ctx: any, push: any, parent: any) => {
         push(ssrRenderComponent(Child), null, null, parent)
-      }
+      },
     }
 
     const result = await renderToString(createApp(Comp))
@@ -26,7 +26,7 @@ describe('ssr: scopedId runtime behavior', () => {
       // <div></div>
       ssrRender: (_: any, push: any, _parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)} child></div>`)
-      }
+      },
     }
 
     const Wrapper = {
@@ -40,9 +40,9 @@ describe('ssr: scopedId runtime behavior', () => {
           null,
           push,
           parent,
-          'wrapper-s'
+          'wrapper-s',
         )
-      }
+      },
     }
 
     const Comp = {
@@ -57,14 +57,14 @@ describe('ssr: scopedId runtime behavior', () => {
               default: withCtx(
                 (_: any, push: any, parent: any, scopeId: string) => {
                   push(ssrRenderComponent(Child, null, null, parent, scopeId))
-                }
+                },
               ),
-              _: 1
+              _: 1,
             } as any,
-            parent
-          )
+            parent,
+          ),
         )
-      }
+      },
     }
 
     const result = await renderToString(createApp(Comp))
@@ -79,8 +79,8 @@ describe('ssr: scopedId runtime behavior', () => {
         // <div class="wrapper"><slot/></div>
         push(
           `<div${ssrRenderAttrs(
-            mergeProps({ class: 'wrapper' }, attrs)
-          )} wrapper>`
+            mergeProps({ class: 'wrapper' }, attrs),
+          )} wrapper>`,
         )
         ssrRenderSlot(
           ctx.$slots,
@@ -89,10 +89,10 @@ describe('ssr: scopedId runtime behavior', () => {
           null,
           push,
           parent,
-          'wrapper-s'
+          'wrapper-s',
         )
         push(`</div>`)
-      }
+      },
     }
 
     const Slotted = {
@@ -113,16 +113,16 @@ describe('ssr: scopedId runtime behavior', () => {
                     null,
                     push,
                     parent,
-                    'slotted-s' + scopeId
+                    'slotted-s' + scopeId,
                   )
-                }
+                },
               ),
-              _: 1
+              _: 1,
             } as any,
-            parent
-          )
+            parent,
+          ),
         )
-      }
+      },
     }
 
     const Root = {
@@ -137,21 +137,21 @@ describe('ssr: scopedId runtime behavior', () => {
               default: withCtx(
                 (_: any, push: any, parent: any, scopeId: string) => {
                   push(`<div root${scopeId}></div>`)
-                }
+                },
               ),
-              _: 1
+              _: 1,
             } as any,
-            parent
-          )
+            parent,
+          ),
         )
-      }
+      },
     }
 
     const result = await renderToString(createApp(Root))
     expect(result).toBe(
       `<div class="wrapper" root slotted wrapper>` +
         `<!--[--><!--[--><div root slotted-s wrapper-s></div><!--]--><!--]-->` +
-        `</div>`
+        `</div>`,
     )
   })
 
@@ -160,20 +160,20 @@ describe('ssr: scopedId runtime behavior', () => {
     const Child = {
       ssrRender: (ctx: any, push: any, parent: any, attrs: any) => {
         push(`<div${ssrRenderAttrs(attrs)}></div>`)
-      }
+      },
     }
 
     const Middle = {
       render() {
         return h(Child)
-      }
+      },
     }
 
     const Comp = {
       __scopeId: 'parent',
       ssrRender: (ctx: any, push: any, parent: any) => {
         push(ssrRenderComponent(Middle, null, null, parent))
-      }
+      },
     }
 
     const result = await renderToString(createApp(Comp)) // output: `<div></div>`
diff --git a/packages/server-renderer/__tests__/ssrSlot.spec.ts b/packages/server-renderer/__tests__/ssrSlot.spec.ts
index 9b3a2cdcc94..7e2b2247d25 100644
--- a/packages/server-renderer/__tests__/ssrSlot.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSlot.spec.ts
@@ -3,8 +3,8 @@ import { renderToString } from '../src/renderToString'
 
 const components = {
   one: {
-    template: `<div><slot/></div>`
-  }
+    template: `<div><slot/></div>`,
+  },
 }
 
 describe('ssr: slot', () => {
@@ -13,9 +13,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one>hello</one>`
-        })
-      )
+          template: `<one>hello</one>`,
+        }),
+      ),
     ).toBe(`<div><!--[-->hello<!--]--></div>`)
   })
 
@@ -24,9 +24,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><div>hi</div></one>`
-        })
-      )
+          template: `<one><div>hi</div></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><div>hi</div><!--]--></div>`)
   })
 
@@ -36,12 +36,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<one><template v-if="false"/></one>`
-        })
-      )
+          template: `<one><template v-if="false"/></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
@@ -51,12 +51,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<one><!--hello--></one>`
-        })
-      )
+          template: `<one><!--hello--></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
@@ -66,12 +66,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<div><slot/></div>`
-            }
+              template: `<div><slot/></div>`,
+            },
           },
-          template: `<one><!--he\nllo--></one>`
-        })
-      )
+          template: `<one><!--he\nllo--></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--]--></div>`)
   })
 
@@ -80,9 +80,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><div>one</div><div>two</div></one>`
-        })
-      )
+          template: `<one><div>one</div><div>two</div></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><div>one</div><div>two</div><!--]--></div>`)
   })
 
@@ -91,9 +91,9 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><template v-if="true">hello</template></one>`
-        })
-      )
+          template: `<one><template v-if="true">hello</template></one>`,
+        }),
+      ),
     ).toBe(`<div><!--[--><!--[-->hello<!--]--><!--]--></div>`)
   })
 
@@ -102,11 +102,11 @@ describe('ssr: slot', () => {
       await renderToString(
         createApp({
           components,
-          template: `<one><template v-if="true"><div>one</div><div>two</div></template></one>`
-        })
-      )
+          template: `<one><template v-if="true"><div>one</div><div>two</div></template></one>`,
+        }),
+      ),
     ).toBe(
-      `<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--]--></div>`
+      `<div><!--[--><!--[--><div>one</div><div>two</div><!--]--><!--]--></div>`,
     )
   })
 
@@ -116,12 +116,12 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<transition><slot/></transition>`
-            }
+              template: `<transition><slot/></transition>`,
+            },
           },
-          template: `<one><div v-if="false">foo</div></one>`
-        })
-      )
+          template: `<one><div v-if="false">foo</div></one>`,
+        }),
+      ),
     ).toBe(`<!---->`)
 
     expect(
@@ -129,12 +129,28 @@ describe('ssr: slot', () => {
         createApp({
           components: {
             one: {
-              template: `<transition><slot/></transition>`
-            }
+              template: `<transition><slot/></transition>`,
+            },
           },
-          template: `<one><div v-if="true">foo</div></one>`
-        })
-      )
+          template: `<one><div v-if="true">foo</div></one>`,
+        }),
+      ),
     ).toBe(`<div>foo</div>`)
   })
+
+  // #9933
+  test('transition-group slot', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<TransitionGroup tag="div"><slot/></TransitionGroup>`,
+            },
+          },
+          template: `<one><p v-for="i in 2">{{i}}</p></one>`,
+        }),
+      ),
+    ).toBe(`<div><p>1</p><p>2</p></div>`)
+  })
 })
diff --git a/packages/server-renderer/__tests__/ssrSuspense.spec.ts b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
index 97984f61d94..eef642d0042 100644
--- a/packages/server-renderer/__tests__/ssrSuspense.spec.ts
+++ b/packages/server-renderer/__tests__/ssrSuspense.spec.ts
@@ -1,17 +1,17 @@
-import { createApp, h, Suspense } from 'vue'
+import { Suspense, createApp, h } from 'vue'
 import { renderToString } from '../src/renderToString'
 
 describe('SSR Suspense', () => {
   const ResolvingAsync = {
     async setup() {
       return () => h('div', 'async')
-    }
+    },
   }
 
   const RejectingAsync = {
     setup() {
       return new Promise((_, reject) => reject('foo'))
-    }
+    },
   }
 
   test('content', async () => {
@@ -19,9 +19,9 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h(ResolvingAsync),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(`<div>async</div>`)
@@ -33,9 +33,9 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h(RejectingAsync),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(`<!---->`)
@@ -49,13 +49,13 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h('div', [h(ResolvingAsync), h(ResolvingAsync)]),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><div>async</div></div>`
+      `<div><div>async</div><div>async</div></div>`,
     )
   })
 
@@ -65,13 +65,13 @@ describe('SSR Suspense', () => {
       render() {
         return h(Suspense, null, {
           default: h('div', [h(ResolvingAsync), h(RejectingAsync)]),
-          fallback: h('div', 'fallback')
+          fallback: h('div', 'fallback'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><!----></div>`
+      `<div><div>async</div><!----></div>`,
     )
 
     expect(Comp.errorCaptured).toHaveBeenCalledTimes(1)
@@ -87,16 +87,16 @@ describe('SSR Suspense', () => {
             h(ResolvingAsync),
             h(Suspense, null, {
               default: h('div', [h(RejectingAsync)]),
-              fallback: h('div', 'fallback 2')
-            })
+              fallback: h('div', 'fallback 2'),
+            }),
           ]),
-          fallback: h('div', 'fallback 1')
+          fallback: h('div', 'fallback 1'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><div>async</div><div><!----></div></div>`
+      `<div><div>async</div><div><!----></div></div>`,
     )
 
     expect(Comp.errorCaptured).toHaveBeenCalledTimes(1)
@@ -112,16 +112,16 @@ describe('SSR Suspense', () => {
             h(RejectingAsync),
             h(Suspense, null, {
               default: h('div', [h(ResolvingAsync)]),
-              fallback: h('div', 'fallback 2')
-            })
+              fallback: h('div', 'fallback 2'),
+            }),
           ]),
-          fallback: h('div', 'fallback 1')
+          fallback: h('div', 'fallback 1'),
         })
-      }
+      },
     }
 
     expect(await renderToString(createApp(Comp))).toBe(
-      `<div><!----><div><div>async</div></div></div>`
+      `<div><!----><div><div>async</div></div></div>`,
     )
     expect(Comp.errorCaptured).toHaveBeenCalledTimes(1)
     expect('missing template').toHaveBeenWarned()
diff --git a/packages/server-renderer/__tests__/ssrTeleport.spec.ts b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
index 4de6b44bb53..a0a2f6ae0a1 100644
--- a/packages/server-renderer/__tests__/ssrTeleport.spec.ts
+++ b/packages/server-renderer/__tests__/ssrTeleport.spec.ts
@@ -1,7 +1,7 @@
-import { createApp, h, Teleport } from 'vue'
+import { Teleport, createApp, h } from 'vue'
 import { renderToString } from '../src/renderToString'
 import { renderToSimpleStream } from '../src/renderToStream'
-import { SSRContext } from '../src/render'
+import type { SSRContext } from '../src/render'
 import { ssrRenderTeleport } from '../src/helpers/ssrRenderTeleport'
 
 describe('ssrRenderTeleport', () => {
@@ -20,15 +20,15 @@ describe('ssrRenderTeleport', () => {
             },
             '#target',
             false,
-            _parent
+            _parent,
           )
-        }
+        },
       }),
-      ctx
+      ctx,
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      `<div>content</div><!--teleport anchor-->`
+      `<div>content</div><!--teleport anchor-->`,
     )
   })
 
@@ -47,14 +47,14 @@ describe('ssrRenderTeleport', () => {
             },
             '#target',
             true,
-            _parent
+            _parent,
           )
-        }
+        },
       }),
-      ctx
+      ctx,
     )
     expect(html).toBe(
-      '<!--teleport start--><div>content</div><!--teleport end-->'
+      '<!--teleport start--><div>content</div><!--teleport end-->',
     )
     expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
   })
@@ -65,15 +65,15 @@ describe('ssrRenderTeleport', () => {
       h(
         Teleport,
         {
-          to: `#target`
+          to: `#target`,
         },
-        h('span', 'hello')
+        h('span', 'hello'),
       ),
-      ctx
+      ctx,
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      '<span>hello</span><!--teleport anchor-->'
+      '<span>hello</span><!--teleport anchor-->',
     )
   })
 
@@ -84,14 +84,14 @@ describe('ssrRenderTeleport', () => {
         Teleport,
         {
           to: `#target`,
-          disabled: true
+          disabled: true,
         },
-        h('span', 'hello')
+        h('span', 'hello'),
       ),
-      ctx
+      ctx,
     )
     expect(html).toBe(
-      '<!--teleport start--><span>hello</span><!--teleport end-->'
+      '<!--teleport start--><span>hello</span><!--teleport end-->',
     )
     expect(ctx.teleports!['#target']).toBe(`<!--teleport anchor-->`)
   })
@@ -103,19 +103,19 @@ describe('ssrRenderTeleport', () => {
         h(
           Teleport,
           {
-            to: `#target`
+            to: `#target`,
           },
-          h('span', 'hello')
+          h('span', 'hello'),
         ),
-        h(Teleport, { to: `#target` }, 'world')
+        h(Teleport, { to: `#target` }, 'world'),
       ]),
-      ctx
+      ctx,
     )
     expect(html).toBe(
-      '<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>'
+      '<div><!--teleport start--><!--teleport end--><!--teleport start--><!--teleport end--></div>',
     )
     expect(ctx.teleports!['#target']).toBe(
-      '<span>hello</span><!--teleport anchor-->world<!--teleport anchor-->'
+      '<span>hello</span><!--teleport anchor-->world<!--teleport anchor-->',
     )
   })
 
@@ -123,18 +123,18 @@ describe('ssrRenderTeleport', () => {
     const ctx: SSRContext = {}
     const asyncComponent = {
       template: '<teleport to="#target"><div>content</div></teleport>',
-      async setup() {}
+      async setup() {},
     }
     const html = await renderToString(
       h({
         template: '<async-component />',
-        components: { asyncComponent }
+        components: { asyncComponent },
       }),
-      ctx
+      ctx,
     )
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      `<div>content</div><!--teleport anchor-->`
+      `<div>content</div><!--teleport anchor-->`,
     )
   })
 
@@ -142,7 +142,7 @@ describe('ssrRenderTeleport', () => {
     const ctx: SSRContext = {}
     const asyncComponent = {
       template: '<teleport to="#target"><div>content</div></teleport>',
-      async setup() {}
+      async setup() {},
     }
     let html = ''
     let resolve: any
@@ -150,7 +150,7 @@ describe('ssrRenderTeleport', () => {
     renderToSimpleStream(
       h({
         template: '<async-component />',
-        components: { asyncComponent }
+        components: { asyncComponent },
       }),
       ctx,
       {
@@ -163,13 +163,13 @@ describe('ssrRenderTeleport', () => {
         },
         destroy(err) {
           throw err
-        }
-      }
+        },
+      },
     )
     await p
     expect(html).toBe('<!--teleport start--><!--teleport end-->')
     expect(ctx.teleports!['#target']).toBe(
-      `<div>content</div><!--teleport anchor-->`
+      `<div>content</div><!--teleport anchor-->`,
     )
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts b/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
index d003c54064f..7d00b9cb7ba 100644
--- a/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
+++ b/packages/server-renderer/__tests__/ssrVModelHelpers.spec.ts
@@ -1,6 +1,6 @@
 import {
+  ssrGetDynamicModelProps,
   ssrRenderDynamicModel,
-  ssrGetDynamicModelProps
   // ssrGetDynamicModelProps
 } from '../src/helpers/ssrVModelHelpers'
 
@@ -26,90 +26,90 @@ describe('ssr: v-model helpers', () => {
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'text'
+          type: 'text',
         },
-        'foo'
-      )
+        'foo',
+      ),
     ).toMatchObject({ value: 'foo' })
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'email'
+          type: 'email',
         },
-        'foo'
-      )
+        'foo',
+      ),
     ).toMatchObject({ value: 'foo' })
 
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'checkbox'
+          type: 'checkbox',
         },
-        true
-      )
+        true,
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
-          type: 'checkbox'
+          type: 'checkbox',
         },
-        false
-      )
+        false,
+      ),
     ).toBe(null)
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'checkbox',
-          value: '1'
+          value: '1',
         },
-        [1]
-      )
+        [1],
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'checkbox',
-          value: 1
+          value: 1,
         },
-        [1]
-      )
+        [1],
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'checkbox',
-          value: 0
+          value: 0,
         },
-        [1]
-      )
+        [1],
+      ),
     ).toBe(null)
 
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'radio',
-          value: 'foo'
+          value: 'foo',
         },
-        'foo'
-      )
+        'foo',
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'radio',
-          value: '1'
+          value: '1',
         },
-        1
-      )
+        1,
+      ),
     ).toMatchObject({ checked: true })
     expect(
       ssrGetDynamicModelProps(
         {
           type: 'radio',
-          value: 0
+          value: 0,
         },
-        1
-      )
+        1,
+      ),
     ).toBe(null)
   })
 })
diff --git a/packages/server-renderer/__tests__/ssrWatch.spec.ts b/packages/server-renderer/__tests__/ssrWatch.spec.ts
index df085332dc0..c157c90cd42 100644
--- a/packages/server-renderer/__tests__/ssrWatch.spec.ts
+++ b/packages/server-renderer/__tests__/ssrWatch.spec.ts
@@ -1,5 +1,5 @@
-import { createSSRApp, defineComponent, h, watch, ref } from 'vue'
-import { SSRContext, renderToString } from '../src'
+import { createSSRApp, defineComponent, h, ref, watch } from 'vue'
+import { type SSRContext, renderToString } from '../src'
 
 describe('ssr: watch', () => {
   // #6013
@@ -12,7 +12,7 @@ describe('ssr: watch', () => {
         () => {
           msg = 'hello world'
         },
-        { flush: 'sync' }
+        { flush: 'sync' },
       )
       count.value = 1
       expect(msg).toBe('hello world')
diff --git a/packages/server-renderer/__tests__/webStream.spec.ts b/packages/server-renderer/__tests__/webStream.spec.ts
index 1b5c054c5ae..700a9a0ae3f 100644
--- a/packages/server-renderer/__tests__/webStream.spec.ts
+++ b/packages/server-renderer/__tests__/webStream.spec.ts
@@ -1,25 +1,25 @@
-import { createApp, h, defineAsyncComponent } from 'vue'
-import { ReadableStream, TransformStream } from 'stream/web'
+import { createApp, defineAsyncComponent, h } from 'vue'
+import { ReadableStream, TransformStream } from 'node:stream/web'
 import { pipeToWebWritable, renderToWebStream } from '../src'
 
 beforeEach(() => {
-  // @ts-ignore
+  // @ts-expect-error
   global.ReadableStream = ReadableStream
 })
 
 afterEach(() => {
-  // @ts-ignore
+  // @ts-expect-error
   delete global.ReadableStream
 })
 
 test('renderToWebStream', async () => {
   const Async = defineAsyncComponent(() =>
     Promise.resolve({
-      render: () => h('div', 'async')
-    })
+      render: () => h('div', 'async'),
+    }),
   )
   const App = {
-    render: () => [h('div', 'parent'), h(Async)]
+    render: () => [h('div', 'parent'), h(Async)],
   }
 
   const stream = renderToWebStream(createApp(App))
@@ -41,11 +41,11 @@ test('renderToWebStream', async () => {
 test('pipeToWebWritable', async () => {
   const Async = defineAsyncComponent(() =>
     Promise.resolve({
-      render: () => h('div', 'async')
-    })
+      render: () => h('div', 'async'),
+    }),
   )
   const App = {
-    render: () => [h('div', 'parent'), h(Async)]
+    render: () => [h('div', 'parent'), h(Async)],
   }
 
   const { readable, writable } = new TransformStream()
diff --git a/packages/server-renderer/package.json b/packages/server-renderer/package.json
index ffc8a16f17c..2c7fcb4a1fa 100644
--- a/packages/server-renderer/package.json
+++ b/packages/server-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/server-renderer",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "@vue/server-renderer",
   "main": "index.js",
   "module": "dist/server-renderer.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/server-renderer.d.ts",
+      "node": {
+        "production": "./dist/server-renderer.cjs.prod.js",
+        "development": "./dist/server-renderer.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/server-renderer.esm-bundler.js",
+      "import": "./dist/server-renderer.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "VueServerRenderer",
     "formats": [
@@ -32,10 +46,10 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/server-renderer#readme",
   "peerDependencies": {
-    "vue": "3.3.5"
+    "vue": "workspace:*"
   },
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/compiler-ssr": "3.3.5"
+    "@vue/shared": "workspace:*",
+    "@vue/compiler-ssr": "workspace:*"
   }
 }
diff --git a/packages/server-renderer/src/helpers/ssrCompile.ts b/packages/server-renderer/src/helpers/ssrCompile.ts
index 722997c1a98..8412a65e843 100644
--- a/packages/server-renderer/src/helpers/ssrCompile.ts
+++ b/packages/server-renderer/src/helpers/ssrCompile.ts
@@ -1,8 +1,12 @@
-import { ComponentInternalInstance, ComponentOptions, warn } from 'vue'
+import {
+  type ComponentInternalInstance,
+  type ComponentOptions,
+  warn,
+} from 'vue'
 import { compile } from '@vue/compiler-ssr'
-import { extend, generateCodeFrame, isFunction, NO } from '@vue/shared'
-import { CompilerError, CompilerOptions } from '@vue/compiler-core'
-import { PushFn } from '../render'
+import { NO, extend, generateCodeFrame, isFunction } from '@vue/shared'
+import type { CompilerError, CompilerOptions } from '@vue/compiler-core'
+import type { PushFn } from '../render'
 
 import * as Vue from 'vue'
 import * as helpers from '../internal'
@@ -10,21 +14,21 @@ import * as helpers from '../internal'
 type SSRRenderFunction = (
   context: any,
   push: PushFn,
-  parentInstance: ComponentInternalInstance
+  parentInstance: ComponentInternalInstance,
 ) => void
 
 const compileCache: Record<string, SSRRenderFunction> = Object.create(null)
 
 export function ssrCompile(
   template: string,
-  instance: ComponentInternalInstance
+  instance: ComponentInternalInstance,
 ): SSRRenderFunction {
   // TODO: this branch should now work in ESM builds, enable it in a minor
-  if (!__NODE_JS__) {
+  if (!__CJS__) {
     throw new Error(
       `On-the-fly template compilation is not supported in the ESM build of ` +
         `@vue/server-renderer. All templates must be pre-compiled into ` +
-        `render functions.`
+        `render functions.`,
     )
   }
 
@@ -37,11 +41,11 @@ export function ssrCompile(
     extend(
       {
         isCustomElement,
-        delimiters
+        delimiters,
       },
-      compilerOptions
+      compilerOptions,
     ),
-    componentCompilerOptions
+    componentCompilerOptions,
   )
 
   finalCompilerOptions.isCustomElement =
@@ -51,11 +55,11 @@ export function ssrCompile(
   const cacheKey = JSON.stringify(
     {
       template,
-      compilerOptions: finalCompilerOptions
+      compilerOptions: finalCompilerOptions,
     },
     (key, value) => {
       return isFunction(value) ? value.toString() : value
-    }
+    },
   )
 
   const cached = compileCache[cacheKey]
@@ -71,7 +75,7 @@ export function ssrCompile(
         generateCodeFrame(
           template as string,
           err.loc.start.offset,
-          err.loc.end.offset
+          err.loc.end.offset,
         )
       warn(codeFrame ? `${message}\n${codeFrame}` : message)
     } else {
@@ -82,7 +86,7 @@ export function ssrCompile(
   const { code } = compile(template, finalCompilerOptions)
   const requireMap = {
     vue: Vue,
-    'vue/server-renderer': helpers
+    'vue/server-renderer': helpers,
   }
   const fakeRequire = (id: 'vue' | 'vue/server-renderer') => requireMap[id]
   return (compileCache[cacheKey] = Function('require', code)(fakeRequire))
diff --git a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
index 9a1eb310930..094d8564f8d 100644
--- a/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
+++ b/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
@@ -1,11 +1,11 @@
-import { ComponentPublicInstance, Directive } from '@vue/runtime-core'
+import type { ComponentPublicInstance, Directive } from '@vue/runtime-core'
 
 export function ssrGetDirectiveProps(
   instance: ComponentPublicInstance,
   dir: Directive,
   value?: any,
   arg?: string,
-  modifiers: Record<string, boolean> = {}
+  modifiers: Record<string, boolean> = {},
 ): Record<string, any> {
   if (typeof dir !== 'function' && dir.getSSRProps) {
     return (
@@ -16,9 +16,9 @@ export function ssrGetDirectiveProps(
           value,
           oldValue: undefined,
           arg,
-          modifiers
+          modifiers,
         },
-        null as any
+        null as any,
       ) || {}
     )
   }
diff --git a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
index 6bbf83a1eaa..5eb77116b19 100644
--- a/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderAttrs.ts
@@ -1,24 +1,29 @@
-import { escapeHtml, isSVGTag, stringifyStyle } from '@vue/shared'
 import {
+  escapeHtml,
+  isRenderableAttrValue,
+  isSVGTag,
+  stringifyStyle,
+} from '@vue/shared'
+import {
+  includeBooleanAttr,
+  isBooleanAttr,
+  isOn,
+  isSSRSafeAttrName,
+  isString,
+  makeMap,
   normalizeClass,
   normalizeStyle,
   propsToAttrMap,
-  isString,
-  isOn,
-  isSSRSafeAttrName,
-  isBooleanAttr,
-  includeBooleanAttr,
-  makeMap
 } from '@vue/shared'
 
 // leading comma for empty string ""
 const shouldIgnoreProp = makeMap(
-  `,key,ref,innerHTML,textContent,ref_key,ref_for`
+  `,key,ref,innerHTML,textContent,ref_key,ref_for`,
 )
 
 export function ssrRenderAttrs(
   props: Record<string, unknown>,
-  tag?: string
+  tag?: string,
 ): string {
   let ret = ''
   for (const key in props) {
@@ -45,9 +50,9 @@ export function ssrRenderAttrs(
 export function ssrRenderDynamicAttr(
   key: string,
   value: unknown,
-  tag?: string
+  tag?: string,
 ): string {
-  if (!isRenderableValue(value)) {
+  if (!isRenderableAttrValue(value)) {
     return ``
   }
   const attrKey =
@@ -60,7 +65,7 @@ export function ssrRenderDynamicAttr(
     return value === '' ? ` ${attrKey}` : ` ${attrKey}="${escapeHtml(value)}"`
   } else {
     console.warn(
-      `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}`
+      `[@vue/server-renderer] Skipped rendering unsafe attribute name: ${attrKey}`,
     )
     return ``
   }
@@ -69,20 +74,12 @@ export function ssrRenderDynamicAttr(
 // Render a v-bind attr with static key. The key is pre-processed at compile
 // time and we only need to check and escape value.
 export function ssrRenderAttr(key: string, value: unknown): string {
-  if (!isRenderableValue(value)) {
+  if (!isRenderableAttrValue(value)) {
     return ``
   }
   return ` ${key}="${escapeHtml(value)}"`
 }
 
-function isRenderableValue(value: unknown): boolean {
-  if (value == null) {
-    return false
-  }
-  const type = typeof value
-  return type === 'string' || type === 'number' || type === 'boolean'
-}
-
 export function ssrRenderClass(raw: unknown): string {
   return escapeHtml(normalizeClass(raw))
 }
diff --git a/packages/server-renderer/src/helpers/ssrRenderComponent.ts b/packages/server-renderer/src/helpers/ssrRenderComponent.ts
index 4709f23a674..4277bb1747e 100644
--- a/packages/server-renderer/src/helpers/ssrRenderComponent.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderComponent.ts
@@ -1,17 +1,22 @@
-import { Component, ComponentInternalInstance, createVNode, Slots } from 'vue'
-import { Props, renderComponentVNode, SSRBuffer } from '../render'
-import { SSRSlots } from './ssrRenderSlot'
+import {
+  type Component,
+  type ComponentInternalInstance,
+  type Slots,
+  createVNode,
+} from 'vue'
+import { type Props, type SSRBuffer, renderComponentVNode } from '../render'
+import type { SSRSlots } from './ssrRenderSlot'
 
 export function ssrRenderComponent(
   comp: Component,
   props: Props | null = null,
   children: Slots | SSRSlots | null = null,
   parentComponent: ComponentInternalInstance | null = null,
-  slotScopeId?: string
+  slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
   return renderComponentVNode(
     createVNode(comp, props, children),
     parentComponent,
-    slotScopeId
+    slotScopeId,
   )
 }
diff --git a/packages/server-renderer/src/helpers/ssrRenderList.ts b/packages/server-renderer/src/helpers/ssrRenderList.ts
index bde28f25759..1d009172145 100644
--- a/packages/server-renderer/src/helpers/ssrRenderList.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderList.ts
@@ -1,9 +1,9 @@
-import { isArray, isString, isObject } from '@vue/shared'
+import { isArray, isObject, isString } from '@vue/shared'
 import { warn } from '@vue/runtime-core'
 
 export function ssrRenderList(
   source: unknown,
-  renderItem: (value: unknown, key: string | number, index?: number) => void
+  renderItem: (value: unknown, key: string | number, index?: number) => void,
 ) {
   if (isArray(source) || isString(source)) {
     for (let i = 0, l = source.length; i < l; i++) {
diff --git a/packages/server-renderer/src/helpers/ssrRenderSlot.ts b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
index ea1e7e94106..df088e8929a 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSlot.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSlot.ts
@@ -1,5 +1,10 @@
-import { ComponentInternalInstance, Slots } from 'vue'
-import { Props, PushFn, renderVNodeChildren, SSRBufferItem } from '../render'
+import type { ComponentInternalInstance, Slots } from 'vue'
+import {
+  type Props,
+  type PushFn,
+  type SSRBufferItem,
+  renderVNodeChildren,
+} from '../render'
 import { isArray } from '@vue/shared'
 
 export type SSRSlots = Record<string, SSRSlot>
@@ -7,7 +12,7 @@ export type SSRSlot = (
   props: Props,
   push: PushFn,
   parentComponent: ComponentInternalInstance | null,
-  scopeId: string | null
+  scopeId: string | null,
 ) => void
 
 export function ssrRenderSlot(
@@ -17,7 +22,7 @@ export function ssrRenderSlot(
   fallbackRenderFn: (() => void) | null,
   push: PushFn,
   parentComponent: ComponentInternalInstance,
-  slotScopeId?: string
+  slotScopeId?: string,
 ) {
   // template-compiled slots are always rendered as fragments
   push(`<!--[-->`)
@@ -28,7 +33,7 @@ export function ssrRenderSlot(
     fallbackRenderFn,
     push,
     parentComponent,
-    slotScopeId
+    slotScopeId,
   )
   push(`<!--]-->`)
 }
@@ -41,7 +46,7 @@ export function ssrRenderSlotInner(
   push: PushFn,
   parentComponent: ComponentInternalInstance,
   slotScopeId?: string,
-  transition?: boolean
+  transition?: boolean,
 ) {
   const slotFn = slots[slotName]
   if (slotFn) {
@@ -53,7 +58,7 @@ export function ssrRenderSlotInner(
       slotProps,
       bufferedPush,
       parentComponent,
-      slotScopeId ? ' ' + slotScopeId : ''
+      slotScopeId ? ' ' + slotScopeId : '',
     )
     if (isArray(ret)) {
       // normal slot
@@ -77,7 +82,23 @@ export function ssrRenderSlotInner(
           fallbackRenderFn()
         }
       } else {
-        for (let i = 0; i < slotBuffer.length; i++) {
+        // #9933
+        // Although we handle Transition/TransitionGroup in the transform stage
+        // without rendering it as a fragment, the content passed into the slot
+        // may still be a fragment.
+        // Therefore, here we need to avoid rendering it as a fragment again.
+        let start = 0
+        let end = slotBuffer.length
+        if (
+          transition &&
+          slotBuffer[0] === '<!--[-->' &&
+          slotBuffer[end - 1] === '<!--]-->'
+        ) {
+          start++
+          end--
+        }
+
+        for (let i = start; i < end; i++) {
           push(slotBuffer[i])
         }
       }
diff --git a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts b/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
index f02b85d1796..58e668b070f 100644
--- a/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderSuspense.ts
@@ -1,8 +1,8 @@
-import { PushFn } from '../render'
+import type { PushFn } from '../render'
 
 export async function ssrRenderSuspense(
   push: PushFn,
-  { default: renderContent }: Record<string, (() => void) | undefined>
+  { default: renderContent }: Record<string, (() => void) | undefined>,
 ) {
   if (renderContent) {
     renderContent()
diff --git a/packages/server-renderer/src/helpers/ssrRenderTeleport.ts b/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
index 8338ec06c25..d83af28c131 100644
--- a/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
+++ b/packages/server-renderer/src/helpers/ssrRenderTeleport.ts
@@ -1,12 +1,17 @@
-import { ComponentInternalInstance, ssrContextKey } from 'vue'
-import { createBuffer, PushFn, SSRBufferItem, SSRContext } from '../render'
+import { type ComponentInternalInstance, ssrContextKey } from 'vue'
+import {
+  type PushFn,
+  type SSRBufferItem,
+  type SSRContext,
+  createBuffer,
+} from '../render'
 
 export function ssrRenderTeleport(
   parentPush: PushFn,
   contentRenderFn: (push: PushFn) => void,
   target: string,
   disabled: boolean,
-  parentComponent: ComponentInternalInstance
+  parentComponent: ComponentInternalInstance,
 ) {
   parentPush('<!--teleport start-->')
 
diff --git a/packages/server-renderer/src/helpers/ssrVModelHelpers.ts b/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
index 76b3d4f60f1..d899db88f35 100644
--- a/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
+++ b/packages/server-renderer/src/helpers/ssrVModelHelpers.ts
@@ -1,4 +1,4 @@
-import { looseEqual, looseIndexOf, isArray } from '@vue/shared'
+import { isArray, looseEqual, looseIndexOf } from '@vue/shared'
 import { ssrRenderAttr } from './ssrRenderAttrs'
 
 export const ssrLooseEqual = looseEqual as (a: unknown, b: unknown) => boolean
@@ -11,7 +11,7 @@ export function ssrLooseContain(arr: unknown[], value: unknown): boolean {
 export function ssrRenderDynamicModel(
   type: unknown,
   model: unknown,
-  value: unknown
+  value: unknown,
 ) {
   switch (type) {
     case 'radio':
@@ -29,7 +29,7 @@ export function ssrRenderDynamicModel(
 // for <input v-bind="obj" v-model="model">
 export function ssrGetDynamicModelProps(
   existingProps: any = {},
-  model: unknown
+  model: unknown,
 ) {
   const { type, value } = existingProps
   switch (type) {
diff --git a/packages/server-renderer/src/index.ts b/packages/server-renderer/src/index.ts
index 1e453c913c1..e339fe9f5e1 100644
--- a/packages/server-renderer/src/index.ts
+++ b/packages/server-renderer/src/index.ts
@@ -12,7 +12,7 @@ export {
   pipeToWebWritable,
   type SimpleReadable,
   // deprecated
-  renderToStream
+  renderToStream,
 } from './renderToStream'
 
 // internal runtime helpers
diff --git a/packages/server-renderer/src/internal.ts b/packages/server-renderer/src/internal.ts
index 93919fcb04e..3a2054066c3 100644
--- a/packages/server-renderer/src/internal.ts
+++ b/packages/server-renderer/src/internal.ts
@@ -8,7 +8,7 @@ export {
   ssrRenderStyle,
   ssrRenderAttrs,
   ssrRenderAttr,
-  ssrRenderDynamicAttr
+  ssrRenderDynamicAttr,
 } from './helpers/ssrRenderAttrs'
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
@@ -21,5 +21,5 @@ export {
   ssrLooseEqual,
   ssrLooseContain,
   ssrRenderDynamicModel,
-  ssrGetDynamicModelProps
+  ssrGetDynamicModelProps,
 } from './helpers/ssrVModelHelpers'
diff --git a/packages/server-renderer/src/render.ts b/packages/server-renderer/src/render.ts
index a1f327b4320..3029df6e540 100644
--- a/packages/server-renderer/src/render.ts
+++ b/packages/server-renderer/src/render.ts
@@ -1,29 +1,29 @@
 import {
   Comment,
-  Component,
-  ComponentInternalInstance,
-  DirectiveBinding,
+  type Component,
+  type ComponentInternalInstance,
+  type DirectiveBinding,
   Fragment,
-  FunctionalComponent,
-  mergeProps,
-  ssrUtils,
+  type FunctionalComponent,
   Static,
   Text,
-  VNode,
-  VNodeArrayChildren,
-  VNodeProps,
-  warn
+  type VNode,
+  type VNodeArrayChildren,
+  type VNodeProps,
+  mergeProps,
+  ssrUtils,
+  warn,
 } from 'vue'
 import {
+  NOOP,
+  ShapeFlags,
   escapeHtml,
   escapeHtmlComment,
+  isArray,
   isFunction,
   isPromise,
   isString,
   isVoidTag,
-  ShapeFlags,
-  isArray,
-  NOOP
 } from '@vue/shared'
 import { ssrRenderAttrs } from './helpers/ssrRenderAttrs'
 import { ssrCompile } from './helpers/ssrCompile'
@@ -34,7 +34,7 @@ const {
   setCurrentRenderingInstance,
   setupComponent,
   renderComponentRoot,
-  normalizeVNode
+  normalizeVNode,
 } = ssrUtils
 
 export type SSRBuffer = SSRBufferItem[] & { hasAsync?: boolean }
@@ -82,14 +82,14 @@ export function createBuffer() {
         // this allows skipping unnecessary await ticks during unroll stage
         buffer.hasAsync = true
       }
-    }
+    },
   }
 }
 
 export function renderComponentVNode(
   vnode: VNode,
   parentComponent: ComponentInternalInstance | null = null,
-  slotScopeId?: string
+  slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
   const instance = createComponentInstance(vnode, parentComponent, null)
   const res = setupComponent(instance, true /* isSSR */)
@@ -102,10 +102,12 @@ export function renderComponentVNode(
     if (prefetches) {
       p = p
         .then(() =>
-          Promise.all(prefetches.map(prefetch => prefetch.call(instance.proxy)))
+          Promise.all(
+            prefetches.map(prefetch => prefetch.call(instance.proxy)),
+          ),
         )
         // Note: error display is already done by the wrapped lifecycle hook function.
-        .catch(() => {})
+        .catch(NOOP)
     }
     return p.then(() => renderComponentSubTree(instance, slotScopeId))
   } else {
@@ -115,7 +117,7 @@ export function renderComponentVNode(
 
 function renderComponentSubTree(
   instance: ComponentInternalInstance,
-  slotScopeId?: string
+  slotScopeId?: string,
 ): SSRBuffer | Promise<SSRBuffer> {
   const comp = instance.type as Component
   const { getBuffer, push } = createBuffer()
@@ -144,7 +146,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
@@ -191,7 +196,7 @@ function renderComponentSubTree(
           instance.props,
           instance.setupState,
           instance.data,
-          instance.ctx
+          instance.ctx,
         )
       } finally {
         setCurrentRenderingInstance(prev)
@@ -201,7 +206,7 @@ function renderComponentSubTree(
         push,
         (instance.subTree = renderComponentRoot(instance)),
         instance,
-        slotScopeId
+        slotScopeId,
       )
     } else {
       const componentName = comp.name || comp.__file || `<Anonymous>`
@@ -216,7 +221,7 @@ export function renderVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  slotScopeId?: string
+  slotScopeId?: string,
 ) {
   const { type, shapeFlag, children } = vnode
   switch (type) {
@@ -225,7 +230,9 @@ export function renderVNode(
       break
     case Comment:
       push(
-        children ? `<!--${escapeHtmlComment(children as string)}-->` : `<!---->`
+        children
+          ? `<!--${escapeHtmlComment(children as string)}-->`
+          : `<!---->`,
       )
       break
     case Static:
@@ -241,7 +248,7 @@ export function renderVNode(
         push,
         children as VNodeArrayChildren,
         parentComponent,
-        slotScopeId
+        slotScopeId,
       )
       push(`<!--]-->`) // close
       break
@@ -258,7 +265,7 @@ export function renderVNode(
         warn(
           '[@vue/server-renderer] Invalid VNode type:',
           type,
-          `(${typeof type})`
+          `(${typeof type})`,
         )
       }
   }
@@ -268,7 +275,7 @@ export function renderVNodeChildren(
   push: PushFn,
   children: VNodeArrayChildren,
   parentComponent: ComponentInternalInstance,
-  slotScopeId: string | undefined
+  slotScopeId: string | undefined,
 ) {
   for (let i = 0; i < children.length; i++) {
     renderVNode(push, normalizeVNode(children[i]), parentComponent, slotScopeId)
@@ -279,7 +286,7 @@ function renderElementVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  slotScopeId: string | undefined
+  slotScopeId: string | undefined,
 ) {
   const tag = vnode.type as string
   let { props, children, shapeFlag, scopeId, dirs } = vnode
@@ -333,7 +340,7 @@ function renderElementVNode(
           push,
           children as VNodeArrayChildren,
           parentComponent,
-          slotScopeId
+          slotScopeId,
         )
       }
     }
@@ -344,13 +351,13 @@ function renderElementVNode(
 function applySSRDirectives(
   vnode: VNode,
   rawProps: VNodeProps | null,
-  dirs: DirectiveBinding[]
+  dirs: DirectiveBinding[],
 ): VNodeProps {
   const toMerge: VNodeProps[] = []
   for (let i = 0; i < dirs.length; i++) {
     const binding = dirs[i]
     const {
-      dir: { getSSRProps }
+      dir: { getSSRProps },
     } = binding
     if (getSSRProps) {
       const props = getSSRProps(binding, vnode)
@@ -364,7 +371,7 @@ function renderTeleportVNode(
   push: PushFn,
   vnode: VNode,
   parentComponent: ComponentInternalInstance,
-  slotScopeId: string | undefined
+  slotScopeId: string | undefined,
 ) {
   const target = vnode.props && vnode.props.to
   const disabled = vnode.props && vnode.props.disabled
@@ -376,7 +383,7 @@ function renderTeleportVNode(
   }
   if (!isString(target)) {
     warn(
-      `[@vue/server-renderer] Teleport target must be a query selector string.`
+      `[@vue/server-renderer] Teleport target must be a query selector string.`,
     )
     return []
   }
@@ -387,11 +394,11 @@ function renderTeleportVNode(
         push,
         vnode.children as VNodeArrayChildren,
         parentComponent,
-        slotScopeId
+        slotScopeId,
       )
     },
     target,
     disabled || disabled === '',
-    parentComponent
+    parentComponent,
   )
 }
diff --git a/packages/server-renderer/src/renderToStream.ts b/packages/server-renderer/src/renderToStream.ts
index bdcdb0a026e..60b277a4a9b 100644
--- a/packages/server-renderer/src/renderToStream.ts
+++ b/packages/server-renderer/src/renderToStream.ts
@@ -1,14 +1,14 @@
 import {
-  App,
-  VNode,
+  type App,
+  type VNode,
+  createApp,
   createVNode,
+  ssrContextKey,
   ssrUtils,
-  createApp,
-  ssrContextKey
 } from 'vue'
-import { isString, isPromise } from '@vue/shared'
-import { renderComponentVNode, SSRBuffer, SSRContext } from './render'
-import { Readable, Writable } from 'stream'
+import { isPromise, isString } from '@vue/shared'
+import { type SSRBuffer, type SSRContext, renderComponentVNode } from './render'
+import type { Readable, Writable } from 'node:stream'
 import { resolveTeleports } from './renderToString'
 
 const { isVNode } = ssrUtils
@@ -20,7 +20,7 @@ export interface SimpleReadable {
 
 async function unrollBuffer(
   buffer: SSRBuffer,
-  stream: SimpleReadable
+  stream: SimpleReadable,
 ): Promise<void> {
   if (buffer.hasAsync) {
     for (let i = 0; i < buffer.length; i++) {
@@ -56,14 +56,14 @@ function unrollBufferSync(buffer: SSRBuffer, stream: SimpleReadable) {
 export function renderToSimpleStream<T extends SimpleReadable>(
   input: App | VNode,
   context: SSRContext,
-  stream: T
+  stream: T,
 ): T {
   if (isVNode(input)) {
     // raw vnode, wrap with app (for context)
     return renderToSimpleStream(
       createApp({ render: () => input }),
       context,
-      stream
+      stream,
     )
   }
 
@@ -96,27 +96,27 @@ export function renderToSimpleStream<T extends SimpleReadable>(
  */
 export function renderToStream(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): Readable {
   console.warn(
-    `[@vue/server-renderer] renderToStream is deprecated - use renderToNodeStream instead.`
+    `[@vue/server-renderer] renderToStream is deprecated - use renderToNodeStream instead.`,
   )
   return renderToNodeStream(input, context)
 }
 
 export function renderToNodeStream(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): Readable {
-  const stream: Readable = __NODE_JS__
-    ? new (require('stream').Readable)({ read() {} })
+  const stream: Readable = __CJS__
+    ? new (require('node:stream').Readable)({ read() {} })
     : null
 
   if (!stream) {
     throw new Error(
       `ESM build of renderToStream() does not support renderToNodeStream(). ` +
         `Use pipeToNodeWritable() with an existing Node.js Writable stream ` +
-        `instance instead.`
+        `instance instead.`,
     )
   }
 
@@ -126,7 +126,7 @@ export function renderToNodeStream(
 export function pipeToNodeWritable(
   input: App | VNode,
   context: SSRContext = {},
-  writable: Writable
+  writable: Writable,
 ) {
   renderToSimpleStream(input, context, {
     push(content) {
@@ -138,19 +138,19 @@ export function pipeToNodeWritable(
     },
     destroy(err) {
       writable.destroy(err)
-    }
+    },
   })
 }
 
 export function renderToWebStream(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): ReadableStream {
   if (typeof ReadableStream !== 'function') {
     throw new Error(
       `ReadableStream constructor is not available in the global scope. ` +
         `If the target environment does support web streams, consider using ` +
-        `pipeToWebWritable() with an existing WritableStream instance instead.`
+        `pipeToWebWritable() with an existing WritableStream instance instead.`,
     )
   }
 
@@ -170,19 +170,19 @@ export function renderToWebStream(
         },
         destroy(err) {
           controller.error(err)
-        }
+        },
       })
     },
     cancel() {
       cancelled = true
-    }
+    },
   })
 }
 
 export function pipeToWebWritable(
   input: App | VNode,
   context: SSRContext = {},
-  writable: WritableStream
+  writable: WritableStream,
 ): void {
   const writer = writable.getWriter()
   const encoder = new TextEncoder()
@@ -206,8 +206,9 @@ export function pipeToWebWritable(
     },
     destroy(err) {
       // TODO better error handling?
+      // eslint-disable-next-line no-console
       console.log(err)
       writer.close()
-    }
+    },
   })
 }
diff --git a/packages/server-renderer/src/renderToString.ts b/packages/server-renderer/src/renderToString.ts
index 2fdc39f6816..0e9299ee834 100644
--- a/packages/server-renderer/src/renderToString.ts
+++ b/packages/server-renderer/src/renderToString.ts
@@ -1,13 +1,13 @@
 import {
-  App,
+  type App,
+  type VNode,
   createApp,
   createVNode,
   ssrContextKey,
   ssrUtils,
-  VNode
 } from 'vue'
 import { isPromise, isString } from '@vue/shared'
-import { SSRContext, renderComponentVNode, SSRBuffer } from './render'
+import { type SSRBuffer, type SSRContext, renderComponentVNode } from './render'
 
 const { isVNode } = ssrUtils
 
@@ -49,7 +49,7 @@ function unrollBufferSync(buffer: SSRBuffer): string {
 
 export async function renderToString(
   input: App | VNode,
-  context: SSRContext = {}
+  context: SSRContext = {},
 ): Promise<string> {
   if (isVNode(input)) {
     // raw vnode, wrap with app (for context)
@@ -83,7 +83,7 @@ export async function resolveTeleports(context: SSRContext) {
       // note: it's OK to await sequentially here because the Promises were
       // created eagerly in parallel.
       context.teleports[key] = await unrollBuffer(
-        await Promise.all([context.__teleportBuffers[key]])
+        await Promise.all([context.__teleportBuffers[key]]),
       )
     }
   }
diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json
index 22a6ef82b54..bad87f75b12 100644
--- a/packages/sfc-playground/package.json
+++ b/packages/sfc-playground/package.json
@@ -1,19 +1,19 @@
 {
   "name": "@vue/sfc-playground",
-  "version": "3.3.5",
-  "type": "module",
   "private": true,
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
-    "vite": "^4.5.0"
+    "@vitejs/plugin-vue": "^5.0.3",
+    "vite": "^5.0.12"
   },
   "dependencies": {
-    "@vue/repl": "^2.5.8",
+    "@vue/repl": "^3.1.1",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 744cfd4d9c0..cadd39f4baa 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -1,8 +1,24 @@
 <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 replRef = ref<InstanceType<typeof Repl>>()
 
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
@@ -10,13 +26,17 @@ const setVH = () => {
 window.addEventListener('resize', setVH)
 setVH()
 
-const useDevMode = ref(false)
+const useProdMode = ref(false)
 const useSSRMode = ref(false)
 
 let hash = location.hash.slice(1)
 if (hash.startsWith('__DEV__')) {
   hash = hash.slice(7)
-  useDevMode.value = true
+  useProdMode.value = false
+}
+if (hash.startsWith('__PROD__')) {
+  hash = hash.slice(8)
+  useProdMode.value = true
 }
 if (hash.startsWith('__SSR__')) {
   hash = hash.slice(7)
@@ -25,28 +45,34 @@ if (hash.startsWith('__SSR__')) {
 
 const store = new ReplStore({
   serializedState: hash,
+  productionMode: useProdMode.value,
   defaultVueRuntimeURL: import.meta.env.PROD
     ? `${location.origin}/vue.runtime.esm-browser.js`
     : `${location.origin}/src/vue-dev-proxy`,
+  defaultVueRuntimeProdURL: import.meta.env.PROD
+    ? `${location.origin}/vue.runtime.esm-browser.prod.js`
+    : `${location.origin}/src/vue-dev-proxy-prod`,
   defaultVueServerRendererURL: import.meta.env.PROD
     ? `${location.origin}/server-renderer.esm-browser.js`
-    : `${location.origin}/src/vue-server-renderer-dev-proxy`
+    : `${location.origin}/src/vue-server-renderer-dev-proxy`,
 })
 
 // enable experimental features
 const sfcOptions: SFCOptions = {
   script: {
-    inlineTemplate: !useDevMode.value,
-    isProd: !useDevMode.value,
-    reactivityTransform: true,
-    defineModel: true
+    inlineTemplate: useProdMode.value,
+    isProd: useProdMode.value,
+    propsDestructure: true,
   },
   style: {
-    isProd: !useDevMode.value
+    isProd: useProdMode.value,
   },
   template: {
-    isProd: !useDevMode.value
-  }
+    isProd: useProdMode.value,
+    compilerOptions: {
+      isCustomElement: (tag: string) => tag === 'mjx-container',
+    },
+  },
 }
 
 // persist state
@@ -54,17 +80,18 @@ watchEffect(() => {
   const newHash = store
     .serialize()
     .replace(/^#/, useSSRMode.value ? `#__SSR__` : `#`)
-    .replace(/^#/, useDevMode.value ? `#__DEV__` : `#`)
+    .replace(/^#/, useProdMode.value ? `#__PROD__` : `#`)
   history.replaceState({}, '', newHash)
 })
 
-function toggleDevMode() {
-  const dev = (useDevMode.value = !useDevMode.value)
+function toggleProdMode() {
+  const isProd = (useProdMode.value = !useProdMode.value)
   sfcOptions.script!.inlineTemplate =
     sfcOptions.script!.isProd =
     sfcOptions.template!.isProd =
     sfcOptions.style!.isProd =
-      !dev
+      isProd
+  store.toggleProduction()
   store.setFiles(store.getFiles())
 }
 
@@ -73,6 +100,10 @@ function toggleSSR() {
   store.setFiles(store.getFiles())
 }
 
+function reloadPage() {
+  replRef.value?.reload()
+}
+
 const theme = ref<'dark' | 'light'>('dark')
 function toggleTheme(isDark: boolean) {
   theme.value = isDark ? 'dark' : 'light'
@@ -86,15 +117,18 @@ onMounted(() => {
 <template>
   <Header
     :store="store"
-    :dev="useDevMode"
+    :prod="useProdMode"
     :ssr="useSSRMode"
     @toggle-theme="toggleTheme"
-    @toggle-dev="toggleDevMode"
+    @toggle-prod="toggleProdMode"
     @toggle-ssr="toggleSSR"
+    @reload-page="reloadPage"
   />
   <Repl
+    v-if="EditorComponent"
+    ref="replRef"
     :theme="theme"
-    :editor="Monaco"
+    :editor="EditorComponent"
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
     :ssr="useSSRMode"
@@ -103,6 +137,12 @@ onMounted(() => {
     :autoResize="true"
     :sfcOptions="sfcOptions"
     :clearConsole="false"
+    :preview-options="{
+      customCode: {
+        importCode: `import { initCustomFormatter } from 'vue'`,
+        useCode: `initCustomFormatter()`,
+      },
+    }"
   />
 </template>
 
diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index e865a76a5fe..48585a8e646 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -6,25 +6,37 @@ import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
+import Reload from './icons/Reload.vue'
 import type { ReplStore } from '@vue/repl'
 import VersionSelect from './VersionSelect.vue'
 
 const props = defineProps<{
   store: ReplStore
-  dev: boolean
+  prod: boolean
   ssr: boolean
 }>()
-const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
+const emit = defineEmits([
+  'toggle-theme',
+  'toggle-ssr',
+  'toggle-prod',
+  'reload-page',
+])
 
 const { store } = props
 
 const currentCommit = __COMMIT__
 const vueVersion = ref(`@${currentCommit}`)
 
+const vueURL = store.getImportMap().imports.vue
+if (vueURL && !vueURL.startsWith(location.origin)) {
+  const versionMatch = vueURL.match(/runtime-dom@([^/]+)/)
+  if (versionMatch) vueVersion.value = versionMatch[1]
+}
+
 async function setVueVersion(v: string) {
   vueVersion.value = `loading...`
   await store.setVueVersion(v)
-  vueVersion.value = `v${v}`
+  vueVersion.value = v
 }
 
 function resetVueVersion() {
@@ -47,7 +59,7 @@ function toggleDark() {
   cls.toggle('dark')
   localStorage.setItem(
     'vue-sfc-playground-prefer-dark',
-    String(cls.contains('dark'))
+    String(cls.contains('dark')),
   )
   emit('toggle-theme', cls.contains('dark'))
 }
@@ -84,11 +96,11 @@ function toggleDark() {
       </VersionSelect>
       <button
         title="Toggle development production mode"
-        class="toggle-dev"
-        :class="{ dev }"
-        @click="$emit('toggle-dev')"
+        class="toggle-prod"
+        :class="{ prod }"
+        @click="$emit('toggle-prod')"
       >
-        <span>{{ dev ? 'DEV' : 'PROD' }}</span>
+        <span>{{ prod ? 'PROD' : 'DEV' }}</span>
       </button>
       <button
         title="Toggle server rendering mode"
@@ -105,6 +117,9 @@ function toggleDark() {
       <button title="Copy sharable URL" class="share" @click="copyLink">
         <Share />
       </button>
+      <button title="Reload page" class="reload" @click="$emit('reload-page')">
+        <Reload />
+      </button>
       <button
         title="Download project files"
         class="download"
@@ -186,20 +201,20 @@ h1 img {
   display: flex;
 }
 
-.toggle-dev span,
+.toggle-prod span,
 .toggle-ssr span {
   font-size: 12px;
   border-radius: 4px;
   padding: 4px 6px;
 }
 
-.toggle-dev span {
-  background: var(--purple);
+.toggle-prod span {
+  background: var(--green);
   color: #fff;
 }
 
-.toggle-dev.dev span {
-  background: var(--green);
+.toggle-prod.prod span {
+  background: var(--purple);
 }
 
 .toggle-ssr span {
diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
index 2dfbcbc5f91..50c3c59ac24 100644
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages/sfc-playground/src/VersionSelect.vue
@@ -19,7 +19,7 @@ async function toggle() {
 
 async function fetchVersions(): Promise<string[]> {
   const res = await fetch(
-    `https://data.jsdelivr.com/v1/package/npm/${props.pkg}`
+    `https://data.jsdelivr.com/v1/package/npm/${props.pkg}`,
   )
   const { versions } = (await res.json()) as { versions: string[] }
 
@@ -74,8 +74,8 @@ onMounted(() => {
 
     <ul class="versions" :class="{ expanded }">
       <li v-if="!versions"><a>loading versions...</a></li>
-      <li v-for="version of versions">
-        <a @click="setVersion(version)">v{{ version }}</a>
+      <li v-for="ver of versions" :class="{ active: ver === version }">
+        <a @click="setVersion(ver)">v{{ ver }}</a>
       </li>
       <div @click="expanded = false">
         <slot />
@@ -111,4 +111,8 @@ onMounted(() => {
   border-top: 6px solid #aaa;
   margin-left: 8px;
 }
+
+.versions .active a {
+  color: var(--green);
+}
 </style>
diff --git a/packages/sfc-playground/src/download/download.ts b/packages/sfc-playground/src/download/download.ts
index eb534538bf2..f981134a701 100644
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages/sfc-playground/src/download/download.ts
@@ -5,7 +5,7 @@ import main from './template/main.js?raw'
 import pkg from './template/package.json?raw'
 import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
-import { ReplStore } from '@vue/repl'
+import type { ReplStore } from '@vue/repl'
 
 export async function downloadProject(store: ReplStore) {
   if (!confirm('Download project files?')) {
diff --git a/packages/sfc-playground/src/download/template/package.json b/packages/sfc-playground/src/download/template/package.json
index c04bd519459..28c6334c7c0 100644
--- a/packages/sfc-playground/src/download/template/package.json
+++ b/packages/sfc-playground/src/download/template/package.json
@@ -1,16 +1,17 @@
 {
   "name": "vite-vue-starter",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.0"
+    "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.4.0",
-    "vite": "^4.5.0"
+    "@vitejs/plugin-vue": "^5.0.3",
+    "vite": "^5.0.12"
   }
 }
diff --git a/packages/sfc-playground/src/download/template/vite.config.js b/packages/sfc-playground/src/download/template/vite.config.js
index 315212d69a7..05c17402a4a 100644
--- a/packages/sfc-playground/src/download/template/vite.config.js
+++ b/packages/sfc-playground/src/download/template/vite.config.js
@@ -3,5 +3,5 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
 })
diff --git a/packages/sfc-playground/src/icons/GitHub.vue b/packages/sfc-playground/src/icons/GitHub.vue
index cc2506a787d..2a6aaf62dd2 100644
--- a/packages/sfc-playground/src/icons/GitHub.vue
+++ b/packages/sfc-playground/src/icons/GitHub.vue
@@ -1,6 +1,7 @@
 <template>
   <svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
     <path
-        d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/>
+      d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
+    />
   </svg>
 </template>
diff --git a/packages/sfc-playground/src/icons/Moon.vue b/packages/sfc-playground/src/icons/Moon.vue
index 30c6eb515f1..21f393d4d6e 100644
--- a/packages/sfc-playground/src/icons/Moon.vue
+++ b/packages/sfc-playground/src/icons/Moon.vue
@@ -1,5 +1,8 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
+    <path
+      fill="currentColor"
+      d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"
+    />
   </svg>
 </template>
diff --git a/packages/sfc-playground/src/icons/Reload.vue b/packages/sfc-playground/src/icons/Reload.vue
new file mode 100644
index 00000000000..5ec5be80889
--- /dev/null
+++ b/packages/sfc-playground/src/icons/Reload.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="currentColor"
+    width="1.7em"
+    height="1.7em"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+    />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+</template>
diff --git a/packages/sfc-playground/src/icons/Sun.vue b/packages/sfc-playground/src/icons/Sun.vue
index 4e4b1f409f9..4b73922421a 100644
--- a/packages/sfc-playground/src/icons/Sun.vue
+++ b/packages/sfc-playground/src/icons/Sun.vue
@@ -1,13 +1,40 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path fill="currentColor" d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
-    <path fill="currentColor" d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
-    <path fill="currentColor" d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
-    <path fill="currentColor" d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
-    <path fill="currentColor" d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
-    <path fill="currentColor" d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
-    <path fill="currentColor" d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
-    <path fill="currentColor" d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
-    <path fill="currentColor" d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
+    <path
+      fill="currentColor"
+      d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"
+    />
+    <path
+      fill="currentColor"
+      d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"
+    />
+    <path
+      fill="currentColor"
+      d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"
+    />
+    <path
+      fill="currentColor"
+      d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"
+    />
+    <path
+      fill="currentColor"
+      d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"
+    />
+    <path
+      fill="currentColor"
+      d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"
+    />
+    <path
+      fill="currentColor"
+      d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"
+    />
+    <path
+      fill="currentColor"
+      d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"
+    />
+    <path
+      fill="currentColor"
+      d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"
+    />
   </svg>
 </template>
diff --git a/packages/sfc-playground/src/main.ts b/packages/sfc-playground/src/main.ts
index 713251fd81c..7be63408035 100644
--- a/packages/sfc-playground/src/main.ts
+++ b/packages/sfc-playground/src/main.ts
@@ -1,10 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import '@vue/repl/style.css'
 
 // @ts-expect-error Custom window property
 window.VUE_DEVTOOLS_CONFIG = {
-  defaultSelectedAppId: 'repl'
+  defaultSelectedAppId: 'repl',
 }
 
 createApp(App).mount('#app')
diff --git a/packages/sfc-playground/src/vue-dev-proxy-prod.ts b/packages/sfc-playground/src/vue-dev-proxy-prod.ts
new file mode 100644
index 00000000000..c20c51579a4
--- /dev/null
+++ b/packages/sfc-playground/src/vue-dev-proxy-prod.ts
@@ -0,0 +1,3 @@
+// serve vue to the iframe sandbox during dev.
+// @ts-expect-error
+export * from 'vue/dist/vue.runtime.esm-browser.prod.js'
diff --git a/packages/sfc-playground/vite.config.ts b/packages/sfc-playground/vite.config.ts
index df5441cb0f6..e30078f4b79 100644
--- a/packages/sfc-playground/vite.config.ts
+++ b/packages/sfc-playground/vite.config.ts
@@ -1,31 +1,30 @@
-import fs from 'fs'
-import path from 'path'
-import { defineConfig, Plugin } from 'vite'
+import fs from 'node:fs'
+import path from 'node:path'
+import { type Plugin, defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { execaSync } from 'execa'
 
-const commit = execaSync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
+const commit = execaSync('git', ['rev-parse', '--short=7', 'HEAD']).stdout
 
 export default defineConfig({
   plugins: [
     vue({
       script: {
-        defineModel: true,
         fs: {
           fileExists: fs.existsSync,
-          readFile: file => fs.readFileSync(file, 'utf-8')
-        }
-      }
+          readFile: file => fs.readFileSync(file, 'utf-8'),
+        },
+      },
     }),
-    copyVuePlugin()
+    copyVuePlugin(),
   ],
   define: {
     __COMMIT__: JSON.stringify(commit),
-    __VUE_PROD_DEVTOOLS__: JSON.stringify(true)
+    __VUE_PROD_DEVTOOLS__: JSON.stringify(true),
   },
   optimizeDeps: {
-    exclude: ['@vue/repl']
-  }
+    exclude: ['@vue/repl'],
+  },
 })
 
 function copyVuePlugin(): Plugin {
@@ -38,18 +37,21 @@ function copyVuePlugin(): Plugin {
         if (!fs.existsSync(filePath)) {
           throw new Error(
             `${basename} not built. ` +
-              `Run "nr build vue -f esm-browser" first.`
+              `Run "nr build vue -f esm-browser" first.`,
           )
         }
         this.emitFile({
           type: 'asset',
           fileName: basename,
-          source: fs.readFileSync(filePath, 'utf-8')
+          source: fs.readFileSync(filePath, 'utf-8'),
         })
       }
 
+      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`)
-    }
+    },
   }
 }
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__/codeframe.spec.ts b/packages/shared/__tests__/codeframe.spec.ts
index 5083100485d..addae82c908 100644
--- a/packages/shared/__tests__/codeframe.spec.ts
+++ b/packages/shared/__tests__/codeframe.spec.ts
@@ -75,7 +75,7 @@ attr
       const keyEnd =
         windowsNewLineSource.indexOf(endToken, keyStart) + endToken.length
       expect(
-        generateCodeFrame(windowsNewLineSource, keyStart, keyEnd)
+        generateCodeFrame(windowsNewLineSource, keyStart, keyEnd),
       ).toMatchSnapshot()
     })
 
@@ -84,7 +84,7 @@ attr
       const keyEnd =
         unixNewlineSource.indexOf(endToken, keyStart) + endToken.length
       expect(
-        generateCodeFrame(unixNewlineSource, keyStart, keyEnd)
+        generateCodeFrame(unixNewlineSource, keyStart, keyEnd),
       ).toMatchSnapshot()
     })
   }
diff --git a/packages/shared/__tests__/escapeHtml.spec.ts b/packages/shared/__tests__/escapeHtml.spec.ts
index 34505d3eadc..30004706af7 100644
--- a/packages/shared/__tests__/escapeHtml.spec.ts
+++ b/packages/shared/__tests__/escapeHtml.spec.ts
@@ -1,11 +1,31 @@
-import { escapeHtml } from '../src'
-
-test('ssr: escapeHTML', () => {
-  expect(escapeHtml(`foo`)).toBe(`foo`)
-  expect(escapeHtml(true)).toBe(`true`)
-  expect(escapeHtml(false)).toBe(`false`)
-  expect(escapeHtml(`a && b`)).toBe(`a &amp;&amp; b`)
-  expect(escapeHtml(`"foo"`)).toBe(`&quot;foo&quot;`)
-  expect(escapeHtml(`'bar'`)).toBe(`&#39;bar&#39;`)
-  expect(escapeHtml(`<div>`)).toBe(`&lt;div&gt;`)
+import { escapeHtml, escapeHtmlComment } from '../src'
+
+describe('escapeHtml', () => {
+  test('ssr: escapeHTML', () => {
+    expect(escapeHtml(`foo`)).toBe(`foo`)
+    expect(escapeHtml(true)).toBe(`true`)
+    expect(escapeHtml(false)).toBe(`false`)
+    expect(escapeHtml(`a && b`)).toBe(`a &amp;&amp; b`)
+    expect(escapeHtml(`"foo"`)).toBe(`&quot;foo&quot;`)
+    expect(escapeHtml(`'bar'`)).toBe(`&#39;bar&#39;`)
+    expect(escapeHtml(`<div>`)).toBe(`&lt;div&gt;`)
+  })
+
+  test('ssr: escapeHTMLComment', () => {
+    const input = '<!-- Hello --><!-- World! -->'
+    const result = escapeHtmlComment(input)
+    expect(result).toEqual(' Hello  World! ')
+  })
+
+  test('ssr: escapeHTMLComment', () => {
+    const input = '<!-- Comment 1 --> Hello <!--! Comment 2 --> World!'
+    const result = escapeHtmlComment(input)
+    expect(result).toEqual(' Comment 1  Hello ! Comment 2  World!')
+  })
+
+  test('should not affect non-comment strings', () => {
+    const input = 'Hello World'
+    const result = escapeHtmlComment(input)
+    expect(result).toEqual(input)
+  })
 })
diff --git a/packages/shared/__tests__/looseEqual.spec.ts b/packages/shared/__tests__/looseEqual.spec.ts
index 67b69dd76d4..2dea58ce586 100644
--- a/packages/shared/__tests__/looseEqual.spec.ts
+++ b/packages/shared/__tests__/looseEqual.spec.ts
@@ -69,27 +69,27 @@ describe('utils/looseEqual', () => {
     const date2 = new Date(2019, 1, 2, 3, 4, 5, 7)
     const file1 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file2 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file3 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date2.getTime()
+      lastModified: date2.getTime(),
     })
     const file4 = new File([''], 'filename.csv', {
       type: 'text/csv',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file5 = new File(['abcdef'], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
     const file6 = new File(['12345'], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
 
     // Identical file object references
@@ -178,7 +178,7 @@ describe('utils/looseEqual', () => {
     const date1 = new Date(2019, 1, 2, 3, 4, 5, 6)
     const file1 = new File([''], 'filename.txt', {
       type: 'text/plain',
-      lastModified: date1.getTime()
+      lastModified: date1.getTime(),
     })
 
     expect(looseEqual(123, '123')).toBe(true)
diff --git a/packages/shared/__tests__/normalizeProp.spec.ts b/packages/shared/__tests__/normalizeProp.spec.ts
index a3cb104c003..4e5736af46f 100644
--- a/packages/shared/__tests__/normalizeProp.spec.ts
+++ b/packages/shared/__tests__/normalizeProp.spec.ts
@@ -1,22 +1,70 @@
 import { normalizeClass, parseStringStyle } from '../src'
 
 describe('normalizeClass', () => {
+  test('handles undefined correctly', () => {
+    expect(normalizeClass(undefined)).toEqual('')
+  })
+
   test('handles string correctly', () => {
     expect(normalizeClass('foo')).toEqual('foo')
   })
 
   test('handles array correctly', () => {
     expect(normalizeClass(['foo', undefined, true, false, 'bar'])).toEqual(
-      'foo bar'
+      'foo bar',
     )
   })
 
+  test('handles empty array correctly', () => {
+    expect(normalizeClass([])).toEqual('')
+  })
+
+  test('handles nested array correctly', () => {
+    expect(normalizeClass(['foo', ['bar'], [['baz']]])).toEqual('foo bar baz')
+  })
+
   test('handles object correctly', () => {
     expect(normalizeClass({ foo: true, bar: false, baz: true })).toEqual(
-      'foo baz'
+      'foo baz',
     )
   })
 
+  test('handles empty object correctly', () => {
+    expect(normalizeClass({})).toEqual('')
+  })
+
+  test('handles arrays and objects correctly', () => {
+    expect(
+      normalizeClass(['foo', ['bar'], { baz: true }, [{ qux: true }]]),
+    ).toEqual('foo bar baz qux')
+  })
+
+  test('handles array of objects with falsy values', () => {
+    expect(
+      normalizeClass([
+        { foo: false },
+        { bar: 0 },
+        { baz: -0 },
+        { qux: '' },
+        { quux: null },
+        { corge: undefined },
+        { grault: NaN },
+      ]),
+    ).toEqual('')
+  })
+
+  test('handles array of objects with truthy values', () => {
+    expect(
+      normalizeClass([
+        { foo: true },
+        { bar: 'not-empty' },
+        { baz: 1 },
+        { qux: {} },
+        { quux: [] },
+      ]),
+    ).toEqual('foo bar baz qux quux')
+  })
+
   // #6777
   test('parse multi-line inline style', () => {
     expect(
@@ -28,7 +76,7 @@ describe('normalizeClass', () => {
         #ccc 0.5em,
         white 0,
         white 0.75em
-      );`)
+      );`),
     ).toMatchInlineSnapshot(`
       {
         "background": "linear-gradient(white, white) padding-box,
diff --git a/packages/shared/__tests__/toDisplayString.spec.ts b/packages/shared/__tests__/toDisplayString.spec.ts
index 5255c0e400b..ef5030239b4 100644
--- a/packages/shared/__tests__/toDisplayString.spec.ts
+++ b/packages/shared/__tests__/toDisplayString.spec.ts
@@ -27,19 +27,19 @@ describe('toDisplayString', () => {
       foo: 555,
       toString() {
         return 'override'
-      }
+      },
     }
     expect(toDisplayString(objWithToStringOverride)).toBe('override')
 
     const objWithNonInvokableToString = {
       foo: 555,
-      toString: null
+      toString: null,
     }
     expect(toDisplayString(objWithNonInvokableToString)).toBe(
       `{
   "foo": 555,
   "toString": null
-}`
+}`,
     )
 
     // object created from null does not have .toString in its prototype
@@ -48,7 +48,7 @@ describe('toDisplayString', () => {
     expect(toDisplayString(nullObjectWithoutToString)).toBe(
       `{
   "bar": 1
-}`
+}`,
     )
 
     // array toString override is ignored
@@ -60,7 +60,7 @@ describe('toDisplayString', () => {
   1,
   2,
   3
-]`
+]`,
     )
   })
 
@@ -70,8 +70,8 @@ describe('toDisplayString', () => {
     expect(
       toDisplayString({
         n,
-        np
-      })
+        np,
+      }),
     ).toBe(JSON.stringify({ n: 1, np: 2 }, null, 2))
   })
 
@@ -92,7 +92,7 @@ describe('toDisplayString', () => {
     expect(toDisplayString(div)).toMatch('[object HTMLDivElement]')
     expect(toDisplayString({ div })).toMatchInlineSnapshot(`
       "{
-        \\"div\\": \\"[object HTMLDivElement]\\"
+        "div": "[object HTMLDivElement]"
       }"
     `)
   })
@@ -100,34 +100,34 @@ describe('toDisplayString', () => {
   test('Map and Set', () => {
     const m = new Map<any, any>([
       [1, 'foo'],
-      [{ baz: 1 }, { foo: 'bar', qux: 2 }]
+      [{ baz: 1 }, { foo: 'bar', qux: 2 }],
     ])
     const s = new Set<any>([1, { foo: 'bar' }, m])
 
     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
               }
             }
           }
@@ -138,31 +138,31 @@ describe('toDisplayString', () => {
     expect(
       toDisplayString({
         m,
-        s
-      })
+        s,
+      }),
     ).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
                 }
               }
             }
@@ -171,4 +171,49 @@ describe('toDisplayString', () => {
       }"
     `)
   })
+
+  //#9727
+  test('Map with Symbol keys', () => {
+    const m = new Map<any, any>([
+      [Symbol(), 'foo'],
+      [Symbol(), 'bar'],
+      [Symbol('baz'), 'baz'],
+    ])
+    expect(toDisplayString(m)).toMatchInlineSnapshot(`
+      "{
+        "Map(3)": {
+          "Symbol(0) =>": "foo",
+          "Symbol(1) =>": "bar",
+          "Symbol(baz) =>": "baz"
+        }
+      }"
+    `)
+    // confirming the symbol renders Symbol(foo)
+    expect(toDisplayString(new Map([[Symbol('foo'), 'foo']]))).toContain(
+      String(Symbol('foo')),
+    )
+  })
+
+  test('Set with Symbol values', () => {
+    const s = new Set([Symbol('foo'), Symbol('bar'), Symbol()])
+    expect(toDisplayString(s)).toMatchInlineSnapshot(`
+      "{
+        "Set(3)": [
+          "Symbol(foo)",
+          "Symbol(bar)",
+          "Symbol()"
+        ]
+      }"
+    `)
+  })
+
+  test('Object with Symbol values', () => {
+    expect(toDisplayString({ foo: Symbol('x'), bar: Symbol() }))
+      .toMatchInlineSnapshot(`
+      "{
+        "foo": "Symbol(x)",
+        "bar": "Symbol()"
+      }"
+    `)
+  })
 })
diff --git a/packages/shared/package.json b/packages/shared/package.json
index ba2567286b0..8019a025792 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/shared",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "internal utils shared across @vue packages",
   "main": "index.js",
   "module": "dist/shared.esm-bundler.js",
@@ -9,6 +9,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/shared.d.ts",
+      "node": {
+        "production": "./dist/shared.cjs.prod.js",
+        "development": "./dist/shared.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/shared.esm-bundler.js",
+      "import": "./dist/shared.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "sideEffects": false,
   "buildOptions": {
     "formats": [
diff --git a/packages/shared/src/codeframe.ts b/packages/shared/src/codeframe.ts
index 82b38bfb330..af7212166ee 100644
--- a/packages/shared/src/codeframe.ts
+++ b/packages/shared/src/codeframe.ts
@@ -3,7 +3,7 @@ const range: number = 2
 export function generateCodeFrame(
   source: string,
   start = 0,
-  end = source.length
+  end = source.length,
 ): string {
   // Split the content into individual lines but capture the newline sequence
   // that separated each line. This is important because the actual sequence is
@@ -28,7 +28,7 @@ export function generateCodeFrame(
         res.push(
           `${line}${' '.repeat(Math.max(3 - String(line).length, 0))}|  ${
             lines[j]
-          }`
+          }`,
         )
         const lineLength = lines[j].length
         const newLineSeqLength =
@@ -39,7 +39,7 @@ export function generateCodeFrame(
           const pad = start - (count - (lineLength + newLineSeqLength))
           const length = Math.max(
             1,
-            end > count ? lineLength - pad : end - start
+            end > count ? lineLength - pad : end - start,
           )
           res.push(`   |  ` + ' '.repeat(pad) + '^'.repeat(length))
         } else if (j > i) {
diff --git a/packages/shared/src/domAttrConfig.ts b/packages/shared/src/domAttrConfig.ts
index 5f7f851b0df..758dfb307be 100644
--- a/packages/shared/src/domAttrConfig.ts
+++ b/packages/shared/src/domAttrConfig.ts
@@ -21,7 +21,7 @@ export const isBooleanAttr = /*#__PURE__*/ makeMap(
   specialBooleanAttrs +
     `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,` +
     `inert,loop,open,required,reversed,scoped,seamless,` +
-    `checked,muted,multiple,selected`
+    `checked,muted,multiple,selected`,
 )
 
 /**
@@ -50,7 +50,7 @@ export const propsToAttrMap: Record<string, string | undefined> = {
   acceptCharset: 'accept-charset',
   className: 'class',
   htmlFor: 'for',
-  httpEquiv: 'http-equiv'
+  httpEquiv: 'http-equiv',
 }
 
 /**
@@ -74,7 +74,7 @@ export const isKnownHtmlAttr = /*#__PURE__*/ makeMap(
     `referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,` +
     `selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,` +
     `start,step,style,summary,tabindex,target,title,translate,type,usemap,` +
-    `value,width,wrap`
+    `value,width,wrap`,
 )
 
 /**
@@ -118,6 +118,17 @@ export const isKnownSvgAttr = /*#__PURE__*/ makeMap(
     `v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,` +
     `vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,` +
     `writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,` +
-    `xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xml:base,xml:lang,` +
-    `xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`
+    `xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,` +
+    `xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`,
 )
+
+/**
+ * Shared between server-renderer and runtime-core hydration logic
+ */
+export function isRenderableAttrValue(value: unknown): boolean {
+  if (value == null) {
+    return false
+  }
+  const type = typeof value
+  return type === 'string' || type === 'number' || type === 'boolean'
+}
diff --git a/packages/shared/src/domTagConfig.ts b/packages/shared/src/domTagConfig.ts
index 535aa6be718..000432298ff 100644
--- a/packages/shared/src/domTagConfig.ts
+++ b/packages/shared/src/domTagConfig.ts
@@ -27,6 +27,14 @@ const SVG_TAGS =
   'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
   'text,textPath,title,tspan,unknown,use,view'
 
+// https://www.w3.org/TR/mathml4/ (content elements excluded)
+const MATH_TAGS =
+  'annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,' +
+  'merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,' +
+  'mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,' +
+  'mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,' +
+  'msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics'
+
 const VOID_TAGS =
   'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
 
@@ -40,6 +48,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/shared/src/general.ts b/packages/shared/src/general.ts
index 0117e67000d..e04b961227a 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:')
 
@@ -29,7 +32,7 @@ export const remove = <T>(arr: T[], el: T) => {
 const hasOwnProperty = Object.prototype.hasOwnProperty
 export const hasOwn = (
   val: object,
-  key: string | symbol
+  key: string | symbol,
 ): key is keyof typeof val => hasOwnProperty.call(val, key)
 
 export const isArray = Array.isArray
@@ -80,11 +83,11 @@ export const isReservedProp = /*#__PURE__*/ makeMap(
   ',key,ref,ref_for,ref_key,' +
     'onVnodeBeforeMount,onVnodeMounted,' +
     'onVnodeBeforeUpdate,onVnodeUpdated,' +
-    'onVnodeBeforeUnmount,onVnodeUnmounted'
+    'onVnodeBeforeUnmount,onVnodeUnmounted',
 )
 
 export const isBuiltInDirective = /*#__PURE__*/ makeMap(
-  'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo'
+  'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo',
 )
 
 const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
@@ -108,7 +111,7 @@ const hyphenateRE = /\B([A-Z])/g
  * @private
  */
 export const hyphenate = cacheStringFunction((str: string) =>
-  str.replace(hyphenateRE, '-$1').toLowerCase()
+  str.replace(hyphenateRE, '-$1').toLowerCase(),
 )
 
 /**
@@ -140,7 +143,7 @@ export const def = (obj: object, key: string | symbol, value: any) => {
   Object.defineProperty(obj, key, {
     configurable: true,
     enumerable: false,
-    value
+    value,
   })
 }
 
@@ -170,12 +173,12 @@ export const getGlobalThis = (): any => {
       typeof globalThis !== 'undefined'
         ? globalThis
         : typeof self !== 'undefined'
-        ? self
-        : typeof window !== 'undefined'
-        ? window
-        : typeof global !== 'undefined'
-        ? global
-        : {})
+          ? self
+          : typeof window !== 'undefined'
+            ? window
+            : typeof global !== 'undefined'
+              ? global
+              : {})
   )
 }
 
diff --git a/packages/shared/src/globalsAllowList.ts b/packages/shared/src/globalsAllowList.ts
index 4af518c22f1..210650e3e2b 100644
--- a/packages/shared/src/globalsAllowList.ts
+++ b/packages/shared/src/globalsAllowList.ts
@@ -3,7 +3,7 @@ import { makeMap } from './makeMap'
 const GLOBALS_ALLOWED =
   'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
   'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
-  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console'
+  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error'
 
 export const isGloballyAllowed = /*#__PURE__*/ makeMap(GLOBALS_ALLOWED)
 
diff --git a/packages/shared/src/makeMap.ts b/packages/shared/src/makeMap.ts
index b598704c673..f11cc407c6f 100644
--- a/packages/shared/src/makeMap.ts
+++ b/packages/shared/src/makeMap.ts
@@ -7,12 +7,10 @@
  */
 export function makeMap(
   str: string,
-  expectsLowerCase?: boolean
+  expectsLowerCase?: boolean,
 ): (key: string) => boolean {
-  const map: Record<string, boolean> = Object.create(null)
-  const list: Array<string> = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
+  const set = new Set(str.split(','))
+  return expectsLowerCase
+    ? val => set.has(val.toLowerCase())
+    : val => set.has(val)
 }
diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index 10d54c6b51a..07e782d44f1 100644
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -1,9 +1,9 @@
-import { isArray, isString, isObject, hyphenate } from './general'
+import { hyphenate, isArray, isObject, isString } from './general'
 
 export type NormalizedStyle = Record<string, string | number>
 
 export function normalizeStyle(
-  value: unknown
+  value: unknown,
 ): NormalizedStyle | string | undefined {
   if (isArray(value)) {
     const res: NormalizedStyle = {}
@@ -43,7 +43,7 @@ export function parseStringStyle(cssText: string): NormalizedStyle {
 }
 
 export function stringifyStyle(
-  styles: NormalizedStyle | string | undefined
+  styles: NormalizedStyle | string | undefined,
 ): string {
   let ret = ''
   if (!styles || isString(styles)) {
diff --git a/packages/shared/src/patchFlags.ts b/packages/shared/src/patchFlags.ts
index 58e8935aeb8..009b714737f 100644
--- a/packages/shared/src/patchFlags.ts
+++ b/packages/shared/src/patchFlags.ts
@@ -16,7 +16,7 @@
  * Check the `patchElement` function in '../../runtime-core/src/renderer.ts' to see how the
  * flags are handled during diff.
  */
-export const enum PatchFlags {
+export enum PatchFlags {
   /**
    * Indicates an element with dynamic textContent (children fast path)
    */
@@ -57,10 +57,11 @@ export const enum PatchFlags {
   FULL_PROPS = 1 << 4,
 
   /**
-   * Indicates an element with event listeners (which need to be attached
-   * during hydration)
+   * Indicates an element that requires props hydration
+   * (but not necessarily patching)
+   * e.g. event listeners & v-bind with prop modifier
    */
-  HYDRATE_EVENTS = 1 << 5,
+  NEED_HYDRATION = 1 << 5,
 
   /**
    * Indicates a fragment whose children order doesn't change.
@@ -119,7 +120,7 @@ export const enum PatchFlags {
    * render functions, which should always be fully diffed)
    * OR manually cloneVNodes
    */
-  BAIL = -2
+  BAIL = -2,
 }
 
 /**
@@ -131,7 +132,7 @@ export const PatchFlagNames: Record<PatchFlags, string> = {
   [PatchFlags.STYLE]: `STYLE`,
   [PatchFlags.PROPS]: `PROPS`,
   [PatchFlags.FULL_PROPS]: `FULL_PROPS`,
-  [PatchFlags.HYDRATE_EVENTS]: `HYDRATE_EVENTS`,
+  [PatchFlags.NEED_HYDRATION]: `NEED_HYDRATION`,
   [PatchFlags.STABLE_FRAGMENT]: `STABLE_FRAGMENT`,
   [PatchFlags.KEYED_FRAGMENT]: `KEYED_FRAGMENT`,
   [PatchFlags.UNKEYED_FRAGMENT]: `UNKEYED_FRAGMENT`,
@@ -139,5 +140,5 @@ export const PatchFlagNames: Record<PatchFlags, string> = {
   [PatchFlags.DYNAMIC_SLOTS]: `DYNAMIC_SLOTS`,
   [PatchFlags.DEV_ROOT_FRAGMENT]: `DEV_ROOT_FRAGMENT`,
   [PatchFlags.HOISTED]: `HOISTED`,
-  [PatchFlags.BAIL]: `BAIL`
+  [PatchFlags.BAIL]: `BAIL`,
 }
diff --git a/packages/shared/src/shapeFlags.ts b/packages/shared/src/shapeFlags.ts
index 8defb8a3bf3..855d159ea59 100644
--- a/packages/shared/src/shapeFlags.ts
+++ b/packages/shared/src/shapeFlags.ts
@@ -1,4 +1,4 @@
-export const enum ShapeFlags {
+export enum ShapeFlags {
   ELEMENT = 1,
   FUNCTIONAL_COMPONENT = 1 << 1,
   STATEFUL_COMPONENT = 1 << 2,
@@ -9,5 +9,5 @@ export const enum ShapeFlags {
   SUSPENSE = 1 << 7,
   COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
   COMPONENT_KEPT_ALIVE = 1 << 9,
-  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
+  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
 }
diff --git a/packages/shared/src/slotFlags.ts b/packages/shared/src/slotFlags.ts
index 53860ff4dd1..e7892343d5c 100644
--- a/packages/shared/src/slotFlags.ts
+++ b/packages/shared/src/slotFlags.ts
@@ -1,4 +1,4 @@
-export const enum SlotFlags {
+export enum SlotFlags {
   /**
    * Stable slots that only reference slot props or context state. The slot
    * can fully capture its own dependencies so when passed down the parent won't
@@ -17,7 +17,7 @@ export const enum SlotFlags {
    * received. This has to be refined at runtime, when the child's vnode
    * is being created (in `normalizeChildren`)
    */
-  FORWARDED = 3
+  FORWARDED = 3,
 }
 
 /**
@@ -26,5 +26,5 @@ export const enum SlotFlags {
 export const slotFlagsText = {
   [SlotFlags.STABLE]: 'STABLE',
   [SlotFlags.DYNAMIC]: 'DYNAMIC',
-  [SlotFlags.FORWARDED]: 'FORWARDED'
+  [SlotFlags.FORWARDED]: 'FORWARDED',
 }
diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts
index 7f5818d9491..aff107cd97f 100644
--- a/packages/shared/src/toDisplayString.ts
+++ b/packages/shared/src/toDisplayString.ts
@@ -1,12 +1,13 @@
 import {
   isArray,
+  isFunction,
   isMap,
   isObject,
-  isFunction,
   isPlainObject,
   isSet,
+  isString,
+  isSymbol,
   objectToString,
-  isString
 } from './general'
 
 /**
@@ -17,12 +18,12 @@ export const toDisplayString = (val: unknown): string => {
   return isString(val)
     ? val
     : val == null
-    ? ''
-    : isArray(val) ||
-      (isObject(val) &&
-        (val.toString === objectToString || !isFunction(val.toString)))
-    ? JSON.stringify(val, replacer, 2)
-    : String(val)
+      ? ''
+      : isArray(val) ||
+          (isObject(val) &&
+            (val.toString === objectToString || !isFunction(val.toString)))
+        ? JSON.stringify(val, replacer, 2)
+        : String(val)
 }
 
 const replacer = (_key: string, val: any): any => {
@@ -31,17 +32,26 @@ const replacer = (_key: string, val: any): any => {
     return replacer(_key, val.value)
   } else if (isMap(val)) {
     return {
-      [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val]) => {
-        ;(entries as any)[`${key} =>`] = val
-        return entries
-      }, {})
+      [`Map(${val.size})`]: [...val.entries()].reduce(
+        (entries, [key, val], i) => {
+          entries[stringifySymbol(key, i) + ' =>'] = val
+          return entries
+        },
+        {} as Record<string, any>,
+      ),
     }
   } else if (isSet(val)) {
     return {
-      [`Set(${val.size})`]: [...val.values()]
+      [`Set(${val.size})`]: [...val.values()].map(v => stringifySymbol(v)),
     }
+  } else if (isSymbol(val)) {
+    return stringifySymbol(val)
   } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
+    // native elements
     return String(val)
   }
   return val
 }
+
+const stringifySymbol = (v: unknown, i: number | string = ''): any =>
+  isSymbol(v) ? `Symbol(${v.description ?? i})` : v
diff --git a/packages/shared/src/typeUtils.ts b/packages/shared/src/typeUtils.ts
index 1deb4729125..63372d82916 100644
--- a/packages/shared/src/typeUtils.ts
+++ b/packages/shared/src/typeUtils.ts
@@ -17,7 +17,7 @@ export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
 export type Awaited<T> = T extends null | undefined
   ? T // special case for `null | undefined` when not in `--strictNullChecks` mode
   : T extends object & { then(onfulfilled: infer F, ...args: infer _): any } // `await` only unwraps object types with a callable `then`. Non-object types are not unwrapped
-  ? F extends (value: infer V, ...args: infer _) => any // if the argument to `then` is callable, extracts the first argument
-    ? Awaited<V> // recursively unwrap the value
-    : never // the argument to `then` was not callable
-  : T // non-object or non-thenable
+    ? F extends (value: infer V, ...args: infer _) => any // if the argument to `then` is callable, extracts the first argument
+      ? Awaited<V> // recursively unwrap the value
+      : never // the argument to `then` was not callable
+    : T // non-object or non-thenable
diff --git a/packages/template-explorer/package.json b/packages/template-explorer/package.json
index b2fcf90182d..ec3ad73ac4c 100644
--- a/packages/template-explorer/package.json
+++ b/packages/template-explorer/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vue/template-explorer",
-  "version": "3.3.5",
   "private": true,
+  "version": "0.0.0",
   "buildOptions": {
     "formats": [
       "global"
@@ -11,7 +11,7 @@
     "enableNonBrowserBranches": true
   },
   "dependencies": {
-    "monaco-editor": "^0.44.0",
+    "monaco-editor": "^0.45.0",
     "source-map-js": "^1.0.2"
   }
 }
diff --git a/packages/template-explorer/src/index.ts b/packages/template-explorer/src/index.ts
index bace011ed89..988712d623c 100644
--- a/packages/template-explorer/src/index.ts
+++ b/packages/template-explorer/src/index.ts
@@ -1,11 +1,15 @@
-import * as m from 'monaco-editor'
-import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom'
+import type * as m from 'monaco-editor'
+import {
+  type CompilerError,
+  type CompilerOptions,
+  compile,
+} from '@vue/compiler-dom'
 import { compile as ssrCompile } from '@vue/compiler-ssr'
 import {
-  defaultOptions,
   compilerOptions,
+  defaultOptions,
   initOptions,
-  ssrMode
+  ssrMode,
 } from './options'
 import { toRaw, watchEffect } from '@vue/runtime-dom'
 import { SourceMapConsumer } from 'source-map-js'
@@ -30,8 +34,8 @@ const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
   scrollBeyondLastLine: false,
   renderWhitespace: 'selection',
   minimap: {
-    enabled: false
-  }
+    enabled: false,
+  },
 }
 
 window.init = () => {
@@ -48,13 +52,13 @@ window.init = () => {
       hash = escape(atob(hash))
     } catch (e) {}
     persistedState = JSON.parse(
-      decodeURIComponent(hash) || localStorage.getItem('state') || `{}`
+      decodeURIComponent(hash) || localStorage.getItem('state') || `{}`,
     )
   } catch (e: any) {
     // bad stored state, clear it
     console.warn(
       'Persisted state in localStorage seems to be corrupted, please reload.\n' +
-        e.message
+        e.message,
     )
     localStorage.clear()
   }
@@ -76,18 +80,18 @@ window.init = () => {
       const compileFn = ssrMode.value ? ssrCompile : compile
       const start = performance.now()
       const { code, ast, map } = compileFn(source, {
-        filename: 'ExampleTemplate.vue',
         ...compilerOptions,
+        filename: 'ExampleTemplate.vue',
         sourceMap: true,
         onError: err => {
           errors.push(err)
-        }
+        },
       })
       console.log(`Compiled in ${(performance.now() - start).toFixed(2)}ms.`)
       monaco.editor.setModelMarkers(
         editor.getModel()!,
         `@vue/compiler-dom`,
-        errors.filter(e => e.loc).map(formatError)
+        errors.filter(e => e.loc).map(formatError),
       )
       console.log(`AST: `, ast)
       console.log(`Options: `, toRaw(compilerOptions))
@@ -110,7 +114,7 @@ window.init = () => {
       endLineNumber: loc.end.line,
       endColumn: loc.end.column,
       message: `Vue template compilation error: ${err.message}`,
-      code: String(err.code)
+      code: String(err.code),
     }
   }
 
@@ -123,7 +127,7 @@ window.init = () => {
     for (key in compilerOptions) {
       const val = compilerOptions[key]
       if (typeof val !== 'object' && val !== defaultOptions[key]) {
-        // @ts-ignore
+        // @ts-expect-error
         optionsToSave[key] = val
       }
     }
@@ -131,7 +135,7 @@ window.init = () => {
     const state = JSON.stringify({
       src,
       ssr: ssrMode.value,
-      options: optionsToSave
+      options: optionsToSave,
     } as PersistedState)
     localStorage.setItem('state', state)
     window.location.hash = btoa(unescape(encodeURIComponent(state)))
@@ -145,21 +149,21 @@ window.init = () => {
     value: persistedState?.src || `<div>Hello World</div>`,
     language: 'html',
     ...sharedEditorOptions,
-    wordWrap: 'bounded'
+    wordWrap: 'bounded',
   })
 
   editor.getModel()!.updateOptions({
-    tabSize: 2
+    tabSize: 2,
   })
 
   const output = monaco.editor.create(document.getElementById('output')!, {
     value: '',
     language: 'javascript',
     readOnly: true,
-    ...sharedEditorOptions
+    ...sharedEditorOptions,
   })
   output.getModel()!.updateOptions({
-    tabSize: 2
+    tabSize: 2,
   })
 
   // handle resize
@@ -184,7 +188,7 @@ window.init = () => {
         const pos = lastSuccessfulMap.generatedPositionFor({
           source: 'ExampleTemplate.vue',
           line: e.position.lineNumber,
-          column: e.position.column - 1
+          column: e.position.column - 1,
         })
         if (pos.line != null && pos.column != null) {
           prevOutputDecos = output.deltaDecorations(prevOutputDecos, [
@@ -193,22 +197,22 @@ window.init = () => {
                 pos.line,
                 pos.column + 1,
                 pos.line,
-                pos.lastColumn ? pos.lastColumn + 2 : pos.column + 2
+                pos.lastColumn ? pos.lastColumn + 2 : pos.column + 2,
               ),
               options: {
-                inlineClassName: `highlight`
-              }
-            }
+                inlineClassName: `highlight`,
+              },
+            },
           ])
           output.revealPositionInCenter({
             lineNumber: pos.line,
-            column: pos.column + 1
+            column: pos.column + 1,
           })
         } else {
           clearOutputDecos()
         }
       }
-    }, 100)
+    }, 100),
   )
 
   let previousEditorDecos: string[] = []
@@ -222,7 +226,7 @@ window.init = () => {
       if (lastSuccessfulMap) {
         const pos = lastSuccessfulMap.originalPositionFor({
           line: e.position.lineNumber,
-          column: e.position.column - 1
+          column: e.position.column - 1,
         })
         if (
           pos.line != null &&
@@ -234,7 +238,7 @@ window.init = () => {
         ) {
           const translatedPos = {
             column: pos.column + 1,
-            lineNumber: pos.line
+            lineNumber: pos.line,
           }
           previousEditorDecos = editor.deltaDecorations(previousEditorDecos, [
             {
@@ -242,20 +246,20 @@ window.init = () => {
                 pos.line,
                 pos.column + 1,
                 pos.line,
-                pos.column + 1
+                pos.column + 1,
               ),
               options: {
                 isWholeLine: true,
-                className: `highlight`
-              }
-            }
+                className: `highlight`,
+              },
+            },
           ])
           editor.revealPositionInCenter(translatedPos)
         } else {
           clearEditorDecos()
         }
       }
-    }, 100)
+    }, 100),
   )
 
   initOptions()
@@ -264,7 +268,7 @@ window.init = () => {
 
 function debounce<T extends (...args: any[]) => any>(
   fn: T,
-  delay: number = 300
+  delay: number = 300,
 ): T {
   let prevTimer: number | null = null
   return ((...args: any[]) => {
diff --git a/packages/template-explorer/src/options.ts b/packages/template-explorer/src/options.ts
index 73e0a959f79..e3cc6173a8a 100644
--- a/packages/template-explorer/src/options.ts
+++ b/packages/template-explorer/src/options.ts
@@ -1,5 +1,5 @@
-import { h, reactive, createApp, ref } from 'vue'
-import { CompilerOptions } from '@vue/compiler-dom'
+import { createApp, h, reactive, ref } from 'vue'
+import type { CompilerOptions } from '@vue/compiler-dom'
 import { BindingTypes } from '@vue/compiler-core'
 
 export const ssrMode = ref(false)
@@ -22,12 +22,12 @@ export const defaultOptions: CompilerOptions = {
     setupLet: BindingTypes.SETUP_LET,
     setupMaybeRef: BindingTypes.SETUP_MAYBE_REF,
     setupProp: BindingTypes.PROPS,
-    vMySetupDir: BindingTypes.SETUP_CONST
-  }
+    vMySetupDir: BindingTypes.SETUP_CONST,
+  },
 }
 
 export const compilerOptions: CompilerOptions = reactive(
-  Object.assign({}, defaultOptions)
+  Object.assign({}, defaultOptions),
 )
 
 const App = {
@@ -44,18 +44,18 @@ const App = {
           'a',
           {
             href: `https://github.com/vuejs/core/tree/${__COMMIT__}`,
-            target: `_blank`
+            target: `_blank`,
           },
-          `@${__COMMIT__}`
+          `@${__COMMIT__}`,
         ),
         ' | ',
         h(
           'a',
           {
             href: 'https://app.netlify.com/sites/vue-next-template-explorer/deploys',
-            target: `_blank`
+            target: `_blank`,
           },
-          'History'
+          'History',
         ),
 
         h('div', { id: 'options-wrapper' }, [
@@ -71,7 +71,7 @@ const App = {
                 checked: isModule,
                 onChange() {
                   compilerOptions.mode = 'module'
-                }
+                },
               }),
               h('label', { for: 'mode-module' }, 'module'),
               ' ',
@@ -82,9 +82,9 @@ const App = {
                 checked: !isModule,
                 onChange() {
                   compilerOptions.mode = 'function'
-                }
+                },
               }),
-              h('label', { for: 'mode-function' }, 'function')
+              h('label', { for: 'mode-function' }, 'function'),
             ]),
 
             // whitespace handling
@@ -97,7 +97,7 @@ const App = {
                 checked: compilerOptions.whitespace === 'condense',
                 onChange() {
                   compilerOptions.whitespace = 'condense'
-                }
+                },
               }),
               h('label', { for: 'whitespace-condense' }, 'condense'),
               ' ',
@@ -108,9 +108,9 @@ const App = {
                 checked: compilerOptions.whitespace === 'preserve',
                 onChange() {
                   compilerOptions.whitespace = 'preserve'
-                }
+                },
               }),
-              h('label', { for: 'whitespace-preserve' }, 'preserve')
+              h('label', { for: 'whitespace-preserve' }, 'preserve'),
             ]),
 
             // SSR
@@ -122,9 +122,9 @@ const App = {
                 checked: ssrMode.value,
                 onChange(e: Event) {
                   ssrMode.value = (e.target as HTMLInputElement).checked
-                }
+                },
               }),
-              h('label', { for: 'ssr' }, 'SSR')
+              h('label', { for: 'ssr' }, 'SSR'),
             ]),
 
             // toggle prefixIdentifiers
@@ -137,9 +137,9 @@ const App = {
                 onChange(e: Event) {
                   compilerOptions.prefixIdentifiers =
                     (e.target as HTMLInputElement).checked || isModule
-                }
+                },
               }),
-              h('label', { for: 'prefix' }, 'prefixIdentifiers')
+              h('label', { for: 'prefix' }, 'prefixIdentifiers'),
             ]),
 
             // toggle hoistStatic
@@ -153,9 +153,9 @@ const App = {
                   compilerOptions.hoistStatic = (
                     e.target as HTMLInputElement
                   ).checked
-                }
+                },
               }),
-              h('label', { for: 'hoist' }, 'hoistStatic')
+              h('label', { for: 'hoist' }, 'hoistStatic'),
             ]),
 
             // toggle cacheHandlers
@@ -169,9 +169,9 @@ const App = {
                   compilerOptions.cacheHandlers = (
                     e.target as HTMLInputElement
                   ).checked
-                }
+                },
               }),
-              h('label', { for: 'cache' }, 'cacheHandlers')
+              h('label', { for: 'cache' }, 'cacheHandlers'),
             ]),
 
             // toggle scopeId
@@ -186,9 +186,9 @@ const App = {
                     isModule && (e.target as HTMLInputElement).checked
                       ? 'scope-id'
                       : null
-                }
+                },
               }),
-              h('label', { for: 'scope-id' }, 'scopeId')
+              h('label', { for: 'scope-id' }, 'scopeId'),
             ]),
 
             // inline mode
@@ -201,9 +201,9 @@ const App = {
                   compilerOptions.inline = (
                     e.target as HTMLInputElement
                   ).checked
-                }
+                },
               }),
-              h('label', { for: 'inline' }, 'inline')
+              h('label', { for: 'inline' }, 'inline'),
             ]),
 
             // compat mode
@@ -218,15 +218,15 @@ const App = {
                   ).checked
                     ? 2
                     : 3
-                }
+                },
               }),
-              h('label', { for: 'compat' }, 'v2 compat mode')
-            ])
-          ])
-        ])
+              h('label', { for: 'compat' }, 'v2 compat mode'),
+            ]),
+          ]),
+        ]),
       ]
     }
-  }
+  },
 }
 
 export function initOptions() {
diff --git a/packages/template-explorer/src/theme.ts b/packages/template-explorer/src/theme.ts
index 99da1081ae9..9027cd0c011 100644
--- a/packages/template-explorer/src/theme.ts
+++ b/packages/template-explorer/src/theme.ts
@@ -4,234 +4,234 @@ export default {
   rules: [
     {
       foreground: 'de935f',
-      token: 'number'
+      token: 'number',
     },
     {
       foreground: '969896',
-      token: 'comment'
+      token: 'comment',
     },
     {
       foreground: 'ced1cf',
-      token: 'keyword.operator.class'
+      token: 'keyword.operator.class',
     },
     {
       foreground: 'ced1cf',
-      token: 'constant.other'
+      token: 'constant.other',
     },
     {
       foreground: 'ced1cf',
-      token: 'source.php.embedded.line'
+      token: 'source.php.embedded.line',
     },
     {
       foreground: 'cc6666',
-      token: 'variable'
+      token: 'variable',
     },
     {
       foreground: 'cc6666',
-      token: 'support.other.variable'
+      token: 'support.other.variable',
     },
     {
       foreground: 'cc6666',
-      token: 'string.other.link'
+      token: 'string.other.link',
     },
     {
       foreground: 'cc6666',
-      token: 'string.regexp'
+      token: 'string.regexp',
     },
     {
       foreground: 'cc6666',
-      token: 'entity.name.tag'
+      token: 'entity.name.tag',
     },
     {
       foreground: 'cc6666',
-      token: 'entity.other.attribute-name'
+      token: 'entity.other.attribute-name',
     },
     {
       foreground: 'cc6666',
-      token: 'meta.tag'
+      token: 'meta.tag',
     },
     {
       foreground: 'cc6666',
-      token: 'declaration.tag'
+      token: 'declaration.tag',
     },
     {
       foreground: 'cc6666',
-      token: 'markup.deleted.git_gutter'
+      token: 'markup.deleted.git_gutter',
     },
     {
       foreground: 'de935f',
-      token: 'constant.numeric'
+      token: 'constant.numeric',
     },
     {
       foreground: 'de935f',
-      token: 'constant.language'
+      token: 'constant.language',
     },
     {
       foreground: 'de935f',
-      token: 'support.constant'
+      token: 'support.constant',
     },
     {
       foreground: 'de935f',
-      token: 'constant.character'
+      token: 'constant.character',
     },
     {
       foreground: 'de935f',
-      token: 'variable.parameter'
+      token: 'variable.parameter',
     },
     {
       foreground: 'de935f',
-      token: 'punctuation.section.embedded'
+      token: 'punctuation.section.embedded',
     },
     {
       foreground: 'de935f',
-      token: 'keyword.other.unit'
+      token: 'keyword.other.unit',
     },
     {
       foreground: 'f0c674',
-      token: 'entity.name.class'
+      token: 'entity.name.class',
     },
     {
       foreground: 'f0c674',
-      token: 'entity.name.type.class'
+      token: 'entity.name.type.class',
     },
     {
       foreground: 'f0c674',
-      token: 'support.type'
+      token: 'support.type',
     },
     {
       foreground: 'f0c674',
-      token: 'support.class'
+      token: 'support.class',
     },
     {
       foreground: 'b5bd68',
-      token: 'string'
+      token: 'string',
     },
     {
       foreground: 'b5bd68',
-      token: 'constant.other.symbol'
+      token: 'constant.other.symbol',
     },
     {
       foreground: 'b5bd68',
-      token: 'entity.other.inherited-class'
+      token: 'entity.other.inherited-class',
     },
     {
       foreground: 'b5bd68',
-      token: 'markup.heading'
+      token: 'markup.heading',
     },
     {
       foreground: 'b5bd68',
-      token: 'markup.inserted.git_gutter'
+      token: 'markup.inserted.git_gutter',
     },
     {
       foreground: '8abeb7',
-      token: 'keyword.operator'
+      token: 'keyword.operator',
     },
     {
       foreground: '8abeb7',
-      token: 'constant.other.color'
+      token: 'constant.other.color',
     },
     {
       foreground: '81a2be',
-      token: 'entity.name.function'
+      token: 'entity.name.function',
     },
     {
       foreground: '81a2be',
-      token: 'meta.function-call'
+      token: 'meta.function-call',
     },
     {
       foreground: '81a2be',
-      token: 'support.function'
+      token: 'support.function',
     },
     {
       foreground: '81a2be',
-      token: 'keyword.other.special-method'
+      token: 'keyword.other.special-method',
     },
     {
       foreground: '81a2be',
-      token: 'meta.block-level'
+      token: 'meta.block-level',
     },
     {
       foreground: '81a2be',
-      token: 'markup.changed.git_gutter'
+      token: 'markup.changed.git_gutter',
     },
     {
       foreground: 'b294bb',
-      token: 'keyword'
+      token: 'keyword',
     },
     {
       foreground: 'b294bb',
-      token: 'storage'
+      token: 'storage',
     },
     {
       foreground: 'b294bb',
-      token: 'storage.type'
+      token: 'storage.type',
     },
     {
       foreground: 'b294bb',
-      token: 'entity.name.tag.css'
+      token: 'entity.name.tag.css',
     },
     {
       foreground: 'ced2cf',
       background: 'df5f5f',
-      token: 'invalid'
+      token: 'invalid',
     },
     {
       foreground: 'ced2cf',
       background: '82a3bf',
-      token: 'meta.separator'
+      token: 'meta.separator',
     },
     {
       foreground: 'ced2cf',
       background: 'b798bf',
-      token: 'invalid.deprecated'
+      token: 'invalid.deprecated',
     },
     {
       foreground: 'ffffff',
-      token: 'markup.inserted.diff'
+      token: 'markup.inserted.diff',
     },
     {
       foreground: 'ffffff',
-      token: 'markup.deleted.diff'
+      token: 'markup.deleted.diff',
     },
     {
       foreground: 'ffffff',
-      token: 'meta.diff.header.to-file'
+      token: 'meta.diff.header.to-file',
     },
     {
       foreground: 'ffffff',
-      token: 'meta.diff.header.from-file'
+      token: 'meta.diff.header.from-file',
     },
     {
       foreground: '718c00',
-      token: 'markup.inserted.diff'
+      token: 'markup.inserted.diff',
     },
     {
       foreground: '718c00',
-      token: 'meta.diff.header.to-file'
+      token: 'meta.diff.header.to-file',
     },
     {
       foreground: 'c82829',
-      token: 'markup.deleted.diff'
+      token: 'markup.deleted.diff',
     },
     {
       foreground: 'c82829',
-      token: 'meta.diff.header.from-file'
+      token: 'meta.diff.header.from-file',
     },
     {
       foreground: 'ffffff',
       background: '4271ae',
-      token: 'meta.diff.header.from-file'
+      token: 'meta.diff.header.from-file',
     },
     {
       foreground: 'ffffff',
       background: '4271ae',
-      token: 'meta.diff.header.to-file'
+      token: 'meta.diff.header.to-file',
     },
     {
       foreground: '3e999f',
       fontStyle: 'italic',
-      token: 'meta.diff.range'
-    }
+      token: 'meta.diff.range',
+    },
   ],
   colors: {
     'editor.foreground': '#C5C8C6',
@@ -239,6 +239,6 @@ export default {
     'editor.selectionBackground': '#373B41',
     'editor.lineHighlightBackground': '#282A2E',
     'editorCursor.foreground': '#AEAFAD',
-    'editorWhitespace.foreground': '#4B4E55'
-  }
+    'editorWhitespace.foreground': '#4B4E55',
+  },
 }
diff --git a/packages/template-explorer/style.css b/packages/template-explorer/style.css
index 01a3e8b550b..93f6f623c68 100644
--- a/packages/template-explorer/style.css
+++ b/packages/template-explorer/style.css
@@ -1,7 +1,9 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --bg: #1D1F21;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --bg: #1d1f21;
   --border: #333;
 }
 
diff --git a/packages/vue-compat/__tests__/compiler.spec.ts b/packages/vue-compat/__tests__/compiler.spec.ts
index c20af972da2..2ae2f211a10 100644
--- a/packages/vue-compat/__tests__/compiler.spec.ts
+++ b/packages/vue-compat/__tests__/compiler.spec.ts
@@ -1,13 +1,13 @@
 import Vue from '@vue/compat'
 import { nextTick } from '@vue/runtime-core'
-import { CompilerDeprecationTypes } from '../../compiler-core/src'
+import { CompilerDeprecationTypes } from '@vue/compiler-core'
 import { toggleDeprecationWarning } from '../../runtime-core/src/compat/compatConfig'
 import { triggerEvent } from './utils'
 
 beforeEach(() => {
   toggleDeprecationWarning(false)
   Vue.configureCompat({
-    MODE: 2
+    MODE: 2,
   })
 })
 
@@ -21,14 +21,14 @@ afterEach(() => {
 
 test('COMPILER_IS_ON_ELEMENT', () => {
   const MyButton = {
-    template: `<div><slot/></div>`
+    template: `<div><slot/></div>`,
   }
 
   const vm = new Vue({
     template: `<button is="my-button">text</button>`,
     components: {
-      MyButton
-    }
+      MyButton,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -38,14 +38,14 @@ test('COMPILER_IS_ON_ELEMENT', () => {
 
 test('COMPILER_IS_ON_ELEMENT (dynamic)', () => {
   const MyButton = {
-    template: `<div><slot/></div>`
+    template: `<div><slot/></div>`,
   }
 
   const vm = new Vue({
     template: `<button :is="'MyButton'">text</button>`,
     components: {
-      MyButton
-    }
+      MyButton,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -56,19 +56,19 @@ test('COMPILER_IS_ON_ELEMENT (dynamic)', () => {
 test('COMPILER_V_BIND_SYNC', async () => {
   const MyButton = {
     props: ['foo'],
-    template: `<button @click="$emit('update:foo', 1)">{{ foo }}</button>`
+    template: `<button @click="$emit('update:foo', 1)">{{ foo }}</button>`,
   }
 
   const vm = new Vue({
     data() {
       return {
-        foo: 0
+        foo: 0,
       }
     },
     template: `<my-button :foo.sync="foo" />`,
     components: {
-      MyButton
-    }
+      MyButton,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLButtonElement)
@@ -81,25 +81,15 @@ test('COMPILER_V_BIND_SYNC', async () => {
   expect(CompilerDeprecationTypes.COMPILER_V_BIND_SYNC).toHaveBeenWarned()
 })
 
-test('COMPILER_V_BIND_PROP', () => {
-  const vm = new Vue({
-    template: `<div :id.prop="'foo'"/>`
-  }).$mount()
-
-  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
-  expect(vm.$el.id).toBe('foo')
-  expect(CompilerDeprecationTypes.COMPILER_V_BIND_PROP).toHaveBeenWarned()
-})
-
 test('COMPILER_V_BIND_OBJECT_ORDER', () => {
   const vm = new Vue({
-    template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`
+    template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`,
   }).$mount()
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.id).toBe('foo')
   expect(vm.$el.className).toBe('baz')
   expect(
-    CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER
+    CompilerDeprecationTypes.COMPILER_V_BIND_OBJECT_ORDER,
   ).toHaveBeenWarned()
 })
 
@@ -109,12 +99,12 @@ test('COMPILER_V_ON_NATIVE', () => {
     template: `<child @click="spy" @click.native="spy" />`,
     components: {
       child: {
-        template: `<button />`
-      }
+        template: `<button />`,
+      },
     },
     methods: {
-      spy
-    }
+      spy,
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLButtonElement)
@@ -126,13 +116,13 @@ test('COMPILER_V_ON_NATIVE', () => {
 test('COMPILER_V_IF_V_FOR_PRECEDENCE', () => {
   new Vue({ template: `<div v-if="true" v-for="i in 1"/>` }).$mount()
   expect(
-    CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE
+    CompilerDeprecationTypes.COMPILER_V_IF_V_FOR_PRECEDENCE,
   ).toHaveBeenWarned()
 })
 
 test('COMPILER_NATIVE_TEMPLATE', () => {
   const vm = new Vue({
-    template: `<div><template><div/></template></div>`
+    template: `<div><template><div/></template></div>`,
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -147,9 +137,9 @@ test('COMPILER_INLINE_TEMPLATE', () => {
       foo: {
         data() {
           return { n: 123 }
-        }
-      }
-    }
+        },
+      },
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
diff --git a/packages/vue-compat/__tests__/componentAsync.spec.ts b/packages/vue-compat/__tests__/componentAsync.spec.ts
index 8fda196a099..7b85d8b1e19 100644
--- a/packages/vue-compat/__tests__/componentAsync.spec.ts
+++ b/packages/vue-compat/__tests__/componentAsync.spec.ts
@@ -2,14 +2,14 @@ import Vue from '@vue/compat'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -28,7 +28,7 @@ describe('COMPONENT_ASYNC', () => {
     }
     const vm = new Vue({
       template: `<div><comp/></div>`,
-      components: { comp }
+      components: { comp },
     }).$mount()
 
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -40,8 +40,8 @@ describe('COMPONENT_ASYNC', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
-        comp
-      )
+        comp,
+      ),
     ).toHaveBeenWarned()
   })
 
@@ -49,7 +49,7 @@ describe('COMPONENT_ASYNC', () => {
     const comp = () => Promise.resolve({ template: 'foo' })
     const vm = new Vue({
       template: `<div><comp/></div>`,
-      components: { comp }
+      components: { comp },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe(`<!---->`)
@@ -58,19 +58,19 @@ describe('COMPONENT_ASYNC', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
-        comp
-      )
+        comp,
+      ),
     ).toHaveBeenWarned()
   })
 
   test('object syntax', async () => {
     const comp = () => ({
-      component: Promise.resolve({ template: 'foo' })
+      component: Promise.resolve({ template: 'foo' }),
     })
 
     const vm = new Vue({
       template: `<div><comp/></div>`,
-      components: { comp }
+      components: { comp },
     }).$mount()
 
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -80,8 +80,8 @@ describe('COMPONENT_ASYNC', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_ASYNC].message as Function)(
-        comp
-      )
+        comp,
+      ),
     ).toHaveBeenWarned()
   })
 })
diff --git a/packages/vue-compat/__tests__/componentFunctional.spec.ts b/packages/vue-compat/__tests__/componentFunctional.spec.ts
index 8ee0b3cd96b..d3d11daebbc 100644
--- a/packages/vue-compat/__tests__/componentFunctional.spec.ts
+++ b/packages/vue-compat/__tests__/componentFunctional.spec.ts
@@ -2,14 +2,14 @@ import Vue from '@vue/compat'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -24,27 +24,27 @@ describe('COMPONENT_FUNCTIONAL', () => {
       name: 'Func',
       functional: true,
       props: {
-        x: String
+        x: String,
       },
       inject: ['foo'],
       render: (h: any, { data, props, injections, slots }: any) => {
         return h('div', { id: props.x, class: data.class }, [
           h('div', { class: 'inject' }, injections.foo),
-          h('div', { class: 'slot' }, slots().default)
+          h('div', { class: 'slot' }, slots().default),
         ])
-      }
+      },
     }
 
     const vm = new Vue({
       provide() {
         return {
-          foo: 123
+          foo: 123,
         }
       },
       components: {
-        func
+        func,
       },
-      template: `<func class="foo" x="foo">hello</func>`
+      template: `<func class="foo" x="foo">hello</func>`,
     }).$mount()
 
     expect(vm.$el.id).toBe('foo')
@@ -52,14 +52,14 @@ 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(
       (
         deprecationData[DeprecationTypes.COMPONENT_FUNCTIONAL]
           .message as Function
-      )(func)
+      )(func),
     ).toHaveBeenWarned()
   })
 
@@ -68,17 +68,17 @@ describe('COMPONENT_FUNCTIONAL', () => {
       name: 'Func',
       functional: true,
       compatConfig: {
-        ATTR_FALSE_VALUE: 'suppress-warning' as const
+        ATTR_FALSE_VALUE: 'suppress-warning' as const,
       },
       render: (h: any) => {
         // should not render required: false due to compatConfig
         return h('div', { 'data-some-attr': false })
-      }
+      },
     }
 
     const vm = new Vue({
       components: { func },
-      template: `<func class="foo" x="foo">hello</func>`
+      template: `<func class="foo" x="foo">hello</func>`,
     }).$mount()
 
     expect(vm.$el.outerHTML).toMatchInlineSnapshot(`"<div></div>"`)
@@ -86,12 +86,12 @@ describe('COMPONENT_FUNCTIONAL', () => {
       (
         deprecationData[DeprecationTypes.COMPONENT_FUNCTIONAL]
           .message as Function
-      )(func)
+      )(func),
     ).toHaveBeenWarned()
     expect(
       (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
-        func
-      )
+        func,
+      ),
     ).not.toHaveBeenWarned()
   })
 })
diff --git a/packages/vue-compat/__tests__/componentVModel.spec.ts b/packages/vue-compat/__tests__/componentVModel.spec.ts
index 05043b018d2..7e498828715 100644
--- a/packages/vue-compat/__tests__/componentVModel.spec.ts
+++ b/packages/vue-compat/__tests__/componentVModel.spec.ts
@@ -1,10 +1,10 @@
 import Vue from '@vue/compat'
-import { ComponentOptions } from '../../runtime-core/src/component'
+import type { ComponentOptions } from '../../runtime-core/src/component'
 import { nextTick } from '../../runtime-core/src/scheduler'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { triggerEvent } from './utils'
 
@@ -12,7 +12,7 @@ beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -26,7 +26,7 @@ describe('COMPONENT_V_MODEL', () => {
     const vm = new Vue({
       data() {
         return {
-          text: 'foo'
+          text: 'foo',
         }
       },
       components: { CustomInput },
@@ -35,7 +35,7 @@ describe('COMPONENT_V_MODEL', () => {
         <span>{{ text }}</span>
         <custom-input v-model="text"></custom-input>
       </div>
-      `
+      `,
     }).$mount() as any
 
     const input = vm.$el.querySelector('input')
@@ -46,8 +46,8 @@ describe('COMPONENT_V_MODEL', () => {
 
     expect(
       (deprecationData[DeprecationTypes.COMPONENT_V_MODEL].message as Function)(
-        CustomInput
-      )
+        CustomInput,
+      ),
     ).toHaveBeenWarned()
 
     input.value = 'bar'
@@ -67,7 +67,7 @@ describe('COMPONENT_V_MODEL', () => {
     await runTest({
       name: 'CustomInput',
       props: ['value'],
-      template: `<input :value="value" @input="$emit('input', $event.target.value)">`
+      template: `<input :value="value" @input="$emit('input', $event.target.value)">`,
     })
   })
 
@@ -77,9 +77,9 @@ describe('COMPONENT_V_MODEL', () => {
       props: ['input'],
       model: {
         prop: 'input',
-        event: 'update'
+        event: 'update',
       },
-      template: `<input :value="input" @input="$emit('update', $event.target.value)">`
+      template: `<input :value="input" @input="$emit('update', $event.target.value)">`,
     })
   })
 })
diff --git a/packages/vue-compat/__tests__/filters.spec.ts b/packages/vue-compat/__tests__/filters.spec.ts
index c1acbd899bc..9942673552a 100644
--- a/packages/vue-compat/__tests__/filters.spec.ts
+++ b/packages/vue-compat/__tests__/filters.spec.ts
@@ -1,9 +1,9 @@
 import Vue from '@vue/compat'
 import { CompilerDeprecationTypes } from '../../compiler-core/src'
 import {
-  deprecationData,
   DeprecationTypes,
-  toggleDeprecationWarning
+  deprecationData,
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
@@ -40,8 +40,8 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: '<div>{{ msg | globalUpper }}</div>',
       data: () => ({
-        msg: 'hi'
-      })
+        msg: 'hi',
+      }),
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.textContent).toBe('HI')
@@ -54,11 +54,11 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: '<div>{{ msg | upper }}</div>',
       data: () => ({
-        msg: 'hi'
+        msg: 'hi',
       }),
       filters: {
-        upper
-      }
+        upper,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('HI')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -68,12 +68,12 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: '<div>{{ msg | upper | reverse }}</div>',
       data: () => ({
-        msg: 'hi'
+        msg: 'hi',
       }),
       filters: {
         upper,
-        reverse
-      }
+        reverse,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('IH')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -91,13 +91,13 @@ describe('FILTERS', () => {
       filters: {
         upper,
         reverse,
-        lower
+        lower,
       },
       data: () => ({
         id: 'abc',
         cls: 'foo',
-        ref: 'BAR'
-      })
+        ref: 'BAR',
+      }),
     }).$mount()
     expect(vm.$el.id).toBe('CBA')
     expect(vm.$el.className).toBe('oof')
@@ -112,9 +112,9 @@ describe('FILTERS', () => {
       components: {
         test: {
           props: ['pattern'],
-          template: '<div></div>'
-        }
-      }
+          template: '<div></div>',
+        },
+      },
     }).$mount() as any
     expect(vm.$refs.test.pattern).toBeInstanceOf(RegExp)
     expect(vm.$refs.test.pattern.toString()).toBe('/a|b\\//')
@@ -125,7 +125,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: 2 }),
       template: `<div>{{ 1/a / 4 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(1 / 4))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -135,7 +135,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: 20 }),
       template: `<div>{{ (a*2) / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(16))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -144,7 +144,7 @@ describe('FILTERS', () => {
   it('handle division with dot', () => {
     const vm = new Vue({
       template: `<div>{{ 20. / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -154,7 +154,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: [20] }),
       template: `<div>{{ a[0] / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -164,7 +164,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a: { n: 20 } }),
       template: `<div>{{ a['n'] / 5 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -174,7 +174,7 @@ describe('FILTERS', () => {
     const vm = new Vue({
       data: () => ({ a_: 8 }),
       template: `<div>{{ a_ / 2 | double }}</div>`,
-      filters: { double }
+      filters: { double },
     }).$mount()
     expect(vm.$el.textContent).toBe(String(8))
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -185,11 +185,11 @@ describe('FILTERS', () => {
       template: `<div>{{ msg | add(a, 3) }}</div>`,
       data: () => ({
         msg: 1,
-        a: 2
+        a: 2,
       }),
       filters: {
-        add: (v: number, arg1: number, arg2: number) => v + arg1 + arg2
-      }
+        add: (v: number, arg1: number, arg2: number) => v + arg1 + arg2,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('6')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -199,11 +199,11 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: `<div>{{ msg + "b | c" + 'd' | upper }}</div>`,
       data: () => ({
-        msg: 'a'
+        msg: 'a',
       }),
       filters: {
-        upper
-      }
+        upper,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('AB | CD')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -214,11 +214,11 @@ describe('FILTERS', () => {
       template: `<div>{{ b || msg | upper }}</div>`,
       data: () => ({
         b: false,
-        msg: 'a'
+        msg: 'a',
       }),
       filters: {
-        upper
-      }
+        upper,
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('A')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -228,8 +228,8 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: `<div>{{ { a: 123 } | pick('a') }}</div>`,
       filters: {
-        pick: (v: any, key: string) => v[key]
-      }
+        pick: (v: any, key: string) => v[key],
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('123')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -239,8 +239,8 @@ describe('FILTERS', () => {
     const vm = new Vue({
       template: `<div>{{ [1, 2, 3] | reverse }}</div>`,
       filters: {
-        reverse: (arr: any[]) => arr.reverse().join(',')
-      }
+        reverse: (arr: any[]) => arr.reverse().join(','),
+      },
     }).$mount()
     expect(vm.$el.textContent).toBe('3,2,1')
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()
@@ -248,7 +248,7 @@ describe('FILTERS', () => {
 
   it('bigint support', () => {
     const vm = new Vue({
-      template: `<div>{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}</div>`
+      template: `<div>{{ BigInt(BigInt(10000000)) + BigInt(2000000000n) * 3000000n }}</div>`,
     }).$mount()
     expect(vm.$el.textContent).toBe('6000000010000000')
   })
diff --git a/packages/vue-compat/__tests__/global.spec.ts b/packages/vue-compat/__tests__/global.spec.ts
index d189d65f67b..fcbdefa2f29 100644
--- a/packages/vue-compat/__tests__/global.spec.ts
+++ b/packages/vue-compat/__tests__/global.spec.ts
@@ -1,11 +1,10 @@
-import { expect, vi } from 'vitest'
 import Vue from '@vue/compat'
 import { effect, isReactive } from '@vue/reactivity'
 import { h, nextTick } from '@vue/runtime-core'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { singletonApp } from '../../runtime-core/src/compat/global'
 import { createApp } from '../src/esm-index'
@@ -31,12 +30,12 @@ describe('GLOBAL_MOUNT', () => {
       compatConfig: { GLOBAL_MOUNT: true },
       data() {
         return {
-          msg: 'hello'
+          msg: 'hello',
         }
-      }
+      },
     })
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(el.innerHTML).toBe('hello')
   })
@@ -47,9 +46,9 @@ describe('GLOBAL_MOUNT', () => {
     new Vue({
       data() {
         return {
-          msg: 'hello'
+          msg: 'hello',
         }
-      }
+      },
     }).$mount(el)
     expect(el.innerHTML).toBe('hello')
   })
@@ -65,10 +64,10 @@ describe('GLOBAL_MOUNT_CONTAINER', () => {
     new Vue().$mount(el)
     // warning only
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT_CONTAINER].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT_CONTAINER].message,
     ).toHaveBeenWarned()
   })
 })
@@ -81,46 +80,46 @@ describe('GLOBAL_EXTEND', () => {
     const Test = Vue.extend({
       name: 'test',
       a: 1,
-      b: 2
+      b: 2,
     })
     expect(Test.options.a).toBe(1)
     expect(Test.options.b).toBe(2)
     expect(Test.super).toBe(Vue)
     const t = new Test({
-      a: 2
+      a: 2,
     })
     expect(t.$options.a).toBe(2)
     expect(t.$options.b).toBe(2)
     // inheritance
     const Test2 = Test.extend({
-      a: 2
+      a: 2,
     })
     expect(Test2.options.a).toBe(2)
     expect(Test2.options.b).toBe(2)
     const t2 = new Test2({
-      a: 3
+      a: 3,
     })
     expect(t2.$options.a).toBe(3)
     expect(t2.$options.b).toBe(2)
 
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_EXTEND].message
+      deprecationData[DeprecationTypes.GLOBAL_EXTEND].message,
     ).toHaveBeenWarned()
   })
 
   it('should work when used as components', () => {
     const foo = Vue.extend({
-      template: '<span>foo</span>'
+      template: '<span>foo</span>',
     })
     const bar = Vue.extend({
-      template: '<span>bar</span>'
+      template: '<span>bar</span>',
     })
     const vm = new Vue({
       template: '<div><foo></foo><bar></bar></div>',
-      components: { foo, bar }
+      components: { foo, bar },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
@@ -131,17 +130,17 @@ describe('GLOBAL_EXTEND', () => {
     const A = Vue.extend({
       created() {
         calls.push(1)
-      }
+      },
     })
     const B = A.extend({
       created() {
         calls.push(2)
-      }
+      },
     })
     new B({
       created() {
         calls.push(3)
-      }
+      },
     })
     expect(calls).toEqual([1, 2, 3])
   })
@@ -152,22 +151,22 @@ describe('GLOBAL_EXTEND', () => {
     const c = vi.fn()
     const d = vi.fn()
     const A = Vue.extend({
-      created: a
+      created: a,
     })
     const B = Vue.extend({
       mixins: [A],
-      created: b
+      created: b,
     })
     const C = Vue.extend({
       extends: B,
-      created: c
+      created: c,
     })
     const D = Vue.extend({
       mixins: [C],
       created: d,
       render() {
         return null
-      }
+      },
     })
     new D().$mount()
     expect(a.mock.calls.length).toStrictEqual(1)
@@ -181,23 +180,23 @@ describe('GLOBAL_EXTEND', () => {
       methods: {
         a() {
           return this.n
-        }
-      }
+        },
+      },
     })
     const B = A.extend({
       methods: {
         b() {
           return this.n + 1
-        }
-      }
+        },
+      },
     })
     const b = new B({
       data: () => ({ n: 0 }),
       methods: {
         c() {
           return this.n + 2
-        }
-      }
+        },
+      },
     }) as any
     expect(b.a()).toBe(0)
     expect(b.b()).toBe(1)
@@ -208,19 +207,19 @@ describe('GLOBAL_EXTEND', () => {
     const A = Vue.extend({
       components: {
         aa: {
-          template: '<div>A</div>'
-        }
-      }
+          template: '<div>A</div>',
+        },
+      },
     })
     const B = A.extend({
       components: {
         bb: {
-          template: '<div>B</div>'
-        }
-      }
+          template: '<div>B</div>',
+        },
+      },
     })
     const b = new B({
-      template: '<div><aa></aa><bb></bb></div>'
+      template: '<div><aa></aa><bb></bb></div>',
     }).$mount()
     expect(b.$el).toBeInstanceOf(HTMLDivElement)
     expect(b.$el.innerHTML).toBe('<div>A</div><div>B</div>')
@@ -228,7 +227,7 @@ describe('GLOBAL_EXTEND', () => {
 
   it('caching', () => {
     const options = {
-      template: '<div></div>'
+      template: '<div></div>',
     }
     const A = Vue.extend(options)
     const B = Vue.extend(options)
@@ -252,10 +251,10 @@ describe('GLOBAL_PROTOTYPE', () => {
     expect(vm.$test).toBe(1)
     delete Vue.prototype.$test
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message
+      deprecationData[DeprecationTypes.GLOBAL_MOUNT].message,
     ).toHaveBeenWarned()
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_PROTOTYPE].message
+      deprecationData[DeprecationTypes.GLOBAL_PROTOTYPE].message,
     ).toHaveBeenWarned()
   })
 
@@ -266,7 +265,7 @@ describe('GLOBAL_PROTOTYPE', () => {
     const vm = new Vue({
       data() {
         return { msg: 'method' }
-      }
+      },
     }) as any
     expect(vm.$test()).toBe('method')
     delete Vue.prototype.$test
@@ -277,12 +276,12 @@ describe('GLOBAL_PROTOTYPE', () => {
       configurable: true,
       get() {
         return this.msg
-      }
+      },
     })
     const vm = new Vue({
       data() {
         return { msg: 'getter' }
-      }
+      },
     }) as any
     expect(vm.$test).toBe('getter')
     delete Vue.prototype.$test
@@ -300,9 +299,9 @@ describe('GLOBAL_PROTOTYPE', () => {
     const vm = new Vue({
       data() {
         return {
-          msg: 'test'
+          msg: 'test',
         }
-      }
+      },
     }) as any
     expect(typeof vm.$test).toBe('function')
     expect(typeof vm.$test.additionalFn).toBe('function')
@@ -322,7 +321,7 @@ describe('GLOBAL_PROTOTYPE', () => {
   test('should affect apps created via createApp()', () => {
     Vue.prototype.$test = 1
     const vm = createApp({
-      template: 'foo'
+      template: 'foo',
     }).mount(document.createElement('div')) as any
     expect(vm.$test).toBe(1)
     delete Vue.prototype.$test
@@ -336,7 +335,7 @@ describe('GLOBAL_SET/DELETE', () => {
     Vue.set(obj, 'foo', 1)
     expect(obj.foo).toBe(1)
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_SET].message
+      deprecationData[DeprecationTypes.GLOBAL_SET].message,
     ).toHaveBeenWarned()
   })
 
@@ -346,7 +345,7 @@ describe('GLOBAL_SET/DELETE', () => {
     Vue.delete(obj, 'foo')
     expect('foo' in obj).toBe(false)
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_DELETE].message
+      deprecationData[DeprecationTypes.GLOBAL_DELETE].message,
     ).toHaveBeenWarned()
   })
 })
@@ -357,7 +356,7 @@ describe('GLOBAL_OBSERVABLE', () => {
     const obj = Vue.observable({})
     expect(isReactive(obj)).toBe(true)
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_OBSERVABLE].message
+      deprecationData[DeprecationTypes.GLOBAL_OBSERVABLE].message,
     ).toHaveBeenWarned()
   })
 })
@@ -366,7 +365,6 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive', () => {
     toggleDeprecationWarning(true)
     const obj: any = {}
-    // @ts-ignore
     Vue.util.defineReactive(obj, 'test', 1)
 
     let n
@@ -378,17 +376,16 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
     expect(n).toBe(2)
 
     expect(
-      deprecationData[DeprecationTypes.GLOBAL_PRIVATE_UTIL].message
+      deprecationData[DeprecationTypes.GLOBAL_PRIVATE_UTIL].message,
     ).toHaveBeenWarned()
   })
 
   test('defineReactive on instance', async () => {
     const vm = new Vue({
       beforeCreate() {
-        // @ts-ignore
         Vue.util.defineReactive(this, 'foo', 1)
       },
-      template: `<div>{{ foo }}</div>`
+      template: `<div>{{ foo }}</div>`,
     }).$mount() as any
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.textContent).toBe('1')
@@ -400,10 +397,9 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive on instance with key that starts with $', async () => {
     const vm = new Vue({
       beforeCreate() {
-        // @ts-ignore
         Vue.util.defineReactive(this, '$foo', 1)
       },
-      template: `<div>{{ $foo }}</div>`
+      template: `<div>{{ $foo }}</div>`,
     }).$mount() as any
     expect(vm.$el.textContent).toBe('1')
     vm.$foo = 2
@@ -414,7 +410,6 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive with object value', () => {
     const obj: any = {}
     const val = { a: 1 }
-    // @ts-ignore
     Vue.util.defineReactive(obj, 'foo', val)
 
     let n
@@ -430,7 +425,6 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
   test('defineReactive with array value', () => {
     const obj: any = {}
     const val = [1]
-    // @ts-ignore
     Vue.util.defineReactive(obj, 'foo', val)
 
     let n
@@ -447,7 +441,7 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
 test('global asset registration should affect apps created via createApp', () => {
   Vue.component('foo', { template: 'foo' })
   const vm = createApp({
-    template: '<foo/>'
+    template: '<foo/>',
   }).mount(document.createElement('div')) as any
   expect(vm.$el.textContent).toBe('foo')
   delete singletonApp._context.components.foo
@@ -455,7 +449,7 @@ test('global asset registration should affect apps created via createApp', () =>
 
 test('post-facto global asset registration should affect apps created via createApp', () => {
   const app = createApp({
-    template: '<foo/>'
+    template: '<foo/>',
   })
   Vue.component('foo', { template: 'foo' })
   const vm = app.mount(document.createElement('div'))
@@ -471,7 +465,7 @@ test('local asset registration should not affect other local apps', () => {
   app2.component('foo', {})
 
   expect(
-    `Component "foo" has already been registered in target app`
+    `Component "foo" has already been registered in target app`,
   ).not.toHaveBeenWarned()
 })
 
@@ -496,9 +490,9 @@ test('local app config should not affect other local apps in v3 mode', () => {
     render: () => h('div'),
     provide() {
       return {
-        test: 123
+        test: 123,
       }
-    }
+    },
   })
   app1.config.globalProperties.test = () => {}
   app1.mount(document.createElement('div'))
diff --git a/packages/vue-compat/__tests__/globalConfig.spec.ts b/packages/vue-compat/__tests__/globalConfig.spec.ts
index be7b87ea43c..44cf6651527 100644
--- a/packages/vue-compat/__tests__/globalConfig.spec.ts
+++ b/packages/vue-compat/__tests__/globalConfig.spec.ts
@@ -1,7 +1,7 @@
 import Vue from '@vue/compat'
 import {
   DeprecationTypes,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { createApp } from '../src/esm-index'
 import { triggerEvent } from './utils'
@@ -21,7 +21,7 @@ afterEach(() => {
 test('GLOBAL_KEY_CODES', () => {
   Vue.config.keyCodes = {
     foo: 86,
-    bar: [38, 87]
+    bar: [38, 87],
   }
 
   const onFoo = vi.fn()
@@ -33,8 +33,8 @@ test('GLOBAL_KEY_CODES', () => {
     template: `<input type="text" @keyup.foo="onFoo" @keyup.bar="onBar">`,
     methods: {
       onFoo,
-      onBar
-    }
+      onBar,
+    },
   })
 
   triggerEvent(el.children[0], 'keyup', e => {
@@ -64,7 +64,7 @@ test('GLOBAL_IGNORED_ELEMENTS', () => {
   const el = document.createElement('div')
   new Vue({
     el,
-    template: `<v-foo/><foo/>`
+    template: `<v-foo/><foo/>`,
   })
   expect(el.innerHTML).toBe(`<v-foo></v-foo><foo></foo>`)
 })
@@ -73,7 +73,7 @@ test('singleton config should affect apps created with createApp()', () => {
   Vue.config.ignoredElements = [/^v-/, 'foo']
   const el = document.createElement('div')
   createApp({
-    template: `<v-foo/><foo/>`
+    template: `<v-foo/><foo/>`,
   }).mount(el)
   expect(el.innerHTML).toBe(`<v-foo></v-foo><foo></foo>`)
 })
diff --git a/packages/vue-compat/__tests__/instance.spec.ts b/packages/vue-compat/__tests__/instance.spec.ts
index abcd3d1fab0..63ce5581230 100644
--- a/packages/vue-compat/__tests__/instance.spec.ts
+++ b/packages/vue-compat/__tests__/instance.spec.ts
@@ -1,19 +1,19 @@
-import { vi, Mock } from 'vitest'
+import type { Mock } from 'vitest'
 import Vue from '@vue/compat'
-import { Slots } from '../../runtime-core/src/componentSlots'
+import type { Slots } from '../../runtime-core/src/componentSlots'
 import { Text } from '../../runtime-core/src/vnode'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
-import { LegacyPublicInstance } from '../../runtime-core/src/compat/instance'
+import type { LegacyPublicInstance } from '../../runtime-core/src/compat/instance'
 
 beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -27,7 +27,7 @@ test('INSTANCE_SET', () => {
   new Vue().$set(obj, 'foo', 1)
   expect(obj.foo).toBe(1)
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_SET].message
+    deprecationData[DeprecationTypes.INSTANCE_SET].message,
   ).toHaveBeenWarned()
 })
 
@@ -36,14 +36,14 @@ test('INSTANCE_DELETE', () => {
   new Vue().$delete(obj, 'foo')
   expect('foo' in obj).toBe(false)
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_DELETE].message
+    deprecationData[DeprecationTypes.INSTANCE_DELETE].message,
   ).toHaveBeenWarned()
 })
 
 test('INSTANCE_DESTROY', () => {
   new Vue({ template: 'foo' }).$mount().$destroy()
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_DESTROY].message
+    deprecationData[DeprecationTypes.INSTANCE_DESTROY].message,
   ).toHaveBeenWarned()
 })
 
@@ -67,7 +67,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith(1, 2, 3, 4)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -83,7 +83,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(2)
     expect(spy).toHaveBeenCalledWith(5, 6, 7, 8)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -96,7 +96,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test3', 1, 2, 3, 4)
     expect(spy).toHaveBeenCalledTimes(1)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -106,7 +106,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test1')
     expect(spy).not.toHaveBeenCalled()
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -117,7 +117,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith(1, 2, 3)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -127,7 +127,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test', 1, 2, 3)
     expect(spy).not.toHaveBeenCalled()
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -139,7 +139,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     vm.$emit('test2')
     expect(spy).not.toHaveBeenCalled()
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -153,7 +153,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith(2)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 
@@ -167,7 +167,7 @@ describe('INSTANCE_EVENT_EMITTER', () => {
     expect(spy2).toHaveBeenCalledTimes(1)
     expect(spy2).toHaveBeenCalledWith(1, 2, 3)
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message
+      deprecationData[DeprecationTypes.INSTANCE_EVENT_EMITTER].message,
     ).toHaveBeenWarned()
   })
 })
@@ -183,7 +183,7 @@ describe('INSTANCE_EVENT_HOOKS', () => {
       (
         deprecationData[DeprecationTypes.INSTANCE_EVENT_HOOKS]
           .message as Function
-      )('hook:mounted')
+      )('hook:mounted'),
     ).toHaveBeenWarned()
   })
 
@@ -194,16 +194,16 @@ describe('INSTANCE_EVENT_HOOKS', () => {
       methods: { spy },
       components: {
         child: {
-          template: 'foo'
-        }
-      }
+          template: 'foo',
+        },
+      },
     }).$mount()
     expect(spy).toHaveBeenCalled()
     expect(
       (
         deprecationData[DeprecationTypes.INSTANCE_EVENT_HOOKS]
           .message as Function
-      )('hook:mounted')
+      )('hook:mounted'),
     ).toHaveBeenWarned()
   })
 })
@@ -216,16 +216,16 @@ test('INSTANCE_EVENT_CHILDREN', () => {
         template: 'foo',
         data() {
           return { n: 1 }
-        }
-      }
-    }
+        },
+      },
+    },
   }).$mount()
   expect(vm.$children.length).toBe(4)
   vm.$children.forEach((c: any) => {
     expect(c.n).toBe(1)
   })
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_CHILDREN].message
+    deprecationData[DeprecationTypes.INSTANCE_CHILDREN].message,
   ).toHaveBeenWarned()
 })
 
@@ -242,9 +242,9 @@ test('INSTANCE_LISTENERS', () => {
         template: `<div/>`,
         mounted() {
           listeners = this.$listeners
-        }
-      }
-    }
+        },
+      },
+    },
   }).$mount()
 
   expect(Object.keys(listeners!)).toMatchObject(['click', 'custom'])
@@ -252,7 +252,7 @@ test('INSTANCE_LISTENERS', () => {
   expect(listeners!.custom()).toBe('bar')
 
   expect(
-    deprecationData[DeprecationTypes.INSTANCE_LISTENERS].message
+    deprecationData[DeprecationTypes.INSTANCE_LISTENERS].message,
   ).toHaveBeenWarned()
 })
 
@@ -266,20 +266,20 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
           compatConfig: { RENDER_FUNCTION: false },
           render() {
             slots = this.$scopedSlots
-          }
-        }
-      }
+          },
+        },
+      },
     }).$mount()
 
     expect(slots!.default!({ msg: 'hi' })).toMatchObject([
       {
         type: Text,
-        children: 'hi'
-      }
+        children: 'hi',
+      },
     ])
 
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
+      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message,
     ).toHaveBeenWarned()
   })
 
@@ -294,16 +294,16 @@ describe('INSTANCE_SCOPED_SLOTS', () => {
           render() {
             normalSlots = this.$slots
             scopedSlots = this.$scopedSlots
-          }
-        }
-      }
+          },
+        },
+      },
     }).$mount()
 
     expect('default' in normalSlots!).toBe(true)
     expect('default' in scopedSlots!).toBe(false)
 
     expect(
-      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message
+      deprecationData[DeprecationTypes.INSTANCE_SCOPED_SLOTS].message,
     ).toHaveBeenWarned()
   })
 })
@@ -314,20 +314,20 @@ test('INSTANCE_ATTR_CLASS_STYLE', () => {
     components: {
       child: {
         inheritAttrs: false,
-        template: `<div><div v-bind="$attrs" /></div>`
-      }
-    }
+        template: `<div><div v-bind="$attrs" /></div>`,
+      },
+    },
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.outerHTML).toBe(
-    `<div class="foo" style="color: red;"><div id="ok"></div></div>`
+    `<div class="foo" style="color: red;"><div id="ok"></div></div>`,
   )
 
   expect(
     (
       deprecationData[DeprecationTypes.INSTANCE_ATTRS_CLASS_STYLE]
         .message as Function
-    )('Anonymous')
+    )('Anonymous'),
   ).toHaveBeenWarned()
 })
diff --git a/packages/vue-compat/__tests__/misc.spec.ts b/packages/vue-compat/__tests__/misc.spec.ts
index 7c248e9ddd8..d9598be3738 100644
--- a/packages/vue-compat/__tests__/misc.spec.ts
+++ b/packages/vue-compat/__tests__/misc.spec.ts
@@ -3,7 +3,7 @@ import { nextTick } from '../../runtime-core/src/scheduler'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { triggerEvent } from './utils'
 import { h } from '@vue/runtime-core'
@@ -12,7 +12,7 @@ beforeEach(() => {
   toggleDeprecationWarning(true)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -24,23 +24,23 @@ afterEach(() => {
 test('mode as function', () => {
   const Foo = {
     name: 'Foo',
-    render: (h: any) => h('div', 'foo')
+    render: (h: any) => h('div', 'foo'),
   }
 
   const Bar = {
     name: 'Bar',
     data: () => ({ msg: 'bar' }),
-    render: (ctx: any) => h('div', ctx.msg)
+    render: (ctx: any) => h('div', ctx.msg),
   }
 
   toggleDeprecationWarning(false)
   Vue.configureCompat({
-    MODE: comp => (comp && comp.name === 'Bar' ? 3 : 2)
+    MODE: comp => (comp && comp.name === 'Bar' ? 3 : 2),
   })
 
   const vm = new Vue({
     components: { Foo, Bar },
-    template: `<div><foo/><bar/></div>`
+    template: `<div><foo/><bar/></div>`,
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -52,15 +52,15 @@ test('WATCH_ARRAY', async () => {
   const vm = new Vue({
     data() {
       return {
-        foo: []
+        foo: [],
       }
     },
     watch: {
-      foo: spy
-    }
+      foo: spy,
+    },
   }) as any
   expect(
-    deprecationData[DeprecationTypes.WATCH_ARRAY].message
+    deprecationData[DeprecationTypes.WATCH_ARRAY].message,
   ).toHaveBeenWarned()
 
   expect(spy).not.toHaveBeenCalled()
@@ -82,21 +82,21 @@ test('PROPS_DEFAULT_THIS', () => {
           thisCtx = {
             foo: this.foo,
             $options: this.$options,
-            provided: this.provided
+            provided: this.provided,
           }
           return this.foo + 1
-        }
-      }
+        },
+      },
     },
-    template: `{{ bar }}`
+    template: `{{ bar }}`,
   }
 
   const vm = new Vue({
     components: { Child },
     provide: {
-      provided: 2
+      provided: 2,
     },
-    template: `<child :foo="0" />`
+    template: `<child :foo="0" />`,
   }).$mount()
 
   expect(vm.$el.textContent).toBe('1')
@@ -109,8 +109,8 @@ test('PROPS_DEFAULT_THIS', () => {
 
   expect(
     (deprecationData[DeprecationTypes.PROPS_DEFAULT_THIS].message as Function)(
-      'bar'
-    )
+      'bar',
+    ),
   ).toHaveBeenWarned()
 })
 
@@ -118,7 +118,7 @@ test('V_ON_KEYCODE_MODIFIER', () => {
   const spy = vi.fn()
   const vm = new Vue({
     template: `<input @keyup.1="spy">`,
-    methods: { spy }
+    methods: { spy },
   }).$mount()
   expect(vm.$el).toBeInstanceOf(HTMLInputElement)
   triggerEvent(vm.$el, 'keyup', e => {
@@ -127,7 +127,7 @@ test('V_ON_KEYCODE_MODIFIER', () => {
   })
   expect(spy).toHaveBeenCalled()
   expect(
-    deprecationData[DeprecationTypes.V_ON_KEYCODE_MODIFIER].message
+    deprecationData[DeprecationTypes.V_ON_KEYCODE_MODIFIER].message,
   ).toHaveBeenWarned()
 })
 
@@ -137,7 +137,7 @@ test('CUSTOM_DIR', async () => {
     inserted: vi.fn(),
     update: vi.fn(),
     componentUpdated: vi.fn(),
-    unbind: vi.fn()
+    unbind: vi.fn(),
   } as any
 
   const getCalls = () =>
@@ -147,13 +147,13 @@ test('CUSTOM_DIR', async () => {
     data() {
       return {
         ok: true,
-        foo: 1
+        foo: 1,
       }
     },
     template: `<div v-if="ok" v-my-dir="foo"/>`,
     directives: {
-      myDir
-    }
+      myDir,
+    },
   }).$mount() as any
 
   expect(getCalls()).toMatchObject([1, 1, 0, 0, 0])
@@ -161,14 +161,14 @@ test('CUSTOM_DIR', async () => {
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'bind',
-      'beforeMount'
-    )
+      'beforeMount',
+    ),
   ).toHaveBeenWarned()
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'inserted',
-      'mounted'
-    )
+      'mounted',
+    ),
   ).toHaveBeenWarned()
 
   vm.foo++
@@ -178,39 +178,39 @@ test('CUSTOM_DIR', async () => {
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'update',
-      'updated'
-    )
+      'updated',
+    ),
   ).toHaveBeenWarned()
   expect(
     (deprecationData[DeprecationTypes.CUSTOM_DIR].message as Function)(
       'componentUpdated',
-      'updated'
-    )
+      'updated',
+    ),
   ).toHaveBeenWarned()
 })
 
 test('ATTR_FALSE_VALUE', () => {
   const vm = new Vue({
-    template: `<div :id="false" :foo="false"/>`
+    template: `<div :id="false" :foo="false"/>`,
   }).$mount()
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.hasAttribute('id')).toBe(false)
   expect(vm.$el.hasAttribute('foo')).toBe(false)
   expect(
     (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
-      'id'
-    )
+      'id',
+    ),
   ).toHaveBeenWarned()
   expect(
     (deprecationData[DeprecationTypes.ATTR_FALSE_VALUE].message as Function)(
-      'foo'
-    )
+      'foo',
+    ),
   ).toHaveBeenWarned()
 })
 
 test('ATTR_ENUMERATED_COERCION', () => {
   const vm = new Vue({
-    template: `<div :draggable="null" :spellcheck="0" contenteditable="foo" />`
+    template: `<div :draggable="null" :spellcheck="0" contenteditable="foo" />`,
   }).$mount()
 
   expect(vm.$el).toBeInstanceOf(HTMLDivElement)
@@ -221,18 +221,18 @@ test('ATTR_ENUMERATED_COERCION', () => {
     (
       deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
         .message as Function
-    )('draggable', null, 'false')
+    )('draggable', null, 'false'),
   ).toHaveBeenWarned()
   expect(
     (
       deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
         .message as Function
-    )('spellcheck', 0, 'true')
+    )('spellcheck', 0, 'true'),
   ).toHaveBeenWarned()
   expect(
     (
       deprecationData[DeprecationTypes.ATTR_ENUMERATED_COERCION]
         .message as Function
-    )('contenteditable', 'foo', 'true')
+    )('contenteditable', 'foo', 'true'),
   ).toHaveBeenWarned()
 })
diff --git a/packages/vue-compat/__tests__/options.spec.ts b/packages/vue-compat/__tests__/options.spec.ts
index 238f2e2d5ad..a459d4fdfcd 100644
--- a/packages/vue-compat/__tests__/options.spec.ts
+++ b/packages/vue-compat/__tests__/options.spec.ts
@@ -3,7 +3,7 @@ import { nextTick } from '../../runtime-core/src/scheduler'
 import {
   DeprecationTypes,
   deprecationData,
-  toggleDeprecationWarning
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 
 beforeEach(() => {
@@ -11,7 +11,7 @@ beforeEach(() => {
   Vue.configureCompat({
     MODE: 2,
     GLOBAL_MOUNT: 'suppress-warning',
-    GLOBAL_EXTEND: 'suppress-warning'
+    GLOBAL_EXTEND: 'suppress-warning',
   })
 })
 
@@ -23,11 +23,11 @@ afterEach(() => {
 test('root data plain object', () => {
   const vm = new Vue({
     data: { foo: 1 } as any,
-    template: `{{ foo }}`
+    template: `{{ foo }}`,
   }).$mount()
   expect(vm.$el.textContent).toBe('1')
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_DATA_FN].message
+    deprecationData[DeprecationTypes.OPTIONS_DATA_FN].message,
   ).toHaveBeenWarned()
 })
 
@@ -36,30 +36,30 @@ test('data deep merge', () => {
     data() {
       return {
         foo: {
-          baz: 2
-        }
+          baz: 2,
+        },
       }
-    }
+    },
   }
 
   const vm = new Vue({
     mixins: [mixin],
     data: () => ({
       foo: {
-        bar: 1
+        bar: 1,
       },
-      selfData: 3
+      selfData: 3,
     }),
-    template: `{{ { selfData, foo } }}`
+    template: `{{ { selfData, foo } }}`,
   }).$mount()
 
   expect(vm.$el.textContent).toBe(
-    JSON.stringify({ selfData: 3, foo: { baz: 2, bar: 1 } }, null, 2)
+    JSON.stringify({ selfData: 3, foo: { baz: 2, bar: 1 } }, null, 2),
   )
   expect(
     (deprecationData[DeprecationTypes.OPTIONS_DATA_MERGE].message as Function)(
-      'foo'
-    )
+      'foo',
+    ),
   ).toHaveBeenWarned()
 })
 
@@ -68,18 +68,18 @@ test('data deep merge w/ extended constructor', () => {
   const App = Vue.extend({
     template: `<pre>{{ { mixinData, selfData } }}</pre>`,
     mixins: [{ data: () => ({ mixinData: 'mixinData' }) }],
-    data: () => ({ selfData: 'selfData' })
+    data: () => ({ selfData: 'selfData' }),
   })
   const vm = new App().$mount()
   expect(vm.$el.textContent).toBe(
     JSON.stringify(
       {
         mixinData: 'mixinData',
-        selfData: 'selfData'
+        selfData: 'selfData',
       },
       null,
-      2
-    )
+      2,
+    ),
   )
 })
 
@@ -90,7 +90,7 @@ test('beforeDestroy/destroyed', async () => {
   const child = {
     template: `foo`,
     beforeDestroy,
-    destroyed
+    destroyed,
   }
 
   const vm = new Vue({
@@ -98,7 +98,7 @@ test('beforeDestroy/destroyed', async () => {
     data() {
       return { ok: true }
     },
-    components: { child }
+    components: { child },
   }).$mount() as any
 
   vm.ok = false
@@ -107,11 +107,11 @@ test('beforeDestroy/destroyed', async () => {
   expect(destroyed).toHaveBeenCalled()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message
+    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message,
   ).toHaveBeenWarned()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message
+    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message,
   ).toHaveBeenWarned()
 })
 
@@ -122,7 +122,7 @@ test('beforeDestroy/destroyed in Vue.extend components', async () => {
   const child = Vue.extend({
     template: `foo`,
     beforeDestroy,
-    destroyed
+    destroyed,
   })
 
   const vm = new Vue({
@@ -130,7 +130,7 @@ test('beforeDestroy/destroyed in Vue.extend components', async () => {
     data() {
       return { ok: true }
     },
-    components: { child }
+    components: { child },
   }).$mount() as any
 
   vm.ok = false
@@ -139,10 +139,10 @@ test('beforeDestroy/destroyed in Vue.extend components', async () => {
   expect(destroyed).toHaveBeenCalled()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message
+    deprecationData[DeprecationTypes.OPTIONS_BEFORE_DESTROY].message,
   ).toHaveBeenWarned()
 
   expect(
-    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message
+    deprecationData[DeprecationTypes.OPTIONS_DESTROYED].message,
   ).toHaveBeenWarned()
 })
diff --git a/packages/vue-compat/__tests__/renderFn.spec.ts b/packages/vue-compat/__tests__/renderFn.spec.ts
index 9b3d1466597..04d8aaac19e 100644
--- a/packages/vue-compat/__tests__/renderFn.spec.ts
+++ b/packages/vue-compat/__tests__/renderFn.spec.ts
@@ -2,12 +2,12 @@ import { ShapeFlags } from '@vue/shared'
 import Vue from '@vue/compat'
 import { createComponentInstance } from '../../runtime-core/src/component'
 import { setCurrentRenderingInstance } from '../../runtime-core/src/componentRenderContext'
-import { DirectiveBinding } from '../../runtime-core/src/directives'
+import type { DirectiveBinding } from '../../runtime-core/src/directives'
 import { createVNode } from '../../runtime-core/src/vnode'
 import {
-  deprecationData,
   DeprecationTypes,
-  toggleDeprecationWarning
+  deprecationData,
+  toggleDeprecationWarning,
 } from '../../runtime-core/src/compat/compatConfig'
 import { compatH as h } from '../../runtime-core/src/compat/renderFn'
 
@@ -15,7 +15,7 @@ beforeEach(() => {
   toggleDeprecationWarning(false)
   Vue.configureCompat({
     MODE: 2,
-    GLOBAL_MOUNT: 'suppress-warning'
+    GLOBAL_MOUNT: 'suppress-warning',
   })
 })
 
@@ -29,16 +29,16 @@ describe('compat: render function', () => {
   const mockChildComp = {}
   const mockComponent = {
     directives: {
-      mockDir
+      mockDir,
     },
     components: {
-      foo: mockChildComp
-    }
+      foo: mockChildComp,
+    },
   }
   const mockInstance = createComponentInstance(
     createVNode(mockComponent),
     null,
-    null
+    null,
   )
   beforeEach(() => {
     setCurrentRenderingInstance(mockInstance)
@@ -49,7 +49,7 @@ describe('compat: render function', () => {
 
   test('string component lookup', () => {
     expect(h('foo')).toMatchObject({
-      type: mockChildComp
+      type: mockChildComp,
     })
   })
 
@@ -59,23 +59,23 @@ describe('compat: render function', () => {
         class: 'foo',
         style: { color: 'red' },
         attrs: {
-          id: 'foo'
+          id: 'foo',
         },
         domProps: {
-          innerHTML: 'hi'
+          innerHTML: 'hi',
         },
         props: {
-          myProp: 'foo'
-        }
-      })
+          myProp: 'foo',
+        },
+      }),
     ).toMatchObject({
       props: {
         class: 'foo',
         style: { color: 'red' },
         id: 'foo',
         innerHTML: 'hi',
-        myProp: 'foo'
-      }
+        myProp: 'foo',
+      },
     })
   })
 
@@ -83,12 +83,12 @@ describe('compat: render function', () => {
     expect(
       h('div', {
         class: { foo: true },
-        staticClass: 'bar'
-      })
+        staticClass: 'bar',
+      }),
     ).toMatchObject({
       props: {
-        class: 'bar foo'
-      }
+        class: 'bar foo',
+      },
     })
   })
 
@@ -96,15 +96,15 @@ describe('compat: render function', () => {
     expect(
       h('div', {
         style: { color: 'red' },
-        staticStyle: { fontSize: '14px' }
-      })
+        staticStyle: { fontSize: '14px' },
+      }),
     ).toMatchObject({
       props: {
         style: {
           color: 'red',
-          fontSize: '14px'
-        }
-      }
+          fontSize: '14px',
+        },
+      },
     })
   })
 
@@ -114,20 +114,20 @@ describe('compat: render function', () => {
       h('div', {
         on: {
           click: fn,
-          fooBar: fn
+          fooBar: fn,
         },
         nativeOn: {
           click: fn,
-          'bar-baz': fn
-        }
-      })
+          'bar-baz': fn,
+        },
+      }),
     ).toMatchObject({
       props: {
         onClick: fn,
         onClickNative: fn,
         onFooBar: fn,
-        'onBar-bazNative': fn
-      }
+        'onBar-bazNative': fn,
+      },
     })
   })
 
@@ -138,15 +138,15 @@ describe('compat: render function', () => {
         on: {
           '&click': fn,
           '~keyup': fn,
-          '!touchend': fn
-        }
-      })
+          '!touchend': fn,
+        },
+      }),
     ).toMatchObject({
       props: {
         onClickPassive: fn,
         onKeyupOnce: fn,
-        onTouchendCapture: fn
-      }
+        onTouchendCapture: fn,
+      },
     })
   })
 
@@ -160,11 +160,11 @@ describe('compat: render function', () => {
             // expression: '1 + 1',
             arg: 'foo',
             modifiers: {
-              bar: true
-            }
-          }
-        ]
-      })
+              bar: true,
+            },
+          },
+        ],
+      }),
     ).toMatchObject({
       dirs: [
         {
@@ -174,22 +174,22 @@ describe('compat: render function', () => {
           oldValue: void 0,
           arg: 'foo',
           modifiers: {
-            bar: true
-          }
-        }
-      ] as DirectiveBinding[]
+            bar: true,
+          },
+        },
+      ] as DirectiveBinding[],
     })
   })
 
   test('scopedSlots', () => {
     const scopedSlots = {
-      default() {}
+      default() {},
     }
     const vnode = h(mockComponent, {
-      scopedSlots
+      scopedSlots,
     })
     expect(vnode).toMatchObject({
-      children: scopedSlots
+      children: scopedSlots,
     })
     expect('scopedSlots' in vnode.props!).toBe(false)
     expect(vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN).toBeTruthy()
@@ -201,7 +201,7 @@ describe('compat: render function', () => {
       h('div', { slot: 'foo' }, 'one'),
       h('div', { slot: 'bar' }, 'two'),
       h('div', { slot: 'foo' }, 'three'),
-      h('div', 'four')
+      h('div', 'four'),
     ])
     expect(vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN).toBeTruthy()
     const slots = vnode.children as any
@@ -210,7 +210,7 @@ describe('compat: render function', () => {
     expect(slots.default()).toMatchObject(['text', { children: 'four' }])
     expect(slots.foo()).toMatchObject([
       { children: 'one' },
-      { children: 'three' }
+      { children: 'three' },
     ])
     expect(slots.bar()).toMatchObject([{ children: 'two' }])
   })
@@ -224,16 +224,16 @@ describe('compat: render function', () => {
           'div',
           {
             class: 'foo',
-            attrs: { id: 'bar' }
+            attrs: { id: 'bar' },
           },
-          'hello'
+          'hello',
         )
-      }
+      },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.outerHTML).toBe(`<div class="foo" id="bar">hello</div>`)
     expect(
-      deprecationData[DeprecationTypes.RENDER_FUNCTION].message
+      deprecationData[DeprecationTypes.RENDER_FUNCTION].message,
     ).toHaveBeenWarned()
   })
 
@@ -241,13 +241,13 @@ describe('compat: render function', () => {
     const vm = new Vue({
       data() {
         return {
-          a: 'hello'
+          a: 'hello',
         }
       },
       // check is arg length based
       render(c: any, _c: any) {
         return createVNode('div', null, c.a)
-      }
+      },
     }).$mount()
     expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.outerHTML).toBe(`<div>hello</div>`)
diff --git a/packages/vue-compat/__tests__/utils.ts b/packages/vue-compat/__tests__/utils.ts
index a7242122bcb..18e6516a4a6 100644
--- a/packages/vue-compat/__tests__/utils.ts
+++ b/packages/vue-compat/__tests__/utils.ts
@@ -1,11 +1,11 @@
 export function triggerEvent(
   target: Element,
   event: string,
-  process?: (e: any) => any
+  process?: (e: any) => any,
 ) {
   const e = new Event(event, {
     bubbles: true,
-    cancelable: true
+    cancelable: true,
   })
   if (process) process(e)
   target.dispatchEvent(e)
diff --git a/packages/vue-compat/package.json b/packages/vue-compat/package.json
index e6f9bfcfa7e..44d7ca08bb1 100644
--- a/packages/vue-compat/package.json
+++ b/packages/vue-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue/compat",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "Vue 3 compatibility build for Vue 2",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -10,6 +10,20 @@
     "index.js",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/vue.d.ts",
+      "node": {
+        "production": "./dist/vue.cjs.prod.js",
+        "development": "./dist/vue.cjs.js",
+        "default": "./index.js"
+      },
+      "module": "./dist/vue.esm-bundler.js",
+      "import": "./dist/vue.esm-bundler.js",
+      "require": "./index.js"
+    },
+    "./*": "./*"
+  },
   "buildOptions": {
     "name": "Vue",
     "filename": "vue",
@@ -38,11 +52,11 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue-compat#readme",
   "dependencies": {
-    "@babel/parser": "^7.23.0",
+    "@babel/parser": "^7.23.9",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.0.2"
   },
   "peerDependencies": {
-    "vue": "3.3.5"
+    "vue": "workspace:*"
   }
 }
diff --git a/packages/vue-compat/src/createCompatVue.ts b/packages/vue-compat/src/createCompatVue.ts
index 5815fc21dc6..3144a529de6 100644
--- a/packages/vue-compat/src/createCompatVue.ts
+++ b/packages/vue-compat/src/createCompatVue.ts
@@ -2,14 +2,14 @@
 // `dist/vue.esm-bundler.js` which is used by default for bundlers.
 import { initDev } from './dev'
 import {
-  compatUtils,
-  createApp,
+  DeprecationTypes,
+  KeepAlive,
   Transition,
   TransitionGroup,
-  KeepAlive,
-  DeprecationTypes,
+  compatUtils,
+  createApp,
+  vModelDynamic,
   vShow,
-  vModelDynamic
 } from '@vue/runtime-dom'
 import { extend } from '@vue/shared'
 
@@ -20,7 +20,7 @@ if (__DEV__) {
 import * as runtimeDom from '@vue/runtime-dom'
 
 function wrappedCreateApp(...args: any[]) {
-  // @ts-ignore
+  // @ts-expect-error
   const app = createApp(...args)
   if (compatUtils.isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, null)) {
     // register built-in components so that they can be resolved via strings
diff --git a/packages/vue-compat/src/dev.ts b/packages/vue-compat/src/dev.ts
index 99ba49a2085..22e1c6c3858 100644
--- a/packages/vue-compat/src/dev.ts
+++ b/packages/vue-compat/src/dev.ts
@@ -5,7 +5,7 @@ export function initDev() {
     if (!__ESM_BUNDLER__) {
       console.info(
         `You are running a development build of Vue.\n` +
-          `Make sure to use the production build (*.prod.js) when deploying for production.`
+          `Make sure to use the production build (*.prod.js) when deploying for production.`,
       )
     }
 
diff --git a/packages/vue-compat/src/index.ts b/packages/vue-compat/src/index.ts
index 642ecd20d11..70608b7e646 100644
--- a/packages/vue-compat/src/index.ts
+++ b/packages/vue-compat/src/index.ts
@@ -1,21 +1,29 @@
 // This entry is the "full-build" that includes both the runtime
 // and the compiler, and supports on-the-fly compilation of the template option.
 import { createCompatVue } from './createCompatVue'
-import { compile, CompilerError, CompilerOptions } from '@vue/compiler-dom'
-import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
-import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared'
-import { InternalRenderFunction } from 'packages/runtime-core/src/component'
+import {
+  type CompilerError,
+  type CompilerOptions,
+  compile,
+} from '@vue/compiler-dom'
+import {
+  type RenderFunction,
+  registerRuntimeCompiler,
+  warn,
+} from '@vue/runtime-dom'
+import { NOOP, extend, generateCodeFrame, isString } from '@vue/shared'
+import type { InternalRenderFunction } from 'packages/runtime-core/src/component'
 import * as runtimeDom from '@vue/runtime-dom'
 import {
   DeprecationTypes,
-  warnDeprecation
+  warnDeprecation,
 } from '../../runtime-core/src/compat/compatConfig'
 
 const compileCache: Record<string, RenderFunction> = Object.create(null)
 
 function compileToFunction(
   template: string | HTMLElement,
-  options?: CompilerOptions
+  options?: CompilerOptions,
 ): RenderFunction {
   if (!isString(template)) {
     if (template.nodeType) {
@@ -55,10 +63,10 @@ function compileToFunction(
         hoistStatic: true,
         whitespace: 'preserve',
         onError: __DEV__ ? onError : undefined,
-        onWarn: __DEV__ ? e => onError(e, true) : NOOP
+        onWarn: __DEV__ ? e => onError(e, true) : NOOP,
       } as CompilerOptions,
-      options
-    )
+      options,
+    ),
   )
 
   function onError(err: CompilerError, asWarning = false) {
@@ -70,7 +78,7 @@ function compileToFunction(
       generateCodeFrame(
         template as string,
         err.loc.start.offset,
-        err.loc.end.offset
+        err.loc.end.offset,
       )
     warn(codeFrame ? `${message}\n${codeFrame}` : message)
   }
diff --git a/packages/vue-compat/src/runtime.ts b/packages/vue-compat/src/runtime.ts
index 5cb5845b24c..9b52d0de6c3 100644
--- a/packages/vue-compat/src/runtime.ts
+++ b/packages/vue-compat/src/runtime.ts
@@ -12,10 +12,10 @@ Vue.compile = (() => {
         (__ESM_BUNDLER__
           ? ` Configure your bundler to alias "vue" to "@vue/compat/dist/vue.esm-bundler.js".`
           : __ESM_BROWSER__
-          ? ` Use "vue.esm-browser.js" instead.`
-          : __GLOBAL__
-          ? ` Use "vue.global.js" instead.`
-          : ``) /* should not happen */
+            ? ` Use "vue.esm-browser.js" instead.`
+            : __GLOBAL__
+              ? ` Use "vue.global.js" instead.`
+              : ``) /* should not happen */,
     )
   }
 }) as any
diff --git a/packages/vue/README.md b/packages/vue/README.md
index a98bd997487..2aca524e03d 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -33,18 +33,23 @@
 
 #### Bundler Build Feature Flags
 
-Starting with 3.0.0-rc.3, `esm-bundler` builds now exposes global feature flags that can be overwritten at compile time:
+[Detailed Reference on vuejs.org](https://vuejs.org/api/compile-time-flags.html)
 
-- `__VUE_OPTIONS_API__` (enable/disable Options API support, default: `true`)
-- `__VUE_PROD_DEVTOOLS__` (enable/disable devtools support in production, default: `false`)
+`esm-bundler` builds of Vue expose global feature flags that can be overwritten at compile time:
 
-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:
+- `__VUE_OPTIONS_API__`
+  - Default: `true`
+  - Enable / disable Options API support
 
-- webpack: use [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)
-- Rollup: use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
-- Vite: configured by default, but can be overwritten using the [`define` option](https://github.com/vitejs/vite/blob/a4133c073e640b17276b2de6e91a6857bdf382e1/src/node/config.ts#L72-L76)
+- `__VUE_PROD_DEVTOOLS__`
+  - Default: `false`
+  - Enable / disable devtools support in production
 
-Note: the replacement value **must be boolean literals** and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.
+- `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
+  - Default: `false`
+  - Enable / disable detailed warnings for hydration mismatches in production
+
+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.
 
 ### For Server-Side Rendering
 
diff --git a/packages/vue/__tests__/customElementCasing.spec.ts b/packages/vue/__tests__/customElementCasing.spec.ts
index cf3efd094e4..7712099bff4 100644
--- a/packages/vue/__tests__/customElementCasing.spec.ts
+++ b/packages/vue/__tests__/customElementCasing.spec.ts
@@ -12,7 +12,7 @@ test('custom element event casing', () => {
         this.dispatchEvent(new Event('CAPScase'))
         this.dispatchEvent(new Event('PascalCase'))
       }
-    }
+    },
   )
 
   const container = document.createElement('div')
@@ -33,8 +33,8 @@ test('custom element event casing', () => {
       }" />`,
     methods: {
       handler,
-      handler2
-    }
+      handler2,
+    },
   }).mount(container)
 
   expect(handler).toHaveBeenCalledTimes(3)
diff --git a/packages/vue/__tests__/e2e/Transition.spec.ts b/packages/vue/__tests__/e2e/Transition.spec.ts
index 326eaa57e3d..e8d6d1e049e 100644
--- a/packages/vue/__tests__/e2e/Transition.spec.ts
+++ b/packages/vue/__tests__/e2e/Transition.spec.ts
@@ -1,6 +1,6 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
-import path from 'path'
-import { h, createApp, Transition, ref, nextTick } from 'vue'
+import path from 'node:path'
+import { Transition, createApp, h, nextTick, ref } from 'vue'
 
 describe('e2e: Transition', () => {
   const { page, html, classList, isVisible, timeout, nextFrame, click } =
@@ -46,7 +46,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -55,13 +55,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-leave-from',
-          'v-leave-active'
+          'v-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-leave-active',
-          'v-leave-to'
+          'v-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -70,18 +70,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-enter-from',
-          'v-enter-active'
+          'v-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-enter-active',
-          'v-enter-to'
+          'v-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -102,7 +102,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -111,13 +111,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -126,18 +126,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -163,7 +163,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -172,13 +172,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'bye-from',
-          'bye-active'
+          'bye-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'bye-active',
-          'bye-to'
+          'bye-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -187,18 +187,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'hello-from',
-          'hello-active'
+          'hello-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'hello-active',
-          'hello-to'
+          'hello-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -222,7 +222,7 @@ describe('e2e: Transition', () => {
               const click = () => (toggle.value = !toggle.value)
               const changeName = () => (name.value = 'changed')
               return { toggle, click, name, changeName }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -231,13 +231,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -249,18 +249,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'changed-enter-from',
-          'changed-enter-active'
+          'changed-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'changed-enter-active',
-          'changed-enter-to'
+          'changed-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -287,7 +287,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -317,9 +317,9 @@ describe('e2e: Transition', () => {
                 afterEnterSpy,
                 beforeLeaveSpy,
                 onLeaveSpy,
-                afterLeaveSpy
+                afterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -328,7 +328,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         expect(beforeLeaveSpy).toBeCalled()
         expect(onLeaveSpy).toBeCalled()
@@ -337,7 +337,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         expect(afterLeaveSpy).not.toBeCalled()
         await transitionFinish()
@@ -348,7 +348,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalled()
         expect(onEnterSpy).toBeCalled()
@@ -357,14 +357,14 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -391,7 +391,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -441,9 +441,9 @@ describe('e2e: Transition', () => {
                 },
                 afterLeaveSpy: (el: Element) => {
                   afterLeaveSpy()
-                }
+                },
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -456,7 +456,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'before-leave',
-          'leave'
+          'leave',
         ])
 
         await timeout(200 + buffer)
@@ -471,16 +471,16 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'before-enter',
-          'enter'
+          'enter',
         ])
 
         await timeout(200 + buffer)
         expect(afterEnterSpy).toBeCalled()
         expect(await html('#container')).toBe(
-          '<div class="test before-enter enter after-enter">content</div>'
+          '<div class="test before-enter enter after-enter">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test('onEnterCancelled', async () => {
@@ -508,9 +508,9 @@ describe('e2e: Transition', () => {
             return {
               toggle,
               click,
-              enterCancelledSpy
+              enterCancelledSpy,
             }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -519,27 +519,27 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-enter-from',
-        'test-enter-active'
+        'test-enter-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-enter-active',
-        'test-enter-to'
+        'test-enter-to',
       ])
 
       // cancel (leave)
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'test-leave-from',
-        'test-leave-active'
+        'test-leave-active',
       ])
       expect(enterCancelledSpy).toBeCalled()
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'test-leave-active',
-        'test-leave-to'
+        'test-leave-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -567,7 +567,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
           return Promise.resolve().then(() => {
             return document.querySelector('.test')!.className.split(/\s+/g)
@@ -577,13 +577,13 @@ describe('e2e: Transition', () => {
         expect(appearClass).toStrictEqual([
           'test',
           'test-appear-from',
-          'test-appear-active'
+          'test-appear-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-appear-active',
-          'test-appear-to'
+          'test-appear-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -592,13 +592,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -607,18 +607,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -654,7 +654,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -694,9 +694,9 @@ describe('e2e: Transition', () => {
                 afterEnterSpy,
                 beforeLeaveSpy,
                 onLeaveSpy,
-                afterLeaveSpy
+                afterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
           return Promise.resolve().then(() => {
             return document.querySelector('.test')!.className.split(/\s+/g)
@@ -706,7 +706,7 @@ describe('e2e: Transition', () => {
         expect(appearClass).toStrictEqual([
           'test',
           'test-appear-from',
-          'test-appear-active'
+          'test-appear-active',
         ])
         expect(beforeAppearSpy).toBeCalled()
         expect(onAppearSpy).toBeCalled()
@@ -715,7 +715,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-appear-active',
-          'test-appear-to'
+          'test-appear-to',
         ])
         expect(afterAppearSpy).not.toBeCalled()
         await transitionFinish()
@@ -730,7 +730,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         expect(beforeLeaveSpy).toBeCalled()
         expect(onLeaveSpy).toBeCalled()
@@ -739,7 +739,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         expect(afterLeaveSpy).not.toBeCalled()
         await transitionFinish()
@@ -750,7 +750,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalled()
         expect(onEnterSpy).toBeCalled()
@@ -759,14 +759,14 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -793,7 +793,7 @@ describe('e2e: Transition', () => {
             onAfterEnterSpy,
             onBeforeLeaveSpy,
             onLeaveSpy,
-            onAfterLeaveSpy
+            onAfterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -824,9 +824,9 @@ describe('e2e: Transition', () => {
                 onAfterEnterSpy,
                 onBeforeLeaveSpy,
                 onLeaveSpy,
-                onAfterLeaveSpy
+                onAfterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -844,7 +844,7 @@ describe('e2e: Transition', () => {
         expect(onAfterEnterSpy).toBeCalled()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -865,7 +865,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div>content</div>')
@@ -873,7 +873,7 @@ describe('e2e: Transition', () => {
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
           'noop-leave-from',
-          'noop-leave-active'
+          'noop-leave-active',
         ])
         await nextFrame()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -881,12 +881,12 @@ describe('e2e: Transition', () => {
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
           'noop-enter-from',
-          'noop-enter-active'
+          'noop-enter-active',
         ])
         await nextFrame()
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -907,7 +907,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div>content</div>')
@@ -915,12 +915,12 @@ describe('e2e: Transition', () => {
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-leave-from',
-          'test-anim-leave-active'
+          'test-anim-leave-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-leave-active',
-          'test-anim-leave-to'
+          'test-anim-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -928,17 +928,17 @@ describe('e2e: Transition', () => {
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-enter-from',
-          'test-anim-enter-active'
+          'test-anim-enter-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-enter-active',
-          'test-anim-enter-to'
+          'test-anim-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -955,7 +955,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div>content</div>')
@@ -963,12 +963,12 @@ describe('e2e: Transition', () => {
         // leave
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-long-leave-from',
-          'test-anim-long-leave-active'
+          'test-anim-long-leave-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-leave-active',
-          'test-anim-long-leave-to'
+          'test-anim-long-leave-to',
         ])
 
         if (!process.env.CI) {
@@ -977,7 +977,7 @@ describe('e2e: Transition', () => {
           })
           expect(await classList('#container div')).toStrictEqual([
             'test-anim-long-leave-active',
-            'test-anim-long-leave-to'
+            'test-anim-long-leave-to',
           ])
         }
 
@@ -987,12 +987,12 @@ describe('e2e: Transition', () => {
         // enter
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test-anim-long-enter-from',
-          'test-anim-long-enter-active'
+          'test-anim-long-enter-active',
         ])
         await nextFrame()
         expect(await classList('#container div')).toStrictEqual([
           'test-anim-long-enter-active',
-          'test-anim-long-enter-to'
+          'test-anim-long-enter-to',
         ])
 
         if (!process.env.CI) {
@@ -1001,14 +1001,14 @@ describe('e2e: Transition', () => {
           })
           expect(await classList('#container div')).toStrictEqual([
             'test-anim-long-enter-active',
-            'test-anim-long-enter-to'
+            'test-anim-long-enter-to',
           ])
         }
 
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1029,11 +1029,11 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe(
-          '<circle cx="0" cy="0" r="10" class="test"></circle>'
+          '<circle cx="0" cy="0" r="10" class="test"></circle>',
         )
 
         const svgTransitionStart = () =>
@@ -1051,13 +1051,13 @@ describe('e2e: Transition', () => {
         expect(await svgTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1066,20 +1066,20 @@ describe('e2e: Transition', () => {
         expect(await svgTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<circle cx="0" cy="0" r="10" class="test"></circle>'
+          '<circle cx="0" cy="0" r="10" class="test"></circle>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1095,13 +1095,13 @@ describe('e2e: Transition', () => {
             components: {
               'my-transition': (props: any, { slots }: any) => {
                 return h(Transition, { name: 'test' }, slots)
-              }
+              },
             },
             setup: () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1110,13 +1110,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1125,18 +1125,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1156,11 +1156,11 @@ describe('e2e: Transition', () => {
             `,
             components: {
               one: {
-                template: '<div v-if="false">one</div>'
+                template: '<div v-if="false">one</div>',
               },
               two: {
-                template: '<div>two</div>'
-              }
+                template: '<div>two</div>',
+              },
             },
             setup: () => {
               const toggle = ref(true)
@@ -1169,7 +1169,7 @@ describe('e2e: Transition', () => {
               const change = () =>
                 (view.value = view.value === 'one' ? 'two' : 'one')
               return { toggle, click, change, view }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1182,13 +1182,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">two</div>')
@@ -1201,18 +1201,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
   })
 
@@ -1245,21 +1245,21 @@ describe('e2e: Transition', () => {
               Comp: {
                 async setup() {
                   return () => h('div', { class: 'test' }, 'content')
-                }
-              }
+                },
+              },
             },
             setup: () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click, onEnterSpy, onLeaveSpy }
-            }
+            },
           }).mount('#app')
         })
 
         expect(onEnterSpy).toBeCalledTimes(1)
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-enter-active v-enter-to">content</div>'
+          '<div class="test v-enter-active v-enter-to">content</div>',
         )
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1268,14 +1268,14 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-leave-from',
-          'v-leave-active'
+          'v-leave-active',
         ])
         expect(onLeaveSpy).toBeCalledTimes(1)
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-leave-active',
-          'v-leave-to'
+          'v-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1296,19 +1296,19 @@ describe('e2e: Transition', () => {
         expect(enterClass).toStrictEqual([
           'test',
           'v-enter-from',
-          'v-enter-active'
+          'v-enter-active',
         ])
         expect(onEnterSpy).toBeCalledTimes(2)
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-enter-active',
-          'v-enter-to'
+          'v-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #1689
@@ -1332,7 +1332,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1341,13 +1341,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-leave-from',
-          'v-leave-active'
+          'v-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-leave-active',
-          'v-leave-to'
+          'v-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1356,18 +1356,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'v-enter-from',
-          'v-enter-active'
+          'v-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'v-enter-active',
-          'v-enter-to'
+          'v-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1384,12 +1384,12 @@ describe('e2e: Transition', () => {
           const One = {
             async setup() {
               return () => h('div', { class: 'test' }, 'one')
-            }
+            },
           }
           const Two = {
             async setup() {
               return () => h('div', { class: 'test' }, 'two')
-            }
+            },
           }
           createApp({
             template: `
@@ -1408,13 +1408,13 @@ describe('e2e: Transition', () => {
                 view.value = view.value === One ? Two : One
               }
               return { view, click }
-            }
+            },
           }).mount('#app')
         })
 
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-enter-active v-enter-to">one</div>'
+          '<div class="test v-enter-active v-enter-to">one</div>',
         )
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">one</div>')
@@ -1423,7 +1423,7 @@ describe('e2e: Transition', () => {
         await classWhenTransitionStart()
         await nextFrame()
         expect(await html('#container')).toBe(
-          '<div class="test v-leave-active v-leave-to">one</div>'
+          '<div class="test v-leave-active v-leave-to">one</div>',
         )
         await transitionFinish()
         await nextFrame()
@@ -1433,7 +1433,7 @@ describe('e2e: Transition', () => {
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">two</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #3963
@@ -1447,13 +1447,13 @@ describe('e2e: Transition', () => {
             template: `<div>{{ msg }}</div>`,
             setup() {
               return new Promise(_resolve => {
-                // @ts-ignore
+                // @ts-expect-error
                 window.resolve = () =>
                   _resolve({
-                    msg: 'success'
+                    msg: 'success',
                   })
               })
-            }
+            },
           }
 
           createApp({
@@ -1478,7 +1478,7 @@ describe('e2e: Transition', () => {
                 view.value = view.value ? null : h(One)
               }
               return { view, click }
-            }
+            },
           }).mount('#app')
         })
 
@@ -1489,14 +1489,239 @@ describe('e2e: Transition', () => {
         expect(await html('#container')).toBe('<div class="">Loading...</div>')
 
         await page().evaluate(() => {
-          // @ts-ignore
+          // @ts-expect-error
           window.resolve()
         })
 
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="">success</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
+    )
+
+    // #5844
+    test('children mount should be called after html changes', async () => {
+      const fooMountSpy = vi.fn()
+      const barMountSpy = vi.fn()
+
+      await page().exposeFunction('fooMountSpy', fooMountSpy)
+      await page().exposeFunction('barMountSpy', barMountSpy)
+
+      await page().evaluate(() => {
+        const { fooMountSpy, barMountSpy } = window as any
+        const { createApp, ref, h, onMounted } = (window as any).Vue
+        createApp({
+          template: `
+          <div id="container">
+            <transition mode="out-in">
+              <Suspense>
+                <Foo v-if="toggle" />
+                <Bar v-else />
+              </Suspense>
+            </transition>
+          </div>
+          <button id="toggleBtn" @click="click">button</button>
+        `,
+          components: {
+            Foo: {
+              setup() {
+                const el = ref(null)
+                onMounted(() => {
+                  fooMountSpy(
+                    !!el.value,
+                    !!document.getElementById('foo'),
+                    !!document.getElementById('bar'),
+                  )
+                })
+
+                return () => h('div', { ref: el, id: 'foo' }, 'Foo')
+              },
+            },
+            Bar: {
+              setup() {
+                const el = ref(null)
+                onMounted(() => {
+                  barMountSpy(
+                    !!el.value,
+                    !!document.getElementById('foo'),
+                    !!document.getElementById('bar'),
+                  )
+                })
+
+                return () => h('div', { ref: el, id: 'bar' }, 'Bar')
+              },
+            },
+          },
+          setup: () => {
+            const toggle = ref(true)
+            const click = () => (toggle.value = !toggle.value)
+            return { toggle, click }
+          },
+        }).mount('#app')
+      })
+
+      await nextFrame()
+      expect(await html('#container')).toBe('<div id="foo">Foo</div>')
+      await transitionFinish()
+
+      expect(fooMountSpy).toBeCalledTimes(1)
+      expect(fooMountSpy).toHaveBeenNthCalledWith(1, true, true, false)
+
+      await page().evaluate(async () => {
+        ;(document.querySelector('#toggleBtn') as any)!.click()
+        // nextTrick for patch start
+        await Promise.resolve()
+        // nextTrick for Suspense resolve
+        await Promise.resolve()
+        // nextTrick for dom transition start
+        await Promise.resolve()
+        return document.querySelector('#container div')!.className.split(/\s+/g)
+      })
+
+      await nextFrame()
+      await transitionFinish()
+
+      expect(await html('#container')).toBe('<div id="bar" class="">Bar</div>')
+
+      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,
+    )
+
+    // #9996
+    test(
+      'trigger again when transition is not finished & correctly anchor',
+      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">
+              <div>Top</div>
+              <transition name="test" mode="out-in" :duration="${duration}">
+                <Suspense>
+                  <component :is="view"/>
+                </Suspense>
+              </transition>
+              <div>Bottom</div>
+            </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>Top</div><div class="test test-enter-active test-enter-to">one</div><div>Bottom</div>',
+        )
+
+        await transitionFinish()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test">one</div><div>Bottom</div>',
+        )
+
+        // trigger twice
+        classWhenTransitionStart()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test test-leave-active test-leave-to">one</div><div>Bottom</div>',
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test test-enter-active test-enter-to">two</div><div>Bottom</div>',
+        )
+
+        await transitionFinish()
+        await nextFrame()
+        expect(await html('#container')).toBe(
+          '<div>Top</div><div class="test">two</div><div>Bottom</div>',
+        )
+      },
+      E2E_TIMEOUT,
     )
   })
 
@@ -1519,7 +1744,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1529,13 +1754,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await isVisible('.test')).toBe(false)
@@ -1544,20 +1769,20 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1584,7 +1809,7 @@ describe('e2e: Transition', () => {
             afterEnterSpy,
             beforeLeaveSpy,
             onLeaveSpy,
-            afterLeaveSpy
+            afterLeaveSpy,
           } = window as any
           const { createApp, ref } = (window as any).Vue
           createApp({
@@ -1614,9 +1839,9 @@ describe('e2e: Transition', () => {
                 afterEnterSpy,
                 beforeLeaveSpy,
                 onLeaveSpy,
-                afterLeaveSpy
+                afterLeaveSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1625,7 +1850,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         expect(beforeLeaveSpy).toBeCalled()
         expect(onLeaveSpy).toBeCalled()
@@ -1634,7 +1859,7 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         expect(afterLeaveSpy).not.toBeCalled()
         await transitionFinish()
@@ -1645,7 +1870,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalled()
         expect(onEnterSpy).toBeCalled()
@@ -1654,16 +1879,16 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1688,7 +1913,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click, onLeaveCancelledSpy }
-            }
+            },
           }).mount('#app')
         })
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1698,34 +1923,34 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
 
         // cancel (enter)
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(onLeaveCancelledSpy).toBeCalled()
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1766,9 +1991,9 @@ describe('e2e: Transition', () => {
                 click,
                 beforeEnterSpy,
                 onEnterSpy,
-                afterEnterSpy
+                afterEnterSpy,
               }
-            }
+            },
           }).mount('#app')
           return Promise.resolve().then(() => {
             return document.querySelector('.test')!.className.split(/\s+/g)
@@ -1783,13 +2008,13 @@ describe('e2e: Transition', () => {
         expect(appearClass).toStrictEqual([
           'test',
           'test-appear-from',
-          'test-appear-active'
+          'test-appear-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-appear-active',
-          'test-appear-to'
+          'test-appear-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1802,13 +2027,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await isVisible('.test')).toBe(false)
@@ -1817,20 +2042,20 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     // #4845
@@ -1870,9 +2095,9 @@ describe('e2e: Transition', () => {
                 click,
                 beforeEnterSpy,
                 onEnterSpy,
-                afterEnterSpy
+                afterEnterSpy,
               }
-            }
+            },
           }).mount('#app')
         })
         await nextTick()
@@ -1885,7 +2110,7 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         expect(beforeEnterSpy).toBeCalledTimes(1)
         expect(onEnterSpy).toBeCalledTimes(1)
@@ -1894,16 +2119,16 @@ describe('e2e: Transition', () => {
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         expect(afterEnterSpy).not.toBeCalled()
         await transitionFinish()
         expect(await html('#container')).toBe(
-          '<div class="test" style="">content</div>'
+          '<div class="test" style="">content</div>',
         )
         expect(afterEnterSpy).toBeCalled()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
   })
 
@@ -1926,7 +2151,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1935,13 +2160,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -1950,18 +2175,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -1982,7 +2207,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -1991,13 +2216,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2006,18 +2231,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2038,7 +2263,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -2047,13 +2272,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2062,18 +2287,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish()
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2097,7 +2322,7 @@ describe('e2e: Transition', () => {
               const toggle = ref(true)
               const click = () => (toggle.value = !toggle.value)
               return { toggle, click }
-            }
+            },
           }).mount('#app')
         }, duration)
         expect(await html('#container')).toBe('<div class="test">content</div>')
@@ -2106,13 +2331,13 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-leave-from',
-          'test-leave-active'
+          'test-leave-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-leave-active',
-          'test-leave-to'
+          'test-leave-to',
         ])
         await transitionFinish(duration * 2)
         expect(await html('#container')).toBe('<!--v-if-->')
@@ -2121,18 +2346,18 @@ describe('e2e: Transition', () => {
         expect(await classWhenTransitionStart()).toStrictEqual([
           'test',
           'test-enter-from',
-          'test-enter-active'
+          'test-enter-active',
         ])
         await nextFrame()
         expect(await classList('.test')).toStrictEqual([
           'test',
           'test-enter-active',
-          'test-enter-to'
+          'test-enter-to',
         ])
         await transitionFinish(duration * 4)
         expect(await html('#container')).toBe('<div class="test">content</div>')
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
 
     test(
@@ -2145,11 +2370,11 @@ describe('e2e: Transition', () => {
                 <div class="test">content</div>
               </transition>
             </div>
-          `
+          `,
         }).mount(document.createElement('div'))
         expect(
           `[Vue warn]: <transition> explicit duration is NaN - ` +
-            'the duration expression might be incorrect.'
+            'the duration expression might be incorrect.',
         ).toHaveBeenWarned()
 
         createApp({
@@ -2162,14 +2387,14 @@ describe('e2e: Transition', () => {
                 <div class="test">content</div>
               </transition>
             </div>
-          `
+          `,
         }).mount(document.createElement('div'))
         expect(
           `[Vue warn]: <transition> explicit duration is not a valid number - ` +
-            `got ${JSON.stringify({})}`
+            `got ${JSON.stringify({})}`,
         ).toHaveBeenWarned()
       },
-      E2E_TIMEOUT
+      E2E_TIMEOUT,
     )
   })
 
@@ -2177,12 +2402,12 @@ describe('e2e: Transition', () => {
     createApp({
       render() {
         return h(Transition, null, {
-          default: () => [h('div'), h('div')]
+          default: () => [h('div'), h('div')],
         })
-      }
+      },
     }).mount(document.createElement('div'))
     expect(
-      '<transition> can only be used on a single element or component'
+      '<transition> can only be used on a single element or component',
     ).toHaveBeenWarned()
   })
 
@@ -2194,7 +2419,7 @@ describe('e2e: Transition', () => {
             <div class="test">content</div>
           </transition>
         </div>
-      `
+      `,
     }).mount(document.createElement('div'))
     expect(`invalid <transition> mode: none`).toHaveBeenWarned()
   })
@@ -2212,11 +2437,11 @@ describe('e2e: Transition', () => {
             onLeave(el, end) {
               innerSpy()
               end()
-            }
+            },
           },
-          this.$slots.default
+          this.$slots.default,
         )
-      }
+      },
     }
 
     const toggle = ref(true)
@@ -2225,9 +2450,9 @@ describe('e2e: Transition', () => {
     createApp({
       render() {
         return h(MyTransition, { onLeave: () => outerSpy() }, () =>
-          toggle.value ? h('div') : null
+          toggle.value ? h('div') : null,
         )
-      }
+      },
     }).mount(root)
 
     expect(root.innerHTML).toBe(`<div></div>`)
@@ -2250,8 +2475,8 @@ describe('e2e: Transition', () => {
               template: `
                   <!-- Broken! -->
                   <div><slot /></div>
-                `
-            }
+                `,
+            },
           },
           template: `
             <div id="container">
@@ -2267,24 +2492,24 @@ describe('e2e: Transition', () => {
             const toggle = ref(true)
             const click = () => (toggle.value = !toggle.value)
             return { toggle, click }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
-        '<!-- Broken! --><div class="test"><div>content</div></div>'
+        '<!-- Broken! --><div class="test"><div>content</div></div>',
       )
 
       // leave
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'v-leave-from',
-        'v-leave-active'
+        'v-leave-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'v-leave-active',
-        'v-leave-to'
+        'v-leave-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe('<!--v-if-->')
@@ -2293,19 +2518,19 @@ describe('e2e: Transition', () => {
       expect(await classWhenTransitionStart()).toStrictEqual([
         'test',
         'v-enter-from',
-        'v-enter-active'
+        'v-enter-active',
       ])
       await nextFrame()
       expect(await classList('.test')).toStrictEqual([
         'test',
         'v-enter-active',
-        'v-enter-to'
+        'v-enter-to',
       ])
       await transitionFinish()
       expect(await html('#container')).toBe(
-        '<!-- Broken! --><div class="test"><div>content</div></div>'
+        '<!-- Broken! --><div class="test"><div>content</div></div>',
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
index 1a61c23a44e..febc9d3c20a 100644
--- a/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
+++ b/packages/vue/__tests__/e2e/TransitionGroup.spec.ts
@@ -1,5 +1,5 @@
 import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
-import path from 'path'
+import path from 'node:path'
 import { createApp, ref } from 'vue'
 
 describe('e2e: TransitionGroup', () => {
@@ -42,13 +42,13 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => items.value.push('d', 'e')
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
@@ -56,7 +56,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-from test-enter-active">d</div>` +
-          `<div class="test test-enter-from test-enter-active">e</div>`
+          `<div class="test test-enter-from test-enter-active">e</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -64,7 +64,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-to">d</div>` +
-          `<div class="test test-enter-active test-enter-to">e</div>`
+          `<div class="test test-enter-active test-enter-to">e</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
@@ -72,10 +72,10 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test">d</div>` +
-          `<div class="test">e</div>`
+          `<div class="test">e</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -96,30 +96,30 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => (items.value = ['b'])
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
         `<div class="test test-leave-from test-leave-active">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-from test-leave-active">c</div>`
+          `<div class="test test-leave-from test-leave-active">c</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test test-leave-active test-leave-to">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test test-leave-active test-leave-to">c</div>`
+          `<div class="test test-leave-active test-leave-to">c</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(`<div class="test">b</div>`)
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -140,36 +140,36 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => (items.value = ['b', 'c', 'd'])
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
         `<div class="test test-leave-from test-leave-active">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-from test-enter-active">d</div>`
+          `<div class="test test-enter-from test-enter-active">d</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test test-leave-active test-leave-to">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-active test-enter-to">d</div>`
+          `<div class="test test-enter-active test-enter-to">d</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
         `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test">d</div>`
+          `<div class="test">d</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -194,7 +194,7 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => items.value.push('d', 'e')
             return { click, items }
-          }
+          },
         }).mount('#app')
         return Promise.resolve().then(() => {
           return document.querySelector('#container')!.innerHTML
@@ -204,19 +204,19 @@ describe('e2e: TransitionGroup', () => {
       expect(appearHtml).toBe(
         `<div class="test test-appear-from test-appear-active">a</div>` +
           `<div class="test test-appear-from test-appear-active">b</div>` +
-          `<div class="test test-appear-from test-appear-active">c</div>`
+          `<div class="test test-appear-from test-appear-active">c</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test test-appear-active test-appear-to">a</div>` +
           `<div class="test test-appear-active test-appear-to">b</div>` +
-          `<div class="test test-appear-active test-appear-to">c</div>`
+          `<div class="test test-appear-active test-appear-to">c</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       // enter
@@ -225,7 +225,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-from test-enter-active">d</div>` +
-          `<div class="test test-enter-from test-enter-active">e</div>`
+          `<div class="test test-enter-from test-enter-active">e</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
@@ -233,7 +233,7 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test test-enter-active test-enter-to">d</div>` +
-          `<div class="test test-enter-active test-enter-to">e</div>`
+          `<div class="test test-enter-active test-enter-to">e</div>`,
       )
       await transitionFinish()
       expect(await html('#container')).toBe(
@@ -241,10 +241,10 @@ describe('e2e: TransitionGroup', () => {
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
           `<div class="test">d</div>` +
-          `<div class="test">e</div>`
+          `<div class="test">e</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -265,36 +265,36 @@ describe('e2e: TransitionGroup', () => {
             const items = ref(['a', 'b', 'c'])
             const click = () => (items.value = ['d', 'b', 'a'])
             return { click, items }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       expect(await htmlWhenTransitionStart()).toBe(
         `<div class="test group-enter-from group-enter-active">d</div>` +
           `<div class="test">b</div>` +
           `<div class="test group-move" style="">a</div>` +
-          `<div class="test group-leave-from group-leave-active group-move" style="">c</div>`
+          `<div class="test group-leave-from group-leave-active group-move" style="">c</div>`,
       )
       await nextFrame()
       expect(await html('#container')).toBe(
         `<div class="test group-enter-active group-enter-to">d</div>` +
           `<div class="test">b</div>` +
           `<div class="test group-move" style="">a</div>` +
-          `<div class="test group-leave-active group-move group-leave-to" style="">c</div>`
+          `<div class="test group-leave-active group-move group-leave-to" style="">c</div>`,
       )
       await transitionFinish(duration * 2)
       expect(await html('#container')).toBe(
         `<div class="test">d</div>` +
           `<div class="test">b</div>` +
-          `<div class="test" style="">a</div>`
+          `<div class="test" style="">a</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -321,16 +321,16 @@ describe('e2e: TransitionGroup', () => {
               items.value = ['a', 'b', 'c']
             }
             return { click, items, name, changeName }
-          }
+          },
         }).mount('#app')
       })
       expect(await html('#container')).toBe(
-        `<div>a</div>` + `<div>b</div>` + `<div>c</div>`
+        `<div>a</div>` + `<div>b</div>` + `<div>c</div>`,
       )
 
       // invalid name
       expect(await htmlWhenTransitionStart()).toBe(
-        `<div>b</div>` + `<div>c</div>` + `<div>a</div>`
+        `<div>b</div>` + `<div>c</div>` + `<div>a</div>`,
       )
       // change name
       const moveHtml = await page().evaluate(() => {
@@ -342,7 +342,7 @@ describe('e2e: TransitionGroup', () => {
       expect(moveHtml).toBe(
         `<div class="group-move" style="">a</div>` +
           `<div class="group-move" style="">b</div>` +
-          `<div class="group-move" style="">c</div>`
+          `<div class="group-move" style="">c</div>`,
       )
       // not sure why but we just have to wait really long for this to
       // pass consistently :/
@@ -350,10 +350,10 @@ describe('e2e: TransitionGroup', () => {
       expect(await html('#container')).toBe(
         `<div class="" style="">a</div>` +
           `<div class="" style="">b</div>` +
-          `<div class="" style="">c</div>`
+          `<div class="" style="">c</div>`,
       )
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -389,7 +389,7 @@ describe('e2e: TransitionGroup', () => {
           afterEnterSpy,
           beforeLeaveSpy,
           onLeaveSpy,
-          afterLeaveSpy
+          afterLeaveSpy,
         } = window as any
         const { createApp, ref } = (window as any).Vue
         createApp({
@@ -428,9 +428,9 @@ describe('e2e: TransitionGroup', () => {
               afterEnterSpy,
               beforeLeaveSpy,
               onLeaveSpy,
-              afterLeaveSpy
+              afterLeaveSpy,
             }
-          }
+          },
         }).mount('#app')
         return Promise.resolve().then(() => {
           return document.querySelector('#container')!.innerHTML
@@ -442,21 +442,21 @@ describe('e2e: TransitionGroup', () => {
       expect(appearHtml).toBe(
         `<div class="test test-appear-from test-appear-active">a</div>` +
           `<div class="test test-appear-from test-appear-active">b</div>` +
-          `<div class="test test-appear-from test-appear-active">c</div>`
+          `<div class="test test-appear-from test-appear-active">c</div>`,
       )
       await nextFrame()
       expect(afterAppearSpy).not.toBeCalled()
       expect(await html('#container')).toBe(
         `<div class="test test-appear-active test-appear-to">a</div>` +
           `<div class="test test-appear-active test-appear-to">b</div>` +
-          `<div class="test test-appear-active test-appear-to">c</div>`
+          `<div class="test test-appear-active test-appear-to">c</div>`,
       )
       await transitionFinish()
       expect(afterAppearSpy).toBeCalled()
       expect(await html('#container')).toBe(
         `<div class="test">a</div>` +
           `<div class="test">b</div>` +
-          `<div class="test">c</div>`
+          `<div class="test">c</div>`,
       )
 
       // enter + leave
@@ -464,7 +464,7 @@ describe('e2e: TransitionGroup', () => {
         `<div class="test test-leave-from test-leave-active">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-from test-enter-active">d</div>`
+          `<div class="test test-enter-from test-enter-active">d</div>`,
       )
       expect(beforeLeaveSpy).toBeCalled()
       expect(onLeaveSpy).toBeCalled()
@@ -477,7 +477,7 @@ describe('e2e: TransitionGroup', () => {
         `<div class="test test-leave-active test-leave-to">a</div>` +
           `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test test-enter-active test-enter-to">d</div>`
+          `<div class="test test-enter-active test-enter-to">d</div>`,
       )
       expect(afterLeaveSpy).not.toBeCalled()
       expect(afterEnterSpy).not.toBeCalled()
@@ -485,12 +485,12 @@ describe('e2e: TransitionGroup', () => {
       expect(await html('#container')).toBe(
         `<div class="test">b</div>` +
           `<div class="test">c</div>` +
-          `<div class="test">d</div>`
+          `<div class="test">d</div>`,
       )
       expect(afterLeaveSpy).toBeCalled()
       expect(afterEnterSpy).toBeCalled()
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test('warn unkeyed children', () => {
@@ -503,7 +503,7 @@ describe('e2e: TransitionGroup', () => {
       setup: () => {
         const items = ref(['a', 'b', 'c'])
         return { items }
-      }
+      },
     }).mount(document.createElement('div'))
 
     expect(`<TransitionGroup> children must be keyed`).toHaveBeenWarned()
diff --git a/packages/vue/__tests__/e2e/commits.mock.ts b/packages/vue/__tests__/e2e/commits.mock.ts
index 8bcb8d8f97b..4a793e25aea 100644
--- a/packages/vue/__tests__/e2e/commits.mock.ts
+++ b/packages/vue/__tests__/e2e/commits.mock.ts
@@ -8,17 +8,17 @@ export default {
         author: {
           name: 'Haoqun Jiang',
           email: 'haoqunjiang@gmail.com',
-          date: '2019-12-09T19:52:20Z'
+          date: '2019-12-09T19:52:20Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:52:20Z'
+          date: '2019-12-09T19:52:20Z',
         },
         message: 'test: add test for runtime-dom/modules/class (#75)',
         tree: {
           sha: 'f53f761827af281db86c31d113086c068c1d0789',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/f53f761827af281db86c31d113086c068c1d0789'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/f53f761827af281db86c31d113086c068c1d0789',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/d1527fbee422c7170e56845e55b49c4fd6de72a7',
         comment_count: 0,
@@ -26,8 +26,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/d1527fbee422c7170e56845e55b49c4fd6de72a7',
       html_url:
@@ -55,7 +55,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/sodatea/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -79,16 +79,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: '2383b45e322272ddc102d6914c149b284a25d04f',
           url: 'https://api.github.com/repos/vuejs/core/commits/2383b45e322272ddc102d6914c149b284a25d04f',
           html_url:
-            'https://github.com/vuejs/core/commit/2383b45e322272ddc102d6914c149b284a25d04f'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/2383b45e322272ddc102d6914c149b284a25d04f',
+        },
+      ],
     },
     {
       sha: '2383b45e322272ddc102d6914c149b284a25d04f',
@@ -98,17 +98,17 @@ export default {
         author: {
           name: 'GCA',
           email: 'gcaaa31928@gmail.com',
-          date: '2019-12-09T19:23:57Z'
+          date: '2019-12-09T19:23:57Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:23:57Z'
+          date: '2019-12-09T19:23:57Z',
         },
         message: 'chore: fix typo (#530) [ci skip]',
         tree: {
           sha: '2a5872ff8dc8ccb8121abd7e890ac3c0c9f1209f',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/2a5872ff8dc8ccb8121abd7e890ac3c0c9f1209f'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/2a5872ff8dc8ccb8121abd7e890ac3c0c9f1209f',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/2383b45e322272ddc102d6914c149b284a25d04f',
         comment_count: 0,
@@ -116,8 +116,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/2383b45e322272ddc102d6914c149b284a25d04f',
       html_url:
@@ -146,7 +146,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/gcaaa31928/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -170,16 +170,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
           url: 'https://api.github.com/repos/vuejs/core/commits/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
           html_url:
-            'https://github.com/vuejs/core/commit/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
+        },
+      ],
     },
     {
       sha: 'e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
@@ -189,17 +189,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:23:01Z'
+          date: '2019-12-09T19:23:01Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2019-12-09T19:23:01Z'
+          date: '2019-12-09T19:23:01Z',
         },
         message: 'test: fix warning',
         tree: {
           sha: 'd942b17681e2e2fbbcd2ee04092390c7f2cf534d',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/d942b17681e2e2fbbcd2ee04092390c7f2cf534d'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/d942b17681e2e2fbbcd2ee04092390c7f2cf534d',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
         comment_count: 0,
@@ -207,8 +207,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/e7e1314cccd1a66fcf8b8526ec21350ec16cc3ad',
       html_url:
@@ -237,7 +237,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -261,17 +261,17 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: '12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e',
           url: 'https://api.github.com/repos/vuejs/core/commits/12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e',
           html_url:
-            'https://github.com/vuejs/core/commit/12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e'
-        }
-      ]
-    }
+            'https://github.com/vuejs/core/commit/12ec62e6881f83dfa6c7f8a3c3650ec2567e6b1e',
+        },
+      ],
+    },
   ],
   'v2-compat': [
     {
@@ -282,17 +282,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:42:34Z'
+          date: '2018-11-13T03:42:34Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:54:01Z'
+          date: '2018-11-13T03:54:01Z',
         },
         message: 'chore: fix tests',
         tree: {
           sha: '6ac7bd078a6eb0ad32b5102e0c5d2c29f2b20a48',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/6ac7bd078a6eb0ad32b5102e0c5d2c29f2b20a48'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/6ac7bd078a6eb0ad32b5102e0c5d2c29f2b20a48',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/ecf4da822eea97f5db5fa769d39f994755384a4b',
         comment_count: 0,
@@ -300,8 +300,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/ecf4da822eea97f5db5fa769d39f994755384a4b',
       html_url:
@@ -330,7 +330,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -354,16 +354,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'ca296812d54aff123472d7147b83fddfb634d9bc',
           url: 'https://api.github.com/repos/vuejs/core/commits/ca296812d54aff123472d7147b83fddfb634d9bc',
           html_url:
-            'https://github.com/vuejs/core/commit/ca296812d54aff123472d7147b83fddfb634d9bc'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/ca296812d54aff123472d7147b83fddfb634d9bc',
+        },
+      ],
     },
     {
       sha: 'ca296812d54aff123472d7147b83fddfb634d9bc',
@@ -373,17 +373,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:21:56Z'
+          date: '2018-11-13T03:21:56Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-13T03:46:06Z'
+          date: '2018-11-13T03:46:06Z',
         },
         message: 'refactor: bring back clone for reused nodes',
         tree: {
           sha: '2cec32c97686e0ee9af1b87f0abdbbbdc18b6de6',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/2cec32c97686e0ee9af1b87f0abdbbbdc18b6de6'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/2cec32c97686e0ee9af1b87f0abdbbbdc18b6de6',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/ca296812d54aff123472d7147b83fddfb634d9bc',
         comment_count: 0,
@@ -391,8 +391,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/ca296812d54aff123472d7147b83fddfb634d9bc',
       html_url:
@@ -421,7 +421,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -445,16 +445,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
           url: 'https://api.github.com/repos/vuejs/core/commits/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
           html_url:
-            'https://github.com/vuejs/core/commit/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b'
-        }
-      ]
+            'https://github.com/vuejs/core/commit/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
+        },
+      ],
     },
     {
       sha: 'e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
@@ -464,17 +464,17 @@ export default {
         author: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-02T20:59:45Z'
+          date: '2018-11-02T20:59:45Z',
         },
         committer: {
           name: 'Evan You',
           email: 'yyx990803@gmail.com',
-          date: '2018-11-02T20:59:45Z'
+          date: '2018-11-02T20:59:45Z',
         },
         message: 'chore: relax render type for tsx',
         tree: {
           sha: '7e2b3bb92ab91f755b2251e4a7903e6dd2042602',
-          url: 'https://api.github.com/repos/vuejs/core/git/trees/7e2b3bb92ab91f755b2251e4a7903e6dd2042602'
+          url: 'https://api.github.com/repos/vuejs/core/git/trees/7e2b3bb92ab91f755b2251e4a7903e6dd2042602',
         },
         url: 'https://api.github.com/repos/vuejs/core/git/commits/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
         comment_count: 0,
@@ -482,8 +482,8 @@ export default {
           verified: false,
           reason: 'unsigned',
           signature: null,
-          payload: null
-        }
+          payload: null,
+        },
       },
       url: 'https://api.github.com/repos/vuejs/core/commits/e6be55a4989edb6f8750dbaa14eb693ec1f0d67b',
       html_url:
@@ -512,7 +512,7 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       committer: {
         login: 'yyx990803',
@@ -536,16 +536,16 @@ export default {
         received_events_url:
           'https://api.github.com/users/yyx990803/received_events',
         type: 'User',
-        site_admin: false
+        site_admin: false,
       },
       parents: [
         {
           sha: 'ccc835caff0344baad3c92ce786ad4f804bf667b',
           url: 'https://api.github.com/repos/vuejs/core/commits/ccc835caff0344baad3c92ce786ad4f804bf667b',
           html_url:
-            'https://github.com/vuejs/core/commit/ccc835caff0344baad3c92ce786ad4f804bf667b'
-        }
-      ]
-    }
-  ]
+            'https://github.com/vuejs/core/commit/ccc835caff0344baad3c92ce786ad4f804bf667b',
+        },
+      ],
+    },
+  ],
 }
diff --git a/packages/vue/__tests__/e2e/commits.spec.ts b/packages/vue/__tests__/e2e/commits.spec.ts
index 1fe26bac2f1..178c918c21a 100644
--- a/packages/vue/__tests__/e2e/commits.spec.ts
+++ b/packages/vue/__tests__/e2e/commits.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 import mocks from './commits.mock'
 
 describe('e2e: commits', () => {
@@ -8,7 +8,7 @@ describe('e2e: commits', () => {
   async function testCommits(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/commits.html`
+      `../../examples/${apiType}/commits.html`,
     )}`
 
     // intercept and mock the response to avoid hitting the actual API
@@ -22,7 +22,7 @@ describe('e2e: commits', () => {
           status: 200,
           contentType: 'application/json',
           headers: { 'Access-Control-Allow-Origin': '*' },
-          body: JSON.stringify(mocks[match[1] as 'main' | 'v2-compat'])
+          body: JSON.stringify(mocks[match[1] as 'main' | 'v2-compat']),
         })
       }
     })
@@ -51,7 +51,7 @@ describe('e2e: commits', () => {
     async () => {
       await testCommits('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -59,6 +59,6 @@ describe('e2e: commits', () => {
     async () => {
       await testCommits('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/e2eUtils.ts b/packages/vue/__tests__/e2e/e2eUtils.ts
index 4d840a690e4..792e4452fe3 100644
--- a/packages/vue/__tests__/e2e/e2eUtils.ts
+++ b/packages/vue/__tests__/e2e/e2eUtils.ts
@@ -1,15 +1,15 @@
 import puppeteer, {
-  Browser,
-  Page,
-  ClickOptions,
-  PuppeteerLaunchOptions
+  type Browser,
+  type ClickOptions,
+  type Page,
+  type PuppeteerLaunchOptions,
 } from 'puppeteer'
 
 export const E2E_TIMEOUT = 30 * 1000
 
 const puppeteerOptions: PuppeteerLaunchOptions = {
   args: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : [],
-  headless: 'new'
+  headless: 'new',
 }
 
 const maxTries = 30
@@ -17,7 +17,7 @@ export const timeout = (n: number) => new Promise(r => setTimeout(r, n))
 
 export async function expectByPolling(
   poll: () => Promise<any>,
-  expected: string
+  expected: string,
 ) {
   for (let tries = 0; tries < maxTries; tries++) {
     const actual = (await poll()) || ''
@@ -50,7 +50,7 @@ export function setupPuppeteer() {
         const err = e.args()[0]
         console.error(
           `Error from Puppeteer-loaded page:\n`,
-          err.remoteObject().description
+          err.remoteObject().description,
         )
       }
     })
@@ -102,7 +102,7 @@ export function setupPuppeteer() {
   async function isChecked(selector: string) {
     return await page.$eval(
       selector,
-      node => (node as HTMLInputElement).checked
+      node => (node as HTMLInputElement).checked,
     )
   }
 
@@ -117,7 +117,7 @@ export function setupPuppeteer() {
         ;(node as HTMLInputElement).value = value as string
         node.dispatchEvent(new Event('input'))
       },
-      value
+      value,
     )
   }
 
@@ -137,7 +137,7 @@ export function setupPuppeteer() {
   async function clearValue(selector: string) {
     return await page.$eval(
       selector,
-      node => ((node as HTMLInputElement).value = '')
+      node => ((node as HTMLInputElement).value = ''),
     )
   }
 
@@ -176,6 +176,6 @@ export function setupPuppeteer() {
     enterValue,
     clearValue,
     timeout,
-    nextFrame
+    nextFrame,
   }
 }
diff --git a/packages/vue/__tests__/e2e/grid.spec.ts b/packages/vue/__tests__/e2e/grid.spec.ts
index 728804e0b50..23b78130785 100644
--- a/packages/vue/__tests__/e2e/grid.spec.ts
+++ b/packages/vue/__tests__/e2e/grid.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 interface TableData {
   name: string
@@ -15,7 +15,7 @@ describe('e2e: grid', () => {
     for (let i = 0; i < data.length; i++) {
       for (let j = 0; j < columns.length; j++) {
         expect(
-          await text(`tr:nth-child(${i + 1}) td:nth-child(${j + 1})`)
+          await text(`tr:nth-child(${i + 1}) td:nth-child(${j + 1})`),
         ).toContain(`${data[i][columns[j]]}`)
       }
     }
@@ -24,7 +24,7 @@ describe('e2e: grid', () => {
   async function testGrid(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/grid.html`
+      `../../examples/${apiType}/grid.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -37,7 +37,7 @@ describe('e2e: grid', () => {
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Bruce Lee', power: 9000 },
       { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
+      { name: 'Jet Li', power: 8000 },
     ])
 
     await click('th:nth-child(1)')
@@ -49,7 +49,7 @@ describe('e2e: grid', () => {
       { name: 'Jet Li', power: 8000 },
       { name: 'Jackie Chan', power: 7000 },
       { name: 'Chuck Norris', power: Infinity },
-      { name: 'Bruce Lee', power: 9000 }
+      { name: 'Bruce Lee', power: 9000 },
     ])
 
     await click('th:nth-child(2)')
@@ -61,7 +61,7 @@ describe('e2e: grid', () => {
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Bruce Lee', power: 9000 },
       { name: 'Jet Li', power: 8000 },
-      { name: 'Jackie Chan', power: 7000 }
+      { name: 'Jackie Chan', power: 7000 },
     ])
 
     await click('th:nth-child(2)')
@@ -73,7 +73,7 @@ describe('e2e: grid', () => {
       { name: 'Jackie Chan', power: 7000 },
       { name: 'Jet Li', power: 8000 },
       { name: 'Bruce Lee', power: 9000 },
-      { name: 'Chuck Norris', power: Infinity }
+      { name: 'Chuck Norris', power: Infinity },
     ])
 
     await click('th:nth-child(1)')
@@ -85,13 +85,13 @@ describe('e2e: grid', () => {
       { name: 'Bruce Lee', power: 9000 },
       { name: 'Chuck Norris', power: Infinity },
       { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
+      { name: 'Jet Li', power: 8000 },
     ])
 
     await typeValue('input[name="query"]', 'j')
     await assertTable([
       { name: 'Jackie Chan', power: 7000 },
-      { name: 'Jet Li', power: 8000 }
+      { name: 'Jet Li', power: 8000 },
     ])
 
     await typeValue('input[name="query"]', 'infinity')
@@ -108,7 +108,7 @@ describe('e2e: grid', () => {
     async () => {
       await testGrid('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -116,6 +116,6 @@ describe('e2e: grid', () => {
     async () => {
       await testGrid('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/markdown.spec.ts b/packages/vue/__tests__/e2e/markdown.spec.ts
index dc863c90785..8764e66266c 100644
--- a/packages/vue/__tests__/e2e/markdown.spec.ts
+++ b/packages/vue/__tests__/e2e/markdown.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, expectByPolling, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, expectByPolling, setupPuppeteer } from './e2eUtils'
 
 describe('e2e: markdown', () => {
   const { page, isVisible, value, html } = setupPuppeteer()
@@ -7,7 +7,7 @@ describe('e2e: markdown', () => {
   async function testMarkdown(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/markdown.html#test`
+      `../../examples/${apiType}/markdown.html#test`,
     )}`
 
     await page().goto(baseUrl)
@@ -25,7 +25,7 @@ describe('e2e: markdown', () => {
       () => html('#editor div'),
       '<h1>hello</h1>\n' +
         '<h2>foo</h2>\n' +
-        '<ul>\n<li>bar</li>\n<li>baz</li>\n</ul>\n'
+        '<ul>\n<li>bar</li>\n<li>baz</li>\n</ul>\n',
     )
   }
 
@@ -34,7 +34,7 @@ describe('e2e: markdown', () => {
     async () => {
       await testMarkdown('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -42,6 +42,6 @@ describe('e2e: markdown', () => {
     async () => {
       await testMarkdown('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/svg.spec.ts b/packages/vue/__tests__/e2e/svg.spec.ts
index 09b5be81a91..37081e4c03c 100644
--- a/packages/vue/__tests__/e2e/svg.spec.ts
+++ b/packages/vue/__tests__/e2e/svg.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 declare const globalStats: {
   label: string
@@ -9,7 +9,7 @@ declare const globalStats: {
 declare function valueToPoint(
   value: number,
   index: number,
-  total: number
+  total: number,
 ): {
   x: number
   y: number
@@ -33,8 +33,8 @@ describe('e2e: svg', () => {
             document.querySelector('polygon')!.attributes[0].value === points
           )
         },
-        [total]
-      )
+        [total],
+      ),
     ).toBe(true)
   }
 
@@ -47,12 +47,12 @@ describe('e2e: svg', () => {
           return [point.x, point.y]
         })
       },
-      [total]
+      [total],
     )
     for (let i = 0; i < total; i++) {
       const textPosition = await page().$eval(
         `text:nth-child(${i + 3})`,
-        node => [+node.attributes[0].value, +node.attributes[1].value]
+        node => [+node.attributes[0].value, +node.attributes[1].value],
       )
       expect(textPosition).toEqual(positions[i])
     }
@@ -73,7 +73,7 @@ describe('e2e: svg', () => {
   async function testSvg(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/svg.html`
+      `../../examples/${apiType}/svg.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -144,7 +144,7 @@ describe('e2e: svg', () => {
     async () => {
       await testSvg('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -152,6 +152,6 @@ describe('e2e: svg', () => {
     async () => {
       await testSvg('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/todomvc.spec.ts b/packages/vue/__tests__/e2e/todomvc.spec.ts
index 668f9d33390..bd3836282d2 100644
--- a/packages/vue/__tests__/e2e/todomvc.spec.ts
+++ b/packages/vue/__tests__/e2e/todomvc.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 describe('e2e: todomvc', () => {
   const {
@@ -13,7 +13,7 @@ describe('e2e: todomvc', () => {
     isFocused,
     classList,
     enterValue,
-    clearValue
+    clearValue,
   } = setupPuppeteer()
 
   async function removeItemAt(n: number) {
@@ -26,7 +26,7 @@ describe('e2e: todomvc', () => {
   async function testTodomvc(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/todomvc.html`
+      `../../examples/${apiType}/todomvc.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -174,7 +174,7 @@ describe('e2e: todomvc', () => {
     async () => {
       await testTodomvc('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -182,6 +182,6 @@ describe('e2e: todomvc', () => {
     async () => {
       await testTodomvc('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/e2e/tree.spec.ts b/packages/vue/__tests__/e2e/tree.spec.ts
index 74a3df7b0da..8c12537aeb0 100644
--- a/packages/vue/__tests__/e2e/tree.spec.ts
+++ b/packages/vue/__tests__/e2e/tree.spec.ts
@@ -1,5 +1,5 @@
-import path from 'path'
-import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
+import path from 'node:path'
+import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils'
 
 describe('e2e: tree', () => {
   const { page, click, count, text, children, isVisible } = setupPuppeteer()
@@ -7,7 +7,7 @@ describe('e2e: tree', () => {
   async function testTree(apiType: 'classic' | 'composition') {
     const baseUrl = `file://${path.resolve(
       __dirname,
-      `../../examples/${apiType}/tree.html`
+      `../../examples/${apiType}/tree.html`,
     )}`
 
     await page().goto(baseUrl)
@@ -23,57 +23,57 @@ describe('e2e: tree', () => {
     expect((await children('#demo li ul')).length).toBe(4)
     expect(await text('#demo li div span')).toContain('[-]')
     expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
-      'hello'
+      'hello',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
-      'wat'
+      'wat',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      'child folder'
+      'child folder',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      '[+]'
+      '[+]',
     )
 
     // add items to root
     await click('#demo > .item > ul > .add')
     expect((await children('#demo li ul')).length).toBe(5)
     expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
-      'hello'
+      'hello',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
-      'wat'
+      'wat',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      'child folder'
+      'child folder',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      '[+]'
+      '[+]',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(4)')).toContain(
-      'new stuff'
+      'new stuff',
     )
 
     // add another item
     await click('#demo > .item > ul > .add')
     expect((await children('#demo li ul')).length).toBe(6)
     expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
-      'hello'
+      'hello',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
-      'wat'
+      'wat',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      'child folder'
+      'child folder',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
-      '[+]'
+      '[+]',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(4)')).toContain(
-      'new stuff'
+      'new stuff',
     )
     expect(await text('#demo > .item > ul > .item:nth-child(5)')).toContain(
-      'new stuff'
+      'new stuff',
     )
 
     await click('#demo ul .bold')
@@ -93,7 +93,7 @@ describe('e2e: tree', () => {
     expect(await count('.item > ul')).toBe(5)
     expect(await text('#demo ul > .item:nth-child(1)')).toContain('[-]')
     expect((await children('#demo ul > .item:nth-child(1) > ul')).length).toBe(
-      2
+      2,
     )
   }
 
@@ -102,7 +102,7 @@ describe('e2e: tree', () => {
     async () => {
       await testTree('classic')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 
   test(
@@ -110,6 +110,6 @@ describe('e2e: tree', () => {
     async () => {
       await testTree('composition')
     },
-    E2E_TIMEOUT
+    E2E_TIMEOUT,
   )
 })
diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index d547627de54..0c969f15981 100644
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -1,5 +1,5 @@
 import { EMPTY_ARR } from '@vue/shared'
-import { createApp, ref, nextTick, reactive } from '../src'
+import { createApp, nextTick, reactive, ref } from '../src'
 
 describe('compiler + runtime integration', () => {
   it('should support runtime template compilation', () => {
@@ -8,9 +8,9 @@ describe('compiler + runtime integration', () => {
       template: `{{ count }}`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`0`)
@@ -25,7 +25,7 @@ describe('compiler + runtime integration', () => {
       mounted: vi.fn(),
       activated: vi.fn(),
       deactivated: vi.fn(),
-      unmounted: vi.fn()
+      unmounted: vi.fn(),
     }
 
     const toggle = ref(true)
@@ -38,12 +38,12 @@ describe('compiler + runtime integration', () => {
       `,
       data() {
         return {
-          toggle
+          toggle,
         }
       },
       components: {
-        One: one
-      }
+        One: one,
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`one`)
@@ -83,9 +83,9 @@ describe('compiler + runtime integration', () => {
       template: `#template`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`0`)
@@ -101,9 +101,9 @@ describe('compiler + runtime integration', () => {
       template,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`0`)
@@ -112,28 +112,28 @@ describe('compiler + runtime integration', () => {
   it('should warn template compilation errors with codeframe', () => {
     const container = document.createElement('div')
     const App = {
-      template: `<div v-if>`
+      template: `<div v-if>`,
     }
     createApp(App).mount(container)
     expect(
-      `Template compilation error: Element is missing end tag`
+      `Template compilation error: Element is missing end tag`,
     ).toHaveBeenWarned()
     expect(
       `
 1  |  <div v-if>
-   |  ^`.trim()
+   |  ^`.trim(),
     ).toHaveBeenWarned()
     expect(`v-if/v-else-if is missing expression`).toHaveBeenWarned()
     expect(
       `
 1  |  <div v-if>
-   |       ^^^^`.trim()
+   |       ^^^^`.trim(),
     ).toHaveBeenWarned()
   })
 
   it('should support custom element via config.isCustomElement (deprecated)', () => {
     const app = createApp({
-      template: '<custom></custom>'
+      template: '<custom></custom>',
     })
     const container = document.createElement('div')
     app.config.isCustomElement = tag => tag === 'custom'
@@ -143,7 +143,7 @@ describe('compiler + runtime integration', () => {
 
   it('should support custom element via config.compilerOptions.isCustomElement', () => {
     const app = createApp({
-      template: '<custom></custom>'
+      template: '<custom></custom>',
     })
     const container = document.createElement('div')
     app.config.compilerOptions.isCustomElement = tag => tag === 'custom'
@@ -154,8 +154,8 @@ describe('compiler + runtime integration', () => {
   it('should support using element innerHTML as template', () => {
     const app = createApp({
       data: () => ({
-        msg: 'hello'
-      })
+        msg: 'hello',
+      }),
     })
     const container = document.createElement('div')
     container.innerHTML = '{{msg}}'
@@ -172,9 +172,9 @@ describe('compiler + runtime integration', () => {
       template: `{{ count }}`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount('#app')
     expect(container.innerHTML).toBe(`0`)
@@ -183,7 +183,7 @@ describe('compiler + runtime integration', () => {
 
   it('should warn when template is not available', () => {
     const app = createApp({
-      template: {}
+      template: {},
     })
     const container = document.createElement('div')
     app.mount(container)
@@ -192,12 +192,12 @@ describe('compiler + runtime integration', () => {
 
   it('should warn when template is is not found', () => {
     const app = createApp({
-      template: '#not-exist-id'
+      template: '#not-exist-id',
     })
     const container = document.createElement('div')
     app.mount(container)
     expect(
-      '[Vue warn]: Template element not found or is empty: #not-exist-id'
+      '[Vue warn]: Template element not found or is empty: #not-exist-id',
     ).toHaveBeenWarned()
   })
 
@@ -208,14 +208,14 @@ describe('compiler + runtime integration', () => {
       template: `{{ count }}`,
       data() {
         return {
-          count: 0
+          count: 0,
         }
-      }
+      },
     }
     createApp(App).mount('#not-exist-id')
 
     expect(
-      '[Vue warn]: Failed to mount app: mount target selector "#not-exist-id" returned null.'
+      '[Vue warn]: Failed to mount app: mount target selector "#not-exist-id" returned null.',
     ).toHaveBeenWarned()
     document.querySelector = origin
   })
@@ -238,9 +238,9 @@ describe('compiler + runtime integration', () => {
       `,
       data() {
         return {
-          count
+          count,
         }
-      }
+      },
     }
     createApp(App).mount(container)
     expect(container.innerHTML).toBe(`<!--teleport start--><!--teleport end-->`)
@@ -265,7 +265,7 @@ describe('compiler + runtime integration', () => {
       setup() {
         return { ok }
       },
-      template: `<div>{{ ok }}<div v-if="ok" v-once>{{ ok }}</div></div>`
+      template: `<div>{{ ok }}<div v-if="ok" v-once>{{ ok }}</div></div>`,
     }
     const container = document.createElement('div')
     createApp(App).mount(container)
@@ -282,7 +282,7 @@ describe('compiler + runtime integration', () => {
       setup() {
         return { list }
       },
-      template: `<div>{{ list.length }}<div v-for="i in list" v-once>{{ i }}</div></div>`
+      template: `<div>{{ list.length }}<div v-for="i in list" v-once>{{ i }}</div></div>`,
     }
     const container = document.createElement('div')
     createApp(App).mount(container)
@@ -296,7 +296,7 @@ describe('compiler + runtime integration', () => {
   // #2413
   it('EMPTY_ARR should not change', () => {
     const App = {
-      template: `<div v-for="v of ['a']">{{ v }}</div>`
+      template: `<div v-for="v of ['a']">{{ v }}</div>`,
     }
     const container = document.createElement('div')
     createApp(App).mount(container)
@@ -305,7 +305,7 @@ describe('compiler + runtime integration', () => {
 
   test('BigInt support', () => {
     const app = createApp({
-      template: `<div>{{ BigInt(BigInt(100000111)) + BigInt(2000000000n) * 30000000n }}</div>`
+      template: `<div>{{ BigInt(BigInt(100000111)) + BigInt(2000000000n) * 30000000n }}</div>`,
     })
     const root = document.createElement('div')
     app.mount(root)
diff --git a/packages/vue/__tests__/mathmlNamespace.spec.ts b/packages/vue/__tests__/mathmlNamespace.spec.ts
new file mode 100644
index 00000000000..c3f8ab7ab3e
--- /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 { h, nextTick, ref, render } 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__/runtimeCompilerOptions.spec.ts b/packages/vue/__tests__/runtimeCompilerOptions.spec.ts
index 3222462fea3..b144be448d2 100644
--- a/packages/vue/__tests__/runtimeCompilerOptions.spec.ts
+++ b/packages/vue/__tests__/runtimeCompilerOptions.spec.ts
@@ -3,7 +3,7 @@ import { createApp } from 'vue'
 describe('config.compilerOptions', () => {
   test('isCustomElement', () => {
     const app = createApp({
-      template: `<foo/>`
+      template: `<foo/>`,
     })
     app.config.compilerOptions.isCustomElement = (tag: string) => tag === 'foo'
     const root = document.createElement('div')
@@ -13,7 +13,7 @@ describe('config.compilerOptions', () => {
 
   test('comments', () => {
     const app = createApp({
-      template: `<div/><!--test--><div/>`
+      template: `<div/><!--test--><div/>`,
     })
     app.config.compilerOptions.comments = true
     // the comments option is only relevant in production mode
@@ -26,7 +26,7 @@ describe('config.compilerOptions', () => {
 
   test('whitespace', () => {
     const app = createApp({
-      template: `<div><span/>\n  <span/></div>`
+      template: `<div><span/>\n  <span/></div>`,
     })
     app.config.compilerOptions.whitespace = 'preserve'
     const root = document.createElement('div')
@@ -38,7 +38,7 @@ describe('config.compilerOptions', () => {
   test('delimiters', () => {
     const app = createApp({
       data: () => ({ foo: 'hi' }),
-      template: `[[ foo ]]`
+      template: `[[ foo ]]`,
     })
     app.config.compilerOptions.delimiters = [`[[`, `]]`]
     const root = document.createElement('div')
@@ -52,8 +52,8 @@ describe('per-component compilerOptions', () => {
     const app = createApp({
       template: `<foo/>`,
       compilerOptions: {
-        isCustomElement: (tag: string) => tag === 'foo'
-      }
+        isCustomElement: (tag: string) => tag === 'foo',
+      },
     })
     const root = document.createElement('div')
     app.mount(root)
@@ -64,8 +64,8 @@ describe('per-component compilerOptions', () => {
     const app = createApp({
       template: `<div/><!--test--><div/>`,
       compilerOptions: {
-        comments: true
-      }
+        comments: true,
+      },
     })
     app.config.compilerOptions.comments = false
     // the comments option is only relevant in production mode
@@ -80,8 +80,8 @@ describe('per-component compilerOptions', () => {
     const app = createApp({
       template: `<div><span/>\n  <span/></div>`,
       compilerOptions: {
-        whitespace: 'preserve'
-      }
+        whitespace: 'preserve',
+      },
     })
     const root = document.createElement('div')
     app.mount(root)
@@ -94,8 +94,8 @@ describe('per-component compilerOptions', () => {
       data: () => ({ foo: 'hi' }),
       template: `[[ foo ]]`,
       compilerOptions: {
-        delimiters: [`[[`, `]]`]
-      }
+        delimiters: [`[[`, `]]`],
+      },
     })
     const root = document.createElement('div')
     app.mount(root)
diff --git a/packages/vue/__tests__/svgNamespace.spec.ts b/packages/vue/__tests__/svgNamespace.spec.ts
index e944e7d8663..978f9bbb1fc 100644
--- a/packages/vue/__tests__/svgNamespace.spec.ts
+++ b/packages/vue/__tests__/svgNamespace.spec.ts
@@ -6,10 +6,14 @@
 // - compiler-core/src/transforms/transformElement.ts
 
 import { vtcKey } from '../../runtime-dom/src/components/Transition'
-import { render, h, ref, nextTick } from '../src'
+import { h, nextTick, ref, render } 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,10 +22,12 @@ describe('SVG support', () => {
           <svg id="e1">
             <foreignObject id="e2">
               <div id="e3"/>
+              <svg id="e4"/>
+              <math id="e5"/>
             </foreignObject>
           </svg>
         </div>
-      `
+      `,
     }
     render(h(App), root)
     const e0 = document.getElementById('e0')!
@@ -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 () => {
@@ -45,7 +53,7 @@ describe('SVG support', () => {
             </foreignObject>
           </svg>
         </div>
-      `
+      `,
     }
     render(h(App), root)
     const f1 = document.querySelector('#f1')!
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'))
 }
diff --git a/packages/vue/index.mjs b/packages/vue/index.mjs
index 8b43612483a..fcb9204cbc7 100644
--- a/packages/vue/index.mjs
+++ b/packages/vue/index.mjs
@@ -1 +1 @@
-export * from './index.js'
\ No newline at end of file
+export * from './index.js'
diff --git a/packages/vue/jsx-runtime/index.d.ts b/packages/vue/jsx-runtime/index.d.ts
index 9d022dd0c05..a52ac66a0df 100644
--- a/packages/vue/jsx-runtime/index.d.ts
+++ b/packages/vue/jsx-runtime/index.d.ts
@@ -1,4 +1,5 @@
-import type { VNode, ReservedProps, NativeElements } from '@vue/runtime-dom'
+/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
+import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
 
 /**
  * JSX namespace for usage with @jsxImportsSource directive
diff --git a/packages/vue/jsx-runtime/index.mjs b/packages/vue/jsx-runtime/index.mjs
index 57dd60af68f..e2528cba447 100644
--- a/packages/vue/jsx-runtime/index.mjs
+++ b/packages/vue/jsx-runtime/index.mjs
@@ -9,9 +9,4 @@ function jsx(type, props, key) {
   return h(type, props, children)
 }
 
-export {
-  Fragment,
-  jsx,
-  jsx as jsxs,
-  jsx as jsxDEV
-}
+export { Fragment, jsx, jsx as jsxs, jsx as jsxDEV }
diff --git a/packages/vue/jsx.d.ts b/packages/vue/jsx.d.ts
index cec81c564d4..1fa1e326676 100644
--- a/packages/vue/jsx.d.ts
+++ b/packages/vue/jsx.d.ts
@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/prefer-ts-expect-error */
 // global JSX namespace registration
 // somehow we have to copy=pase the jsx-runtime types here to make TypeScript happy
-import type { VNode, ReservedProps, NativeElements } from '@vue/runtime-dom'
+import type { NativeElements, ReservedProps, VNode } from '@vue/runtime-dom'
 
 declare global {
   namespace JSX {
diff --git a/packages/vue/macros-global.d.ts b/packages/vue/macros-global.d.ts
deleted file mode 100644
index 9b6f5a5392f..00000000000
--- a/packages/vue/macros-global.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {
-  $ as _$,
-  $$ as _$$,
-  $ref as _$ref,
-  $shallowRef as _$shallowRef,
-  $computed as _$computed,
-  $customRef as _$customRef,
-  $toRef as _$toRef
-} from './macros'
-
-declare global {
-  const $: typeof _$
-  const $$: typeof _$$
-  const $ref: typeof _$ref
-  const $shallowRef: typeof _$shallowRef
-  const $computed: typeof _$computed
-  const $customRef: typeof _$customRef
-  const $toRef: typeof _$toRef
-}
diff --git a/packages/vue/macros.d.ts b/packages/vue/macros.d.ts
deleted file mode 100644
index 68ccda6ee23..00000000000
--- a/packages/vue/macros.d.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {
-  Ref,
-  UnwrapRef,
-  ComputedRef,
-  WritableComputedOptions,
-  DebuggerOptions,
-  WritableComputedRef,
-  CustomRefFactory
-} from '@vue/runtime-dom'
-
-export declare const RefType: unique symbol
-
-export declare const enum RefTypes {
-  Ref = 1,
-  ComputedRef = 2,
-  WritableComputedRef = 3
-}
-
-type RefValue<T> = T extends null | undefined ? T : ReactiveVariable<T>
-
-type ReactiveVariable<T> = T & { [RefType]?: RefTypes.Ref }
-
-type ComputedRefValue<T> = T extends null | undefined ? T : ComputedVariable<T>
-
-type ComputedVariable<T> = T & { [RefType]?: RefTypes.ComputedRef }
-
-type WritableComputedRefValue<T> = T extends null | undefined
-  ? T
-  : WritableComputedVariable<T>
-
-type WritableComputedVariable<T> = T & {
-  [RefType]?: RefTypes.WritableComputedRef
-}
-
-type NormalObject<T extends object> = T & { [RefType]?: never }
-
-/**
- * Vue ref transform macro for binding refs as reactive variables.
- */
-export declare function $<T>(arg: ComputedRef<T>): ComputedRefValue<T>
-export declare function $<T>(
-  arg: WritableComputedRef<T>
-): WritableComputedRefValue<T>
-export declare function $<T>(arg: Ref<T>): RefValue<T>
-export declare function $<T extends object>(arg?: T): DestructureRefs<T>
-
-type DestructureRefs<T extends object> = {
-  [K in keyof T]: T[K] extends ComputedRef<infer V>
-    ? ComputedRefValue<V>
-    : T[K] extends WritableComputedRef<infer V>
-    ? WritableComputedRefValue<V>
-    : T[K] extends Ref<infer V>
-    ? RefValue<V>
-    : T[K]
-}
-
-/**
- * Vue ref transform macro for accessing underlying refs of reactive variables.
- */
-export declare function $$<T extends object>(arg: NormalObject<T>): ToRawRefs<T>
-export declare function $$<T>(value: RefValue<T>): Ref<T>
-export declare function $$<T>(value: ComputedRefValue<T>): ComputedRef<T>
-export declare function $$<T>(
-  value: WritableComputedRefValue<T>
-): WritableComputedRef<T>
-
-type ToRawRefs<T extends object> = {
-  [K in keyof T]: T[K] extends RefValue<infer V>
-    ? Ref<V>
-    : T[K] extends ComputedRefValue<infer V>
-    ? ComputedRef<V>
-    : T[K] extends WritableComputedRefValue<infer V>
-    ? WritableComputedRef<V>
-    : T[K] extends object
-    ? T[K] extends
-        | Function
-        | Map<any, any>
-        | Set<any>
-        | WeakMap<any, any>
-        | WeakSet<any>
-      ? T[K]
-      : ToRawRefs<T[K]>
-    : T[K]
-}
-
-export declare function $ref<T>(): RefValue<T | undefined>
-export declare function $ref<T>(arg: T | Ref<T>): RefValue<UnwrapRef<T>>
-
-export declare function $shallowRef<T>(): RefValue<T | undefined>
-export declare function $shallowRef<T>(arg: T): RefValue<T>
-
-export declare function $toRef<T extends object, K extends keyof T>(
-  object: T,
-  key: K
-): RefValue<T[K]>
-
-export declare function $toRef<T extends object, K extends keyof T>(
-  object: T,
-  key: K,
-  defaultValue: T[K]
-): RefValue<Exclude<T[K], undefined>>
-
-export declare function $customRef<T>(factory: CustomRefFactory<T>): RefValue<T>
-
-export declare function $computed<T>(
-  getter: () => T,
-  debuggerOptions?: DebuggerOptions
-): ComputedRefValue<T>
-export declare function $computed<T>(
-  options: WritableComputedOptions<T>,
-  debuggerOptions?: DebuggerOptions
-): WritableComputedRefValue<T>
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 3edd19aadfa..084b2ce4879 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "3.3.5",
+  "version": "3.4.19",
   "description": "The progressive JavaScript framework for building modern web UI.",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -14,10 +14,7 @@
     "compiler-sfc",
     "server-renderer",
     "jsx-runtime",
-    "jsx.d.ts",
-    "macros.d.ts",
-    "macros-global.d.ts",
-    "ref-macros.d.ts"
+    "jsx.d.ts"
   ],
   "exports": {
     ".": {
@@ -28,6 +25,11 @@
       },
       "require": {
         "types": "./dist/vue.d.ts",
+        "node": {
+          "production": "./dist/vue.cjs.prod.js",
+          "development": "./dist/vue.cjs.js",
+          "default": "./index.js"
+        },
         "default": "./index.js"
       }
     },
@@ -65,10 +67,7 @@
     },
     "./jsx": "./jsx.d.ts",
     "./dist/*": "./dist/*",
-    "./package.json": "./package.json",
-    "./macros": "./macros.d.ts",
-    "./macros-global": "./macros-global.d.ts",
-    "./ref-macros": "./ref-macros.d.ts"
+    "./package.json": "./package.json"
   },
   "buildOptions": {
     "name": "Vue",
@@ -96,11 +95,11 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue#readme",
   "dependencies": {
-    "@vue/shared": "3.3.5",
-    "@vue/compiler-dom": "3.3.5",
-    "@vue/runtime-dom": "3.3.5",
-    "@vue/compiler-sfc": "3.3.5",
-    "@vue/server-renderer": "3.3.5"
+    "@vue/shared": "workspace:*",
+    "@vue/compiler-dom": "workspace:*",
+    "@vue/runtime-dom": "workspace:*",
+    "@vue/compiler-sfc": "workspace:*",
+    "@vue/server-renderer": "workspace:*"
   },
   "peerDependencies": {
     "typescript": "*"
diff --git a/packages/vue/ref-macros.d.ts b/packages/vue/ref-macros.d.ts
deleted file mode 100644
index 206d0308a62..00000000000
--- a/packages/vue/ref-macros.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO remove in 3.4
-import './macros-global'
diff --git a/packages/vue/server-renderer/index.mjs b/packages/vue/server-renderer/index.mjs
index 3e081c15a23..ac614729c75 100644
--- a/packages/vue/server-renderer/index.mjs
+++ b/packages/vue/server-renderer/index.mjs
@@ -1 +1 @@
-export * from '@vue/server-renderer'
\ No newline at end of file
+export * from '@vue/server-renderer'
diff --git a/packages/vue/src/dev.ts b/packages/vue/src/dev.ts
index 79f233ed925..602079a20e2 100644
--- a/packages/vue/src/dev.ts
+++ b/packages/vue/src/dev.ts
@@ -6,7 +6,7 @@ export function initDev() {
     if (!__ESM_BUNDLER__) {
       console.info(
         `You are running a development build of Vue.\n` +
-          `Make sure to use the production build (*.prod.js) when deploying for production.`
+          `Make sure to use the production build (*.prod.js) when deploying for production.`,
       )
     }
 
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 8215be7476e..35077b3cf63 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,21 +1,47 @@
 // This entry is the "full-build" that includes both the runtime
 // and the compiler, and supports on-the-fly compilation of the template option.
 import { initDev } from './dev'
-import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'
-import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
+import {
+  type CompilerError,
+  type CompilerOptions,
+  compile,
+} from '@vue/compiler-dom'
+import {
+  type RenderFunction,
+  registerRuntimeCompiler,
+  warn,
+} from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
-import { isString, NOOP, generateCodeFrame, extend } from '@vue/shared'
-import { InternalRenderFunction } from 'packages/runtime-core/src/component'
+import {
+  EMPTY_OBJ,
+  NOOP,
+  extend,
+  generateCodeFrame,
+  isString,
+} from '@vue/shared'
+import type { 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,
-  options?: CompilerOptions
+  options?: CompilerOptions,
 ): RenderFunction {
   if (!isString(template)) {
     if (template.nodeType) {
@@ -27,7 +53,8 @@ function compileToFunction(
   }
 
   const key = template
-  const cached = compileCache[key]
+  const cache = getCache(options)
+  const cached = cache[key]
   if (cached) {
     return cached
   }
@@ -48,9 +75,9 @@ function compileToFunction(
     {
       hoistStatic: true,
       onError: __DEV__ ? onError : undefined,
-      onWarn: __DEV__ ? e => onError(e, true) : NOOP
+      onWarn: __DEV__ ? e => onError(e, true) : NOOP,
     } as CompilerOptions,
-    options
+    options,
   )
 
   if (!opts.isCustomElement && typeof customElements !== 'undefined') {
@@ -68,7 +95,7 @@ function compileToFunction(
       generateCodeFrame(
         template as string,
         err.loc.start.offset,
-        err.loc.end.offset
+        err.loc.end.offset,
       )
     warn(codeFrame ? `${message}\n${codeFrame}` : message)
   }
@@ -84,7 +111,7 @@ function compileToFunction(
   // mark the function as runtime compiled
   ;(render as InternalRenderFunction)._rc = true
 
-  return (compileCache[key] = render)
+  return (cache[key] = render)
 }
 
 registerRuntimeCompiler(compileToFunction)
diff --git a/packages/vue/src/runtime.ts b/packages/vue/src/runtime.ts
index 7fe70670a5e..a0332bf7989 100644
--- a/packages/vue/src/runtime.ts
+++ b/packages/vue/src/runtime.ts
@@ -16,10 +16,10 @@ export const compile = () => {
         (__ESM_BUNDLER__
           ? ` Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
           : __ESM_BROWSER__
-          ? ` Use "vue.esm-browser.js" instead.`
-          : __GLOBAL__
-          ? ` Use "vue.global.js" instead.`
-          : ``) /* should not happen */
+            ? ` Use "vue.esm-browser.js" instead.`
+            : __GLOBAL__
+              ? ` Use "vue.global.js" instead.`
+              : ``) /* should not happen */,
     )
   }
 }
diff --git a/packages/vue/types/jsx-register.d.ts b/packages/vue/types/jsx-register.d.ts
deleted file mode 100644
index a626f798c2a..00000000000
--- a/packages/vue/types/jsx-register.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// this is appended to the end of ../dist/vue.d.ts during build.
-// imports the global JSX namespace registration for compat.
-// TODO: remove in 3.4
-import '../jsx'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4402fa9341e..22d55e7c588 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,41 +9,53 @@ importers:
   .:
     devDependencies:
       '@babel/parser':
-        specifier: ^7.23.0
-        version: 7.23.0
+        specifier: ^7.23.9
+        version: 7.23.9
       '@babel/types':
-        specifier: ^7.23.0
-        version: 7.23.0
+        specifier: ^7.23.9
+        version: 7.23.9
+      '@codspeed/vitest-plugin':
+        specifier: ^2.3.1
+        version: 2.3.1(vite@5.0.12)(vitest@1.2.2)
       '@rollup/plugin-alias':
-        specifier: ^5.0.1
-        version: 5.0.1(rollup@3.29.4)
+        specifier: ^5.1.0
+        version: 5.1.0(rollup@4.9.2)
       '@rollup/plugin-commonjs':
         specifier: ^25.0.7
-        version: 25.0.7(rollup@3.29.4)
+        version: 25.0.7(rollup@4.9.2)
       '@rollup/plugin-json':
-        specifier: ^6.0.1
-        version: 6.0.1(rollup@3.29.4)
+        specifier: ^6.1.0
+        version: 6.1.0(rollup@4.9.2)
       '@rollup/plugin-node-resolve':
         specifier: ^15.2.3
-        version: 15.2.3(rollup@3.29.4)
+        version: 15.2.3(rollup@4.9.2)
       '@rollup/plugin-replace':
-        specifier: ^5.0.4
-        version: 5.0.4(rollup@3.29.4)
+        specifier: 5.0.4
+        version: 5.0.4(rollup@4.9.2)
       '@rollup/plugin-terser':
         specifier: ^0.4.4
-        version: 0.4.4(rollup@3.29.4)
+        version: 0.4.4(rollup@4.9.2)
       '@types/hash-sum':
-        specifier: ^1.0.1
-        version: 1.0.1
+        specifier: ^1.0.2
+        version: 1.0.2
+      '@types/minimist':
+        specifier: ^1.2.5
+        version: 1.2.5
       '@types/node':
-        specifier: ^18.18.6
-        version: 18.18.6
+        specifier: ^20.11.16
+        version: 20.11.16
+      '@types/semver':
+        specifier: ^7.5.6
+        version: 7.5.6
+      '@typescript-eslint/eslint-plugin':
+        specifier: ^6.18.1
+        version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.2.2)
       '@typescript-eslint/parser':
-        specifier: ^6.8.0
-        version: 6.8.0(eslint@8.51.0)(typescript@5.1.6)
+        specifier: ^6.18.1
+        version: 6.18.1(eslint@8.56.0)(typescript@5.2.2)
       '@vitest/coverage-istanbul':
-        specifier: ^0.34.4
-        version: 0.34.4(vitest@0.34.4)
+        specifier: ^1.2.2
+        version: 1.2.2(vitest@1.2.2)
       '@vue/consolidate':
         specifier: 0.17.3
         version: 0.17.3
@@ -54,17 +66,23 @@ importers:
         specifier: ^2.4.1
         version: 2.4.1
       esbuild:
-        specifier: ^0.19.5
-        version: 0.19.5
+        specifier: ^0.20.0
+        version: 0.20.0
       esbuild-plugin-polyfill-node:
         specifier: ^0.3.0
-        version: 0.3.0(esbuild@0.19.5)
+        version: 0.3.0(esbuild@0.20.0)
       eslint:
-        specifier: ^8.51.0
-        version: 8.51.0
+        specifier: ^8.56.0
+        version: 8.56.0
+      eslint-define-config:
+        specifier: ^1.24.1
+        version: 1.24.1
+      eslint-plugin-import:
+        specifier: npm:eslint-plugin-i@^2.29.1
+        version: /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)
       eslint-plugin-jest:
-        specifier: ^27.4.2
-        version: 27.4.2(eslint@8.51.0)(typescript@5.1.6)
+        specifier: ^27.6.3
+        version: 27.6.3(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)(typescript@5.2.2)
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -72,35 +90,35 @@ importers:
         specifier: ^8.0.1
         version: 8.0.1
       jsdom:
-        specifier: ^22.1.0
-        version: 22.1.0
+        specifier: ^23.2.0
+        version: 23.2.0
       lint-staged:
-        specifier: ^15.0.2
-        version: 15.0.2
+        specifier: ^15.2.0
+        version: 15.2.0
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
       magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
+        specifier: ^0.30.6
+        version: 0.30.6
       markdown-table:
         specifier: ^3.0.3
         version: 3.0.3
       marked:
-        specifier: ^9.1.2
-        version: 9.1.2
+        specifier: ^11.2.0
+        version: 11.2.0
       minimist:
         specifier: ^1.2.8
         version: 1.2.8
-      npm-run-all:
-        specifier: ^4.1.5
-        version: 4.1.5
+      npm-run-all2:
+        specifier: ^6.1.2
+        version: 6.1.2
       picocolors:
         specifier: ^1.0.0
         version: 1.0.0
       prettier:
-        specifier: ^3.0.3
-        version: 3.0.3
+        specifier: ^3.2.2
+        version: 3.2.2
       pretty-bytes:
         specifier: ^6.1.1
         version: 6.1.1
@@ -108,23 +126,23 @@ importers:
         specifier: ^3.0.2
         version: 3.0.2
       puppeteer:
-        specifier: ~21.2.1
-        version: 21.2.1(typescript@5.1.6)
+        specifier: ~21.11.0
+        version: 21.11.0(typescript@5.2.2)
       rimraf:
         specifier: ^5.0.5
         version: 5.0.5
       rollup:
-        specifier: ^3.29.4
-        version: 3.29.4
+        specifier: 4.9.2
+        version: 4.9.2
       rollup-plugin-dts:
         specifier: ^6.1.0
-        version: 6.1.0(rollup@3.29.4)(typescript@5.1.6)
+        version: 6.1.0(rollup@4.9.2)(typescript@5.2.2)
       rollup-plugin-esbuild:
-        specifier: ^6.1.0
-        version: 6.1.0(esbuild@0.19.5)(rollup@3.29.4)
+        specifier: ^6.1.1
+        version: 6.1.1(esbuild@0.20.0)(rollup@4.9.2)
       rollup-plugin-polyfill-node:
-        specifier: ^0.12.0
-        version: 0.12.0(rollup@3.29.4)
+        specifier: ^0.13.0
+        version: 0.13.0(rollup@4.9.2)
       semver:
         specifier: ^7.5.4
         version: 7.5.4
@@ -135,35 +153,38 @@ importers:
         specifier: ^2.9.0
         version: 2.9.0
       terser:
-        specifier: ^5.22.0
-        version: 5.22.0
+        specifier: ^5.27.0
+        version: 5.27.0
       todomvc-app-css:
-        specifier: ^2.4.2
-        version: 2.4.2
+        specifier: ^2.4.3
+        version: 2.4.3
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
       tsx:
-        specifier: ^3.14.0
-        version: 3.14.0
+        specifier: ^4.7.0
+        version: 4.7.0
       typescript:
-        specifier: ^5.1.6
-        version: 5.1.6
+        specifier: ^5.2.2
+        version: 5.2.2
       vite:
-        specifier: ^4.3.0
-        version: 4.3.1(@types/node@18.18.6)(terser@5.22.0)
+        specifier: ^5.0.12
+        version: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
       vitest:
-        specifier: ^0.34.4
-        version: 0.34.4(jsdom@22.1.0)(terser@5.22.0)
+        specifier: ^1.2.2
+        version: 1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0)
 
   packages/compiler-core:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.0
-        version: 7.23.0
+        specifier: ^7.23.9
+        version: 7.23.9
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
+      entities:
+        specifier: ^4.5.0
+        version: 4.5.0
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -172,66 +193,60 @@ importers:
         version: 1.0.2
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.0
-        version: 7.23.0
+        specifier: ^7.23.9
+        version: 7.23.9
 
   packages/compiler-dom:
     dependencies:
       '@vue/compiler-core':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-core
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
 
   packages/compiler-sfc:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.0
-        version: 7.23.0
+        specifier: ^7.23.9
+        version: 7.23.9
       '@vue/compiler-core':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-core
       '@vue/compiler-dom':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-dom
       '@vue/compiler-ssr':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-ssr
-      '@vue/reactivity-transform':
-        specifier: 3.3.5
-        version: link:../reactivity-transform
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
       magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
+        specifier: ^0.30.6
+        version: 0.30.6
       postcss:
-        specifier: ^8.4.31
-        version: 8.4.31
+        specifier: ^8.4.33
+        version: 8.4.33
       source-map-js:
         specifier: ^1.0.2
         version: 1.0.2
     devDependencies:
       '@babel/types':
-        specifier: ^7.23.0
-        version: 7.23.0
-      '@types/estree':
-        specifier: ^0.0.52
-        version: 0.0.52
+        specifier: ^7.23.9
+        version: 7.23.9
       '@vue/consolidate':
-        specifier: ^0.17.3
-        version: 0.17.3
+        specifier: ^1.0.0
+        version: 1.0.0
       hash-sum:
         specifier: ^2.0.0
         version: 2.0.0
       lru-cache:
-        specifier: ^10.0.1
-        version: 10.0.1
+        specifier: 10.1.0
+        version: 10.1.0
       merge-source-map:
         specifier: ^1.1.0
         version: 1.1.0
@@ -239,111 +254,101 @@ importers:
         specifier: ^9.0.3
         version: 9.0.3
       postcss-modules:
-        specifier: ^4.3.1
-        version: 4.3.1(postcss@8.4.31)
+        specifier: ^6.0.0
+        version: 6.0.0(postcss@8.4.33)
       postcss-selector-parser:
-        specifier: ^6.0.13
-        version: 6.0.13
+        specifier: ^6.0.15
+        version: 6.0.15
       pug:
         specifier: ^3.0.2
         version: 3.0.2
       sass:
-        specifier: ^1.69.4
-        version: 1.69.4
+        specifier: ^1.70.0
+        version: 1.70.0
 
   packages/compiler-ssr:
     dependencies:
       '@vue/compiler-dom':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-dom
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
 
-  packages/dts-test:
+  packages/dts-built-test:
     dependencies:
+      '@vue/reactivity':
+        specifier: workspace:*
+        version: link:../reactivity
+      '@vue/shared':
+        specifier: workspace:*
+        version: link:../shared
       vue:
         specifier: workspace:*
         version: link:../vue
 
-  packages/reactivity:
+  packages/dts-test:
     dependencies:
-      '@vue/shared':
-        specifier: 3.3.5
-        version: link:../shared
+      '@vue/dts-built-test':
+        specifier: workspace:*
+        version: link:../dts-built-test
+      vue:
+        specifier: workspace:*
+        version: link:../vue
 
-  packages/reactivity-transform:
+  packages/reactivity:
     dependencies:
-      '@babel/parser':
-        specifier: ^7.23.0
-        version: 7.23.0
-      '@vue/compiler-core':
-        specifier: 3.3.5
-        version: link:../compiler-core
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
-      estree-walker:
-        specifier: ^2.0.2
-        version: 2.0.2
-      magic-string:
-        specifier: ^0.30.5
-        version: 0.30.5
-    devDependencies:
-      '@babel/core':
-        specifier: ^7.23.2
-        version: 7.23.2
-      '@babel/types':
-        specifier: ^7.23.0
-        version: 7.23.0
 
   packages/runtime-core:
     dependencies:
       '@vue/reactivity':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../reactivity
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
 
   packages/runtime-dom:
     dependencies:
       '@vue/runtime-core':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../runtime-core
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
       csstype:
-        specifier: ^3.1.2
-        version: 3.1.2
+        specifier: ^3.1.3
+        version: 3.1.3
 
   packages/runtime-test:
     dependencies:
       '@vue/runtime-core':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../runtime-core
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
 
   packages/server-renderer:
     dependencies:
       '@vue/compiler-ssr':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-ssr
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
       vue:
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../vue
 
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^2.5.8
-        version: 2.5.8
+        specifier: ^3.1.1
+        version: 3.1.1
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -355,19 +360,19 @@ importers:
         version: link:../vue
     devDependencies:
       '@vitejs/plugin-vue':
-        specifier: ^4.4.0
-        version: 4.4.0(vite@4.5.0)(vue@packages+vue)
+        specifier: ^5.0.3
+        version: 5.0.3(vite@5.0.12)(vue@packages+vue)
       vite:
-        specifier: ^4.5.0
-        version: 4.5.0(@types/node@18.18.6)(terser@5.22.0)
+        specifier: ^5.0.12
+        version: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
 
   packages/shared: {}
 
   packages/template-explorer:
     dependencies:
       monaco-editor:
-        specifier: ^0.44.0
-        version: 0.44.0
+        specifier: ^0.45.0
+        version: 0.45.0
       source-map-js:
         specifier: ^1.0.2
         version: 1.0.2
@@ -375,29 +380,29 @@ importers:
   packages/vue:
     dependencies:
       '@vue/compiler-dom':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-dom
       '@vue/compiler-sfc':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../compiler-sfc
       '@vue/runtime-dom':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../runtime-dom
       '@vue/server-renderer':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../server-renderer
       '@vue/shared':
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../shared
       typescript:
         specifier: '*'
-        version: 5.0.2
+        version: 5.2.2
 
   packages/vue-compat:
     dependencies:
       '@babel/parser':
-        specifier: ^7.23.0
-        version: 7.23.0
+        specifier: ^7.23.9
+        version: 7.23.9
       estree-walker:
         specifier: ^2.0.2
         version: 2.0.2
@@ -405,7 +410,7 @@ importers:
         specifier: ^1.0.2
         version: 1.0.2
       vue:
-        specifier: 3.3.5
+        specifier: workspace:*
         version: link:../vue
 
 packages:
@@ -415,42 +420,49 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@ampproject/remapping@2.2.0:
-    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+  /@ampproject/remapping@2.2.1:
+    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.20
+    dev: true
+
+  /@asamuzakjp/dom-selector@2.0.1:
+    resolution: {integrity: sha512-QJAJffmCiymkv6YyQ7voyQb5caCth6jzZsQncYCpHXrJ7RqdYG5y43+is8mnFcYubdOkr7cn1+na9BdFMxqw7w==}
+    dependencies:
+      bidi-js: 1.0.3
+      css-tree: 2.3.1
+      is-potential-custom-element-name: 1.0.1
     dev: true
 
-  /@babel/code-frame@7.22.13:
-    resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
+  /@babel/code-frame@7.23.5:
+    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
-    requiresBuild: true
     dependencies:
-      '@babel/highlight': 7.22.20
+      '@babel/highlight': 7.23.4
       chalk: 2.4.2
     dev: true
 
-  /@babel/compat-data@7.22.20:
-    resolution: {integrity: sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==}
+  /@babel/compat-data@7.23.2:
+    resolution: {integrity: sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==}
     engines: {node: '>=6.9.0'}
     dev: true
 
-  /@babel/core@7.23.2:
-    resolution: {integrity: sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==}
+  /@babel/core@7.23.5:
+    resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.22.13
-      '@babel/generator': 7.23.0
+      '@ampproject/remapping': 2.2.1
+      '@babel/code-frame': 7.23.5
+      '@babel/generator': 7.23.5
       '@babel/helper-compilation-targets': 7.22.15
-      '@babel/helper-module-transforms': 7.23.0(@babel/core@7.23.2)
-      '@babel/helpers': 7.23.2
-      '@babel/parser': 7.23.0
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5)
+      '@babel/helpers': 7.23.5
+      '@babel/parser': 7.23.9
       '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.2
-      '@babel/types': 7.23.0
+      '@babel/traverse': 7.23.5
+      '@babel/types': 7.23.9
       convert-source-map: 2.0.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -460,13 +472,13 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/generator@7.23.0:
-    resolution: {integrity: sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==}
+  /@babel/generator@7.23.5:
+    resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.9
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.20
       jsesc: 2.5.2
     dev: true
 
@@ -474,9 +486,9 @@ packages:
     resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.22.20
+      '@babel/compat-data': 7.23.2
       '@babel/helper-validator-option': 7.22.15
-      browserslist: 4.21.10
+      browserslist: 4.22.1
       lru-cache: 5.1.1
       semver: 6.3.1
     dev: true
@@ -491,30 +503,30 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.9
     dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.9
     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.0
+      '@babel/types': 7.23.9
     dev: true
 
-  /@babel/helper-module-transforms@7.23.0(@babel/core@7.23.2):
-    resolution: {integrity: sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==}
+  /@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.2
+      '@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
@@ -526,18 +538,18 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.9
     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.0
+      '@babel/types': 7.23.9
     dev: true
 
-  /@babel/helper-string-parser@7.22.5:
-    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
+  /@babel/helper-string-parser@7.23.4:
+    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
     engines: {node: '>=6.9.0'}
 
   /@babel/helper-validator-identifier@7.22.20:
@@ -550,19 +562,19 @@ 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.2
-      '@babel/types': 7.23.0
+      '@babel/traverse': 7.23.5
+      '@babel/types': 7.23.9
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/highlight@7.22.20:
-    resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
+  /@babel/highlight@7.23.4:
+    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
     engines: {node: '>=6.9.0'}
     requiresBuild: true
     dependencies:
@@ -571,95 +583,104 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /@babel/parser@7.23.0:
-    resolution: {integrity: sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==}
+  /@babel/parser@7.23.9:
+    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.9
 
   /@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.0
-      '@babel/types': 7.23.0
+      '@babel/code-frame': 7.23.5
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
     dev: true
 
-  /@babel/traverse@7.23.2:
-    resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
+  /@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.0
+      '@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.0
-      '@babel/types': 7.23.0
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@babel/types@7.23.0:
-    resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
+  /@babel/types@7.23.9:
+    resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-string-parser': 7.23.4
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  /@esbuild/android-arm64@0.17.19:
-    resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
+  /@codspeed/core@2.3.1:
+    resolution: {integrity: sha512-7KRwBX4iXK33gEQwh8jPWBF9srGIjewm3oc+A/66caiG/aOyHmxJCapjAZxT2f2vIVYqR7CghzqlxY2ik0DNBg==}
+    dependencies:
+      find-up: 6.3.0
+      node-gyp-build: 4.7.1
+    dev: true
+
+  /@codspeed/vitest-plugin@2.3.1(vite@5.0.12)(vitest@1.2.2):
+    resolution: {integrity: sha512-/e4G2B/onX/hG/EjUU/NpDxnIryeTDamVRTBeWfgQDoex3g7GDzTwoQktaU5l/Asw3ZjEErQg+oQVToQ6jYZlA==}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0
+      vitest: '>=1.0.0-beta.4 || >=1'
+    dependencies:
+      '@codspeed/core': 2.3.1
+      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
+      vitest: 1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0)
     dev: true
-    optional: true
 
-  /@esbuild/android-arm64@0.18.20:
-    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+  /@esbuild/aix-ppc64@0.19.10:
+    resolution: {integrity: sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==}
     engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
+    cpu: [ppc64]
+    os: [aix]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@esbuild/android-arm64@0.19.5:
-    resolution: {integrity: sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==}
+  /@esbuild/aix-ppc64@0.20.0:
+    resolution: {integrity: sha512-fGFDEctNh0CcSwsiRPxiaqX0P5rq+AqE0SRhYGZ4PX46Lg1FNR6oCxJghf8YgY0WQEgQuh3lErUFE4KxLeRmmw==}
     engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
+    cpu: [ppc64]
+    os: [aix]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.17.19:
-    resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
+  /@esbuild/android-arm64@0.19.10:
+    resolution: {integrity: sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==}
     engines: {node: '>=12'}
-    cpu: [arm]
+    cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.18.20:
-    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+  /@esbuild/android-arm64@0.20.0:
+    resolution: {integrity: sha512-aVpnM4lURNkp0D3qPoAzSG92VXStYmoVPOgXveAUoQBWRSuQzt51yvSju29J6AHPmwY1BjH49uR29oyfH1ra8Q==}
     engines: {node: '>=12'}
-    cpu: [arm]
+    cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@esbuild/android-arm@0.19.5:
-    resolution: {integrity: sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==}
+  /@esbuild/android-arm@0.19.10:
+    resolution: {integrity: sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -667,17 +688,17 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.17.19:
-    resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
+  /@esbuild/android-arm@0.20.0:
+    resolution: {integrity: sha512-3bMAfInvByLHfJwYPJRlpTeaQA75n8C/QKpEaiS4HrFWFiJlNI0vzq/zCjBrhAYcPyVPG7Eo9dMrcQXuqmNk5g==}
     engines: {node: '>=12'}
-    cpu: [x64]
+    cpu: [arm]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.18.20:
-    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+  /@esbuild/android-x64@0.19.10:
+    resolution: {integrity: sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -685,8 +706,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/android-x64@0.19.5:
-    resolution: {integrity: sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==}
+  /@esbuild/android-x64@0.20.0:
+    resolution: {integrity: sha512-uK7wAnlRvjkCPzh8jJ+QejFyrP8ObKuR5cBIsQZ+qbMunwR8sbd8krmMbxTLSrDhiPZaJYKQAU5Y3iMDcZPhyQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -694,17 +715,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.17.19:
-    resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/darwin-arm64@0.18.20:
-    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+  /@esbuild/darwin-arm64@0.19.10:
+    resolution: {integrity: sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -712,8 +724,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-arm64@0.19.5:
-    resolution: {integrity: sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==}
+  /@esbuild/darwin-arm64@0.20.0:
+    resolution: {integrity: sha512-AjEcivGAlPs3UAcJedMa9qYg9eSfU6FnGHJjT8s346HSKkrcWlYezGE8VaO2xKfvvlZkgAhyvl06OJOxiMgOYQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -721,8 +733,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.17.19:
-    resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
+  /@esbuild/darwin-x64@0.19.10:
+    resolution: {integrity: sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -730,8 +742,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.18.20:
-    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+  /@esbuild/darwin-x64@0.20.0:
+    resolution: {integrity: sha512-bsgTPoyYDnPv8ER0HqnJggXK6RyFy4PH4rtsId0V7Efa90u2+EifxytE9pZnsDgExgkARy24WUQGv9irVbTvIw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -739,26 +751,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/darwin-x64@0.19.5:
-    resolution: {integrity: sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.17.19:
-    resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/freebsd-arm64@0.18.20:
-    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+  /@esbuild/freebsd-arm64@0.19.10:
+    resolution: {integrity: sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -766,8 +760,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-arm64@0.19.5:
-    resolution: {integrity: sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==}
+  /@esbuild/freebsd-arm64@0.20.0:
+    resolution: {integrity: sha512-kQ7jYdlKS335mpGbMW5tEe3IrQFIok9r84EM3PXB8qBFJPSc6dpWfrtsC/y1pyrz82xfUIn5ZrnSHQQsd6jebQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -775,8 +769,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.17.19:
-    resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
+  /@esbuild/freebsd-x64@0.19.10:
+    resolution: {integrity: sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -784,8 +778,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.18.20:
-    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+  /@esbuild/freebsd-x64@0.20.0:
+    resolution: {integrity: sha512-uG8B0WSepMRsBNVXAQcHf9+Ko/Tr+XqmK7Ptel9HVmnykupXdS4J7ovSQUIi0tQGIndhbqWLaIL/qO/cWhXKyQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -793,26 +787,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/freebsd-x64@0.19.5:
-    resolution: {integrity: sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm64@0.17.19:
-    resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm64@0.18.20:
-    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+  /@esbuild/linux-arm64@0.19.10:
+    resolution: {integrity: sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -820,8 +796,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm64@0.19.5:
-    resolution: {integrity: sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==}
+  /@esbuild/linux-arm64@0.20.0:
+    resolution: {integrity: sha512-uTtyYAP5veqi2z9b6Gr0NUoNv9F/rOzI8tOD5jKcCvRUn7T60Bb+42NDBCWNhMjkQzI0qqwXkQGo1SY41G52nw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -829,17 +805,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.17.19:
-    resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-arm@0.18.20:
-    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+  /@esbuild/linux-arm@0.19.10:
+    resolution: {integrity: sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -847,8 +814,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-arm@0.19.5:
-    resolution: {integrity: sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==}
+  /@esbuild/linux-arm@0.20.0:
+    resolution: {integrity: sha512-2ezuhdiZw8vuHf1HKSf4TIk80naTbP9At7sOqZmdVwvvMyuoDiZB49YZKLsLOfKIr77+I40dWpHVeY5JHpIEIg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -856,8 +823,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.17.19:
-    resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
+  /@esbuild/linux-ia32@0.19.10:
+    resolution: {integrity: sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -865,8 +832,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.18.20:
-    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+  /@esbuild/linux-ia32@0.20.0:
+    resolution: {integrity: sha512-c88wwtfs8tTffPaoJ+SQn3y+lKtgTzyjkD8NgsyCtCmtoIC8RDL7PrJU05an/e9VuAke6eJqGkoMhJK1RY6z4w==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -874,26 +841,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ia32@0.19.5:
-    resolution: {integrity: sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-loong64@0.17.19:
-    resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-loong64@0.18.20:
-    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+  /@esbuild/linux-loong64@0.19.10:
+    resolution: {integrity: sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -901,8 +850,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64@0.19.5:
-    resolution: {integrity: sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==}
+  /@esbuild/linux-loong64@0.20.0:
+    resolution: {integrity: sha512-lR2rr/128/6svngnVta6JN4gxSXle/yZEZL3o4XZ6esOqhyR4wsKyfu6qXAL04S4S5CgGfG+GYZnjFd4YiG3Aw==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -910,8 +859,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.17.19:
-    resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
+  /@esbuild/linux-mips64el@0.19.10:
+    resolution: {integrity: sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -919,8 +868,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.18.20:
-    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+  /@esbuild/linux-mips64el@0.20.0:
+    resolution: {integrity: sha512-9Sycc+1uUsDnJCelDf6ZNqgZQoK1mJvFtqf2MUz4ujTxGhvCWw+4chYfDLPepMEvVL9PDwn6HrXad5yOrNzIsQ==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -928,17 +877,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-mips64el@0.19.5:
-    resolution: {integrity: sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-ppc64@0.17.19:
-    resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
+  /@esbuild/linux-ppc64@0.19.10:
+    resolution: {integrity: sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -946,8 +886,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.18.20:
-    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+  /@esbuild/linux-ppc64@0.20.0:
+    resolution: {integrity: sha512-CoWSaaAXOZd+CjbUTdXIJE/t7Oz+4g90A3VBCHLbfuc5yUQU/nFDLOzQsN0cdxgXd97lYW/psIIBdjzQIwTBGw==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -955,26 +895,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-ppc64@0.19.5:
-    resolution: {integrity: sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-riscv64@0.17.19:
-    resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-riscv64@0.18.20:
-    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+  /@esbuild/linux-riscv64@0.19.10:
+    resolution: {integrity: sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -982,8 +904,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-riscv64@0.19.5:
-    resolution: {integrity: sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==}
+  /@esbuild/linux-riscv64@0.20.0:
+    resolution: {integrity: sha512-mlb1hg/eYRJUpv8h/x+4ShgoNLL8wgZ64SUr26KwglTYnwAWjkhR2GpoKftDbPOCnodA9t4Y/b68H4J9XmmPzA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -991,17 +913,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.17.19:
-    resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-s390x@0.18.20:
-    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+  /@esbuild/linux-s390x@0.19.10:
+    resolution: {integrity: sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -1009,8 +922,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-s390x@0.19.5:
-    resolution: {integrity: sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==}
+  /@esbuild/linux-s390x@0.20.0:
+    resolution: {integrity: sha512-fgf9ubb53xSnOBqyvWEY6ukBNRl1mVX1srPNu06B6mNsNK20JfH6xV6jECzrQ69/VMiTLvHMicQR/PgTOgqJUQ==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -1018,17 +931,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.17.19:
-    resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/linux-x64@0.18.20:
-    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+  /@esbuild/linux-x64@0.19.10:
+    resolution: {integrity: sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -1036,8 +940,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-x64@0.19.5:
-    resolution: {integrity: sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==}
+  /@esbuild/linux-x64@0.20.0:
+    resolution: {integrity: sha512-H9Eu6MGse++204XZcYsse1yFHmRXEWgadk2N58O/xd50P9EvFMLJTQLg+lB4E1cF2xhLZU5luSWtGTb0l9UeSg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -1045,17 +949,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.17.19:
-    resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/netbsd-x64@0.18.20:
-    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+  /@esbuild/netbsd-x64@0.19.10:
+    resolution: {integrity: sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -1063,8 +958,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/netbsd-x64@0.19.5:
-    resolution: {integrity: sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==}
+  /@esbuild/netbsd-x64@0.20.0:
+    resolution: {integrity: sha512-lCT675rTN1v8Fo+RGrE5KjSnfY0x9Og4RN7t7lVrN3vMSjy34/+3na0q7RIfWDAj0e0rCh0OL+P88lu3Rt21MQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -1072,17 +967,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.17.19:
-    resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/openbsd-x64@0.18.20:
-    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+  /@esbuild/openbsd-x64@0.19.10:
+    resolution: {integrity: sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -1090,8 +976,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/openbsd-x64@0.19.5:
-    resolution: {integrity: sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==}
+  /@esbuild/openbsd-x64@0.20.0:
+    resolution: {integrity: sha512-HKoUGXz/TOVXKQ+67NhxyHv+aDSZf44QpWLa3I1lLvAwGq8x1k0T+e2HHSRvxWhfJrFxaaqre1+YyzQ99KixoA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -1099,8 +985,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.17.19:
-    resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
+  /@esbuild/sunos-x64@0.19.10:
+    resolution: {integrity: sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -1108,8 +994,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.18.20:
-    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+  /@esbuild/sunos-x64@0.20.0:
+    resolution: {integrity: sha512-GDwAqgHQm1mVoPppGsoq4WJwT3vhnz/2N62CzhvApFD1eJyTroob30FPpOZabN+FgCjhG+AgcZyOPIkR8dfD7g==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -1117,26 +1003,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/sunos-x64@0.19.5:
-    resolution: {integrity: sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-arm64@0.17.19:
-    resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-arm64@0.18.20:
-    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+  /@esbuild/win32-arm64@0.19.10:
+    resolution: {integrity: sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -1144,8 +1012,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-arm64@0.19.5:
-    resolution: {integrity: sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==}
+  /@esbuild/win32-arm64@0.20.0:
+    resolution: {integrity: sha512-0vYsP8aC4TvMlOQYozoksiaxjlvUcQrac+muDqj1Fxy6jh9l9CZJzj7zmh8JGfiV49cYLTorFLxg7593pGldwQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -1153,17 +1021,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.17.19:
-    resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@esbuild/win32-ia32@0.18.20:
-    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+  /@esbuild/win32-ia32@0.19.10:
+    resolution: {integrity: sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -1171,8 +1030,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-ia32@0.19.5:
-    resolution: {integrity: sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==}
+  /@esbuild/win32-ia32@0.20.0:
+    resolution: {integrity: sha512-p98u4rIgfh4gdpV00IqknBD5pC84LCub+4a3MO+zjqvU5MVXOc3hqR2UgT2jI2nh3h8s9EQxmOsVI3tyzv1iFg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -1180,8 +1039,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.17.19:
-    resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
+  /@esbuild/win32-x64@0.19.10:
+    resolution: {integrity: sha512-whqLG6Sc70AbU73fFYvuYzaE4MNMBIlR1Y/IrUeOXFrWHxBEjjbZaQ3IXIQS8wJdAzue2GwYZCjOrgrU1oUHoA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1189,8 +1048,8 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.18.20:
-    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+  /@esbuild/win32-x64@0.20.0:
+    resolution: {integrity: sha512-NgJnesu1RtWihtTtXGFMU5YSE6JyyHPMxCwBZK7a6/8d31GuSo9l0Ss7w1Jw5QnKUawG6UEehs883kcXf5fYwg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1198,38 +1057,29 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/win32-x64@0.19.5:
-    resolution: {integrity: sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.51.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.51.0
+      eslint: 8.56.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@eslint-community/regexpp@4.8.0:
-    resolution: {integrity: sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==}
+  /@eslint-community/regexpp@4.9.1:
+    resolution: {integrity: sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint/eslintrc@2.1.2:
-    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
       espree: 9.6.1
-      globals: 13.20.0
+      globals: 13.23.0
       ignore: 5.2.4
       import-fresh: 3.3.0
       js-yaml: 4.1.0
@@ -1239,16 +1089,16 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js@8.51.0:
-    resolution: {integrity: sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==}
+  /@eslint/js@8.56.0:
+    resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@humanwhocodes/config-array@0.11.11:
-    resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
+  /@humanwhocodes/config-array@0.11.13:
+    resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
+      '@humanwhocodes/object-schema': 2.0.1
       debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
@@ -1260,8 +1110,8 @@ packages:
     engines: {node: '>=12.22'}
     dev: true
 
-  /@humanwhocodes/object-schema@1.2.1:
-    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+  /@humanwhocodes/object-schema@2.0.1:
+    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
   /@hutson/parse-repository-url@5.0.0:
@@ -1293,21 +1143,13 @@ packages:
       '@sinclair/typebox': 0.27.8
     dev: true
 
-  /@jridgewell/gen-mapping@0.1.1:
-    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
-
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.20
     dev: true
 
   /@jridgewell/resolve-uri@3.1.1:
@@ -1324,14 +1166,14 @@ packages:
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.20
     dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
+  /@jridgewell/trace-mapping@0.3.20:
+    resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -1369,8 +1211,8 @@ packages:
     dev: true
     optional: true
 
-  /@puppeteer/browsers@1.7.1:
-    resolution: {integrity: sha512-nIb8SOBgDEMFY2iS2MdnUZOg2ikcYchRrBoF+wtdjieRFKR2uGRipHY/oFLo+2N6anDualyClPzGywTHRGrLfw==}
+  /@puppeteer/browsers@1.9.1:
+    resolution: {integrity: sha512-PuvK6xZzGhKPvlx3fpfdM2kYY3P/hB1URtK8wA7XUJ6prn6pp22zvJHu48th0SGcHL9SutbPHrFuQgfXTFobWA==}
     engines: {node: '>=16.3.0'}
     hasBin: true
     dependencies:
@@ -1380,13 +1222,13 @@ packages:
       proxy-agent: 6.3.1
       tar-fs: 3.0.4
       unbzip2-stream: 1.4.3
-      yargs: 17.7.1
+      yargs: 17.7.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@rollup/plugin-alias@5.0.1(rollup@3.29.4):
-    resolution: {integrity: sha512-JObvbWdOHoMy9W7SU0lvGhDtWq9PllP5mjpAy+TUslZG/WzOId9u80Hsqq1vCUn9pFJ0cxpdcnAv+QzU2zFH3Q==}
+  /@rollup/plugin-alias@5.1.0(rollup@4.9.2):
+    resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1394,11 +1236,11 @@ packages:
       rollup:
         optional: true
     dependencies:
-      rollup: 3.29.4
+      rollup: 4.9.2
       slash: 4.0.0
     dev: true
 
-  /@rollup/plugin-commonjs@25.0.7(rollup@3.29.4):
+  /@rollup/plugin-commonjs@25.0.7(rollup@4.9.2):
     resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1407,32 +1249,32 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
       commondir: 1.0.1
       estree-walker: 2.0.2
       glob: 8.1.0
       is-reference: 1.2.1
-      magic-string: 0.30.5
-      rollup: 3.29.4
+      magic-string: 0.30.6
+      rollup: 4.9.2
     dev: true
 
-  /@rollup/plugin-inject@5.0.3(rollup@3.29.4):
-    resolution: {integrity: sha512-411QlbL+z2yXpRWFXSmw/teQRMkXcAAC8aYTemc15gwJRpvEVDQwoe+N/HTFD8RFG8+88Bme9DK2V9CVm7hJdA==}
+  /@rollup/plugin-inject@5.0.5(rollup@4.9.2):
+    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
       estree-walker: 2.0.2
-      magic-string: 0.27.0
-      rollup: 3.29.4
+      magic-string: 0.30.6
+      rollup: 4.9.2
     dev: true
 
-  /@rollup/plugin-json@6.0.1(rollup@3.29.4):
-    resolution: {integrity: sha512-RgVfl5hWMkxN1h/uZj8FVESvPuBJ/uf6ly6GTj0GONnkfoBN5KC0MSz+PN2OLDgYXMhtG0mWpTrkiOjoxAIevw==}
+  /@rollup/plugin-json@6.1.0(rollup@4.9.2):
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1440,11 +1282,11 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
-      rollup: 3.29.4
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
+      rollup: 4.9.2
     dev: true
 
-  /@rollup/plugin-node-resolve@15.2.3(rollup@3.29.4):
+  /@rollup/plugin-node-resolve@15.2.3(rollup@4.9.2):
     resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1453,16 +1295,16 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
       '@types/resolve': 1.20.2
-      deepmerge: 4.3.0
+      deepmerge: 4.3.1
       is-builtin-module: 3.2.1
       is-module: 1.0.0
-      resolve: 1.22.1
-      rollup: 3.29.4
+      resolve: 1.22.8
+      rollup: 4.9.2
     dev: true
 
-  /@rollup/plugin-replace@5.0.4(rollup@3.29.4):
+  /@rollup/plugin-replace@5.0.4(rollup@4.9.2):
     resolution: {integrity: sha512-E2hmRnlh09K8HGT0rOnnri9OTh+BILGr7NVJGB30S4E3cLRn3J0xjdiyOZ74adPs4NiAMgrjUMGAZNJDBgsdmQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1471,12 +1313,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.0.4(rollup@3.29.4)
-      magic-string: 0.30.5
-      rollup: 3.29.4
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
+      magic-string: 0.30.6
+      rollup: 4.9.2
     dev: true
 
-  /@rollup/plugin-terser@0.4.4(rollup@3.29.4):
+  /@rollup/plugin-terser@0.4.4(rollup@4.9.2):
     resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -1485,107 +1327,212 @@ packages:
       rollup:
         optional: true
     dependencies:
-      rollup: 3.29.4
+      rollup: 4.9.2
       serialize-javascript: 6.0.1
-      smob: 1.4.0
-      terser: 5.22.0
+      smob: 1.4.1
+      terser: 5.27.0
     dev: true
 
-  /@rollup/pluginutils@5.0.4(rollup@3.29.4):
-    resolution: {integrity: sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==}
+  /@rollup/pluginutils@5.1.0(rollup@4.9.2):
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
       rollup:
         optional: true
     dependencies:
-      '@types/estree': 1.0.0
+      '@types/estree': 1.0.3
       estree-walker: 2.0.2
       picomatch: 2.3.1
-      rollup: 3.29.4
+      rollup: 4.9.2
     dev: true
 
-  /@rollup/pluginutils@5.0.5(rollup@3.29.4):
-    resolution: {integrity: sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.0
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-      rollup: 3.29.4
+  /@rollup/rollup-android-arm-eabi@4.9.2:
+    resolution: {integrity: sha512-RKzxFxBHq9ysZ83fn8Iduv3A283K7zPPYuhL/z9CQuyFrjwpErJx0h4aeb/bnJ+q29GRLgJpY66ceQ/Wcsn3wA==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
     dev: true
+    optional: true
 
-  /@sinclair/typebox@0.27.8:
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+  /@rollup/rollup-android-arm64@4.9.2:
+    resolution: {integrity: sha512-yZ+MUbnwf3SHNWQKJyWh88ii2HbuHCFQnAYTeeO1Nb8SyEiWASEi5dQUygt3ClHWtA9My9RQAYkjvrsZ0WK8Xg==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
     dev: true
+    optional: true
 
-  /@tootallnate/once@2.0.0:
-    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
-    engines: {node: '>= 10'}
+  /@rollup/rollup-darwin-arm64@4.9.2:
+    resolution: {integrity: sha512-vqJ/pAUh95FLc/G/3+xPqlSBgilPnauVf2EXOQCZzhZJCXDXt/5A8mH/OzU6iWhb3CNk5hPJrh8pqJUPldN5zw==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
     dev: true
+    optional: true
 
-  /@tootallnate/quickjs-emscripten@0.23.0:
-    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+  /@rollup/rollup-darwin-x64@4.9.2:
+    resolution: {integrity: sha512-otPHsN5LlvedOprd3SdfrRNhOahhVBwJpepVKUN58L0RnC29vOAej1vMEaVU6DadnpjivVsNTM5eNt0CcwTahw==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.9.2:
+    resolution: {integrity: sha512-ewG5yJSp+zYKBYQLbd1CUA7b1lSfIdo9zJShNTyc2ZP1rcPrqyZcNlsHgs7v1zhgfdS+kW0p5frc0aVqhZCiYQ==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.9.2:
+    resolution: {integrity: sha512-pL6QtV26W52aCWTG1IuFV3FMPL1m4wbsRG+qijIvgFO/VBsiXJjDPE/uiMdHBAO6YcpV4KvpKtd0v3WFbaxBtg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.9.2:
+    resolution: {integrity: sha512-On+cc5EpOaTwPSNetHXBuqylDW+765G/oqB9xGmWU3npEhCh8xu0xqHGUA+4xwZLqBbIZNcBlKSIYfkBm6ko7g==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.9.2:
+    resolution: {integrity: sha512-Wnx/IVMSZ31D/cO9HSsU46FjrPWHqtdF8+0eyZ1zIB5a6hXaZXghUKpRrC4D5DcRTZOjml2oBhXoqfGYyXKipw==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.9.2:
+    resolution: {integrity: sha512-ym5x1cj4mUAMBummxxRkI4pG5Vht1QMsJexwGP8547TZ0sox9fCLDHw9KCH9c1FO5d9GopvkaJsBIOkTKxksdw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.9.2:
+    resolution: {integrity: sha512-m0hYELHGXdYx64D6IDDg/1vOJEaiV8f1G/iO+tejvRCJNSwK4jJ15e38JQy5Q6dGkn1M/9KcyEOwqmlZ2kqaZg==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.9.2:
+    resolution: {integrity: sha512-x1CWburlbN5JjG+juenuNa4KdedBdXLjZMp56nHFSHTOsb/MI2DYiGzLtRGHNMyydPGffGId+VgjOMrcltOksA==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.9.2:
+    resolution: {integrity: sha512-VVzCB5yXR1QlfsH1Xw1zdzQ4Pxuzv+CPr5qpElpKhVxlxD3CRdfubAG9mJROl6/dmj5gVYDDWk8sC+j9BI9/kQ==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.9.2:
+    resolution: {integrity: sha512-SYRedJi+mweatroB+6TTnJYLts0L0bosg531xnQWtklOI6dezEagx4Q0qDyvRdK+qgdA3YZpjjGuPFtxBmddBA==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
     dev: true
+    optional: true
 
-  /@types/chai-subset@1.3.3:
-    resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
-    dependencies:
-      '@types/chai': 4.3.6
+  /@sinclair/typebox@0.27.8:
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
-  /@types/chai@4.3.6:
-    resolution: {integrity: sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==}
+  /@tootallnate/quickjs-emscripten@0.23.0:
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
 
-  /@types/estree@0.0.52:
-    resolution: {integrity: sha512-BZWrtCU0bMVAIliIV+HJO1f1PR41M7NKjfxrFJwwhKI1KwhwOxYw1SXg9ao+CIMt774nFuGiG6eU+udtbEI9oQ==}
+  /@types/estree@1.0.3:
+    resolution: {integrity: sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==}
     dev: true
 
-  /@types/estree@1.0.0:
-    resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
+  /@types/hash-sum@1.0.2:
+    resolution: {integrity: sha512-UP28RddqY8xcU0SCEp9YKutQICXpaAq9N8U2klqF5hegGha7KzTOL8EdhIIV3bOSGBzjEpN9bU/d+nNZBdJYVw==}
     dev: true
 
-  /@types/hash-sum@1.0.1:
-    resolution: {integrity: sha512-5JLywbPgWZVgxhAV//qTU6LPurKfQeiyw20GKZMi9V7AjHnAP4t1eNCJ1mC2L4TAicuS71MVoFYVcEM+EiR4lg==}
+  /@types/json-schema@7.0.14:
+    resolution: {integrity: sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==}
     dev: true
 
-  /@types/json-schema@7.0.11:
-    resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
+  /@types/minimist@1.2.5:
+    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
     dev: true
 
-  /@types/node@18.18.6:
-    resolution: {integrity: sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w==}
+  /@types/node@20.11.16:
+    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
+    dependencies:
+      undici-types: 5.26.5
     dev: true
 
-  /@types/normalize-package-data@2.4.1:
-    resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
+  /@types/normalize-package-data@2.4.3:
+    resolution: {integrity: sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==}
     dev: true
 
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: true
 
-  /@types/semver@7.3.13:
-    resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
+  /@types/semver@7.5.6:
+    resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
-  /@types/yauzl@2.10.0:
-    resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
+  /@types/yauzl@2.10.2:
+    resolution: {integrity: sha512-Km7XAtUIduROw7QPgvcft0lIupeG8a8rdKL8RiSyKvlE7dYY31fEn41HVuQsRFDuROA8tA4K2UVL+WdfFmErBA==}
     requiresBuild: true
     dependencies:
-      '@types/node': 18.18.6
+      '@types/node': 20.11.16
     dev: true
     optional: true
 
-  /@typescript-eslint/parser@6.8.0(eslint@8.51.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-5tNs6Bw0j6BdWuP8Fx+VH4G9fEPDxnVI7yH1IAPkQH5RUtvKwRoqdecAPdQXv4rSOADAaz1LFBZvZG7VbXivSg==}
+  /@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.9.1
+      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.18.1
+      '@typescript-eslint/type-utils': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.18.1
+      debug: 4.3.4
+      eslint: 8.56.0
+      graphemer: 1.4.0
+      ignore: 5.2.4
+      natural-compare: 1.4.0
+      semver: 7.5.4
+      ts-api-utils: 1.0.3(typescript@5.2.2)
+      typescript: 5.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0
@@ -1594,45 +1541,65 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 6.8.0
-      '@typescript-eslint/types': 6.8.0
-      '@typescript-eslint/typescript-estree': 6.8.0(typescript@5.1.6)
-      '@typescript-eslint/visitor-keys': 6.8.0
+      '@typescript-eslint/scope-manager': 6.18.1
+      '@typescript-eslint/types': 6.18.1
+      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.18.1
       debug: 4.3.4
-      eslint: 8.51.0
-      typescript: 5.1.6
+      eslint: 8.56.0
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@5.50.0:
-    resolution: {integrity: sha512-rt03kaX+iZrhssaT974BCmoUikYtZI24Vp/kwTSy841XhiYShlqoshRFDvN1FKKvU2S3gK+kcBW1EA7kNUrogg==}
+  /@typescript-eslint/scope-manager@5.62.0:
+    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.50.0
-      '@typescript-eslint/visitor-keys': 5.50.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
     dev: true
 
-  /@typescript-eslint/scope-manager@6.8.0:
-    resolution: {integrity: sha512-xe0HNBVwCph7rak+ZHcFD6A+q50SMsFwcmfdjs9Kz4qDh5hWhaPhFjRs/SODEhroBI5Ruyvyz9LfwUJ624O40g==}
+  /@typescript-eslint/scope-manager@6.18.1:
+    resolution: {integrity: sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.8.0
-      '@typescript-eslint/visitor-keys': 6.8.0
+      '@typescript-eslint/types': 6.18.1
+      '@typescript-eslint/visitor-keys': 6.18.1
+    dev: true
+
+  /@typescript-eslint/type-utils@6.18.1(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
+      debug: 4.3.4
+      eslint: 8.56.0
+      ts-api-utils: 1.0.3(typescript@5.2.2)
+      typescript: 5.2.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /@typescript-eslint/types@5.50.0:
-    resolution: {integrity: sha512-atruOuJpir4OtyNdKahiHZobPKFvZnBnfDiyEaBf6d9vy9visE7gDjlmhl+y29uxZ2ZDgvXijcungGFjGGex7w==}
+  /@typescript-eslint/types@5.62.0:
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/types@6.8.0:
-    resolution: {integrity: sha512-p5qOxSum7W3k+llc7owEStXlGmSl8FcGvhYt8Vjy7FqEnmkCVlM3P57XQEGj58oqaBWDQXbJDZxwUWMS/EAPNQ==}
+  /@typescript-eslint/types@6.18.1:
+    resolution: {integrity: sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.50.0(typescript@5.1.6):
-    resolution: {integrity: sha512-Gq4zapso+OtIZlv8YNAStFtT6d05zyVCK7Fx3h5inlLBx2hWuc/0465C2mg/EQDDU2LKe52+/jN4f0g9bd+kow==}
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.2.2):
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -1640,20 +1607,20 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.50.0
-      '@typescript-eslint/visitor-keys': 5.50.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
-      tsutils: 3.21.0(typescript@5.1.6)
-      typescript: 5.1.6
+      tsutils: 3.21.0(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.8.0(typescript@5.1.6):
-    resolution: {integrity: sha512-ISgV0lQ8XgW+mvv5My/+iTUdRmGspducmQcDw5JxznasXNnZn3SKNrTRuMsEXv+V/O+Lw9AGcQCfVaOPCAk/Zg==}
+  /@typescript-eslint/typescript-estree@6.18.1(typescript@5.2.2):
+    resolution: {integrity: sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
@@ -1661,118 +1628,145 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 6.8.0
-      '@typescript-eslint/visitor-keys': 6.8.0
+      '@typescript-eslint/types': 6.18.1
+      '@typescript-eslint/visitor-keys': 6.18.1
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
+      minimatch: 9.0.3
       semver: 7.5.4
-      ts-api-utils: 1.0.2(typescript@5.1.6)
-      typescript: 5.1.6
+      ts-api-utils: 1.0.3(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.50.0(eslint@8.51.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-v/AnUFImmh8G4PH0NDkf6wA8hujNNcrwtecqW4vtQ1UOSNBaZl49zP1SHoZ/06e+UiwzHpgb5zP5+hwlYYWYAw==}
+  /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@types/json-schema': 7.0.11
-      '@types/semver': 7.3.13
-      '@typescript-eslint/scope-manager': 5.50.0
-      '@typescript-eslint/types': 5.50.0
-      '@typescript-eslint/typescript-estree': 5.50.0(typescript@5.1.6)
-      eslint: 8.51.0
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.14
+      '@types/semver': 7.5.6
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2)
+      eslint: 8.56.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0(eslint@8.51.0)
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys@5.50.0:
-    resolution: {integrity: sha512-cdMeD9HGu6EXIeGOh2yVW6oGf9wq8asBgZx7nsR/D36gTfQ0odE5kcRYe5M81vjEFAcPeugXrHg78Imu55F6gg==}
+  /@typescript-eslint/utils@6.18.1(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.14
+      '@types/semver': 7.5.6
+      '@typescript-eslint/scope-manager': 6.18.1
+      '@typescript-eslint/types': 6.18.1
+      '@typescript-eslint/typescript-estree': 6.18.1(typescript@5.2.2)
+      eslint: 8.56.0
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@5.62.0:
+    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.50.0
+      '@typescript-eslint/types': 5.62.0
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.8.0:
-    resolution: {integrity: sha512-oqAnbA7c+pgOhW2OhGvxm0t1BULX5peQI/rLsNDpGM78EebV3C9IGbX5HNZabuZ6UQrYveCLjKo8Iy/lLlBkkg==}
+  /@typescript-eslint/visitor-keys@6.18.1:
+    resolution: {integrity: sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 6.8.0
+      '@typescript-eslint/types': 6.18.1
       eslint-visitor-keys: 3.4.3
     dev: true
 
-  /@vitejs/plugin-vue@4.4.0(vite@4.5.0)(vue@packages+vue):
-    resolution: {integrity: sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
+
+  /@vitejs/plugin-vue@5.0.3(vite@5.0.12)(vue@packages+vue):
+    resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^4.0.0
+      vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0(@types/node@18.18.6)(terser@5.22.0)
+      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
       vue: link:packages/vue
     dev: true
 
-  /@vitest/coverage-istanbul@0.34.4(vitest@0.34.4):
-    resolution: {integrity: sha512-jJiN+U5drYrv1fU39T8jOVWc3RklYkNeTR7UyiVD8fa+Tbav9pAxq02pti93OPZIDoXwwg+RhFAuRuAz///rkQ==}
+  /@vitest/coverage-istanbul@1.2.2(vitest@1.2.2):
+    resolution: {integrity: sha512-tJybwO8JT4H9ANz0T0/tJ1M5g3BkuHKYF1w5YO3z9sAiHBdGANrxN9c5lomJx1WSnLzCxQR5xxlJ4TLKbzrR3w==}
     peerDependencies:
-      vitest: '>=0.32.0 <1'
+      vitest: ^1.0.0
     dependencies:
-      istanbul-lib-coverage: 3.2.0
-      istanbul-lib-instrument: 6.0.0
+      debug: 4.3.4
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-instrument: 6.0.1
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.5
+      istanbul-reports: 3.1.6
+      magicast: 0.3.3
       picocolors: 1.0.0
       test-exclude: 6.0.0
-      vitest: 0.34.4(jsdom@22.1.0)(terser@5.22.0)
+      vitest: 1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitest/expect@0.34.4:
-    resolution: {integrity: sha512-XlMKX8HyYUqB8dsY8Xxrc64J2Qs9pKMt2Z8vFTL4mBWXJsg4yoALHzJfDWi8h5nkO4Zua4zjqtapQ/IluVkSnA==}
+  /@vitest/expect@1.2.2:
+    resolution: {integrity: sha512-3jpcdPAD7LwHUUiT2pZTj2U82I2Tcgg2oVPvKxhn6mDI2On6tfvPQTjAI4628GUGDZrCm4Zna9iQHm5cEexOAg==}
     dependencies:
-      '@vitest/spy': 0.34.4
-      '@vitest/utils': 0.34.4
-      chai: 4.3.7
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      chai: 4.3.10
     dev: true
 
-  /@vitest/runner@0.34.4:
-    resolution: {integrity: sha512-hwwdB1StERqUls8oV8YcpmTIpVeJMe4WgYuDongVzixl5hlYLT2G8afhcdADeDeqCaAmZcSgLTLtqkjPQF7x+w==}
+  /@vitest/runner@1.2.2:
+    resolution: {integrity: sha512-JctG7QZ4LSDXr5CsUweFgcpEvrcxOV1Gft7uHrvkQ+fsAVylmWQvnaAr/HDp3LAH1fztGMQZugIheTWjaGzYIg==}
     dependencies:
-      '@vitest/utils': 0.34.4
-      p-limit: 4.0.0
+      '@vitest/utils': 1.2.2
+      p-limit: 5.0.0
       pathe: 1.1.1
     dev: true
 
-  /@vitest/snapshot@0.34.4:
-    resolution: {integrity: sha512-GCsh4coc3YUSL/o+BPUo7lHQbzpdttTxL6f4q0jRx2qVGoYz/cyTRDJHbnwks6TILi6560bVWoBpYC10PuTLHw==}
+  /@vitest/snapshot@1.2.2:
+    resolution: {integrity: sha512-SmGY4saEw1+bwE1th6S/cZmPxz/Q4JWsl7LvbQIky2tKE35US4gd0Mjzqfr84/4OD0tikGWaWdMja/nWL5NIPA==}
     dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.6
       pathe: 1.1.1
-      pretty-format: 29.6.3
+      pretty-format: 29.7.0
     dev: true
 
-  /@vitest/spy@0.34.4:
-    resolution: {integrity: sha512-PNU+fd7DUPgA3Ya924b1qKuQkonAW6hL7YUjkON3wmBwSTIlhOSpy04SJ0NrRsEbrXgMMj6Morh04BMf8k+w0g==}
+  /@vitest/spy@1.2.2:
+    resolution: {integrity: sha512-k9Gcahssw8d7X3pSLq3e3XEu/0L78mUkCjivUqCQeXJm9clfXR/Td8+AP+VC1O6fKPIDLcHDTAmBOINVuv6+7g==}
     dependencies:
-      tinyspy: 2.1.1
+      tinyspy: 2.2.0
     dev: true
 
-  /@vitest/utils@0.34.4:
-    resolution: {integrity: sha512-yR2+5CHhp/K4ySY0Qtd+CAL9f5Yh1aXrKfAT42bq6CtlGPh92jIDDDSg7ydlRow1CP+dys4TrOrbELOyNInHSg==}
+  /@vitest/utils@1.2.2:
+    resolution: {integrity: sha512-WKITBHLsBHlpjnDQahr+XK6RE7MiAsgrIkr0pGhQ9ygoxBfUeG0lUG5iLlzqjmKSlBv3+j5EGsriBzh+C3Tq9g==}
     dependencies:
       diff-sequences: 29.6.3
-      loupe: 2.3.6
-      pretty-format: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
     dev: true
 
   /@vue/consolidate@0.17.3:
@@ -1780,8 +1774,13 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@2.5.8:
-    resolution: {integrity: sha512-IvOlNhka4VKDQZS9FIceFFWyPibzqAUHyjHOoe8cMZmeP7H3H7mfMqvzQ0l1wjMAqqeEcgpFhSzMWsTEL4XZeA==}
+  /@vue/consolidate@1.0.0:
+    resolution: {integrity: sha512-oTyUE+QHIzLw2PpV14GD/c7EohDyP64xCniWTcqcEmTd699eFqTIwOmtDYjcO1j3QgdXoJEoWv1/cCdLrRoOfg==}
+    engines: {node: '>= 0.12.0'}
+    dev: true
+
+  /@vue/repl@3.1.1:
+    resolution: {integrity: sha512-9nJImsUeywU2MTqvzf4ueqWC49UC3LVXVPk1HmoNnLVumfWXv+w5ytuSA//fxb/N/O5vCqE0UV63/dYvnCZpwQ==}
     dev: false
 
   /@zeit/schemas@2.29.0:
@@ -1796,10 +1795,6 @@ packages:
       through: 2.3.8
     dev: true
 
-  /abab@2.0.6:
-    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    dev: true
-
   /accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -1816,8 +1811,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.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
     engines: {node: '>=0.4.0'}
     dev: true
 
@@ -1837,15 +1832,6 @@ packages:
     resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==}
     dev: true
 
-  /agent-base@6.0.2:
-    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
-    engines: {node: '>= 6.0.0'}
-    dependencies:
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
     engines: {node: '>= 14'}
@@ -1884,11 +1870,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /ansi-escapes@5.0.0:
-    resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
-    engines: {node: '>=12'}
+  /ansi-escapes@6.2.0:
+    resolution: {integrity: sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==}
+    engines: {node: '>=14.16'}
     dependencies:
-      type-fest: 1.4.0
+      type-fest: 3.13.1
     dev: true
 
   /ansi-regex@5.0.1:
@@ -1904,6 +1890,7 @@ packages:
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
+    requiresBuild: true
     dependencies:
       color-convert: 1.9.3
     dev: true
@@ -1977,11 +1964,6 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
-  /available-typed-arrays@1.0.5:
-    resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
   /b4a@1.6.4:
     resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==}
     dev: true
@@ -1990,7 +1972,7 @@ packages:
     resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
     engines: {node: '>= 10.0.0'}
     dependencies:
-      '@babel/types': 7.23.0
+      '@babel/types': 7.23.9
     dev: true
 
   /balanced-match@1.0.2:
@@ -2006,6 +1988,12 @@ packages:
     engines: {node: '>=10.0.0'}
     dev: true
 
+  /bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+    dependencies:
+      require-from-string: 2.0.2
+    dev: true
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -2045,15 +2033,15 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
+  /browserslist@4.22.1:
+    resolution: {integrity: sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001538
-      electron-to-chromium: 1.4.525
+      caniuse-lite: 1.0.30001551
+      electron-to-chromium: 1.4.561
       node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
+      update-browserslist-db: 1.0.13(browserslist@4.22.1)
     dev: true
 
   /buffer-crc32@0.2.13:
@@ -2086,11 +2074,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /call-bind@1.0.2:
-    resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
+  /call-bind@1.0.5:
+    resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==}
     dependencies:
-      function-bind: 1.1.1
-      get-intrinsic: 1.2.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.1
+      set-function-length: 1.1.1
     dev: true
 
   /callsites@3.1.0:
@@ -2103,19 +2092,19 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /caniuse-lite@1.0.30001538:
-    resolution: {integrity: sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==}
+  /caniuse-lite@1.0.30001551:
+    resolution: {integrity: sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==}
     dev: true
 
-  /chai@4.3.7:
-    resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
+  /chai@4.3.10:
+    resolution: {integrity: sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==}
     engines: {node: '>=4'}
     dependencies:
       assertion-error: 1.1.0
-      check-error: 1.0.2
+      check-error: 1.0.3
       deep-eql: 4.1.3
-      get-func-name: 2.0.0
-      loupe: 2.3.6
+      get-func-name: 2.0.2
+      loupe: 2.3.7
       pathval: 1.1.1
       type-detect: 4.0.8
     dev: true
@@ -2130,6 +2119,7 @@ packages:
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
+    requiresBuild: true
     dependencies:
       ansi-styles: 3.2.1
       escape-string-regexp: 1.0.5
@@ -2160,8 +2150,10 @@ packages:
       is-regex: 1.1.4
     dev: true
 
-  /check-error@1.0.2:
-    resolution: {integrity: sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==}
+  /check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+    dependencies:
+      get-func-name: 2.0.2
     dev: true
 
   /chokidar@3.5.3:
@@ -2179,13 +2171,14 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /chromium-bidi@0.4.26(devtools-protocol@0.0.1159816):
-    resolution: {integrity: sha512-lukBGfogAI4T0y3acc86RaacqgKQve47/8pV2c+Hr1PjcICj2K4OkL3qfX3qrqxxnd4ddurFC0WBA3VCQqYeUQ==}
+  /chromium-bidi@0.5.8(devtools-protocol@0.0.1232444):
+    resolution: {integrity: sha512-blqh+1cEQbHBKmok3rVJkBlBxt9beKBgOsxbFgs7UJcoVbbeZ+K7+6liAsjgpc8l1Xd55cQUy14fXZdGSb4zIw==}
     peerDependencies:
       devtools-protocol: '*'
     dependencies:
-      devtools-protocol: 0.0.1159816
+      devtools-protocol: 0.0.1232444
       mitt: 3.0.1
+      urlpattern-polyfill: 10.0.0
     dev: true
 
   /cli-boxes@3.0.0:
@@ -2200,12 +2193,12 @@ packages:
       restore-cursor: 4.0.0
     dev: true
 
-  /cli-truncate@3.1.0:
-    resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  /cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
     dependencies:
       slice-ansi: 5.0.0
-      string-width: 5.1.2
+      string-width: 7.0.0
     dev: true
 
   /clipboardy@3.0.0:
@@ -2228,6 +2221,7 @@ packages:
 
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    requiresBuild: true
     dependencies:
       color-name: 1.1.3
     dev: true
@@ -2241,6 +2235,7 @@ packages:
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    requiresBuild: true
     dev: true
 
   /color-name@1.1.4:
@@ -2301,14 +2296,14 @@ packages:
     dev: true
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
   /constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
     dependencies:
-      '@babel/parser': 7.23.0
-      '@babel/types': 7.23.0
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
     dev: true
 
   /content-disposition@0.5.2:
@@ -2405,7 +2400,7 @@ packages:
     hasBin: true
     dependencies:
       conventional-commits-filter: 4.0.0
-      handlebars: 4.7.7
+      handlebars: 4.7.8
       json-stringify-safe: 5.0.1
       meow: 12.1.1
       semver: 7.5.4
@@ -2453,8 +2448,8 @@ packages:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
 
-  /cosmiconfig@8.3.5(typescript@5.1.6):
-    resolution: {integrity: sha512-A5Xry3xfS96wy2qbiLkQLAg4JUrR2wvfybxj6yqLmrUfMAvhS3MZxIP2oQn0grgYIvJqzpeTEWu4vK0t+12NNw==}
+  /cosmiconfig@9.0.0(typescript@5.2.2):
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
       typescript: '>=4.9.5'
@@ -2462,11 +2457,11 @@ packages:
       typescript:
         optional: true
     dependencies:
+      env-paths: 2.2.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       parse-json: 5.2.0
-      path-type: 4.0.0
-      typescript: 5.1.6
+      typescript: 5.2.2
     dev: true
 
   /cross-fetch@4.0.0:
@@ -2477,17 +2472,6 @@ packages:
       - encoding
     dev: true
 
-  /cross-spawn@6.0.5:
-    resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
-    engines: {node: '>=4.8'}
-    dependencies:
-      nice-try: 1.0.5
-      path-key: 2.0.1
-      semver: 5.7.1
-      shebang-command: 1.2.0
-      which: 1.3.1
-    dev: true
-
   /cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -2497,21 +2481,29 @@ packages:
       which: 2.0.2
     dev: true
 
+  /css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.0.2
+    dev: true
+
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
     dev: true
 
-  /cssstyle@3.0.0:
-    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
-    engines: {node: '>=14'}
+  /cssstyle@4.0.1:
+    resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==}
+    engines: {node: '>=18'}
     dependencies:
       rrweb-cssom: 0.6.0
     dev: true
 
-  /csstype@3.1.2:
-    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
     dev: false
 
   /dargs@8.1.0:
@@ -2519,18 +2511,17 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /data-uri-to-buffer@5.0.1:
-    resolution: {integrity: sha512-a9l6T1qqDogvvnw0nKlfZzqsyikEBZBClF39V3TFoKhDtGBqHu2HkuomJc02j5zft8zrUaXEuoicLeW54RkzPg==}
+  /data-uri-to-buffer@6.0.1:
+    resolution: {integrity: sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg==}
     engines: {node: '>= 14'}
     dev: true
 
-  /data-urls@4.0.0:
-    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
-    engines: {node: '>=14'}
+  /data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
     dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 12.0.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.0.0
     dev: true
 
   /debug@2.6.9:
@@ -2544,6 +2535,17 @@ packages:
       ms: 2.0.0
     dev: true
 
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -2576,17 +2578,18 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
-  /deepmerge@4.3.0:
-    resolution: {integrity: sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==}
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /define-properties@1.1.4:
-    resolution: {integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==}
+  /define-data-property@1.1.1:
+    resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==}
     engines: {node: '>= 0.4'}
     dependencies:
+      get-intrinsic: 1.2.1
+      gopd: 1.0.1
       has-property-descriptors: 1.0.0
-      object-keys: 1.1.1
     dev: true
 
   /degenerator@5.0.1:
@@ -2603,8 +2606,8 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
-  /devtools-protocol@0.0.1159816:
-    resolution: {integrity: sha512-2cZlHxC5IlgkIWe2pSDmCrDiTzbSJWywjbDDnupOImEBcG31CQgBLV8wWE+5t+C4rimcjHsbzy7CBzf9oFjboA==}
+  /devtools-protocol@0.0.1232444:
+    resolution: {integrity: sha512-pM27vqEfxSxRkTMnF+XCmxSEb6duO5R+t8A9DEEJgy4Wz2RVanje2mmj99B6A3zv2r/qGfYlOvYznUhuokizmg==}
     dev: true
 
   /diff-sequences@29.6.3:
@@ -2630,13 +2633,6 @@ packages:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
     dev: true
 
-  /domexception@4.0.0:
-    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
-    engines: {node: '>=12'}
-    dependencies:
-      webidl-conversions: 7.0.0
-    dev: true
-
   /dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -2648,8 +2644,12 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
-  /electron-to-chromium@1.4.525:
-    resolution: {integrity: sha512-GIZ620hDK4YmIqAWkscG4W6RwY6gOx1y5J6f4JUQwctiJrqH2oxZYU4mXHi35oV32tr630UcepBzSBGJ/WYcZA==}
+  /electron-to-chromium@1.4.561:
+    resolution: {integrity: sha512-eS5t4ulWOBfVHdq9SW2dxEaFarj1lPjvJ8PaYMOjY0DecBaj/t4ARziL2IPpDr4atyWwjLFGQ2vo/VCgQFezVQ==}
+    dev: true
+
+  /emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
     dev: true
 
   /emoji-regex@8.0.0:
@@ -2674,9 +2674,13 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
-  /entities@4.4.0:
-    resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
+
+  /env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
     dev: true
 
   /error-ex@1.3.2:
@@ -2685,165 +2689,80 @@ packages:
       is-arrayish: 0.2.1
     dev: true
 
-  /es-abstract@1.21.1:
-    resolution: {integrity: sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      es-set-tostringtag: 2.0.1
-      es-to-primitive: 1.2.1
-      function-bind: 1.1.1
-      function.prototype.name: 1.1.5
-      get-intrinsic: 1.2.0
-      get-symbol-description: 1.0.0
-      globalthis: 1.0.3
-      gopd: 1.0.1
-      has: 1.0.3
-      has-property-descriptors: 1.0.0
-      has-proto: 1.0.1
-      has-symbols: 1.0.3
-      internal-slot: 1.0.4
-      is-array-buffer: 3.0.1
-      is-callable: 1.2.7
-      is-negative-zero: 2.0.2
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.2
-      is-string: 1.0.7
-      is-typed-array: 1.1.10
-      is-weakref: 1.0.2
-      object-inspect: 1.12.3
-      object-keys: 1.1.1
-      object.assign: 4.1.4
-      regexp.prototype.flags: 1.4.3
-      safe-regex-test: 1.0.0
-      string.prototype.trimend: 1.0.6
-      string.prototype.trimstart: 1.0.6
-      typed-array-length: 1.0.4
-      unbox-primitive: 1.0.2
-      which-typed-array: 1.1.9
-    dev: true
-
   /es-module-lexer@1.3.1:
     resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}
     dev: true
 
-  /es-set-tostringtag@2.0.1:
-    resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.0
-      has: 1.0.3
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /es-to-primitive@1.2.1:
-    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.0.5
-      is-symbol: 1.0.4
-    dev: true
-
-  /esbuild-plugin-polyfill-node@0.3.0(esbuild@0.19.5):
+  /esbuild-plugin-polyfill-node@0.3.0(esbuild@0.20.0):
     resolution: {integrity: sha512-SHG6CKUfWfYyYXGpW143NEZtcVVn8S/WHcEOxk62LuDXnY4Zpmc+WmxJKN6GMTgTClXJXhEM5KQlxKY6YjbucQ==}
     peerDependencies:
       esbuild: '*'
     dependencies:
       '@jspm/core': 2.0.1
-      esbuild: 0.19.5
+      esbuild: 0.20.0
       import-meta-resolve: 3.0.0
     dev: true
 
-  /esbuild@0.17.19:
-    resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.17.19
-      '@esbuild/android-arm64': 0.17.19
-      '@esbuild/android-x64': 0.17.19
-      '@esbuild/darwin-arm64': 0.17.19
-      '@esbuild/darwin-x64': 0.17.19
-      '@esbuild/freebsd-arm64': 0.17.19
-      '@esbuild/freebsd-x64': 0.17.19
-      '@esbuild/linux-arm': 0.17.19
-      '@esbuild/linux-arm64': 0.17.19
-      '@esbuild/linux-ia32': 0.17.19
-      '@esbuild/linux-loong64': 0.17.19
-      '@esbuild/linux-mips64el': 0.17.19
-      '@esbuild/linux-ppc64': 0.17.19
-      '@esbuild/linux-riscv64': 0.17.19
-      '@esbuild/linux-s390x': 0.17.19
-      '@esbuild/linux-x64': 0.17.19
-      '@esbuild/netbsd-x64': 0.17.19
-      '@esbuild/openbsd-x64': 0.17.19
-      '@esbuild/sunos-x64': 0.17.19
-      '@esbuild/win32-arm64': 0.17.19
-      '@esbuild/win32-ia32': 0.17.19
-      '@esbuild/win32-x64': 0.17.19
-    dev: true
-
-  /esbuild@0.18.20:
-    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+  /esbuild@0.19.10:
+    resolution: {integrity: sha512-S1Y27QGt/snkNYrRcswgRFqZjaTG5a5xM3EQo97uNBnH505pdzSNe/HLBq1v0RO7iK/ngdbhJB6mDAp0OK+iUA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/android-arm': 0.18.20
-      '@esbuild/android-arm64': 0.18.20
-      '@esbuild/android-x64': 0.18.20
-      '@esbuild/darwin-arm64': 0.18.20
-      '@esbuild/darwin-x64': 0.18.20
-      '@esbuild/freebsd-arm64': 0.18.20
-      '@esbuild/freebsd-x64': 0.18.20
-      '@esbuild/linux-arm': 0.18.20
-      '@esbuild/linux-arm64': 0.18.20
-      '@esbuild/linux-ia32': 0.18.20
-      '@esbuild/linux-loong64': 0.18.20
-      '@esbuild/linux-mips64el': 0.18.20
-      '@esbuild/linux-ppc64': 0.18.20
-      '@esbuild/linux-riscv64': 0.18.20
-      '@esbuild/linux-s390x': 0.18.20
-      '@esbuild/linux-x64': 0.18.20
-      '@esbuild/netbsd-x64': 0.18.20
-      '@esbuild/openbsd-x64': 0.18.20
-      '@esbuild/sunos-x64': 0.18.20
-      '@esbuild/win32-arm64': 0.18.20
-      '@esbuild/win32-ia32': 0.18.20
-      '@esbuild/win32-x64': 0.18.20
-    dev: true
-
-  /esbuild@0.19.5:
-    resolution: {integrity: sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==}
+      '@esbuild/aix-ppc64': 0.19.10
+      '@esbuild/android-arm': 0.19.10
+      '@esbuild/android-arm64': 0.19.10
+      '@esbuild/android-x64': 0.19.10
+      '@esbuild/darwin-arm64': 0.19.10
+      '@esbuild/darwin-x64': 0.19.10
+      '@esbuild/freebsd-arm64': 0.19.10
+      '@esbuild/freebsd-x64': 0.19.10
+      '@esbuild/linux-arm': 0.19.10
+      '@esbuild/linux-arm64': 0.19.10
+      '@esbuild/linux-ia32': 0.19.10
+      '@esbuild/linux-loong64': 0.19.10
+      '@esbuild/linux-mips64el': 0.19.10
+      '@esbuild/linux-ppc64': 0.19.10
+      '@esbuild/linux-riscv64': 0.19.10
+      '@esbuild/linux-s390x': 0.19.10
+      '@esbuild/linux-x64': 0.19.10
+      '@esbuild/netbsd-x64': 0.19.10
+      '@esbuild/openbsd-x64': 0.19.10
+      '@esbuild/sunos-x64': 0.19.10
+      '@esbuild/win32-arm64': 0.19.10
+      '@esbuild/win32-ia32': 0.19.10
+      '@esbuild/win32-x64': 0.19.10
+    dev: true
+
+  /esbuild@0.20.0:
+    resolution: {integrity: sha512-6iwE3Y2RVYCME1jLpBqq7LQWK3MW6vjV2bZy6gt/WrqkY+WE74Spyc0ThAOYpMtITvnjX09CrC6ym7A/m9mebA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      '@esbuild/android-arm': 0.19.5
-      '@esbuild/android-arm64': 0.19.5
-      '@esbuild/android-x64': 0.19.5
-      '@esbuild/darwin-arm64': 0.19.5
-      '@esbuild/darwin-x64': 0.19.5
-      '@esbuild/freebsd-arm64': 0.19.5
-      '@esbuild/freebsd-x64': 0.19.5
-      '@esbuild/linux-arm': 0.19.5
-      '@esbuild/linux-arm64': 0.19.5
-      '@esbuild/linux-ia32': 0.19.5
-      '@esbuild/linux-loong64': 0.19.5
-      '@esbuild/linux-mips64el': 0.19.5
-      '@esbuild/linux-ppc64': 0.19.5
-      '@esbuild/linux-riscv64': 0.19.5
-      '@esbuild/linux-s390x': 0.19.5
-      '@esbuild/linux-x64': 0.19.5
-      '@esbuild/netbsd-x64': 0.19.5
-      '@esbuild/openbsd-x64': 0.19.5
-      '@esbuild/sunos-x64': 0.19.5
-      '@esbuild/win32-arm64': 0.19.5
-      '@esbuild/win32-ia32': 0.19.5
-      '@esbuild/win32-x64': 0.19.5
+      '@esbuild/aix-ppc64': 0.20.0
+      '@esbuild/android-arm': 0.20.0
+      '@esbuild/android-arm64': 0.20.0
+      '@esbuild/android-x64': 0.20.0
+      '@esbuild/darwin-arm64': 0.20.0
+      '@esbuild/darwin-x64': 0.20.0
+      '@esbuild/freebsd-arm64': 0.20.0
+      '@esbuild/freebsd-x64': 0.20.0
+      '@esbuild/linux-arm': 0.20.0
+      '@esbuild/linux-arm64': 0.20.0
+      '@esbuild/linux-ia32': 0.20.0
+      '@esbuild/linux-loong64': 0.20.0
+      '@esbuild/linux-mips64el': 0.20.0
+      '@esbuild/linux-ppc64': 0.20.0
+      '@esbuild/linux-riscv64': 0.20.0
+      '@esbuild/linux-s390x': 0.20.0
+      '@esbuild/linux-x64': 0.20.0
+      '@esbuild/netbsd-x64': 0.20.0
+      '@esbuild/openbsd-x64': 0.20.0
+      '@esbuild/sunos-x64': 0.20.0
+      '@esbuild/win32-arm64': 0.20.0
+      '@esbuild/win32-ia32': 0.20.0
+      '@esbuild/win32-x64': 0.20.0
     dev: true
 
   /escalade@3.1.1:
@@ -2854,6 +2773,7 @@ packages:
   /escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
+    requiresBuild: true
     dev: true
 
   /escape-string-regexp@4.0.0:
@@ -2873,8 +2793,74 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /eslint-plugin-jest@27.4.2(eslint@8.51.0)(typescript@5.1.6):
-    resolution: {integrity: sha512-3Nfvv3wbq2+PZlRTf2oaAWXWwbdBejFRBR2O8tAO67o+P8zno+QGbcDYaAXODlreXVg+9gvWhKKmG2rgfb8GEg==}
+  /eslint-define-config@1.24.1:
+    resolution: {integrity: sha512-o36vBhPSWyIQlHoMqGhhcGmOOm2A2ccBVIdLTG/AWdm9YmjpsLpf+5ntf9LlHR6dduLREgxtGwvwPwSt7vnXJg==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>= 8.6.0'}
+    dev: true
+
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.18.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0):
+    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.2.2)
+      debug: 3.2.7
+      eslint: 8.56.0
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-i@2.29.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0):
+    resolution: {integrity: sha512-ORizX37MelIWLbMyqI7hi8VJMf7A0CskMmYkB+lkCX3aF4pkGV7kwx5bSEb4qx7Yce2rAf9s34HqDRPjGRZPNQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: ^7.2.0 || ^8
+    dependencies:
+      debug: 4.3.4
+      doctrine: 3.0.0
+      eslint: 8.56.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.18.1)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
+      get-tsconfig: 4.7.2
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jest@27.6.3(@typescript-eslint/eslint-plugin@6.18.1)(eslint@8.56.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-+YsJFVH6R+tOiO3gCJon5oqn4KWc+mDq2leudk8mrp8RFubLOo9CVyi3cib4L7XMpxExmkmBZQTPDYVBzgpgOA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0
@@ -2886,8 +2872,9 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.50.0(eslint@8.51.0)(typescript@5.1.6)
-      eslint: 8.51.0
+      '@typescript-eslint/eslint-plugin': 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.2.2)
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.2.2)
+      eslint: 8.56.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -2909,38 +2896,24 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils@3.0.0(eslint@8.51.0):
-    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
-    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
-    peerDependencies:
-      eslint: '>=5'
-    dependencies:
-      eslint: 8.51.0
-      eslint-visitor-keys: 2.1.0
-    dev: true
-
-  /eslint-visitor-keys@2.1.0:
-    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
-    engines: {node: '>=10'}
-    dev: true
-
   /eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint@8.51.0:
-    resolution: {integrity: sha512-2WuxRZBrlwnXi+/vFSJyjMqrNjtJqiasMzehF0shoLaW7DzS3/9Yvrmq5JiT66+pNjiX4UBnLDiKHcWAr/OInA==}
+  /eslint@8.56.0:
+    resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.51.0)
-      '@eslint-community/regexpp': 4.8.0
-      '@eslint/eslintrc': 2.1.2
-      '@eslint/js': 8.51.0
-      '@humanwhocodes/config-array': 0.11.11
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@eslint-community/regexpp': 4.9.1
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.56.0
+      '@humanwhocodes/config-array': 0.11.13
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
@@ -2956,7 +2929,7 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.20.0
+      globals: 13.23.0
       graphemer: 1.4.0
       ignore: 5.2.4
       imurmurhash: 0.1.4
@@ -3017,6 +2990,12 @@ packages:
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  /estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.3
+    dev: true
+
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -3065,7 +3044,7 @@ packages:
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
-      '@types/yauzl': 2.10.0
+      '@types/yauzl': 2.10.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3078,8 +3057,8 @@ packages:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
     dev: true
 
-  /fast-glob@3.2.12:
-    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
+  /fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -3119,7 +3098,7 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flat-cache: 3.0.4
+      flat-cache: 3.1.1
     dev: true
 
   /file-saver@2.0.5:
@@ -3149,22 +3128,17 @@ packages:
       path-exists: 5.0.0
     dev: true
 
-  /flat-cache@3.0.4:
-    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  /flat-cache@3.1.1:
+    resolution: {integrity: sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==}
+    engines: {node: '>=12.0.0'}
     dependencies:
-      flatted: 3.2.7
+      flatted: 3.2.9
+      keyv: 4.5.4
       rimraf: 3.0.2
     dev: true
 
-  /flatted@3.2.7:
-    resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
-    dev: true
-
-  /for-each@0.3.3:
-    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
-    dependencies:
-      is-callable: 1.2.7
+  /flatted@3.2.9:
+    resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
     dev: true
 
   /foreground-child@3.1.1:
@@ -3188,7 +3162,7 @@ packages:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
     engines: {node: '>=6 <7 || >=8'}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jsonfile: 4.0.0
       universalify: 0.1.2
     dev: true
@@ -3205,22 +3179,8 @@ packages:
     dev: true
     optional: true
 
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true
-
-  /function.prototype.name@1.1.5:
-    resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.21.1
-      functions-have-names: 1.2.3
-    dev: true
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
     dev: true
 
   /generic-names@4.0.0:
@@ -3239,15 +3199,21 @@ packages:
     engines: {node: 6.* || 8.* || >= 10.*}
     dev: true
 
-  /get-func-name@2.0.0:
-    resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
+  /get-east-asian-width@1.2.0:
+    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
     dev: true
 
-  /get-intrinsic@1.2.0:
-    resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==}
+  /get-intrinsic@1.2.1:
+    resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
     dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
+      function-bind: 1.1.2
+      has: 1.0.4
+      has-proto: 1.0.1
       has-symbols: 1.0.3
     dev: true
 
@@ -3268,26 +3234,18 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
-  /get-symbol-description@1.0.0:
-    resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.0
-    dev: true
-
   /get-tsconfig@4.7.2:
     resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
     dependencies:
       resolve-pkg-maps: 1.0.0
     dev: true
 
-  /get-uri@6.0.1:
-    resolution: {integrity: sha512-7ZqONUVqaabogsYNWlYj0t3YZaL6dhuEueZXGF+/YVmf6dHmaFg8/6psJKqhx9QykIDKzpGcy2cn4oV4YC7V/Q==}
+  /get-uri@6.0.2:
+    resolution: {integrity: sha512-5KLucCJobh8vBY1K07EFV4+cPZH3mrV9YeAruUseCQKHB58SGjjT2l9/eA9LD082IiuMjSlFJEcdJ27TXvbZNw==}
     engines: {node: '>= 14'}
     dependencies:
       basic-ftp: 5.0.3
-      data-uri-to-buffer: 5.0.1
+      data-uri-to-buffer: 6.0.1
       debug: 4.3.4
       fs-extra: 8.1.0
     transitivePeerDependencies:
@@ -3335,7 +3293,7 @@ packages:
       foreground-child: 3.1.1
       jackspeak: 2.3.6
       minimatch: 9.0.3
-      minipass: 7.0.3
+      minipass: 7.0.4
       path-scurry: 1.10.1
     dev: true
 
@@ -3366,27 +3324,20 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /globals@13.20.0:
-    resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
+  /globals@13.23.0:
+    resolution: {integrity: sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
     dev: true
 
-  /globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.1.4
-    dev: true
-
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.12
+      fast-glob: 3.3.1
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
@@ -3395,19 +3346,19 @@ packages:
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
     dev: true
 
-  /graceful-fs@4.2.10:
-    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
 
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
 
-  /handlebars@4.7.7:
-    resolution: {integrity: sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==}
+  /handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
     hasBin: true
     dependencies:
@@ -3419,13 +3370,10 @@ packages:
       uglify-js: 3.17.4
     dev: true
 
-  /has-bigints@1.0.2:
-    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
-    dev: true
-
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
+    requiresBuild: true
     dev: true
 
   /has-flag@4.0.0:
@@ -3436,7 +3384,7 @@ packages:
   /has-property-descriptors@1.0.0:
     resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==}
     dependencies:
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
     dev: true
 
   /has-proto@1.0.1:
@@ -3456,50 +3404,40 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
+  /has@1.0.4:
+    resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==}
     engines: {node: '>= 0.4.0'}
-    dependencies:
-      function-bind: 1.1.1
     dev: true
 
   /hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
     dev: true
 
-  /hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+  /hasown@2.0.0:
+    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
     dev: true
 
   /hosted-git-info@7.0.1:
     resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==}
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
-      lru-cache: 10.0.1
+      lru-cache: 10.1.0
     dev: true
 
-  /html-encoding-sniffer@3.0.0:
-    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
-    engines: {node: '>=12'}
+  /html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
     dependencies:
-      whatwg-encoding: 2.0.0
+      whatwg-encoding: 3.1.1
     dev: true
 
   /html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
 
-  /http-proxy-agent@5.0.0:
-    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
-    engines: {node: '>= 6'}
-    dependencies:
-      '@tootallnate/once': 2.0.0
-      agent-base: 6.0.2
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /http-proxy-agent@7.0.0:
     resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
     engines: {node: '>= 14'}
@@ -3510,16 +3448,6 @@ packages:
       - supports-color
     dev: true
 
-  /https-proxy-agent@5.0.1:
-    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
-    engines: {node: '>= 6'}
-    dependencies:
-      agent-base: 6.0.2
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /https-proxy-agent@7.0.2:
     resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==}
     engines: {node: '>= 14'}
@@ -3547,17 +3475,13 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /icss-replace-symbols@1.1.0:
-    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.33):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.31
+      postcss: 8.4.33
     dev: true
 
   /ieee754@1.2.1:
@@ -3573,8 +3497,8 @@ packages:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false
 
-  /immutable@4.2.3:
-    resolution: {integrity: sha512-IHpmvaOIX4VLJwPOuQr1NpeBr2ZG6vpIj3blsLVxXRWJscLioaJRStqC+NcBsLeCDsnGlPpXd5/WZmnE7MbsKA==}
+  /immutable@4.3.4:
+    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
     dev: true
 
   /import-fresh@3.3.0:
@@ -3608,15 +3532,6 @@ packages:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
     dev: true
 
-  /internal-slot@1.0.4:
-    resolution: {integrity: sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.2.0
-      has: 1.0.3
-      side-channel: 1.0.4
-    dev: true
-
   /ip@1.1.8:
     resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
     dev: true
@@ -3625,24 +3540,10 @@ packages:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: true
 
-  /is-array-buffer@3.0.1:
-    resolution: {integrity: sha512-ASfLknmY8Xa2XtB4wmbz13Wu202baeA18cJBCeCy0wXUHZF0IPyVEXqKEcd+t2fNSLLL1vC6k7lxZEojNbISXQ==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.0
-      is-typed-array: 1.1.10
-    dev: true
-
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
-  /is-bigint@1.0.4:
-    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
-    dependencies:
-      has-bigints: 1.0.2
-    dev: true
-
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -3650,14 +3551,6 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
-  /is-boolean-object@1.1.2:
-    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      has-tostringtag: 1.0.0
-    dev: true
-
   /is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
@@ -3665,22 +3558,10 @@ packages:
       builtin-modules: 3.3.0
     dev: true
 
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-core-module@2.11.0:
-    resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
-    dependencies:
-      has: 1.0.3
-    dev: true
-
-  /is-date-object@1.0.5:
-    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
-    engines: {node: '>= 0.4'}
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
-      has-tostringtag: 1.0.0
+      hasown: 2.0.0
     dev: true
 
   /is-docker@2.2.1:
@@ -3711,27 +3592,22 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
-    engines: {node: '>=0.10.0'}
+  /is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
     dependencies:
-      is-extglob: 2.1.1
+      get-east-asian-width: 1.2.0
     dev: true
 
-  /is-module@1.0.0:
-    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
-    dev: true
-
-  /is-negative-zero@2.0.2:
-    resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
-    engines: {node: '>= 0.4'}
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
     dev: true
 
-  /is-number-object@1.0.7:
-    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
+  /is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
     dev: true
 
   /is-number@7.0.0:
@@ -3765,23 +3641,17 @@ packages:
   /is-reference@1.2.1:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     dependencies:
-      '@types/estree': 0.0.52
+      '@types/estree': 1.0.3
     dev: true
 
   /is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
     dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.5
       has-tostringtag: 1.0.0
     dev: true
 
-  /is-shared-array-buffer@1.0.2:
-    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: true
-
   /is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
@@ -3792,20 +3662,6 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
-  /is-string@1.0.7:
-    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /is-symbol@1.0.4:
-    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-symbols: 1.0.3
-    dev: true
-
   /is-text-path@2.0.0:
     resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
     engines: {node: '>=8'}
@@ -3813,23 +3669,6 @@ packages:
       text-extensions: 2.4.0
     dev: true
 
-  /is-typed-array@1.1.10:
-    resolution: {integrity: sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-    dev: true
-
-  /is-weakref@1.0.2:
-    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
-    dependencies:
-      call-bind: 1.0.2
-    dev: true
-
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -3845,19 +3684,19 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
-  /istanbul-lib-coverage@3.2.0:
-    resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
+  /istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
     dev: true
 
-  /istanbul-lib-instrument@6.0.0:
-    resolution: {integrity: sha512-x58orMzEVfzPUKqlbLd1hXCnySCxKdDKa6Rjg97CwuLLRI4g3FHTdnExu1OqffVFay6zeMW+T6/DowFLndWnIw==}
+  /istanbul-lib-instrument@6.0.1:
+    resolution: {integrity: sha512-EAMEJBsYuyyztxMxW3g7ugGPkrZsV57v0Hmv3mm1uQsmB+QnZuepg731CRaIgeUVSdmsTngOkSnauNF8p7FIhA==}
     engines: {node: '>=10'}
     dependencies:
-      '@babel/core': 7.23.2
-      '@babel/parser': 7.23.0
+      '@babel/core': 7.23.5
+      '@babel/parser': 7.23.9
       '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       semver: 7.5.4
     transitivePeerDependencies:
       - supports-color
@@ -3867,7 +3706,7 @@ packages:
     resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
     dependencies:
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       make-dir: 4.0.0
       supports-color: 7.2.0
     dev: true
@@ -3877,14 +3716,14 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       debug: 4.3.4
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /istanbul-reports@3.1.5:
-    resolution: {integrity: sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==}
+  /istanbul-reports@3.1.6:
+    resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==}
     engines: {node: '>=8'}
     dependencies:
       html-escaper: 2.0.2
@@ -3916,38 +3755,36 @@ packages:
       argparse: 2.0.1
     dev: true
 
-  /jsdom@22.1.0:
-    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
-    engines: {node: '>=16'}
+  /jsdom@23.2.0:
+    resolution: {integrity: sha512-L88oL7D/8ufIES+Zjz7v0aes+oBMh2Xnh3ygWvL0OaICOomKEPKuPnIfBJekiXr+BHbbMjrWn/xqrDQuxFTeyA==}
+    engines: {node: '>=18'}
     peerDependencies:
-      canvas: ^2.5.0
+      canvas: ^2.11.2
     peerDependenciesMeta:
       canvas:
         optional: true
     dependencies:
-      abab: 2.0.6
-      cssstyle: 3.0.0
-      data-urls: 4.0.0
+      '@asamuzakjp/dom-selector': 2.0.1
+      cssstyle: 4.0.1
+      data-urls: 5.0.0
       decimal.js: 10.4.3
-      domexception: 4.0.0
       form-data: 4.0.0
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.0
+      https-proxy-agent: 7.0.2
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.7
       parse5: 7.1.2
       rrweb-cssom: 0.6.0
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.2
-      w3c-xmlserializer: 4.0.0
+      tough-cookie: 4.1.3
+      w3c-xmlserializer: 5.0.0
       webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 12.0.1
-      ws: 8.13.0
-      xml-name-validator: 4.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.0.0
+      ws: 8.16.0
+      xml-name-validator: 5.0.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -3960,8 +3797,8 @@ packages:
     hasBin: true
     dev: true
 
-  /json-parse-better-errors@1.0.2:
-    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true
 
   /json-parse-even-better-errors@2.3.1:
@@ -4002,7 +3839,7 @@ packages:
   /jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /jsonparse@1.3.1:
@@ -4022,10 +3859,16 @@ packages:
     dependencies:
       lie: 3.3.0
       pako: 1.0.11
-      readable-stream: 2.3.7
+      readable-stream: 2.3.8
       setimmediate: 1.0.5
     dev: false
 
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -4040,9 +3883,9 @@ packages:
       immediate: 3.0.6
     dev: false
 
-  /lilconfig@2.1.0:
-    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
-    engines: {node: '>=10'}
+  /lilconfig@3.0.0:
+    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
+    engines: {node: '>=14'}
     dev: true
 
   /lines-and-columns@1.2.4:
@@ -4054,8 +3897,8 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
-  /lint-staged@15.0.2:
-    resolution: {integrity: sha512-vnEy7pFTHyVuDmCAIFKR5QDO8XLVlPFQQyujQ/STOxe40ICWqJ6knS2wSJ/ffX/Lw0rz83luRDh+ET7toN+rOw==}
+  /lint-staged@15.2.0:
+    resolution: {integrity: sha512-TFZzUEV00f+2YLaVPWBWGAMq7So6yQx+GG8YRMDeOEIf95Zn5RyiLMsEiX4KTNl9vq/w+NqRJkLA1kPIo15ufQ==}
     engines: {node: '>=18.12.0'}
     hasBin: true
     dependencies:
@@ -4063,36 +3906,26 @@ packages:
       commander: 11.1.0
       debug: 4.3.4
       execa: 8.0.1
-      lilconfig: 2.1.0
-      listr2: 7.0.2
+      lilconfig: 3.0.0
+      listr2: 8.0.0
       micromatch: 4.0.5
       pidtree: 0.6.0
       string-argv: 0.3.2
-      yaml: 2.3.3
+      yaml: 2.3.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /listr2@7.0.2:
-    resolution: {integrity: sha512-rJysbR9GKIalhTbVL2tYbF2hVyDnrf7pFUZBwjPaMIdadYHmeT+EVi/Bu3qd7ETQPahTotg2WRCatXwRBW554g==}
-    engines: {node: '>=16.0.0'}
+  /listr2@8.0.0:
+    resolution: {integrity: sha512-u8cusxAcyqAiQ2RhYvV7kRKNLgUvtObIbhOX2NCXqvp1UU32xIg5CT22ykS2TPKJXZWJwtK3IKLiqAGlGNE+Zg==}
+    engines: {node: '>=18.0.0'}
     dependencies:
-      cli-truncate: 3.1.0
+      cli-truncate: 4.0.0
       colorette: 2.0.20
       eventemitter3: 5.0.1
-      log-update: 5.0.1
+      log-update: 6.0.0
       rfdc: 1.3.0
-      wrap-ansi: 8.1.0
-    dev: true
-
-  /load-json-file@4.0.0:
-    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
-    engines: {node: '>=4'}
-    dependencies:
-      graceful-fs: 4.2.10
-      parse-json: 4.0.0
-      pify: 3.0.0
-      strip-bom: 3.0.0
+      wrap-ansi: 9.0.0
     dev: true
 
   /loader-utils@3.2.1:
@@ -4100,9 +3933,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:
@@ -4131,25 +3967,25 @@ packages:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: true
 
-  /log-update@5.0.1:
-    resolution: {integrity: sha512-5UtUDQ/6edw4ofyljDNcOVJQ4c7OjDro4h3y8e1GQL5iYElYclVHJ3zeWchylvMaKnDbDilC8irOVyexnA/Slw==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+  /log-update@6.0.0:
+    resolution: {integrity: sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==}
+    engines: {node: '>=18'}
     dependencies:
-      ansi-escapes: 5.0.0
+      ansi-escapes: 6.2.0
       cli-cursor: 4.0.0
-      slice-ansi: 5.0.0
+      slice-ansi: 7.1.0
       strip-ansi: 7.1.0
-      wrap-ansi: 8.1.0
+      wrap-ansi: 9.0.0
     dev: true
 
-  /loupe@2.3.6:
-    resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
+  /loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
     dependencies:
-      get-func-name: 2.0.0
+      get-func-name: 2.0.2
     dev: true
 
-  /lru-cache@10.0.1:
-    resolution: {integrity: sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==}
+  /lru-cache@10.1.0:
+    resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==}
     engines: {node: 14 || >=16.14}
     dev: true
 
@@ -4171,18 +4007,19 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /magic-string@0.27.0:
-    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+  /magic-string@0.30.6:
+    resolution: {integrity: sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==}
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
-  /magic-string@0.30.5:
-    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
-    engines: {node: '>=12'}
+  /magicast@0.3.3:
+    resolution: {integrity: sha512-ZbrP1Qxnpoes8sz47AM0z08U+jW6TyRgZzcWy3Ma3vDhJttwMwAFDMMQFobwdBxByBD46JYmxRzeF7w2+wJEuw==}
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
+      source-map-js: 1.0.2
+    dev: true
 
   /make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
@@ -4195,12 +4032,16 @@ packages:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: true
 
-  /marked@9.1.2:
-    resolution: {integrity: sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==}
-    engines: {node: '>= 16'}
+  /marked@11.2.0:
+    resolution: {integrity: sha512-HR0m3bvu0jAPYiIvLUUQtdg1g6D247//lvcekpHO1WMvbwDlwSkZAX9Lw4F4YHE1T0HaaNve0tuAWuV1UJ6vtw==}
+    engines: {node: '>= 18'}
     hasBin: true
     dev: true
 
+  /mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: true
+
   /memorystream@0.3.1:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
@@ -4292,8 +4133,8 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
 
-  /minipass@7.0.3:
-    resolution: {integrity: sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==}
+  /minipass@7.0.4:
+    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
@@ -4311,11 +4152,11 @@ packages:
       acorn: 8.10.0
       pathe: 1.1.1
       pkg-types: 1.0.3
-      ufo: 1.3.0
+      ufo: 1.3.1
     dev: true
 
-  /monaco-editor@0.44.0:
-    resolution: {integrity: sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==}
+  /monaco-editor@0.45.0:
+    resolution: {integrity: sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==}
     dev: false
 
   /ms@2.0.0:
@@ -4326,8 +4167,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
 
@@ -4349,10 +4190,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
-  /nice-try@1.0.5:
-    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
-    dev: true
-
   /node-fetch@2.7.0:
     resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
     engines: {node: 4.x || >=6.0.0}
@@ -4365,17 +4202,13 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
+  /node-gyp-build@4.7.1:
+    resolution: {integrity: sha512-wTSrZ+8lsRRa3I3H8Xr65dLWSgCvY2l4AOnaeKdPA9TB/WYMPaTcrzf3rXvFoVvjKNVnu0CcWSx54qq9GKRUYg==}
+    hasBin: true
     dev: true
 
-  /normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
-    dependencies:
-      hosted-git-info: 2.8.9
-      resolve: 1.22.1
-      semver: 5.7.1
-      validate-npm-package-license: 3.0.4
+  /node-releases@2.0.13:
+    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
     dev: true
 
   /normalize-package-data@6.0.0:
@@ -4383,7 +4216,7 @@ packages:
     engines: {node: ^16.14.0 || >=18.0.0}
     dependencies:
       hosted-git-info: 7.0.1
-      is-core-module: 2.11.0
+      is-core-module: 2.13.1
       semver: 7.5.4
       validate-npm-package-license: 3.0.4
     dev: true
@@ -4393,20 +4226,23 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /npm-run-all@4.1.5:
-    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
-    engines: {node: '>= 4'}
+  /npm-normalize-package-bin@3.0.1:
+    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /npm-run-all2@6.1.2:
+    resolution: {integrity: sha512-WwwnS8Ft+RpXve6T2EIEVpFLSqN+ORHRvgNk3H9N62SZXjmzKoRhMFg3I17TK3oMaAEr+XFbRirWS2Fn3BCPSg==}
+    engines: {node: ^14.18.0 || >=16.0.0, npm: '>= 8'}
     hasBin: true
     dependencies:
-      ansi-styles: 3.2.1
-      chalk: 2.4.2
-      cross-spawn: 6.0.5
+      ansi-styles: 6.2.1
+      cross-spawn: 7.0.3
       memorystream: 0.3.1
-      minimatch: 3.1.2
-      pidtree: 0.3.1
-      read-pkg: 3.0.0
-      shell-quote: 1.8.0
-      string.prototype.padend: 3.1.4
+      minimatch: 9.0.3
+      pidtree: 0.6.0
+      read-package-json-fast: 3.0.2
+      shell-quote: 1.8.1
     dev: true
 
   /npm-run-path@4.0.1:
@@ -4423,34 +4259,11 @@ packages:
       path-key: 4.0.0
     dev: true
 
-  /nwsapi@2.2.7:
-    resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
-    dev: true
-
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /object-inspect@1.12.3:
-    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
-    dev: true
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /object.assign@4.1.4:
-    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      has-symbols: 1.0.3
-      object-keys: 1.1.1
-    dev: true
-
   /on-headers@1.0.2:
     resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
     engines: {node: '>= 0.8'}
@@ -4502,6 +4315,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'}
@@ -4523,7 +4343,7 @@ packages:
       '@tootallnate/quickjs-emscripten': 0.23.0
       agent-base: 7.1.0
       debug: 4.3.4
-      get-uri: 6.0.1
+      get-uri: 6.0.2
       http-proxy-agent: 7.0.0
       https-proxy-agent: 7.0.2
       pac-resolver: 7.0.0
@@ -4552,19 +4372,11 @@ packages:
       callsites: 3.1.0
     dev: true
 
-  /parse-json@4.0.0:
-    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
-    engines: {node: '>=4'}
-    dependencies:
-      error-ex: 1.3.2
-      json-parse-better-errors: 1.0.2
-    dev: true
-
   /parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.23.5
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -4574,7 +4386,7 @@ packages:
     resolution: {integrity: sha512-ihtdrgbqdONYD156Ap6qTcaGcGdkdAxodO1wLqQ/j7HP1u2sFYppINiq4jyC8F+Nm+4fVufylCV00QmkTHkSUg==}
     engines: {node: '>=16'}
     dependencies:
-      '@babel/code-frame': 7.22.13
+      '@babel/code-frame': 7.23.5
       error-ex: 1.3.2
       json-parse-even-better-errors: 3.0.0
       lines-and-columns: 2.0.3
@@ -4584,7 +4396,7 @@ packages:
   /parse5@7.1.2:
     resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
     dependencies:
-      entities: 4.4.0
+      entities: 4.5.0
     dev: true
 
   /path-exists@4.0.0:
@@ -4606,11 +4418,6 @@ packages:
     resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
     dev: true
 
-  /path-key@2.0.1:
-    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
-    engines: {node: '>=4'}
-    dev: true
-
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -4629,21 +4436,14 @@ packages:
     resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 10.0.1
-      minipass: 7.0.3
+      lru-cache: 10.1.0
+      minipass: 7.0.4
     dev: true
 
   /path-to-regexp@2.2.1:
     resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==}
     dev: true
 
-  /path-type@3.0.0:
-    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
-    engines: {node: '>=4'}
-    dependencies:
-      pify: 3.0.0
-    dev: true
-
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -4669,23 +4469,12 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
-  /pidtree@0.3.1:
-    resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-    dev: true
-
   /pidtree@0.6.0:
     resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
     engines: {node: '>=0.10'}
     hasBin: true
     dev: true
 
-  /pify@3.0.0:
-    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
-    engines: {node: '>=4'}
-    dev: true
-
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
@@ -4694,65 +4483,65 @@ 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.33):
     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.33
     dev: true
 
-  /postcss-modules-local-by-default@4.0.0(postcss@8.4.31):
-    resolution: {integrity: sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==}
+  /postcss-modules-local-by-default@4.0.3(postcss@8.4.33):
+    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
-      postcss-selector-parser: 6.0.13
+      icss-utils: 5.1.0(postcss@8.4.33)
+      postcss: 8.4.33
+      postcss-selector-parser: 6.0.15
       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.33):
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.31
-      postcss-selector-parser: 6.0.13
+      postcss: 8.4.33
+      postcss-selector-parser: 6.0.15
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.31):
+  /postcss-modules-values@4.0.0(postcss@8.4.33):
     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.33)
+      postcss: 8.4.33
     dev: true
 
-  /postcss-modules@4.3.1(postcss@8.4.31):
-    resolution: {integrity: sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==}
+  /postcss-modules@6.0.0(postcss@8.4.33):
+    resolution: {integrity: sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
       generic-names: 4.0.0
-      icss-replace-symbols: 1.1.0
+      icss-utils: 5.1.0(postcss@8.4.33)
       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.0(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.33
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.33)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.33)
+      postcss-modules-scope: 3.0.0(postcss@8.4.33)
+      postcss-modules-values: 4.0.0(postcss@8.4.33)
       string-hash: 1.1.3
     dev: true
 
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+  /postcss-selector-parser@6.0.15:
+    resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
@@ -4763,11 +4552,11 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+  /postcss@8.4.33:
+    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
@@ -4776,8 +4565,8 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier@3.0.3:
-    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
+  /prettier@3.2.2:
+    resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -4787,8 +4576,8 @@ packages:
     engines: {node: ^14.13.1 || >=16.0.0}
     dev: true
 
-  /pretty-format@29.6.3:
-    resolution: {integrity: sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==}
+  /pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/schemas': 29.6.3
@@ -4867,7 +4656,7 @@ packages:
       jstransformer: 1.0.0
       pug-error: 2.0.0
       pug-walk: 2.0.0
-      resolve: 1.22.1
+      resolve: 1.22.8
     dev: true
 
   /pug-lexer@5.0.1:
@@ -4937,21 +4726,21 @@ packages:
     resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==}
     dev: true
 
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
     dev: true
 
-  /puppeteer-core@21.2.1:
-    resolution: {integrity: sha512-+I8EjpWFeeFKScpQiTEnC4jGve2Wr4eA9qUMoa8S317DJPm9h7wzrT4YednZK2TQZMyPtPQ2Disb/Tg02+4Naw==}
-    engines: {node: '>=16.3.0'}
+  /puppeteer-core@21.11.0:
+    resolution: {integrity: sha512-ArbnyA3U5SGHokEvkfWjW+O8hOxV1RSJxOgriX/3A4xZRqixt9ZFHD0yPgZQF05Qj0oAqi8H/7stDorjoHY90Q==}
+    engines: {node: '>=16.13.2'}
     dependencies:
-      '@puppeteer/browsers': 1.7.1
-      chromium-bidi: 0.4.26(devtools-protocol@0.0.1159816)
+      '@puppeteer/browsers': 1.9.1
+      chromium-bidi: 0.5.8(devtools-protocol@0.0.1232444)
       cross-fetch: 4.0.0
       debug: 4.3.4
-      devtools-protocol: 0.0.1159816
-      ws: 8.14.1
+      devtools-protocol: 0.0.1232444
+      ws: 8.16.0
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -4959,14 +4748,15 @@ packages:
       - utf-8-validate
     dev: true
 
-  /puppeteer@21.2.1(typescript@5.1.6):
-    resolution: {integrity: sha512-bgY/lYBH3rR+m5EP1FxzY2MRMrau7Pyq+N5YlspA63sF+cBkUiTn5WZXwXm7mEHwkkOSVi5LiS74T5QIgrSklg==}
-    engines: {node: '>=16.3.0'}
+  /puppeteer@21.11.0(typescript@5.2.2):
+    resolution: {integrity: sha512-9jTHuYe22TD3sNxy0nEIzC7ZrlRnDgeX3xPkbS7PnbdwYjl2o/z/YuCrRBwezdKpbTDTJ4VqIggzNyeRcKq3cg==}
+    engines: {node: '>=16.13.2'}
+    hasBin: true
     requiresBuild: true
     dependencies:
-      '@puppeteer/browsers': 1.7.1
-      cosmiconfig: 8.3.5(typescript@5.1.6)
-      puppeteer-core: 21.2.1
+      '@puppeteer/browsers': 1.9.1
+      cosmiconfig: 9.0.0(typescript@5.2.2)
+      puppeteer-core: 21.11.0
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -5012,36 +4802,35 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /read-package-json-fast@3.0.2:
+    resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dependencies:
+      json-parse-even-better-errors: 3.0.0
+      npm-normalize-package-bin: 3.0.1
+    dev: true
+
   /read-pkg-up@10.1.0:
     resolution: {integrity: sha512-aNtBq4jR8NawpKJQldrQcSW9y/d+KWH4v24HWkHljOZ7H0av+YTGANBzRh9A5pw7v/bLVsLVPpOhJ7gHNVy8lA==}
     engines: {node: '>=16'}
     dependencies:
       find-up: 6.3.0
       read-pkg: 8.1.0
-      type-fest: 4.3.1
-    dev: true
-
-  /read-pkg@3.0.0:
-    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
-    engines: {node: '>=4'}
-    dependencies:
-      load-json-file: 4.0.0
-      normalize-package-data: 2.5.0
-      path-type: 3.0.0
+      type-fest: 4.5.0
     dev: true
 
   /read-pkg@8.1.0:
     resolution: {integrity: sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==}
     engines: {node: '>=16'}
     dependencies:
-      '@types/normalize-package-data': 2.4.1
+      '@types/normalize-package-data': 2.4.3
       normalize-package-data: 6.0.0
       parse-json: 7.1.0
-      type-fest: 4.3.1
+      type-fest: 4.5.0
     dev: true
 
-  /readable-stream@2.3.7:
-    resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
     dependencies:
       core-util-is: 1.0.3
       inherits: 2.0.4
@@ -5059,15 +4848,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /regexp.prototype.flags@1.4.3:
-    resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      functions-have-names: 1.2.3
-    dev: true
-
   /registry-auth-token@3.3.2:
     resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
     dependencies:
@@ -5105,11 +4885,11 @@ packages:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
     dev: true
 
-  /resolve@1.22.1:
-    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
     dependencies:
-      is-core-module: 2.11.0
+      is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
@@ -5146,51 +4926,64 @@ packages:
       glob: 10.3.10
     dev: true
 
-  /rollup-plugin-dts@6.1.0(rollup@3.29.4)(typescript@5.1.6):
+  /rollup-plugin-dts@6.1.0(rollup@4.9.2)(typescript@5.2.2):
     resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==}
     engines: {node: '>=16'}
     peerDependencies:
       rollup: ^3.29.4 || ^4
       typescript: ^4.5 || ^5.0
     dependencies:
-      magic-string: 0.30.5
-      rollup: 3.29.4
-      typescript: 5.1.6
+      magic-string: 0.30.6
+      rollup: 4.9.2
+      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@3.29.4):
-    resolution: {integrity: sha512-HPpXU65V8bSpW8eSYPahtUJaJHmbxJGybuf/M8B3bz/6i11YaYHlNNJIQ38gSEV0FyohQOgVxJ2YMEEZtEmwvA==}
+  /rollup-plugin-esbuild@6.1.1(esbuild@0.20.0)(rollup@4.9.2):
+    resolution: {integrity: sha512-CehMY9FAqJD5OUaE/Mi1r5z0kNeYxItmRO2zG4Qnv2qWKF09J2lTy5GUzjJR354ZPrLkCj4fiBN41lo8PzBUhw==}
     engines: {node: '>=14.18.0'}
     peerDependencies:
       esbuild: '>=0.18.0'
       rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.2)
       debug: 4.3.4
       es-module-lexer: 1.3.1
-      esbuild: 0.19.5
+      esbuild: 0.20.0
       get-tsconfig: 4.7.2
-      rollup: 3.29.4
+      rollup: 4.9.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /rollup-plugin-polyfill-node@0.12.0(rollup@3.29.4):
-    resolution: {integrity: sha512-PWEVfDxLEKt8JX1nZ0NkUAgXpkZMTb85rO/Ru9AQ69wYW8VUCfDgP4CGRXXWYni5wDF0vIeR1UoF3Jmw/Lt3Ug==}
+  /rollup-plugin-polyfill-node@0.13.0(rollup@4.9.2):
+    resolution: {integrity: sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==}
     peerDependencies:
-      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0
+      rollup: ^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      '@rollup/plugin-inject': 5.0.3(rollup@3.29.4)
-      rollup: 3.29.4
+      '@rollup/plugin-inject': 5.0.5(rollup@4.9.2)
+      rollup: 4.9.2
     dev: true
 
-  /rollup@3.29.4:
-    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
-    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+  /rollup@4.9.2:
+    resolution: {integrity: sha512-66RB8OtFKUTozmVEh3qyNfH+b+z2RXBVloqO2KCC/pjFaGaHtxP9fVfOQKPSGXg2mElmjmxjW/fZ7iKrEpMH5Q==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.9.2
+      '@rollup/rollup-android-arm64': 4.9.2
+      '@rollup/rollup-darwin-arm64': 4.9.2
+      '@rollup/rollup-darwin-x64': 4.9.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.9.2
+      '@rollup/rollup-linux-arm64-gnu': 4.9.2
+      '@rollup/rollup-linux-arm64-musl': 4.9.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.9.2
+      '@rollup/rollup-linux-x64-gnu': 4.9.2
+      '@rollup/rollup-linux-x64-musl': 4.9.2
+      '@rollup/rollup-win32-arm64-msvc': 4.9.2
+      '@rollup/rollup-win32-ia32-msvc': 4.9.2
+      '@rollup/rollup-win32-x64-msvc': 4.9.2
       fsevents: 2.3.3
     dev: true
 
@@ -5211,25 +5004,17 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
-  /safe-regex-test@1.0.0:
-    resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.0
-      is-regex: 1.1.4
-    dev: true
-
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /sass@1.69.4:
-    resolution: {integrity: sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==}
+  /sass@1.70.0:
+    resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
       chokidar: 3.5.3
-      immutable: 4.2.3
+      immutable: 4.3.4
       source-map-js: 1.0.2
     dev: true
 
@@ -5240,11 +5025,6 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
-  /semver@5.7.1:
-    resolution: {integrity: sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==}
-    hasBin: true
-    dev: true
-
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -5297,17 +5077,20 @@ packages:
       - supports-color
     dev: true
 
+  /set-function-length@1.1.1:
+    resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.1
+      get-intrinsic: 1.2.1
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.0
+    dev: true
+
   /setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
     dev: false
 
-  /shebang-command@1.2.0:
-    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      shebang-regex: 1.0.0
-    dev: true
-
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -5315,26 +5098,13 @@ packages:
       shebang-regex: 3.0.0
     dev: true
 
-  /shebang-regex@1.0.0:
-    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
     dev: true
 
-  /shell-quote@1.8.0:
-    resolution: {integrity: sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==}
-    dev: true
-
-  /side-channel@1.0.4:
-    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
-    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.0
-      object-inspect: 1.12.3
+  /shell-quote@1.8.1:
+    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
     dev: true
 
   /siginfo@2.0.0:
@@ -5374,13 +5144,21 @@ packages:
       is-fullwidth-code-point: 4.0.0
     dev: true
 
+  /slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+    dev: true
+
   /smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
     dev: true
 
-  /smob@1.4.0:
-    resolution: {integrity: sha512-MqR3fVulhjWuRNSMydnTlweu38UhQ0HXM4buStD/S3mc/BzX3CuM9OmhyQpmtYCvoYdl5ris6TI0ZqH355Ymqg==}
+  /smob@1.4.1:
+    resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==}
     dev: true
 
   /socks-proxy-agent@8.0.2:
@@ -5418,11 +5196,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /spdx-correct@3.1.1:
-    resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
+  /spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.12
+      spdx-license-ids: 3.0.16
     dev: true
 
   /spdx-exceptions@2.3.0:
@@ -5433,11 +5211,11 @@ packages:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
       spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.12
+      spdx-license-ids: 3.0.16
     dev: true
 
-  /spdx-license-ids@3.0.12:
-    resolution: {integrity: sha512-rr+VVSXtRhO4OHbXUiAF7xW3Bo9DuuF6C5jH+q/x15j2jniycgKbxU09Hr0WqlSLUs4i4ltHGXqTe7VHclYWyA==}
+  /spdx-license-ids@3.0.16:
+    resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==}
     dev: true
 
   /split2@4.2.0:
@@ -5449,8 +5227,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:
@@ -5487,29 +5265,13 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
-  /string.prototype.padend@3.1.4:
-    resolution: {integrity: sha512-67otBXoksdjsnXXRUq+KMVTdlVRZ2af422Y0aTyTjVaoQkGr3mxl2Bc5emi7dOQ3OGVVQQskmLEWwFXwommpNw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.21.1
-    dev: true
-
-  /string.prototype.trimend@1.0.6:
-    resolution: {integrity: sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==}
-    dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.21.1
-    dev: true
-
-  /string.prototype.trimstart@1.0.6:
-    resolution: {integrity: sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==}
+  /string-width@7.0.0:
+    resolution: {integrity: sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==}
+    engines: {node: '>=18'}
     dependencies:
-      call-bind: 1.0.2
-      define-properties: 1.1.4
-      es-abstract: 1.21.1
+      emoji-regex: 10.3.0
+      get-east-asian-width: 1.2.0
+      strip-ansi: 7.1.0
     dev: true
 
   /string_decoder@1.1.1:
@@ -5532,11 +5294,6 @@ packages:
       ansi-regex: 6.0.1
     dev: true
 
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: true
-
   /strip-final-newline@2.0.0:
     resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
     engines: {node: '>=6'}
@@ -5557,8 +5314,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /strip-literal@1.0.1:
-    resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==}
+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
     dependencies:
       acorn: 8.10.0
     dev: true
@@ -5566,6 +5323,7 @@ packages:
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
+    requiresBuild: true
     dependencies:
       has-flag: 3.0.0
     dev: true
@@ -5614,8 +5372,8 @@ packages:
       temp-dir: 3.0.0
     dev: true
 
-  /terser@5.22.0:
-    resolution: {integrity: sha512-hHZVLgRA2z4NWcN6aS5rQDc+7Dcy58HOf2zbYwmFcQ+ua3h6eEFf5lIDKTzbWwlazPyOZsFQO8V80/IjVNExEw==}
+  /terser@5.27.0:
+    resolution: {integrity: sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -5647,17 +5405,17 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
 
-  /tinybench@2.5.0:
-    resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
+  /tinybench@2.5.1:
+    resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
     dev: true
 
-  /tinypool@0.7.0:
-    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
+  /tinypool@0.8.2:
+    resolution: {integrity: sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
-  /tinyspy@2.1.1:
-    resolution: {integrity: sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==}
+  /tinyspy@2.2.0:
+    resolution: {integrity: sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -5672,20 +5430,21 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /todomvc-app-css@2.4.2:
-    resolution: {integrity: sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg==}
+  /todomvc-app-css@2.4.3:
+    resolution: {integrity: sha512-mSnWZaKBWj9aQcFRsGguY/a8O8NR8GmecD48yU1rzwNemgZa/INLpIsxxMiToFGVth+uEKBrQ7IhWkaXZxwq5Q==}
+    engines: {node: '>=4'}
     dev: true
 
   /token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
     dev: true
 
-  /tough-cookie@4.1.2:
-    resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==}
+  /tough-cookie@4.1.3:
+    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
     engines: {node: '>=6'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.3.0
+      punycode: 2.3.1
       universalify: 0.2.0
       url-parse: 1.5.10
     dev: true
@@ -5694,20 +5453,20 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
 
-  /tr46@4.1.1:
-    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
-    engines: {node: '>=14'}
+  /tr46@5.0.0:
+    resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==}
+    engines: {node: '>=18'}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: true
 
-  /ts-api-utils@1.0.2(typescript@5.1.6):
-    resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}
+  /ts-api-utils@1.0.3(typescript@5.2.2):
+    resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
     engines: {node: '>=16.13.0'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.1.6
+      typescript: 5.2.2
     dev: true
 
   /tslib@1.14.1:
@@ -5718,23 +5477,23 @@ packages:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: true
 
-  /tsutils@3.21.0(typescript@5.1.6):
+  /tsutils@3.21.0(typescript@5.2.2):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 5.1.6
+      typescript: 5.2.2
     dev: true
 
-  /tsx@3.14.0:
-    resolution: {integrity: sha512-xHtFaKtHxM9LOklMmJdI3BEnQq/D5F73Of2E1GDrITi9sgoVkvIsrQUTY1G8FlmGtA+awCI4EBlTRRYxkL2sRg==}
+  /tsx@4.7.0:
+    resolution: {integrity: sha512-I+t79RYPlEYlHn9a+KzwrvEwhJg35h/1zHsLC2JXvhC2mdynMv6Zxzvhv5EMV6VF5qJlLlkSnMVvdZV3PSIGcg==}
+    engines: {node: '>=18.0.0'}
     hasBin: true
     dependencies:
-      esbuild: 0.18.20
+      esbuild: 0.19.10
       get-tsconfig: 4.7.2
-      source-map-support: 0.5.21
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -5756,11 +5515,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /type-fest@1.4.0:
-    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
-    engines: {node: '>=10'}
-    dev: true
-
   /type-fest@2.19.0:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
@@ -5771,33 +5525,18 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /type-fest@4.3.1:
-    resolution: {integrity: sha512-pphNW/msgOUSkJbH58x8sqpq8uQj6b0ZKGxEsLKMUnGorRcDjrUaLS+39+/ub41JNTwrrMyJcUB8+YZs3mbwqw==}
+  /type-fest@4.5.0:
+    resolution: {integrity: sha512-diLQivFzddJl4ylL3jxSkEc39Tpw7o1QeEHIPxVwryDK2lpB7Nqhzhuo6v5/Ls08Z0yPSAhsyAWlv1/H0ciNmw==}
     engines: {node: '>=16'}
     dev: true
 
-  /typed-array-length@1.0.4:
-    resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
-    dependencies:
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      is-typed-array: 1.1.10
-    dev: true
-
-  /typescript@5.0.2:
-    resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
-    engines: {node: '>=12.20'}
-    hasBin: true
-    dev: false
-
-  /typescript@5.1.6:
-    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
-  /ufo@1.3.0:
-    resolution: {integrity: sha512-bRn3CsoojyNStCZe0BG0Mt4Nr/4KF+rhFlnNXybgqt5pXHNFRlqinSoQaTrGyzE4X8aHplSb+TorH+COin9Yxw==}
+  /ufo@1.3.1:
+    resolution: {integrity: sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==}
     dev: true
 
   /uglify-js@3.17.4:
@@ -5808,15 +5547,6 @@ packages:
     dev: true
     optional: true
 
-  /unbox-primitive@1.0.2:
-    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
-    dependencies:
-      call-bind: 1.0.2
-      has-bigints: 1.0.2
-      has-symbols: 1.0.3
-      which-boxed-primitive: 1.0.2
-    dev: true
-
   /unbzip2-stream@1.4.3:
     resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
     dependencies:
@@ -5824,6 +5554,10 @@ packages:
       through: 2.3.8
     dev: true
 
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: true
+
   /universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
@@ -5834,13 +5568,13 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
+  /update-browserslist-db@1.0.13(browserslist@4.22.1):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.21.10
+      browserslist: 4.22.1
       escalade: 3.1.1
       picocolors: 1.0.0
     dev: true
@@ -5855,7 +5589,7 @@ packages:
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: true
 
   /url-parse@1.5.10:
@@ -5865,13 +5599,17 @@ packages:
       requires-port: 1.0.0
     dev: true
 
+  /urlpattern-polyfill@10.0.0:
+    resolution: {integrity: sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==}
+    dev: true
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
   /validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
     dependencies:
-      spdx-correct: 3.1.1
+      spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
     dev: true
 
@@ -5880,17 +5618,16 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite-node@0.34.4(@types/node@18.18.6)(terser@5.22.0):
-    resolution: {integrity: sha512-ho8HtiLc+nsmbwZMw8SlghESEE3KxJNp04F/jPUCLVvaURwt0d+r9LxEqCX5hvrrOQ0GSyxbYr5ZfRYhQ0yVKQ==}
-    engines: {node: '>=v14.18.0'}
+  /vite-node@1.2.2(@types/node@20.11.16)(terser@5.27.0):
+    resolution: {integrity: sha512-1as4rDTgVWJO3n1uHmUYqq7nsFgINQ9u+mRcXpjeOMJUmviqNKjcZB7UfRZrlM7MjYXMKpuWp5oGkjaFLnjawg==}
+    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: 4.5.0(@types/node@18.18.6)(terser@5.22.0)
+      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -5902,46 +5639,12 @@ packages:
       - terser
     dev: true
 
-  /vite@4.3.1(@types/node@18.18.6)(terser@5.22.0):
-    resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 18.18.6
-      esbuild: 0.17.19
-      postcss: 8.4.31
-      rollup: 3.29.4
-      terser: 5.22.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
-  /vite@4.5.0(@types/node@18.18.6)(terser@5.22.0):
-    resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  /vite@5.0.12(@types/node@20.11.16)(terser@5.27.0):
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': '>= 14'
+      '@types/node': ^18.0.0 || >=20.0.0
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
@@ -5964,31 +5667,31 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.18.6
-      esbuild: 0.18.20
-      postcss: 8.4.31
-      rollup: 3.29.4
-      terser: 5.22.0
+      '@types/node': 20.11.16
+      esbuild: 0.19.10
+      postcss: 8.4.33
+      rollup: 4.9.2
+      terser: 5.27.0
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@0.34.4(jsdom@22.1.0)(terser@5.22.0):
-    resolution: {integrity: sha512-SE/laOsB6995QlbSE6BtkpXDeVNLJc1u2LHRG/OpnN4RsRzM3GQm4nm3PQCK5OBtrsUqnhzLdnT7se3aeNGdlw==}
-    engines: {node: '>=v14.18.0'}
+  /vitest@1.2.2(@types/node@20.11.16)(jsdom@23.2.0)(terser@5.27.0):
+    resolution: {integrity: sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==}
+    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':
@@ -5997,37 +5700,29 @@ packages:
         optional: true
       jsdom:
         optional: true
-      playwright:
-        optional: true
-      safaridriver:
-        optional: true
-      webdriverio:
-        optional: true
     dependencies:
-      '@types/chai': 4.3.6
-      '@types/chai-subset': 1.3.3
-      '@types/node': 18.18.6
-      '@vitest/expect': 0.34.4
-      '@vitest/runner': 0.34.4
-      '@vitest/snapshot': 0.34.4
-      '@vitest/spy': 0.34.4
-      '@vitest/utils': 0.34.4
-      acorn: 8.10.0
-      acorn-walk: 8.2.0
+      '@types/node': 20.11.16
+      '@vitest/expect': 1.2.2
+      '@vitest/runner': 1.2.2
+      '@vitest/snapshot': 1.2.2
+      '@vitest/spy': 1.2.2
+      '@vitest/utils': 1.2.2
+      acorn-walk: 8.3.2
       cac: 6.7.14
-      chai: 4.3.7
+      chai: 4.3.10
       debug: 4.3.4
-      jsdom: 22.1.0
-      local-pkg: 0.4.3
-      magic-string: 0.30.5
+      execa: 8.0.1
+      jsdom: 23.2.0
+      local-pkg: 0.5.0
+      magic-string: 0.30.6
       pathe: 1.1.1
       picocolors: 1.0.0
-      std-env: 3.4.3
-      strip-literal: 1.0.1
-      tinybench: 2.5.0
-      tinypool: 0.7.0
-      vite: 4.5.0(@types/node@18.18.6)(terser@5.22.0)
-      vite-node: 0.34.4(@types/node@18.18.6)(terser@5.22.0)
+      std-env: 3.6.0
+      strip-literal: 1.3.0
+      tinybench: 2.5.1
+      tinypool: 0.8.2
+      vite: 5.0.12(@types/node@20.11.16)(terser@5.27.0)
+      vite-node: 1.2.2(@types/node@20.11.16)(terser@5.27.0)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -6044,11 +5739,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /w3c-xmlserializer@4.0.0:
-    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
-    engines: {node: '>=14'}
+  /w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
     dependencies:
-      xml-name-validator: 4.0.0
+      xml-name-validator: 5.0.0
     dev: true
 
   /webidl-conversions@3.0.1:
@@ -6060,23 +5755,23 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /whatwg-encoding@2.0.0:
-    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
-    engines: {node: '>=12'}
+  /whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
     dependencies:
       iconv-lite: 0.6.3
     dev: true
 
-  /whatwg-mimetype@3.0.0:
-    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
-    engines: {node: '>=12'}
+  /whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
     dev: true
 
-  /whatwg-url@12.0.1:
-    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
-    engines: {node: '>=14'}
+  /whatwg-url@14.0.0:
+    resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==}
+    engines: {node: '>=18'}
     dependencies:
-      tr46: 4.1.1
+      tr46: 5.0.0
       webidl-conversions: 7.0.0
     dev: true
 
@@ -6087,35 +5782,6 @@ packages:
       webidl-conversions: 3.0.1
     dev: true
 
-  /which-boxed-primitive@1.0.2:
-    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
-    dependencies:
-      is-bigint: 1.0.4
-      is-boolean-object: 1.1.2
-      is-number-object: 1.0.7
-      is-string: 1.0.7
-      is-symbol: 1.0.4
-    dev: true
-
-  /which-typed-array@1.1.9:
-    resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-      is-typed-array: 1.1.10
-    dev: true
-
-  /which@1.3.1:
-    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: true
-
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -6144,8 +5810,8 @@ packages:
     resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
     engines: {node: '>= 10.0.0'}
     dependencies:
-      '@babel/parser': 7.23.0
-      '@babel/types': 7.23.0
+      '@babel/parser': 7.23.9
+      '@babel/types': 7.23.9
       assert-never: 1.2.1
       babel-walk: 3.0.0-canary-5
     dev: true
@@ -6172,25 +5838,21 @@ packages:
       strip-ansi: 7.1.0
     dev: true
 
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+  /wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.0.0
+      strip-ansi: 7.1.0
     dev: true
 
-  /ws@8.13.0:
-    resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
-  /ws@8.14.1:
-    resolution: {integrity: sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==}
+  /ws@8.16.0:
+    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -6202,9 +5864,9 @@ packages:
         optional: true
     dev: true
 
-  /xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
+  /xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
     dev: true
 
   /xmlchars@2.2.0:
@@ -6224,8 +5886,8 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
-  /yaml@2.3.3:
-    resolution: {integrity: sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==}
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
     engines: {node: '>= 14'}
     dev: true
 
@@ -6234,8 +5896,8 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /yargs@17.7.1:
-    resolution: {integrity: sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==}
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
     dependencies:
       cliui: 8.0.1
diff --git a/rollup.config.js b/rollup.config.js
index d8dfc98a391..657b711b1a3 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,4 +1,5 @@
 // @ts-check
+import assert from 'node:assert/strict'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
 import path from 'node:path'
@@ -12,7 +13,15 @@ import terser from '@rollup/plugin-terser'
 import esbuild from 'rollup-plugin-esbuild'
 import alias from '@rollup/plugin-alias'
 import { entries } from './scripts/aliases.js'
-import { constEnum } from './scripts/const-enum.js'
+import { inlineEnums } from './scripts/inline-enums.js'
+
+/**
+ * @template T
+ * @template {keyof T} K
+ * @typedef { Omit<T, K> & Required<Pick<T, K>> } MarkRequired
+ */
+/** @typedef {'cjs' | 'esm-bundler' | 'global' | 'global-runtime' | 'esm-browser' | 'esm-bundler-runtime' | 'esm-browser-runtime'} PackageFormat */
+/** @typedef {MarkRequired<import('rollup').OutputOptions, 'file' | 'format'>} OutputOptions */
 
 if (!process.env.TARGET) {
   throw new Error('TARGET package must be specified via --environment flag.')
@@ -27,47 +36,53 @@ const consolidatePkg = require('@vue/consolidate/package.json')
 const packagesDir = path.resolve(__dirname, 'packages')
 const packageDir = path.resolve(packagesDir, process.env.TARGET)
 
-const resolve = p => path.resolve(packageDir, p)
+const resolve = (/** @type {string} */ p) => path.resolve(packageDir, p)
 const pkg = require(resolve(`package.json`))
 const packageOptions = pkg.buildOptions || {}
 const name = packageOptions.filename || path.basename(packageDir)
 
-const [enumPlugin, enumDefines] = constEnum()
+const [enumPlugin, enumDefines] = inlineEnums()
 
+/** @type {Record<PackageFormat, OutputOptions>} */
 const outputConfigs = {
   'esm-bundler': {
     file: resolve(`dist/${name}.esm-bundler.js`),
-    format: `es`
+    format: 'es',
   },
   'esm-browser': {
     file: resolve(`dist/${name}.esm-browser.js`),
-    format: `es`
+    format: 'es',
   },
   cjs: {
     file: resolve(`dist/${name}.cjs.js`),
-    format: `cjs`
+    format: 'cjs',
   },
   global: {
     file: resolve(`dist/${name}.global.js`),
-    format: `iife`
+    format: 'iife',
   },
   // runtime-only builds, for main "vue" package only
   'esm-bundler-runtime': {
     file: resolve(`dist/${name}.runtime.esm-bundler.js`),
-    format: `es`
+    format: 'es',
   },
   'esm-browser-runtime': {
     file: resolve(`dist/${name}.runtime.esm-browser.js`),
-    format: 'es'
+    format: 'es',
   },
   'global-runtime': {
     file: resolve(`dist/${name}.runtime.global.js`),
-    format: 'iife'
-  }
+    format: 'iife',
+  },
 }
 
+/** @type {ReadonlyArray<PackageFormat>} */
 const defaultFormats = ['esm-bundler', 'cjs']
-const inlineFormats = process.env.FORMATS && process.env.FORMATS.split(',')
+/** @type {ReadonlyArray<PackageFormat>} */
+const inlineFormats = /** @type {any} */ (
+  process.env.FORMATS && process.env.FORMATS.split(',')
+)
+/** @type {ReadonlyArray<PackageFormat>} */
 const packageFormats = inlineFormats || packageOptions.formats || defaultFormats
 const packageConfigs = process.env.PROD_ONLY
   ? []
@@ -89,6 +104,13 @@ if (process.env.NODE_ENV === 'production') {
 
 export default packageConfigs
 
+/**
+ *
+ * @param {PackageFormat} format
+ * @param {OutputOptions} output
+ * @param {ReadonlyArray<import('rollup').Plugin>} plugins
+ * @returns {import('rollup').RollupOptions}
+ */
 function createConfig(format, output, plugins = []) {
   if (!output) {
     console.log(pico.yellow(`invalid format: "${format}"`))
@@ -100,7 +122,7 @@ function createConfig(format, output, plugins = []) {
   const isBundlerESMBuild = /esm-bundler/.test(format)
   const isBrowserESMBuild = /esm-browser/.test(format)
   const isServerRenderer = name === 'server-renderer'
-  const isNodeBuild = format === 'cjs'
+  const isCJSBuild = format === 'cjs'
   const isGlobalBuild = /global/.test(format)
   const isCompatPackage =
     pkg.name === '@vue/compat' || pkg.name === '@vue/compat-canary'
@@ -109,8 +131,14 @@ function createConfig(format, output, plugins = []) {
     (isGlobalBuild || isBrowserESMBuild || isBundlerESMBuild) &&
     !packageOptions.enableNonBrowserBranches
 
+  output.banner = `/**
+* ${pkg.name} v${masterVersion}
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/`
+
   output.exports = isCompatPackage ? 'auto' : 'named'
-  if (isNodeBuild) {
+  if (isCJSBuild) {
     output.esModule = true
   }
   output.sourcemap = !!process.env.SOURCE_MAP
@@ -132,6 +160,7 @@ function createConfig(format, output, plugins = []) {
   }
 
   function resolveDefine() {
+    /** @type {Record<string, string>} */
     const replacements = {
       __COMMIT__: `"${process.env.COMMIT}"`,
       __VERSION__: `"${masterVersion}"`,
@@ -143,9 +172,9 @@ function createConfig(format, output, plugins = []) {
       __ESM_BUNDLER__: String(isBundlerESMBuild),
       __ESM_BROWSER__: String(isBrowserESMBuild),
       // is targeting Node (SSR)?
-      __NODE_JS__: String(isNodeBuild),
+      __CJS__: String(isCJSBuild),
       // need SSR-specific branches?
-      __SSR__: String(isNodeBuild || isBundlerESMBuild || isServerRenderer),
+      __SSR__: String(isCJSBuild || isBundlerESMBuild || isServerRenderer),
 
       // 2.x compat build
       __COMPAT__: String(isCompatBuild),
@@ -157,12 +186,14 @@ function createConfig(format, output, plugins = []) {
         : `true`,
       __FEATURE_PROD_DEVTOOLS__: isBundlerESMBuild
         ? `__VUE_PROD_DEVTOOLS__`
-        : `false`
+        : `false`,
+      __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: isBundlerESMBuild
+        ? `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`
+        : `false`,
     }
 
     if (!isBundlerESMBuild) {
       // hard coded dev/prod builds
-      // @ts-ignore
       replacements.__DEV__ = String(!isProductionBuild)
     }
 
@@ -170,7 +201,9 @@ function createConfig(format, output, plugins = []) {
     //__RUNTIME_COMPILE__=true pnpm build runtime-core
     Object.keys(replacements).forEach(key => {
       if (key in process.env) {
-        replacements[key] = process.env[key]
+        const value = process.env[key]
+        assert(typeof value === 'string')
+        replacements[key] = value
       }
     })
     return replacements
@@ -186,14 +219,14 @@ function createConfig(format, output, plugins = []) {
         'context.onError(': `/*#__PURE__*/ context.onError(`,
         'emitError(': `/*#__PURE__*/ emitError(`,
         'createCompilerError(': `/*#__PURE__*/ createCompilerError(`,
-        'createDOMCompilerError(': `/*#__PURE__*/ createDOMCompilerError(`
+        'createDOMCompilerError(': `/*#__PURE__*/ createDOMCompilerError(`,
       })
     }
 
     if (isBundlerESMBuild) {
       Object.assign(replacements, {
         // preserve to be handled by bundlers
-        __DEV__: `!!(process.env.NODE_ENV !== 'production')`
+        __DEV__: `!!(process.env.NODE_ENV !== 'production')`,
       })
     }
 
@@ -202,12 +235,11 @@ function createConfig(format, output, plugins = []) {
       Object.assign(replacements, {
         'process.env': '({})',
         'process.platform': '""',
-        'process.stdout': 'null'
+        'process.stdout': 'null',
       })
     }
 
     if (Object.keys(replacements).length) {
-      // @ts-ignore
       return [replace({ values: replacements, preventAssignment: true })]
     } else {
       return []
@@ -215,7 +247,12 @@ function createConfig(format, output, plugins = []) {
   }
 
   function resolveExternal() {
-    const treeShakenDeps = ['source-map-js', '@babel/parser', 'estree-walker']
+    const treeShakenDeps = [
+      'source-map-js',
+      '@babel/parser',
+      'estree-walker',
+      'entities/lib/decode.js',
+    ]
 
     if (isGlobalBuild || isBrowserESMBuild || isCompatPackage) {
       if (!packageOptions.enableNonBrowserBranches) {
@@ -232,7 +269,7 @@ function createConfig(format, output, plugins = []) {
         // for @vue/compiler-sfc / server-renderer
         ...['path', 'url', 'stream'],
         // somehow these throw warnings for runtime-* package builds
-        ...treeShakenDeps
+        ...treeShakenDeps,
       ]
     }
   }
@@ -240,6 +277,7 @@ function createConfig(format, output, plugins = []) {
   function resolveNodePlugins() {
     // we are bundling forked consolidate.js in compiler-sfc which dynamically
     // requires a ton of template engines which should be ignored.
+    /** @type {ReadonlyArray<string>} */
     let cjsIgnores = []
     if (
       pkg.name === '@vue/compiler-sfc' ||
@@ -253,7 +291,7 @@ function createConfig(format, output, plugins = []) {
         'teacup/lib/express',
         'arc-templates/dist/es5',
         'then-pug',
-        'then-jade'
+        'then-jade',
       ]
     }
 
@@ -263,10 +301,10 @@ function createConfig(format, output, plugins = []) {
         ? [
             commonJS({
               sourceMap: false,
-              ignore: cjsIgnores
+              ignore: cjsIgnores,
             }),
             ...(format === 'cjs' ? [] : [polyfillNode()]),
-            nodeResolve()
+            nodeResolve(),
           ]
         : []
 
@@ -280,10 +318,10 @@ function createConfig(format, output, plugins = []) {
     external: resolveExternal(),
     plugins: [
       json({
-        namedExports: false
+        namedExports: false,
       }),
       alias({
-        entries
+        entries,
       }),
       enumPlugin,
       ...resolveReplace(),
@@ -291,47 +329,47 @@ function createConfig(format, output, plugins = []) {
         tsconfig: path.resolve(__dirname, 'tsconfig.json'),
         sourceMap: output.sourcemap,
         minify: false,
-        target: isServerRenderer || isNodeBuild ? 'es2019' : 'es2015',
-        define: resolveDefine()
+        target: isServerRenderer || isCJSBuild ? 'es2019' : 'es2015',
+        define: resolveDefine(),
       }),
       ...resolveNodePlugins(),
-      ...plugins
+      ...plugins,
     ],
     output,
     onwarn: (msg, warn) => {
-      if (!/Circular/.test(msg)) {
+      if (msg.code !== 'CIRCULAR_DEPENDENCY') {
         warn(msg)
       }
     },
     treeshake: {
-      moduleSideEffects: false
-    }
+      moduleSideEffects: false,
+    },
   }
 }
 
-function createProductionConfig(format) {
+function createProductionConfig(/** @type {PackageFormat} */ format) {
   return createConfig(format, {
     file: resolve(`dist/${name}.${format}.prod.js`),
-    format: outputConfigs[format].format
+    format: outputConfigs[format].format,
   })
 }
 
-function createMinifiedConfig(format) {
+function createMinifiedConfig(/** @type {PackageFormat} */ format) {
   return createConfig(
     format,
     {
       file: outputConfigs[format].file.replace(/\.js$/, '.prod.js'),
-      format: outputConfigs[format].format
+      format: outputConfigs[format].format,
     },
     [
       terser({
         module: /^esm/.test(format),
         compress: {
           ecma: 2015,
-          pure_getters: true
+          pure_getters: true,
         },
-        safari10: true
-      })
-    ]
+        safari10: true,
+      }),
+    ],
   )
 }
diff --git a/rollup.dts.config.js b/rollup.dts.config.js
index 39d2331e5f7..d715af4a4f8 100644
--- a/rollup.dts.config.js
+++ b/rollup.dts.config.js
@@ -1,12 +1,13 @@
 // @ts-check
+import assert from 'node:assert/strict'
 import { parse } from '@babel/parser'
-import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs'
+import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs'
 import MagicString from 'magic-string'
 import dts from 'rollup-plugin-dts'
 
 if (!existsSync('temp/packages')) {
   console.warn(
-    'no temp dts files found. run `tsc -p tsconfig.build.json` first.'
+    'no temp dts files found. run `tsc -p tsconfig.build.json` first.',
   )
   process.exit(1)
 }
@@ -17,26 +18,29 @@ const targetPackages = targets
   ? packages.filter(pkg => targets.includes(pkg))
   : packages
 
-export default targetPackages.map(pkg => {
-  return {
-    input: `./temp/packages/${pkg}/src/index.d.ts`,
-    output: {
-      file: `packages/${pkg}/dist/${pkg}.d.ts`,
-      format: 'es'
-    },
-    plugins: [dts(), patchTypes(pkg), ...(pkg === 'vue' ? [copyMts()] : [])],
-    onwarn(warning, warn) {
-      // during dts rollup, everything is externalized by default
-      if (
-        warning.code === 'UNRESOLVED_IMPORT' &&
-        !warning.exporter.startsWith('.')
-      ) {
-        return
-      }
-      warn(warning)
+export default targetPackages.map(
+  /** @returns {import('rollup').RollupOptions} */
+  pkg => {
+    return {
+      input: `./temp/packages/${pkg}/src/index.d.ts`,
+      output: {
+        file: `packages/${pkg}/dist/${pkg}.d.ts`,
+        format: 'es',
+      },
+      plugins: [dts(), patchTypes(pkg), ...(pkg === 'vue' ? [copyMts()] : [])],
+      onwarn(warning, warn) {
+        // during dts rollup, everything is externalized by default
+        if (
+          warning.code === 'UNRESOLVED_IMPORT' &&
+          !warning.exporter?.startsWith('.')
+        ) {
+          return
+        }
+        warn(warning)
+      },
     }
-  }
-})
+  },
+)
 
 /**
  * Patch the dts generated by rollup-plugin-dts
@@ -45,6 +49,8 @@ export default targetPackages.map(pkg => {
  *    otherwise it gets weird in vitepress `defineComponent` call with
  *    "the inferred type cannot be named without a reference"
  * 2. Append custom augmentations (jsx, macros)
+ *
+ * @param {string} pkg
  * @returns {import('rollup').Plugin}
  */
 function patchTypes(pkg) {
@@ -54,7 +60,7 @@ function patchTypes(pkg) {
       const s = new MagicString(code)
       const ast = parse(code, {
         plugins: ['typescript'],
-        sourceType: 'module'
+        sourceType: 'module',
       })
 
       /**
@@ -65,15 +71,16 @@ function patchTypes(pkg) {
         if (!node.id) {
           return
         }
-        // @ts-ignore
+        assert(node.id.type === 'Identifier')
         const name = node.id.name
         if (name.startsWith('_')) {
           return
         }
         shouldRemoveExport.add(name)
         if (isExported.has(name)) {
-          // @ts-ignore
-          s.prependLeft((parentDecl || node).start, `export `)
+          const start = (parentDecl || node).start
+          assert(typeof start === 'number')
+          s.prependLeft(start, `export `)
         }
       }
 
@@ -97,12 +104,13 @@ function patchTypes(pkg) {
         if (node.type === 'VariableDeclaration') {
           processDeclaration(node.declarations[0], node)
           if (node.declarations.length > 1) {
+            assert(typeof node.start === 'number')
+            assert(typeof node.end === 'number')
             throw new Error(
               `unhandled declare const with more than one declarators:\n${code.slice(
-                // @ts-ignore
                 node.start,
-                node.end
-              )}`
+                node.end,
+              )}`,
             )
           }
         } else if (
@@ -126,7 +134,7 @@ function patchTypes(pkg) {
               spec.type === 'ExportSpecifier' &&
               shouldRemoveExport.has(spec.local.name)
             ) {
-              // @ts-ignore
+              assert(spec.exported.type === 'Identifier')
               const exported = spec.exported.name
               if (exported !== spec.local.name) {
                 // this only happens if we have something like
@@ -136,19 +144,27 @@ function patchTypes(pkg) {
               }
               const next = node.specifiers[i + 1]
               if (next) {
-                // @ts-ignore
+                assert(typeof spec.start === 'number')
+                assert(typeof next.start === 'number')
                 s.remove(spec.start, next.start)
               } else {
                 // last one
                 const prev = node.specifiers[i - 1]
-                // @ts-ignore
-                s.remove(prev ? prev.end : spec.start, spec.end)
+                assert(typeof spec.start === 'number')
+                assert(typeof spec.end === 'number')
+                s.remove(
+                  prev
+                    ? (assert(typeof prev.end === 'number'), prev.end)
+                    : spec.start,
+                  spec.end,
+                )
               }
               removed++
             }
           }
           if (removed === node.specifiers.length) {
-            // @ts-ignore
+            assert(typeof node.start === 'number')
+            assert(typeof node.end === 'number')
             s.remove(node.start, node.end)
           }
         }
@@ -165,7 +181,7 @@ function patchTypes(pkg) {
             .join('\n')
       }
       return code
-    }
+    },
   }
 }
 
@@ -181,11 +197,8 @@ function copyMts() {
   return {
     name: 'copy-vue-mts',
     writeBundle(_, bundle) {
-      writeFileSync(
-        'packages/vue/dist/vue.d.mts',
-        // @ts-ignore
-        bundle['vue.d.ts'].code
-      )
-    }
+      assert('code' in bundle['vue.d.ts'])
+      writeFileSync('packages/vue/dist/vue.d.mts', bundle['vue.d.ts'].code)
+    },
   }
 }
diff --git a/scripts/aliases.js b/scripts/aliases.js
index 34a7c643557..d50498a80aa 100644
--- a/scripts/aliases.js
+++ b/scripts/aliases.js
@@ -4,19 +4,20 @@ import { readdirSync, statSync } from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
-const resolveEntryForPkg = p =>
+const resolveEntryForPkg = (/** @type {string} */ p) =>
   path.resolve(
     fileURLToPath(import.meta.url),
-    `../../packages/${p}/src/index.ts`
+    `../../packages/${p}/src/index.ts`,
   )
 
 const dirs = readdirSync(new URL('../packages', import.meta.url))
 
+/** @type {Record<string, string>} */
 const entries = {
   vue: resolveEntryForPkg('vue'),
   'vue/compiler-sfc': resolveEntryForPkg('compiler-sfc'),
   'vue/server-renderer': resolveEntryForPkg('server-renderer'),
-  '@vue/compat': resolveEntryForPkg('vue-compat')
+  '@vue/compat': resolveEntryForPkg('vue-compat'),
 }
 
 const nonSrcPackages = ['sfc-playground', 'template-explorer', 'dts-test']
diff --git a/scripts/build.js b/scripts/build.js
index 77f711ce87f..eacabe0dee4 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -20,13 +20,13 @@ import fs from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import path from 'node:path'
 import minimist from 'minimist'
-import { gzipSync, brotliCompressSync } from 'node:zlib'
+import { brotliCompressSync, gzipSync } from 'node:zlib'
 import pico from 'picocolors'
 import { execa, execaSync } from 'execa'
 import { cpus } from 'node:os'
 import { createRequire } from 'node:module'
 import { targets as allTargets, fuzzyMatchTarget } from './utils.js'
-import { scanEnums } from './const-enum.js'
+import { scanEnums } from './inline-enums.js'
 import prettyBytes from 'pretty-bytes'
 
 const require = createRequire(import.meta.url)
@@ -38,9 +38,10 @@ const prodOnly = !devOnly && (args.prodOnly || args.p)
 const buildTypes = args.withTypes || args.t
 const sourceMap = args.sourcemap || args.s
 const isRelease = args.release
+/** @type {boolean | undefined} */
 const buildAllMatching = args.all || args.a
 const writeSize = args.size
-const commit = execaSync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
+const commit = execaSync('git', ['rev-parse', '--short=7', 'HEAD']).stdout
 
 const sizeDir = path.resolve('temp/size')
 
@@ -63,11 +64,11 @@ async function run() {
           'build-dts',
           ...(targets.length
             ? ['--environment', `TARGETS:${resolvedTargets.join(',')}`]
-            : [])
+            : []),
         ],
         {
-          stdio: 'inherit'
-        }
+          stdio: 'inherit',
+        },
       )
     }
   } finally {
@@ -75,19 +76,36 @@ async function run() {
   }
 }
 
+/**
+ * Builds all the targets in parallel.
+ * @param {Array<string>} targets - An array of targets to build.
+ * @returns {Promise<void>} - A promise representing the build process.
+ */
 async function buildAll(targets) {
   await runParallel(cpus().length, targets, build)
 }
 
+/**
+ * Runs iterator function in parallel.
+ * @template T - The type of items in the data source
+ * @param {number} maxConcurrency - The maximum concurrency.
+ * @param {Array<T>} source - The data source
+ * @param {(item: T) => Promise<void>} iteratorFn - The iteratorFn
+ * @returns {Promise<void[]>} - A Promise array containing all iteration results.
+ */
 async function runParallel(maxConcurrency, source, iteratorFn) {
+  /**@type {Promise<void>[]} */
   const ret = []
+  /**@type {Promise<void>[]} */
   const executing = []
   for (const item of source) {
-    const p = Promise.resolve().then(() => iteratorFn(item, source))
+    const p = Promise.resolve().then(() => iteratorFn(item))
     ret.push(p)
 
     if (maxConcurrency <= source.length) {
-      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
+      const e = p.then(() => {
+        executing.splice(executing.indexOf(e), 1)
+      })
       executing.push(e)
       if (executing.length >= maxConcurrency) {
         await Promise.race(executing)
@@ -96,7 +114,11 @@ async function runParallel(maxConcurrency, source, iteratorFn) {
   }
   return Promise.all(ret)
 }
-
+/**
+ * Builds the target.
+ * @param {string} target - The target to build.
+ * @returns {Promise<void>} - A promise representing the build process.
+ */
 async function build(target) {
   const pkgDir = path.resolve(`packages/${target}`)
   const pkg = require(`${pkgDir}/package.json`)
@@ -125,15 +147,20 @@ async function build(target) {
         `TARGET:${target}`,
         formats ? `FORMATS:${formats}` : ``,
         prodOnly ? `PROD_ONLY:true` : ``,
-        sourceMap ? `SOURCE_MAP:true` : ``
+        sourceMap ? `SOURCE_MAP:true` : ``,
       ]
         .filter(Boolean)
-        .join(',')
+        .join(','),
     ],
-    { stdio: 'inherit' }
+    { stdio: 'inherit' },
   )
 }
 
+/**
+ * Checks the sizes of all targets.
+ * @param {string[]} targets - The targets to check sizes for.
+ * @returns {Promise<void>}
+ */
 async function checkAllSizes(targets) {
   if (devOnly || (formats && !formats.includes('global'))) {
     return
@@ -145,6 +172,11 @@ async function checkAllSizes(targets) {
   console.log()
 }
 
+/**
+ * Checks the size of a target.
+ * @param {string} target - The target to check the size for.
+ * @returns {Promise<void>}
+ */
 async function checkSize(target) {
   const pkgDir = path.resolve(`packages/${target}`)
   await checkFileSize(`${pkgDir}/dist/${target}.global.prod.js`)
@@ -153,6 +185,11 @@ async function checkSize(target) {
   }
 }
 
+/**
+ * Checks the file size.
+ * @param {string} filePath - The path of the file to check the size for.
+ * @returns {Promise<void>}
+ */
 async function checkFileSize(filePath) {
   if (!existsSync(filePath)) {
     return
@@ -165,10 +202,10 @@ async function checkFileSize(filePath) {
 
   console.log(
     `${pico.gray(pico.bold(fileName))} min:${prettyBytes(
-      file.length
+      file.length,
     )} / gzip:${prettyBytes(gzipped.length)} / brotli:${prettyBytes(
-      brotli.length
-    )}`
+      brotli.length,
+    )}`,
   )
 
   if (writeSize)
@@ -178,8 +215,8 @@ async function checkFileSize(filePath) {
         file: fileName,
         size: file.length,
         gzip: gzipped.length,
-        brotli: brotli.length
+        brotli: brotli.length,
       }),
-      'utf-8'
+      'utf-8',
     )
 }
diff --git a/scripts/const-enum.js b/scripts/const-enum.js
deleted file mode 100644
index e9f25bcef50..00000000000
--- a/scripts/const-enum.js
+++ /dev/null
@@ -1,255 +0,0 @@
-// @ts-check
-
-/**
- * We use rollup-plugin-esbuild for faster builds, but esbuild in isolation
- * mode compiles const enums into runtime enums, bloating bundle size.
- *
- * Here we pre-process all the const enums in the project and turn them into
- * global replacements, and remove the original declarations and re-exports.
- *
- * This erases the const enums before the esbuild transform so that we can
- * leverage esbuild's speed while retaining the DX and bundle size benefits
- * of const enums.
- *
- * This file is expected to be executed with project root as cwd.
- */
-
-import { execaSync } from 'execa'
-import {
-  existsSync,
-  mkdirSync,
-  readFileSync,
-  rmSync,
-  writeFileSync
-} from 'node:fs'
-import { parse } from '@babel/parser'
-import path from 'node:path'
-import MagicString from 'magic-string'
-
-const ENUM_CACHE_PATH = 'temp/enum.json'
-
-function evaluate(exp) {
-  return new Function(`return ${exp}`)()
-}
-
-// this is called in the build script entry once
-// so the data can be shared across concurrent Rollup processes
-export function scanEnums() {
-  /**
-   * @type {{ ranges: Record<string, [number, number][]>, defines: Record<string, string>, ids: string[] }}
-   */
-  const enumData = {
-    ranges: {},
-    defines: {},
-    ids: []
-  }
-
-  // 1. grep for files with exported const enum
-  const { stdout } = execaSync('git', ['grep', `export const enum`])
-  const files = [...new Set(stdout.split('\n').map(line => line.split(':')[0]))]
-
-  // 2. parse matched files to collect enum info
-  for (const relativeFile of files) {
-    const file = path.resolve(process.cwd(), relativeFile)
-    const content = readFileSync(file, 'utf-8')
-    const ast = parse(content, {
-      plugins: ['typescript'],
-      sourceType: 'module'
-    })
-
-    for (const node of ast.program.body) {
-      if (
-        node.type === 'ExportNamedDeclaration' &&
-        node.declaration &&
-        node.declaration.type === 'TSEnumDeclaration'
-      ) {
-        if (file in enumData.ranges) {
-          // @ts-ignore
-          enumData.ranges[file].push([node.start, node.end])
-        } else {
-          // @ts-ignore
-          enumData.ranges[file] = [[node.start, node.end]]
-        }
-
-        const decl = node.declaration
-        let lastInitialized
-        for (let i = 0; i < decl.members.length; i++) {
-          const e = decl.members[i]
-          const id = decl.id.name
-          if (!enumData.ids.includes(id)) {
-            enumData.ids.push(id)
-          }
-          const key = e.id.type === 'Identifier' ? e.id.name : e.id.value
-          const fullKey = `${id}.${key}`
-          const saveValue = value => {
-            if (fullKey in enumData.defines) {
-              throw new Error(`name conflict for enum ${id} in ${file}`)
-            }
-            enumData.defines[fullKey] = JSON.stringify(value)
-          }
-          const init = e.initializer
-          if (init) {
-            let value
-            if (
-              init.type === 'StringLiteral' ||
-              init.type === 'NumericLiteral'
-            ) {
-              value = init.value
-            }
-
-            // e.g. 1 << 2
-            if (init.type === 'BinaryExpression') {
-              const resolveValue = node => {
-                if (
-                  node.type === 'NumericLiteral' ||
-                  node.type === 'StringLiteral'
-                ) {
-                  return node.value
-                } else if (node.type === 'MemberExpression') {
-                  const exp = content.slice(node.start, node.end)
-                  if (!(exp in enumData.defines)) {
-                    throw new Error(
-                      `unhandled enum initialization expression ${exp} in ${file}`
-                    )
-                  }
-                  return enumData.defines[exp]
-                } else {
-                  throw new Error(
-                    `unhandled BinaryExpression operand type ${node.type} in ${file}`
-                  )
-                }
-              }
-              const exp = `${resolveValue(init.left)}${
-                init.operator
-              }${resolveValue(init.right)}`
-              value = evaluate(exp)
-            }
-
-            if (init.type === 'UnaryExpression') {
-              if (
-                init.argument.type === 'StringLiteral' ||
-                init.argument.type === 'NumericLiteral'
-              ) {
-                const exp = `${init.operator}${init.argument.value}`
-                value = evaluate(exp)
-              } else {
-                throw new Error(
-                  `unhandled UnaryExpression argument type ${init.argument.type} in ${file}`
-                )
-              }
-            }
-
-            if (value === undefined) {
-              throw new Error(
-                `unhandled initializer type ${init.type} for ${fullKey} in ${file}`
-              )
-            }
-            saveValue(value)
-            lastInitialized = value
-          } else {
-            if (lastInitialized === undefined) {
-              // first initialized
-              saveValue((lastInitialized = 0))
-            } else if (typeof lastInitialized === 'number') {
-              saveValue(++lastInitialized)
-            } else {
-              // should not happen
-              throw new Error(`wrong enum initialization sequence in ${file}`)
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // 3. save cache
-  if (!existsSync('temp')) mkdirSync('temp')
-  writeFileSync(ENUM_CACHE_PATH, JSON.stringify(enumData))
-
-  return () => {
-    rmSync(ENUM_CACHE_PATH, { force: true })
-  }
-}
-
-/**
- * @returns {[import('rollup').Plugin, Record<string, string>]}
- */
-export function constEnum() {
-  if (!existsSync(ENUM_CACHE_PATH)) {
-    throw new Error('enum cache needs to be initialized before creating plugin')
-  }
-  /**
-   * @type {{ ranges: Record<string, [number, number][]>, defines: Record<string, string>, ids: string[] }}
-   */
-  const enumData = JSON.parse(readFileSync(ENUM_CACHE_PATH, 'utf-8'))
-
-  // construct a regex for matching re-exports of known const enums
-  const reExportsRE = new RegExp(
-    `export {[^}]*?\\b(${enumData.ids.join('|')})\\b[^]*?}`
-  )
-
-  // 3. during transform:
-  //    3.1 files w/ const enum declaration: remove declaration
-  //    3.2 files using const enum: inject into esbuild define
-  /**
-   * @type {import('rollup').Plugin}
-   */
-  const plugin = {
-    name: 'remove-const-enum',
-    transform(code, id) {
-      let s
-
-      if (id in enumData.ranges) {
-        s = s || new MagicString(code)
-        for (const [start, end] of enumData.ranges[id]) {
-          s.remove(start, end)
-        }
-      }
-
-      // check for const enum re-exports that must be removed
-      if (reExportsRE.test(code)) {
-        s = s || new MagicString(code)
-        const ast = parse(code, {
-          plugins: ['typescript'],
-          sourceType: 'module'
-        })
-        for (const node of ast.program.body) {
-          if (
-            node.type === 'ExportNamedDeclaration' &&
-            node.exportKind !== 'type' &&
-            node.source
-          ) {
-            for (let i = 0; i < node.specifiers.length; i++) {
-              const spec = node.specifiers[i]
-              if (
-                spec.type === 'ExportSpecifier' &&
-                spec.exportKind !== 'type' &&
-                enumData.ids.includes(spec.local.name)
-              ) {
-                const next = node.specifiers[i + 1]
-                if (next) {
-                  // @ts-ignore
-                  s.remove(spec.start, next.start)
-                } else {
-                  // last one
-                  const prev = node.specifiers[i - 1]
-                  // @ts-ignore
-                  s.remove(prev ? prev.end : spec.start, spec.end)
-                }
-              }
-            }
-          }
-        }
-      }
-
-      if (s) {
-        return {
-          code: s.toString(),
-          map: s.generateMap()
-        }
-      }
-    }
-  }
-
-  return [plugin, enumData.defines]
-}
diff --git a/scripts/dev.js b/scripts/dev.js
index 8342f5237b7..7db79442ee9 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -2,10 +2,10 @@
 
 // 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'
+import { dirname, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { createRequire } from 'node:module'
 import minimist from 'minimist'
@@ -14,115 +14,120 @@ import { polyfillNode } from 'esbuild-plugin-polyfill-node'
 const require = createRequire(import.meta.url)
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const args = minimist(process.argv.slice(2))
-const target = args._[0] || 'vue'
+const targets = args._.length ? args._ : ['vue']
 const format = args.f || 'global'
+const prod = args.p || false
 const inlineDeps = args.i || args.inline
-const pkg = require(`../packages/${target}/package.json`)
 
 // resolve output
 const outputFormat = format.startsWith('global')
   ? 'iife'
   : format === 'cjs'
-  ? 'cjs'
-  : 'esm'
+    ? 'cjs'
+    : 'esm'
 
 const postfix = format.endsWith('-runtime')
   ? `runtime.${format.replace(/-runtime$/, '')}`
   : format
 
-const outfile = resolve(
-  __dirname,
-  `../packages/${target}/dist/${
-    target === 'vue-compat' ? `vue` : target
-  }.${postfix}.js`
-)
-const relativeOutfile = relative(process.cwd(), outfile)
+for (const target of targets) {
+  const pkg = require(`../packages/${target}/package.json`)
+  const outfile = resolve(
+    __dirname,
+    `../packages/${target}/dist/${
+      target === 'vue-compat' ? `vue` : target
+    }.${postfix}.${prod ? `prod.` : ``}js`,
+  )
+  const relativeOutfile = relative(process.cwd(), outfile)
 
-// resolve externals
-// TODO this logic is largely duplicated from rollup.config.js
-let external = []
-if (!inlineDeps) {
-  // cjs & esm-bundler: external all deps
-  if (format === 'cjs' || format.includes('esm-bundler')) {
-    external = [
-      ...external,
-      ...Object.keys(pkg.dependencies || {}),
-      ...Object.keys(pkg.peerDependencies || {}),
-      // for @vue/compiler-sfc / server-renderer
-      'path',
-      'url',
-      'stream'
-    ]
-  }
+  // resolve externals
+  // TODO this logic is largely duplicated from rollup.config.js
+  /** @type {string[]} */
+  let external = []
+  if (!inlineDeps) {
+    // cjs & esm-bundler: external all deps
+    if (format === 'cjs' || format.includes('esm-bundler')) {
+      external = [
+        ...external,
+        ...Object.keys(pkg.dependencies || {}),
+        ...Object.keys(pkg.peerDependencies || {}),
+        // for @vue/compiler-sfc / server-renderer
+        'path',
+        'url',
+        'stream',
+      ]
+    }
 
-  if (target === 'compiler-sfc') {
-    const consolidatePkgPath = require.resolve(
-      '@vue/consolidate/package.json',
-      {
-        paths: [resolve(__dirname, `../packages/${target}/`)]
-      }
-    )
-    const consolidateDeps = Object.keys(
-      require(consolidatePkgPath).devDependencies
-    )
-    external = [
-      ...external,
-      ...consolidateDeps,
-      'fs',
-      'vm',
-      'crypto',
-      'react-dom/server',
-      'teacup/lib/express',
-      'arc-templates/dist/es5',
-      'then-pug',
-      'then-jade'
-    ]
+    if (target === 'compiler-sfc') {
+      const consolidatePkgPath = require.resolve(
+        '@vue/consolidate/package.json',
+        {
+          paths: [resolve(__dirname, `../packages/${target}/`)],
+        },
+      )
+      const consolidateDeps = Object.keys(
+        require(consolidatePkgPath).devDependencies,
+      )
+      external = [
+        ...external,
+        ...consolidateDeps,
+        'fs',
+        'vm',
+        'crypto',
+        'react-dom/server',
+        'teacup/lib/express',
+        'arc-templates/dist/es5',
+        'then-pug',
+        'then-jade',
+      ]
+    }
   }
-}
+  /** @type {Array<import('esbuild').Plugin>} */
+  const plugins = [
+    {
+      name: 'log-rebuild',
+      setup(build) {
+        build.onEnd(() => {
+          console.log(`built: ${relativeOutfile}`)
+        })
+      },
+    },
+  ]
 
-const plugins = [
-  {
-    name: 'log-rebuild',
-    setup(build) {
-      build.onEnd(() => {
-        console.log(`built: ${relativeOutfile}`)
-      })
-    }
+  if (format !== 'cjs' && pkg.buildOptions?.enableNonBrowserBranches) {
+    plugins.push(polyfillNode())
   }
-]
 
-if (format === 'cjs' || pkg.buildOptions?.enableNonBrowserBranches) {
-  plugins.push(polyfillNode())
+  esbuild
+    .context({
+      entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
+      outfile,
+      bundle: true,
+      external,
+      sourcemap: true,
+      format: outputFormat,
+      globalName: pkg.buildOptions?.name,
+      platform: format === 'cjs' ? 'node' : 'browser',
+      plugins,
+      define: {
+        __COMMIT__: `"dev"`,
+        __VERSION__: `"${pkg.version}"`,
+        __DEV__: prod ? `false` : `true`,
+        __TEST__: `false`,
+        __BROWSER__: String(
+          format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches,
+        ),
+        __GLOBAL__: String(format === 'global'),
+        __ESM_BUNDLER__: String(format.includes('esm-bundler')),
+        __ESM_BROWSER__: String(format.includes('esm-browser')),
+        __CJS__: String(format === 'cjs'),
+        __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
+        __COMPAT__: String(target === 'vue-compat'),
+        __FEATURE_SUSPENSE__: `true`,
+        __FEATURE_OPTIONS_API__: `true`,
+        __FEATURE_PROD_DEVTOOLS__: `false`,
+        __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: `false`,
+      },
+    })
+    .then(ctx => ctx.watch())
 }
-
-esbuild
-  .context({
-    entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
-    outfile,
-    bundle: true,
-    external,
-    sourcemap: true,
-    format: outputFormat,
-    globalName: pkg.buildOptions?.name,
-    platform: format === 'cjs' ? 'node' : 'browser',
-    plugins,
-    define: {
-      __COMMIT__: `"dev"`,
-      __VERSION__: `"${pkg.version}"`,
-      __DEV__: `true`,
-      __TEST__: `false`,
-      __BROWSER__: String(
-        format !== 'cjs' && !pkg.buildOptions?.enableNonBrowserBranches
-      ),
-      __GLOBAL__: String(format === 'global'),
-      __ESM_BUNDLER__: String(format.includes('esm-bundler')),
-      __ESM_BROWSER__: String(format.includes('esm-browser')),
-      __NODE_JS__: String(format === 'cjs'),
-      __SSR__: String(format === 'cjs' || format.includes('esm-bundler')),
-      __COMPAT__: String(target === 'vue-compat'),
-      __FEATURE_SUSPENSE__: `true`,
-      __FEATURE_OPTIONS_API__: `true`,
-      __FEATURE_PROD_DEVTOOLS__: `false`
-    }
-  })
-  .then(ctx => ctx.watch())
diff --git a/scripts/inline-enums.js b/scripts/inline-enums.js
new file mode 100644
index 00000000000..40bd31bfd8a
--- /dev/null
+++ b/scripts/inline-enums.js
@@ -0,0 +1,279 @@
+// @ts-check
+
+/**
+ * We used const enums before, but it caused some issues: #1228, so we
+ * switched to regular enums. But we still want to keep the zero-cost benefit
+ * of const enums, and minimize the impact on bundle size as much as possible.
+ *
+ * Here we pre-process all the enums in the project and turn them into
+ * global replacements, and rewrite the original declarations as object literals.
+ *
+ * This file is expected to be executed with project root as cwd.
+ */
+
+import * as assert from 'node:assert'
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs'
+import * as path from 'node:path'
+import { parse } from '@babel/parser'
+import { execaSync } from 'execa'
+import MagicString from 'magic-string'
+
+/**
+ * @typedef {{ readonly name: string, readonly value: string | number }} EnumMember
+ * @typedef {{ readonly id: string, readonly range: readonly [start: number, end: number], readonly members: ReadonlyArray<EnumMember>}} EnumDeclaration
+ * @typedef {{ readonly declarations: { readonly [file: string] : ReadonlyArray<EnumDeclaration>}, readonly defines: { readonly [ id_key: `${string}.${string}`]: string } }} EnumData
+ */
+
+const ENUM_CACHE_PATH = 'temp/enum.json'
+
+/**
+ * @param {string} exp
+ * @returns {string | number}
+ */
+function evaluate(exp) {
+  return new Function(`return ${exp}`)()
+}
+
+// this is called in the build script entry once
+// so the data can be shared across concurrent Rollup processes
+export function scanEnums() {
+  /** @type {{ [file: string]: EnumDeclaration[] }} */
+  const declarations = Object.create(null)
+  /** @type {{ [id_key: `${string}.${string}`]: string; }} */
+  const defines = Object.create(null)
+
+  // 1. grep for files with exported enum
+  const { stdout } = execaSync('git', ['grep', `export enum`])
+  const files = [...new Set(stdout.split('\n').map(line => line.split(':')[0]))]
+
+  // 2. parse matched files to collect enum info
+  for (const relativeFile of files) {
+    const file = path.resolve(process.cwd(), relativeFile)
+    const content = readFileSync(file, 'utf-8')
+    const ast = parse(content, {
+      plugins: ['typescript'],
+      sourceType: 'module',
+    })
+
+    /** @type {Set<string>} */
+    const enumIds = new Set()
+    for (const node of ast.program.body) {
+      if (
+        node.type === 'ExportNamedDeclaration' &&
+        node.declaration &&
+        node.declaration.type === 'TSEnumDeclaration'
+      ) {
+        const decl = node.declaration
+        const id = decl.id.name
+        if (enumIds.has(id)) {
+          throw new Error(
+            `not support declaration merging for enum ${id} in ${file}`,
+          )
+        }
+        enumIds.add(id)
+        /** @type {string | number | undefined} */
+        let lastInitialized
+        /** @type {Array<EnumMember>} */
+        const members = []
+
+        for (let i = 0; i < decl.members.length; i++) {
+          const e = decl.members[i]
+          const key = e.id.type === 'Identifier' ? e.id.name : e.id.value
+          const fullKey = /** @type {const} */ (`${id}.${key}`)
+          const saveValue = (/** @type {string | number} */ value) => {
+            // We need allow same name enum in different file.
+            // For example: enum ErrorCodes exist in both @vue/compiler-core and @vue/runtime-core
+            // But not allow `ErrorCodes.__EXTEND_POINT__` appear in two same name enum
+            if (fullKey in defines) {
+              throw new Error(`name conflict for enum ${id} in ${file}`)
+            }
+            members.push({
+              name: key,
+              value,
+            })
+            defines[fullKey] = JSON.stringify(value)
+          }
+          const init = e.initializer
+          if (init) {
+            /** @type {string | number} */
+            let value
+            if (
+              init.type === 'StringLiteral' ||
+              init.type === 'NumericLiteral'
+            ) {
+              value = init.value
+            }
+            // e.g. 1 << 2
+            else if (init.type === 'BinaryExpression') {
+              const resolveValue = (
+                /** @type {import('@babel/types').Expression | import('@babel/types').PrivateName} */ node,
+              ) => {
+                assert.ok(typeof node.start === 'number')
+                assert.ok(typeof node.end === 'number')
+                if (
+                  node.type === 'NumericLiteral' ||
+                  node.type === 'StringLiteral'
+                ) {
+                  return node.value
+                } else if (node.type === 'MemberExpression') {
+                  const exp = /** @type {`${string}.${string}`} */ (
+                    content.slice(node.start, node.end)
+                  )
+                  if (!(exp in defines)) {
+                    throw new Error(
+                      `unhandled enum initialization expression ${exp} in ${file}`,
+                    )
+                  }
+                  return defines[exp]
+                } else {
+                  throw new Error(
+                    `unhandled BinaryExpression operand type ${node.type} in ${file}`,
+                  )
+                }
+              }
+              const exp = `${resolveValue(init.left)}${
+                init.operator
+              }${resolveValue(init.right)}`
+              value = evaluate(exp)
+            } else if (init.type === 'UnaryExpression') {
+              if (
+                init.argument.type === 'StringLiteral' ||
+                init.argument.type === 'NumericLiteral'
+              ) {
+                const exp = `${init.operator}${init.argument.value}`
+                value = evaluate(exp)
+              } else {
+                throw new Error(
+                  `unhandled UnaryExpression argument type ${init.argument.type} in ${file}`,
+                )
+              }
+            } else {
+              throw new Error(
+                `unhandled initializer type ${init.type} for ${fullKey} in ${file}`,
+              )
+            }
+            lastInitialized = value
+            saveValue(lastInitialized)
+          } else {
+            if (lastInitialized === undefined) {
+              // first initialized
+              lastInitialized = 0
+              saveValue(lastInitialized)
+            } else if (typeof lastInitialized === 'number') {
+              lastInitialized++
+              saveValue(lastInitialized)
+            } else {
+              // should not happen
+              throw new Error(`wrong enum initialization sequence in ${file}`)
+            }
+          }
+        }
+
+        if (!(file in declarations)) {
+          declarations[file] = []
+        }
+        assert.ok(typeof node.start === 'number')
+        assert.ok(typeof node.end === 'number')
+        declarations[file].push({
+          id,
+          range: [node.start, node.end],
+          members,
+        })
+      }
+    }
+  }
+
+  // 3. save cache
+  if (!existsSync('temp')) mkdirSync('temp')
+
+  /** @type {EnumData} */
+  const enumData = {
+    declarations,
+    defines,
+  }
+
+  writeFileSync(ENUM_CACHE_PATH, JSON.stringify(enumData))
+
+  return () => {
+    rmSync(ENUM_CACHE_PATH, { force: true })
+  }
+}
+
+/**
+ * @returns {[import('rollup').Plugin, Record<string, string>]}
+ */
+export function inlineEnums() {
+  if (!existsSync(ENUM_CACHE_PATH)) {
+    throw new Error('enum cache needs to be initialized before creating plugin')
+  }
+  /**
+   * @type {EnumData}
+   */
+  const enumData = JSON.parse(readFileSync(ENUM_CACHE_PATH, 'utf-8'))
+
+  // 3. during transform:
+  //    3.1 files w/ enum declaration: rewrite declaration as object literal
+  //    3.2 files using enum: inject into esbuild define
+  /**
+   * @type {import('rollup').Plugin}
+   */
+  const plugin = {
+    name: 'inline-enum',
+    transform(code, id) {
+      /**
+       * @type {MagicString | undefined}
+       */
+      let s
+
+      if (id in enumData.declarations) {
+        s = s || new MagicString(code)
+        for (const declaration of enumData.declarations[id]) {
+          const {
+            range: [start, end],
+            id,
+            members,
+          } = declaration
+          s.update(
+            start,
+            end,
+            `export const ${id} = {${members
+              .flatMap(({ name, value }) => {
+                const forwardMapping =
+                  JSON.stringify(name) + ': ' + JSON.stringify(value)
+                const reverseMapping =
+                  JSON.stringify(value.toString()) + ': ' + JSON.stringify(name)
+
+                // see https://www.typescriptlang.org/docs/handbook/enums.html#reverse-mappings
+                return typeof value === 'string'
+                  ? [
+                      forwardMapping,
+                      // string enum members do not get a reverse mapping generated at all
+                    ]
+                  : [
+                      forwardMapping,
+                      // other enum members should support enum reverse mapping
+                      reverseMapping,
+                    ]
+              })
+              .join(',\n')}}`,
+          )
+        }
+      }
+
+      if (s) {
+        return {
+          code: s.toString(),
+          map: s.generateMap(),
+        }
+      }
+    },
+  }
+
+  return [plugin, enumData.defines]
+}
diff --git a/scripts/pre-dev-sfc.js b/scripts/pre-dev-sfc.js
index b9b3a534460..b28705f3464 100644
--- a/scripts/pre-dev-sfc.js
+++ b/scripts/pre-dev-sfc.js
@@ -6,8 +6,7 @@ const packagesToCheck = [
   'compiler-core',
   'compiler-dom',
   'compiler-ssr',
-  'reactivity-transform',
-  'shared'
+  'shared',
 ]
 
 let allFilesPresent = true
@@ -15,7 +14,7 @@ let allFilesPresent = true
 for (const pkg of packagesToCheck) {
   if (
     !fs.existsSync(
-      new URL(`../packages/${pkg}/dist/${pkg}.cjs.js`, import.meta.url)
+      new URL(`../packages/${pkg}/dist/${pkg}.cjs.js`, import.meta.url),
     )
   ) {
     allFilesPresent = false
diff --git a/scripts/release.js b/scripts/release.js
index a64cba03bfa..64dae9694fb 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -9,6 +9,15 @@ import { execa } from 'execa'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
 
+/**
+ * @typedef {{
+ *   name: string
+ *   version: string
+ *   dependencies?: { [dependenciesPackageName: string]: string }
+ *   peerDependencies?: { [peerDependenciesPackageName: string]: string }
+ * }} Package
+ */
+
 let versionUpdated = false
 
 const { prompt } = enquirer
@@ -19,12 +28,13 @@ const args = minimist(process.argv.slice(2), {
     skipBuild: 'skip-build',
     skipTests: 'skip-tests',
     skipGit: 'skip-git',
-    skipPrompts: 'skip-prompts'
-  }
+    skipPrompts: 'skip-prompts',
+  },
 })
 
 const preId = args.preid || semver.prerelease(currentVersion)?.[0]
 const isDryRun = args.dry
+/** @type {boolean | undefined} */
 let skipTests = args.skipTests
 const skipBuild = args.skipBuild
 const isCanary = args.canary
@@ -33,9 +43,17 @@ const skipGit = args.skipGit || args.canary
 
 const packages = fs
   .readdirSync(path.resolve(__dirname, '../packages'))
-  .filter(p => !p.endsWith('.ts') && !p.startsWith('.'))
+  .filter(p => {
+    const pkgRoot = path.resolve(__dirname, '../packages', p)
+    if (fs.statSync(pkgRoot).isDirectory()) {
+      const pkg = JSON.parse(
+        fs.readFileSync(path.resolve(pkgRoot, 'package.json'), 'utf-8'),
+      )
+      return !pkg.private
+    }
+  })
 
-const isCorePackage = pkgName => {
+const isCorePackage = (/** @type {string} */ pkgName) => {
   if (!pkgName) return
 
   if (pkgName === 'vue' || pkgName === '@vue/compat') {
@@ -48,7 +66,7 @@ const isCorePackage = pkgName => {
   )
 }
 
-const renamePackageToCanary = pkgName => {
+const renamePackageToCanary = (/** @type {string} */ pkgName) => {
   if (pkgName === 'vue') {
     return '@vue/canary'
   }
@@ -60,31 +78,43 @@ const renamePackageToCanary = pkgName => {
   return pkgName
 }
 
-const keepThePackageName = pkgName => pkgName
+const keepThePackageName = (/** @type {string} */ pkgName) => pkgName
 
+/** @type {string[]} */
 const skippedPackages = []
 
+/** @type {ReadonlyArray<import('semver').ReleaseType>} */
 const versionIncrements = [
   'patch',
   'minor',
   'major',
-  ...(preId ? ['prepatch', 'preminor', 'premajor', 'prerelease'] : [])
+  ...(preId
+    ? /** @type {const} */ (['prepatch', 'preminor', 'premajor', 'prerelease'])
+    : []),
 ]
 
-const inc = i => semver.inc(currentVersion, i, preId)
-const run = (bin, args, opts = {}) =>
-  execa(bin, args, { stdio: 'inherit', ...opts })
-const dryRun = (bin, args, opts = {}) =>
-  console.log(pico.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
+const inc = (/** @type {import('semver').ReleaseType} */ i) =>
+  semver.inc(currentVersion, i, preId)
+const run = async (
+  /** @type {string} */ bin,
+  /** @type {ReadonlyArray<string>} */ args,
+  /** @type {import('execa').Options} */ opts = {},
+) => execa(bin, args, { stdio: 'inherit', ...opts })
+const dryRun = async (
+  /** @type {string} */ bin,
+  /** @type {ReadonlyArray<string>} */ args,
+  /** @type {import('execa').Options} */ opts = {},
+) => console.log(pico.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
 const runIfNotDry = isDryRun ? dryRun : run
-const getPkgRoot = pkg => path.resolve(__dirname, '../packages/' + pkg)
-const step = msg => console.log(pico.cyan(msg))
+const getPkgRoot = (/** @type {string} */ pkg) =>
+  path.resolve(__dirname, '../packages/' + pkg)
+const step = (/** @type {string} */ msg) => console.log(pico.cyan(msg))
 
 async function main() {
   if (!(await isInSyncWithRemote())) {
     return
   } else {
-    console.log(`${pico.green(`✓`)} commit is up-to-date with rmeote.\n`)
+    console.log(`${pico.green(`✓`)} commit is up-to-date with remote.\n`)
   }
 
   let targetVersion = args._[0]
@@ -113,7 +143,7 @@ async function main() {
       const { stdout } = await run(
         'pnpm',
         ['view', `${pkgName}@~${canaryVersion}`, 'version', '--json'],
-        { stdio: 'pipe' }
+        { stdio: 'pipe' },
       )
       let versions = JSON.parse(stdout)
       versions = Array.isArray(versions) ? versions : [versions]
@@ -129,7 +159,7 @@ async function main() {
           semver.inc(latestSameDayPatch, 'prerelease', args.tag)
         )
       }
-    } catch (e) {
+    } catch (/** @type {any} */ e) {
       if (/E404/.test(e.message)) {
         // the first patch version on that day
       } else {
@@ -142,25 +172,27 @@ async function main() {
 
   if (!targetVersion) {
     // no explicit version, offer suggestions
-    // @ts-ignore
+    /** @type {{ release: string }} */
     const { release } = await prompt({
       type: 'select',
       name: 'release',
       message: 'Select release type',
-      choices: versionIncrements.map(i => `${i} (${inc(i)})`).concat(['custom'])
+      choices: versionIncrements
+        .map(i => `${i} (${inc(i)})`)
+        .concat(['custom']),
     })
 
     if (release === 'custom') {
+      /** @type {{ version: string }} */
       const result = await prompt({
         type: 'input',
         name: 'version',
         message: 'Input custom version',
-        initial: currentVersion
+        initial: currentVersion,
       })
-      // @ts-ignore
       targetVersion = result.version
     } else {
-      targetVersion = release.match(/\((.*)\)/)[1]
+      targetVersion = release.match(/\((.*)\)/)?.[1] ?? ''
     }
   }
 
@@ -172,14 +204,14 @@ async function main() {
     step(
       isCanary
         ? `Releasing canary version v${targetVersion}...`
-        : `Releasing v${targetVersion}...`
+        : `Releasing v${targetVersion}...`,
     )
   } else {
-    // @ts-ignore
+    /** @type {{ yes: boolean }} */
     const { yes: confirmRelease } = await prompt({
       type: 'confirm',
       name: 'yes',
-      message: `Releasing v${targetVersion}. Confirm?`
+      message: `Releasing v${targetVersion}. Confirm?`,
     })
 
     if (!confirmRelease) {
@@ -193,11 +225,11 @@ async function main() {
     skipTests ||= isCIPassed
 
     if (isCIPassed && !skipPrompts) {
-      // @ts-ignore
+      /** @type {{ yes: boolean }} */
       const { yes: promptSkipTests } = await prompt({
         type: 'confirm',
         name: 'yes',
-        message: `CI for this commit passed. Skip local tests?`
+        message: `CI for this commit passed. Skip local tests?`,
       })
 
       skipTests = promptSkipTests
@@ -207,7 +239,7 @@ async function main() {
   if (!skipTests) {
     step('\nRunning tests...')
     if (!isDryRun) {
-      await run('pnpm', ['test', 'run'])
+      await run('pnpm', ['run', 'test', '--run'])
     } else {
       console.log(`Skipped (dry run)`)
     }
@@ -219,7 +251,7 @@ async function main() {
   step('\nUpdating cross dependencies...')
   updateVersions(
     targetVersion,
-    isCanary ? renamePackageToCanary : keepThePackageName
+    isCanary ? renamePackageToCanary : keepThePackageName,
   )
   versionUpdated = true
 
@@ -238,11 +270,11 @@ async function main() {
   await run(`pnpm`, ['run', 'changelog'])
 
   if (!skipPrompts) {
-    // @ts-ignore
+    /** @type {{ yes: boolean }} */
     const { yes: changelogOk } = await prompt({
       type: 'confirm',
       name: 'yes',
-      message: `Changelog generated. Does it look good?`
+      message: `Changelog generated. Does it look good?`,
     })
 
     if (!changelogOk) {
@@ -270,8 +302,23 @@ async function main() {
 
   // publish packages
   step('\nPublishing packages...')
+
+  const additionalPublishFlags = []
+  if (isDryRun) {
+    additionalPublishFlags.push('--dry-run')
+  }
+  if (isDryRun || skipGit) {
+    additionalPublishFlags.push('--no-git-checks')
+  }
+  // bypass the pnpm --publish-branch restriction which isn't too useful to us
+  // otherwise it leads to a prompt and blocks the release script
+  const branch = await getBranch()
+  if (branch !== 'main') {
+    additionalPublishFlags.push('--publish-branch', branch)
+  }
+
   for (const pkg of packages) {
-    await publishPackage(pkg, targetVersion)
+    await publishPackage(pkg, targetVersion, additionalPublishFlags)
   }
 
   // push to GitHub
@@ -290,9 +337,9 @@ async function main() {
     console.log(
       pico.yellow(
         `The following packages are skipped and NOT published:\n- ${skippedPackages.join(
-          '\n- '
-        )}`
-      )
+          '\n- ',
+        )}`,
+      ),
     )
   }
   console.log()
@@ -300,10 +347,10 @@ async function main() {
 
 async function getCIResult() {
   try {
-    const { stdout: sha } = await execa('git', ['rev-parse', 'HEAD'])
+    const sha = await getSha()
     const res = await fetch(
       `https://api.github.com/repos/vuejs/core/actions/runs?head_sha=${sha}` +
-        `&status=success&exclude_pull_requests=true`
+        `&status=success&exclude_pull_requests=true`,
     )
     const data = await res.json()
     return data.workflow_runs.length > 0
@@ -315,72 +362,101 @@ async function getCIResult() {
 
 async function isInSyncWithRemote() {
   try {
-    const { stdout: sha } = await execa('git', ['rev-parse', 'HEAD'])
-    const { stdout: branch } = await execa('git', [
-      'rev-parse',
-      '--abbrev-ref',
-      'HEAD'
-    ])
+    const branch = await getBranch()
     const res = await fetch(
-      `https://api.github.com/repos/vuejs/core/commits/${branch}?per_page=1`
+      `https://api.github.com/repos/vuejs/core/commits/${branch}?per_page=1`,
     )
     const data = await res.json()
-    return data.sha === sha
+    if (data.sha === (await getSha())) {
+      return true
+    } else {
+      /** @type {{ yes: boolean }} */
+      const { yes } = await prompt({
+        type: 'confirm',
+        name: 'yes',
+        message: pico.red(
+          `Local HEAD is not up-to-date with remote. Are you sure you want to continue?`,
+        ),
+      })
+      return yes
+    }
   } catch (e) {
     console.error(
-      'Failed to check whether local HEAD is up-to-date with remote.'
+      pico.red('Failed to check whether local HEAD is up-to-date with remote.'),
     )
     return false
   }
 }
 
+async function getSha() {
+  return (await execa('git', ['rev-parse', 'HEAD'])).stdout
+}
+
+async function getBranch() {
+  return (await execa('git', ['rev-parse', '--abbrev-ref', 'HEAD'])).stdout
+}
+
+/**
+ * @param {string} version
+ * @param {(pkgName: string) => string} getNewPackageName
+ */
 function updateVersions(version, getNewPackageName = keepThePackageName) {
   // 1. update root package.json
   updatePackage(path.resolve(__dirname, '..'), version, getNewPackageName)
   // 2. update all packages
   packages.forEach(p =>
-    updatePackage(getPkgRoot(p), version, getNewPackageName)
+    updatePackage(getPkgRoot(p), version, getNewPackageName),
   )
 }
 
+/**
+ * @param {string} pkgRoot
+ * @param {string} version
+ * @param {(pkgName: string) => string} getNewPackageName
+ */
 function updatePackage(pkgRoot, version, getNewPackageName) {
   const pkgPath = path.resolve(pkgRoot, 'package.json')
+  /** @type {Package} */
   const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
   pkg.name = getNewPackageName(pkg.name)
   pkg.version = version
-  updateDeps(pkg, 'dependencies', version, getNewPackageName)
-  updateDeps(pkg, 'peerDependencies', version, getNewPackageName)
+  if (isCanary) {
+    updateDeps(pkg, 'dependencies', version, getNewPackageName)
+    updateDeps(pkg, 'peerDependencies', version, getNewPackageName)
+  }
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
 }
 
+/**
+ * @param {Package} pkg
+ * @param {'dependencies' | 'peerDependencies'} depType
+ * @param {string} version
+ * @param {(pkgName: string) => string} getNewPackageName
+ */
 function updateDeps(pkg, depType, version, getNewPackageName) {
   const deps = pkg[depType]
   if (!deps) return
   Object.keys(deps).forEach(dep => {
-    if (deps[dep] === 'workspace:*') {
-      return
-    }
     if (isCorePackage(dep)) {
       const newName = getNewPackageName(dep)
       const newVersion = newName === dep ? version : `npm:${newName}@${version}`
       console.log(
-        pico.yellow(`${pkg.name} -> ${depType} -> ${dep}@${newVersion}`)
+        pico.yellow(`${pkg.name} -> ${depType} -> ${dep}@${newVersion}`),
       )
       deps[dep] = newVersion
     }
   })
 }
 
-async function publishPackage(pkgName, version) {
+/**
+ * @param {string} pkgName
+ * @param {string} version
+ * @param {ReadonlyArray<string>} additionalFlags
+ */
+async function publishPackage(pkgName, version, additionalFlags) {
   if (skippedPackages.includes(pkgName)) {
     return
   }
-  const pkgRoot = getPkgRoot(pkgName)
-  const pkgPath = path.resolve(pkgRoot, 'package.json')
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
-  if (pkg.private) {
-    return
-  }
 
   let releaseTag = null
   if (args.tag) {
@@ -395,6 +471,8 @@ async function publishPackage(pkgName, version) {
 
   step(`Publishing ${pkgName}...`)
   try {
+    // Don't change the package manager here as we rely on pnpm to handle
+    // workspace:* deps
     await run(
       'pnpm',
       [
@@ -402,16 +480,15 @@ async function publishPackage(pkgName, version) {
         ...(releaseTag ? ['--tag', releaseTag] : []),
         '--access',
         'public',
-        ...(isDryRun ? ['--dry-run'] : []),
-        ...(skipGit ? ['--no-git-checks'] : [])
+        ...additionalFlags,
       ],
       {
-        cwd: pkgRoot,
-        stdio: 'pipe'
-      }
+        cwd: getPkgRoot(pkgName),
+        stdio: 'pipe',
+      },
     )
     console.log(pico.green(`Successfully published ${pkgName}@${version}`))
-  } catch (e) {
+  } catch (/** @type {any} */ e) {
     if (e.stderr.match(/previously published/)) {
       console.log(pico.red(`Skipping already published: ${pkgName}`))
     } else {
diff --git a/scripts/setupVitest.ts b/scripts/setup-vitest.ts
similarity index 84%
rename from scripts/setupVitest.ts
rename to scripts/setup-vitest.ts
index c555b0fa5e8..53e7f5fff56 100644
--- a/scripts/setupVitest.ts
+++ b/scripts/setup-vitest.ts
@@ -1,13 +1,15 @@
-import { vi, type SpyInstance } from 'vitest'
+import type { MockInstance } from 'vitest'
+
+vi.stubGlobal('MathMLElement', class MathMLElement {})
 
 expect.extend({
   toHaveBeenWarned(received: string) {
-    asserted.add(received)
     const passed = warn.mock.calls.some(args => args[0].includes(received))
     if (passed) {
+      asserted.add(received)
       return {
         pass: true,
-        message: () => `expected "${received}" not to have been warned.`
+        message: () => `expected "${received}" not to have been warned.`,
       }
     } else {
       const msgs = warn.mock.calls.map(args => args[0]).join('\n - ')
@@ -17,32 +19,31 @@ expect.extend({
           `expected "${received}" to have been warned` +
           (msgs.length
             ? `.\n\nActual messages:\n\n - ${msgs}`
-            : ` but no warning was recorded.`)
+            : ` but no warning was recorded.`),
       }
     }
   },
 
   toHaveBeenWarnedLast(received: string) {
-    asserted.add(received)
     const passed =
       warn.mock.calls[warn.mock.calls.length - 1][0].includes(received)
     if (passed) {
+      asserted.add(received)
       return {
         pass: true,
-        message: () => `expected "${received}" not to have been warned last.`
+        message: () => `expected "${received}" not to have been warned last.`,
       }
     } else {
       const msgs = warn.mock.calls.map(args => args[0]).join('\n - ')
       return {
         pass: false,
         message: () =>
-          `expected "${received}" to have been warned last.\n\nActual messages:\n\n - ${msgs}`
+          `expected "${received}" to have been warned last.\n\nActual messages:\n\n - ${msgs}`,
       }
     }
   },
 
   toHaveBeenWarnedTimes(received: string, n: number) {
-    asserted.add(received)
     let found = 0
     warn.mock.calls.forEach(args => {
       if (args[0].includes(received)) {
@@ -51,21 +52,22 @@ expect.extend({
     })
 
     if (found === n) {
+      asserted.add(received)
       return {
         pass: true,
-        message: () => `expected "${received}" to have been warned ${n} times.`
+        message: () => `expected "${received}" to have been warned ${n} times.`,
       }
     } else {
       return {
         pass: false,
         message: () =>
-          `expected "${received}" to have been warned ${n} times but got ${found}.`
+          `expected "${received}" to have been warned ${n} times but got ${found}.`,
       }
     }
-  }
+  },
 })
 
-let warn: SpyInstance
+let warn: MockInstance
 const asserted: Set<string> = new Set()
 
 beforeEach(() => {
@@ -87,8 +89,8 @@ afterEach(() => {
   if (nonAssertedWarnings.length) {
     throw new Error(
       `test case threw unexpected warnings:\n - ${nonAssertedWarnings.join(
-        '\n - '
-      )}`
+        '\n - ',
+      )}`,
     )
   }
 })
diff --git a/scripts/size-report.ts b/scripts/size-report.ts
index 56e4491a19c..a67aa3dd67c 100644
--- a/scripts/size-report.ts
+++ b/scripts/size-report.ts
@@ -54,7 +54,7 @@ async function renderFiles() {
         fileName,
         `${prettyBytes(curr.size)}${getDiff(curr.size, prev?.size)}`,
         `${prettyBytes(curr.gzip)}${getDiff(curr.gzip, prev?.gzip)}`,
-        `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`
+        `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`,
       ])
   }
 
@@ -65,10 +65,10 @@ async function renderFiles() {
 
 async function renderUsages() {
   const curr = (await importJSON<UsageResult>(
-    path.resolve(currDir, '_usages.json')
+    path.resolve(currDir, '_usages.json'),
   ))!
   const prev = await importJSON<UsageResult>(
-    path.resolve(prevDir, '_usages.json')
+    path.resolve(prevDir, '_usages.json'),
   )
   output += '\n### Usages\n\n'
 
@@ -83,7 +83,7 @@ async function renderUsages() {
         usage.name,
         `${prettyBytes(usage.size)}${diffSize}`,
         `${prettyBytes(usage.gzip)}${diffGzipped}`,
-        `${prettyBytes(usage.brotli)}${diffBrotli}`
+        `${prettyBytes(usage.brotli)}${diffBrotli}`,
       ]
     })
     .filter((usage): usage is string[] => !!usage)
diff --git a/scripts/usage-size.ts b/scripts/usage-size.ts
index 1a1013b7847..7eddbeb6696 100644
--- a/scripts/usage-size.ts
+++ b/scripts/usage-size.ts
@@ -1,4 +1,4 @@
-import { mkdir, writeFile } from 'fs/promises'
+import { mkdir, writeFile } from 'node:fs/promises'
 import path from 'node:path'
 import { rollup } from 'rollup'
 import nodeResolve from '@rollup/plugin-node-resolve'
@@ -26,9 +26,9 @@ const presets: Preset[] = [
       'watch',
       'Transition',
       'KeepAlive',
-      'Suspense'
-    ]
-  }
+      'Suspense',
+    ],
+  },
 ]
 
 main()
@@ -40,14 +40,14 @@ async function main() {
   }
 
   const results = Object.fromEntries(
-    (await Promise.all(tasks)).map(r => [r.name, r])
+    (await Promise.all(tasks)).map(r => [r.name, r]),
   )
 
   await mkdir(sizeDir, { recursive: true })
   await writeFile(
     path.resolve(sizeDir, '_usages.json'),
     JSON.stringify(results),
-    'utf-8'
+    'utf-8',
   )
 }
 
@@ -65,16 +65,17 @@ async function generateBundle(preset: Preset) {
         },
         load(_id) {
           if (_id === id) return content
-        }
+        },
       },
       nodeResolve(),
       replace({
         'process.env.NODE_ENV': '"production"',
         __VUE_PROD_DEVTOOLS__: 'false',
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
         __VUE_OPTIONS_API__: 'true',
-        preventAssignment: true
-      })
-    ]
+        preventAssignment: true,
+      }),
+    ],
   })
 
   const generated = await result.generate({})
@@ -82,7 +83,7 @@ async function generateBundle(preset: Preset) {
   const minified = (
     await minify(bundled, {
       module: true,
-      toplevel: true
+      toplevel: true,
     })
   ).code!
 
@@ -94,6 +95,6 @@ async function generateBundle(preset: Preset) {
     name: preset.name,
     size,
     gzip,
-    brotli
+    brotli,
   }
 }
diff --git a/scripts/utils.js b/scripts/utils.js
index 9429074d7af..6c3844dd12c 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -6,7 +6,10 @@ import { createRequire } from 'node:module'
 const require = createRequire(import.meta.url)
 
 export const targets = fs.readdirSync('packages').filter(f => {
-  if (!fs.statSync(`packages/${f}`).isDirectory()) {
+  if (
+    !fs.statSync(`packages/${f}`).isDirectory() ||
+    !fs.existsSync(`packages/${f}/package.json`)
+  ) {
     return false
   }
   const pkg = require(`../packages/${f}/package.json`)
@@ -16,7 +19,13 @@ export const targets = fs.readdirSync('packages').filter(f => {
   return true
 })
 
+/**
+ *
+ * @param {ReadonlyArray<string>} partialTargets
+ * @param {boolean | undefined} includeAllMatching
+ */
 export function fuzzyMatchTarget(partialTargets, includeAllMatching) {
+  /** @type {Array<string>} */
   const matched = []
   partialTargets.forEach(partialTarget => {
     for (const target of targets) {
@@ -34,8 +43,8 @@ export function fuzzyMatchTarget(partialTargets, includeAllMatching) {
     console.log()
     console.error(
       `  ${pico.white(pico.bgRed(' ERROR '))} ${pico.red(
-        `Target ${pico.underline(partialTargets)} not found!`
-      )}`
+        `Target ${pico.underline(partialTargets.toString())} not found!`,
+      )}`,
     )
     console.log()
 
diff --git a/scripts/verifyCommit.js b/scripts/verify-commit.js
similarity index 76%
rename from scripts/verifyCommit.js
rename to scripts/verify-commit.js
index 62af7fd1cf9..d37370df023 100644
--- a/scripts/verifyCommit.js
+++ b/scripts/verify-commit.js
@@ -1,7 +1,7 @@
 // @ts-check
 import pico from 'picocolors'
-import { readFileSync } from 'fs'
-import path from 'path'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
 
 const msgPath = path.resolve('.git/COMMIT_EDITMSG')
 const msg = readFileSync(msgPath, 'utf-8').trim()
@@ -13,16 +13,16 @@ if (!commitRE.test(msg)) {
   console.log()
   console.error(
     `  ${pico.white(pico.bgRed(' ERROR '))} ${pico.red(
-      `invalid commit message format.`
+      `invalid commit message format.`,
     )}\n\n` +
       pico.red(
-        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`
+        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
       ) +
       `    ${pico.green(`feat(compiler): add 'comments' option`)}\n` +
       `    ${pico.green(
-        `fix(v-model): handle events on blur (close #28)`
+        `fix(v-model): handle events on blur (close #28)`,
       )}\n\n` +
-      pico.red(`  See .github/commit-convention.md for more details.\n`)
+      pico.red(`  See .github/commit-convention.md for more details.\n`),
   )
   process.exit(1)
 }
diff --git a/scripts/verify-treeshaking.js b/scripts/verify-treeshaking.js
new file mode 100644
index 00000000000..a93b8bbbd61
--- /dev/null
+++ b/scripts/verify-treeshaking.js
@@ -0,0 +1,49 @@
+// @ts-check
+import fs from 'node:fs'
+import { execa } from 'execa'
+
+execa('pnpm', ['build', 'vue', '-f', 'global-runtime']).then(() => {
+  const errors = []
+
+  const devBuild = fs.readFileSync(
+    'packages/vue/dist/vue.runtime.global.js',
+    'utf-8',
+  )
+
+  if (devBuild.includes('__spreadValues')) {
+    errors.push(
+      'dev build contains unexpected esbuild object spread helper.\n' +
+        'This means { ...obj } syntax is used in runtime code. This should be ' +
+        'refactoed to use the `extend` helper to avoid the extra code.',
+    )
+  }
+
+  const prodBuild = fs.readFileSync(
+    'packages/vue/dist/vue.runtime.global.prod.js',
+    'utf-8',
+  )
+
+  if (prodBuild.includes('Vue warn')) {
+    errors.push(
+      'prod build contains unexpected warning-related code.\n' +
+        'This means there are calls of warn() that are not guarded by the __DEV__ condition.',
+    )
+  }
+
+  if (
+    prodBuild.includes('html,body,base') ||
+    prodBuild.includes('svg,animate,animateMotion') ||
+    prodBuild.includes('annotation,annotation-xml,maction')
+  ) {
+    errors.push(
+      'prod build contains unexpected domTagConifg lists.\n' +
+        'This means helpers like isHTMLTag() is used in runtime code paths when it should be compiler-only.',
+    )
+  }
+
+  if (errors.length) {
+    throw new Error(
+      `Found the following treeshaking errors:\n\n- ${errors.join('\n\n- ')}`,
+    )
+  }
+})
diff --git a/tsconfig.json b/tsconfig.json
index 5d7789b082c..f47b7fc8eb9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
     "useDefineForClassFields": false,
     "module": "esnext",
     "moduleResolution": "bundler",
-    "allowJs": false,
+    "allowJs": true,
     "strict": true,
     "noUnusedLocals": true,
     "experimentalDecorators": true,
@@ -34,6 +34,7 @@
     "packages/*/__tests__",
     "packages/dts-test",
     "packages/vue/jsx-runtime",
-    "scripts/setupVitest.ts"
+    "scripts/*",
+    "rollup.*.js"
   ]
 }
diff --git a/vitest.config.ts b/vitest.config.ts
index e5d5f59345f..e6436408adb 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,5 +1,6 @@
-import { configDefaults, defineConfig, UserConfig } from 'vitest/config'
+import { configDefaults, defineConfig } from 'vitest/config'
 import { entries } from './scripts/aliases.js'
+import codspeedPlugin from '@codspeed/vitest-plugin'
 
 export default defineConfig({
   define: {
@@ -10,26 +11,26 @@ export default defineConfig({
     __GLOBAL__: false,
     __ESM_BUNDLER__: true,
     __ESM_BROWSER__: false,
-    __NODE_JS__: true,
+    __CJS__: true,
     __SSR__: true,
     __FEATURE_OPTIONS_API__: true,
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,
-    __COMPAT__: true
+    __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+    __COMPAT__: true,
   },
   resolve: {
-    alias: entries
+    alias: entries,
   },
+  plugins: [codspeedPlugin()],
   test: {
     globals: true,
-    // disable threads on GH actions to speed it up
-    threads: !process.env.GITHUB_ACTIONS,
-    setupFiles: 'scripts/setupVitest.ts',
+    setupFiles: 'scripts/setup-vitest.ts',
     environmentMatchGlobs: [
-      ['packages/{vue,vue-compat,runtime-dom}/**', 'jsdom']
+      ['packages/{vue,vue-compat,runtime-dom}/**', 'jsdom'],
     ],
     sequence: {
-      hooks: 'list'
+      hooks: 'list',
     },
     coverage: {
       provider: 'istanbul',
@@ -39,8 +40,8 @@ export default defineConfig({
         // DOM transitions are tested via e2e so no coverage is collected
         'packages/runtime-dom/src/components/Transition*',
         // mostly entries
-        'packages/vue-compat/**'
-      ]
-    }
-  }
-}) as UserConfig
+        'packages/vue-compat/**',
+      ],
+    },
+  },
+})
diff --git a/vitest.e2e.config.ts b/vitest.e2e.config.ts
index 8e168f65341..ecf1c9d95f0 100644
--- a/vitest.e2e.config.ts
+++ b/vitest.e2e.config.ts
@@ -1,10 +1,8 @@
-import { UserConfig } from 'vitest/config'
+import { mergeConfig } from 'vitest/config'
 import config from './vitest.config'
 
-export default {
-  ...config,
+export default mergeConfig(config, {
   test: {
-    ...config.test,
-    include: ['packages/vue/__tests__/e2e/*.spec.ts']
-  }
-} as UserConfig
+    include: ['packages/vue/__tests__/e2e/*.spec.ts'],
+  },
+})
diff --git a/vitest.unit.config.ts b/vitest.unit.config.ts
index 2094385dd8e..80549766c50 100644
--- a/vitest.unit.config.ts
+++ b/vitest.unit.config.ts
@@ -1,10 +1,8 @@
-import { UserConfig, configDefaults } from 'vitest/config'
+import { configDefaults, mergeConfig } from 'vitest/config'
 import config from './vitest.config'
 
-export default {
-  ...config,
+export default mergeConfig(config, {
   test: {
-    ...config.test,
-    exclude: [...configDefaults.exclude, '**/e2e/**']
-  }
-} as UserConfig
+    exclude: [...configDefaults.exclude, '**/e2e/**'],
+  },
+})