.github/ISSUE_TEMPLATE/bug_report.yml

@@ -30,7 +30,7 @@ body:
       description: |
         The easiest way to provide a reproduction is by showing the bug in [The SFC Playground](https://sfc.vuejs.org/).
         If it cannot be reproduced in the playground and requires a proper build setup, try [StackBlitz](https://vite.new/vue).
-        If neither of these are suitable, you can always provide a GitHub reporistory.
+        If neither of these are suitable, you can always provide a GitHub repository.
 
         The reproduction should be **minimal** - i.e. it should contain only the bare minimum amount of code needed
         to show the bug. See [Bug Reproduction Guidelines](https://github.com/vuejs/core/blob/main/.github/bug-repro-guidelines.md) for more details.

.github/workflows/ci.yml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches:
       - main
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
 jobs:
   unit-test:
     runs-on: ubuntu-latest

.github/workflows/release-tag.yml

@@ -5,8 +5,12 @@ on:
 
 name: Create Release
 
+permissions: {}
 jobs:
   build:
+    permissions:
+      contents: write # to create release (yyx990803/release-tag)
+
     name: Create Release
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -1,3 +1,25 @@
+## [3.2.40](https://github.com/vuejs/core/compare/v3.2.39...v3.2.40) (2022-09-28)
+
+
+### Bug Fixes
+
+* **compat:** list cjs dependencies for compat build ([96cd924](https://github.com/vuejs/core/commit/96cd924e440984a37e4759673f3c16921b69affe)), closes [#6602](https://github.com/vuejs/core/issues/6602)
+* **compiler-dom:** remove v-bind boolean attribute with literal false value when stringifying ([#6635](https://github.com/vuejs/core/issues/6635)) ([6c6fe2c](https://github.com/vuejs/core/commit/6c6fe2c0cd89ce513503b1f85e0ddb696fd81e54)), closes [#6617](https://github.com/vuejs/core/issues/6617)
+* **compiler-sfc:** fix expression check for v-on with object literal value ([#6652](https://github.com/vuejs/core/issues/6652)) ([6958ec1](https://github.com/vuejs/core/commit/6958ec1b37fb4a9244ae222a35fcac032d26ad8a)), closes [#6650](https://github.com/vuejs/core/issues/6650) [#6674](https://github.com/vuejs/core/issues/6674)
+* **compilre-core:** dynamic v-on and static v-on should be merged ([#6747](https://github.com/vuejs/core/issues/6747)) ([f9d43b9](https://github.com/vuejs/core/commit/f9d43b99f83af7fc140938a1d8d2db89666fb4e1)), closes [#6742](https://github.com/vuejs/core/issues/6742)
+* **runtime-core:** avoid hoisted vnodes retaining detached DOM nodes ([fc5bdb3](https://github.com/vuejs/core/commit/fc5bdb36ed429d6c3c956f373206ce75467adaf3)), closes [#6591](https://github.com/vuejs/core/issues/6591)
+* **runtime-core:** Lifecycle hooks should support callbacks shared by reference ([#6687](https://github.com/vuejs/core/issues/6687)) ([c71a08e](https://github.com/vuejs/core/commit/c71a08e6fd44ee06c6b4f61d67727a7b7503605e)), closes [#6686](https://github.com/vuejs/core/issues/6686)
+* **runtime-core:** remove prod-only hoisted clone behavior for manual DOM manipulation compat ([aa70188](https://github.com/vuejs/core/commit/aa70188c41fab1a4139748dd7b7c71532d063f3a)), closes [#6727](https://github.com/vuejs/core/issues/6727) [#6739](https://github.com/vuejs/core/issues/6739)
+* **runtime-core:** unset removed props first in full diff mode ([c0d8db8](https://github.com/vuejs/core/commit/c0d8db81a636f0ad1e725b7c04608d3a211cf163)), closes [#6571](https://github.com/vuejs/core/issues/6571)
+* **runtime-dom:** fix unnecessary warning when setting coerced dom property value ([b1817fe](https://github.com/vuejs/core/commit/b1817fe9eeb66a18f405ada9072149515654a9bd)), closes [#6616](https://github.com/vuejs/core/issues/6616)
+* **ssr:** avoid ast.helpers duplication ([#6664](https://github.com/vuejs/core/issues/6664)) ([57ffc3e](https://github.com/vuejs/core/commit/57ffc3e546395ba048009396a4b82d3f968cca2c))
+* **ssr:** fix dynamic slot regression in ssr ([8963c55](https://github.com/vuejs/core/commit/8963c5508cde3a0c990b2748787ffb582b16f23f)), closes [#6651](https://github.com/vuejs/core/issues/6651)
+* **ssr:** fix hydration mismatch when entire multi-root template is stringified ([9698dd3](https://github.com/vuejs/core/commit/9698dd3cf1dfdb95d4dc4b4f7bd24ff94b4b5d84)), closes [#6637](https://github.com/vuejs/core/issues/6637)
+* **ssr:** fix pre tag windows newline hydration mismatch ([0382019](https://github.com/vuejs/core/commit/03820193a8f768293d665ca2753439fe73aed0fd)), closes [#6410](https://github.com/vuejs/core/issues/6410)
+* **ssr:** respect case when rendering dynamic attrs on svg ([121eb32](https://github.com/vuejs/core/commit/121eb32fb0a21cf9988d788cfad1b4249b15997b)), closes [#6755](https://github.com/vuejs/core/issues/6755)
+
+
+
 ## [3.2.39](https://github.com/vuejs/core/compare/v3.2.38...v3.2.39) (2022-09-08)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.2.39",
+  "version": "3.2.40",
   "packageManager": "pnpm@7.1.0",
   "scripts": {
     "dev": "node scripts/dev.js",

packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts

@@ -13,7 +13,6 @@ import {
 import {
   FRAGMENT,
   RENDER_LIST,
-  CREATE_TEXT,
   NORMALIZE_CLASS
 } from '../../src/runtimeHelpers'
 import { transformElement } from '../../src/transforms/transformElement'
@@ -378,36 +377,6 @@ describe('compiler: hoistStatic transform', () => {
     expect(generate(root).code).toMatchSnapshot()
   })
 
-  test('hoist static text node between elements', () => {
-    const root = transformWithHoist(`<div>static<div>static</div></div>`)
-    expect(root.hoists).toMatchObject([
-      {
-        callee: CREATE_TEXT,
-        arguments: [
-          {
-            type: NodeTypes.TEXT,
-            content: `static`
-          }
-        ]
-      },
-      {
-        type: NodeTypes.VNODE_CALL,
-        tag: `"div"`
-      },
-      {
-        type: NodeTypes.JS_ARRAY_EXPRESSION,
-        elements: [
-          {
-            type: NodeTypes.TEXT_CALL
-          },
-          {
-            type: NodeTypes.ELEMENT
-          }
-        ]
-      }
-    ])
-  })
-
   describe('prefixIdentifiers', () => {
     test('hoist nested static tree with static interpolation', () => {
       const root = transformWithHoist(
@@ -618,7 +587,9 @@ 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>`)
+      const root = transformWithHoist(
+        `<div><svg v-foo><path d="M2,3H5.5L12"/></svg></div>`
+      )
       expect(root.hoists.length).toBe(2)
       expect(generate(root).code).toMatchSnapshot()
     })

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-core#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39",
+    "@vue/shared": "3.2.40",
     "@babel/parser": "^7.16.4",
     "estree-walker": "^2.0.2",
     "source-map": "^0.6.1"

packages/compiler-core/src/parse.ts

@@ -257,34 +257,41 @@ function parseChildren(
     const shouldCondense = context.options.whitespace !== 'preserve'
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i]
-      if (!context.inPre && node.type === NodeTypes.TEXT) {
-        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 adjacent to a comment, 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.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 = ' '
+      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 adjacent to a comment, 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.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 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.

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -97,12 +97,6 @@ function walk(
           }
         }
       }
-    } else if (
-      child.type === NodeTypes.TEXT_CALL &&
-      getConstantType(child.content, context) >= ConstantTypes.CAN_HOIST
-    ) {
-      child.codegenNode = context.hoist(child.codegenNode)
-      hoistedCount++
     }
 
     // walk further

packages/compiler-core/src/transforms/transformElement.ts

@@ -413,6 +413,16 @@ export function buildProps(
   let hasVnodeHook = false
   const dynamicPropNames: string[] = []
 
+  const pushMergeArg = (arg?: PropsExpression) => {
+    if (properties.length) {
+      mergeArgs.push(
+        createObjectExpression(dedupeProperties(properties), elementLoc)
+      )
+      properties = []
+    }
+    if (arg) mergeArgs.push(arg)
+  }
+
   const analyzePatchFlag = ({ key, value }: Property) => {
     if (isStaticExp(key)) {
       const name = key.content
@@ -590,13 +600,9 @@ export function buildProps(
       if (!arg && (isVBind || isVOn)) {
         hasDynamicKeys = true
         if (exp) {
-          if (properties.length) {
-            mergeArgs.push(
-              createObjectExpression(dedupeProperties(properties), elementLoc)
-            )
-            properties = []
-          }
           if (isVBind) {
+            // have to merge early for compat build check
+            pushMergeArg()
             if (__COMPAT__) {
               // 2.x v-bind object order compat
               if (__DEV__) {
@@ -643,7 +649,7 @@ export function buildProps(
             mergeArgs.push(exp)
           } else {
             // v-on="obj" -> toHandlers(obj)
-            mergeArgs.push({
+            pushMergeArg({
               type: NodeTypes.JS_CALL_EXPRESSION,
               loc,
               callee: context.helper(TO_HANDLERS),
@@ -668,7 +674,11 @@ export function buildProps(
         // has built-in directive transform.
         const { props, needRuntime } = directiveTransform(prop, node, context)
         !ssr && props.forEach(analyzePatchFlag)
-        properties.push(...props)
+        if (isVOn && arg && !isStaticExp(arg)) {
+          pushMergeArg(createObjectExpression(props, elementLoc))
+        } else {
+          properties.push(...props)
+        }
         if (needRuntime) {
           runtimeDirectives.push(prop)
           if (isSymbol(needRuntime)) {
@@ -691,11 +701,8 @@ export function buildProps(
 
   // has v-bind="object" or v-on="object", wrap with mergeProps
   if (mergeArgs.length) {
-    if (properties.length) {
-      mergeArgs.push(
-        createObjectExpression(dedupeProperties(properties), elementLoc)
-      )
-    }
+    // close up any not-yet-merged props
+    pushMergeArg()
     if (mergeArgs.length > 1) {
       propsExpression = createCallExpression(
         context.helper(MERGE_PROPS),

packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts

@@ -410,6 +410,29 @@ describe('stringify static html', () => {
     })
   })
 
+  // #6617
+  test('should remove boolean attribute for `false`', () => {
+    const { ast } = compileWithStringify(
+      `<button :disabled="false">enable</button>${repeat(
+        `<div></div>`,
+        StringifyThresholds.NODE_COUNT
+      )}`
+    )
+    expect(ast.hoists[0]).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: CREATE_STATIC,
+      arguments: [
+        JSON.stringify(
+          `<button>enable</button>${repeat(
+            `<div></div>`,
+            StringifyThresholds.NODE_COUNT
+          )}`
+        ),
+        '21'
+      ]
+    })
+  })
+
   test('should stringify svg', () => {
     const svg = `<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">`
     const repeated = `<rect width="50" height="50" fill="#C4C4C4"></rect>`

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-dom#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39",
-    "@vue/compiler-core": "3.2.39"
+    "@vue/shared": "3.2.40",
+    "@vue/compiler-core": "3.2.40"
   }
 }

packages/compiler-dom/src/transforms/stringifyStatic.ts

@@ -28,7 +28,8 @@ import {
   normalizeStyle,
   stringifyStyle,
   makeMap,
-  isKnownSvgAttr
+  isKnownSvgAttr,
+  isBooleanAttr
 } from '@vue/shared'
 import { DOMNamespaces } from '../parserOptions'
 
@@ -298,6 +299,13 @@ function stringifyElement(
           }="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`
           continue
         }
+        // #6568
+        if (
+          isBooleanAttr((p.arg as SimpleExpressionNode).content) &&
+          exp.content === 'false'
+        ) {
+          continue
+        }
         // constant v-bind, e.g. :foo="1"
         let evaluated = evaluateConstant(exp)
         if (evaluated != null) {

packages/compiler-sfc/__tests__/__snapshots__/compileTemplate.spec.ts.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+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\\"
+
+export function render(_ctx, _cache) {
+  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)))
+  }), null, 16 /* FULL_PROPS */))
+}"
+`;
+
 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\\"

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -471,7 +471,7 @@ defineExpose({ foo: 123 })
       </script>
       <template>
         <div @click="$emit('update:a');"></div>
-      </tempalte>
+      </template>
       `)
     })
   })

packages/compiler-sfc/__tests__/compileTemplate.spec.ts

@@ -174,3 +174,12 @@ test('should not hoist srcset URLs in SSR mode', () => {
   })
   expect(code).toMatchSnapshot()
 })
+
+// #6742
+test('dynamic v-on + static v-on should merged', () => {
+  const source = `<input @blur="onBlur" @[validateEvent]="onValidateEvent">`
+
+  const result = compile({ filename: 'example.vue', source })
+
+  expect(result.code).toMatchSnapshot()
+})

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -33,11 +33,11 @@
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.16.4",
-    "@vue/compiler-core": "3.2.39",
-    "@vue/compiler-dom": "3.2.39",
-    "@vue/compiler-ssr": "3.2.39",
-    "@vue/reactivity-transform": "3.2.39",
-    "@vue/shared": "3.2.39",
+    "@vue/compiler-core": "3.2.40",
+    "@vue/compiler-dom": "3.2.40",
+    "@vue/compiler-ssr": "3.2.40",
+    "@vue/reactivity-transform": "3.2.40",
+    "@vue/shared": "3.2.40",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",

packages/compiler-sfc/src/compileScript.ts

@@ -2135,7 +2135,7 @@ function processExp(exp: string, dir?: string): string {
     if (dir === 'slot') {
       exp = `(${exp})=>{}`
     } else if (dir === 'on') {
-      exp = `()=>{${exp}}`
+      exp = `()=>{return ${exp}}`
     } else if (dir === 'for') {
       const inMatch = exp.match(forAliasRE)
       if (inMatch) {

packages/compiler-ssr/__tests__/ssrFallthroughAttrs.spec.ts

@@ -37,7 +37,7 @@ describe('ssr: attrs fallthrough', () => {
     `)
   })
 
-  test('fallthrough component content (root with coomments)', () => {
+  test('fallthrough component content (root with comments)', () => {
     expect(compile(`<!--root--><transition><div/></transition>`).code)
       .toMatchInlineSnapshot(`
               "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")

packages/compiler-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-ssr",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "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.2.39",
-    "@vue/compiler-dom": "3.2.39"
+    "@vue/shared": "3.2.40",
+    "@vue/compiler-dom": "3.2.40"
   }
 }

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -48,9 +48,10 @@ export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
     context.body.push(
       createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
     )
-    Array.from(cssContext.helpers.keys()).forEach(helper =>
-      ast.helpers.push(helper)
-    )
+    Array.from(cssContext.helpers.keys()).forEach(helper => {
+      if (!ast.helpers.includes(helper))
+        ast.helpers.push(helper)
+    })
   }
 
   const isFragment =

packages/reactivity-transform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity-transform",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/reactivity-transform",
   "main": "dist/reactivity-transform.cjs.js",
   "files": [
@@ -29,8 +29,8 @@
   "homepage": "https://github.com/vuejs/core/tree/dev/packages/reactivity-transform#readme",
   "dependencies": {
     "@babel/parser": "^7.16.4",
-    "@vue/compiler-core": "3.2.39",
-    "@vue/shared": "3.2.39",
+    "@vue/compiler-core": "3.2.40",
+    "@vue/shared": "3.2.40",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7"
   },

packages/reactivity/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/reactivity",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/reactivity",
   "main": "index.js",
   "module": "dist/reactivity.esm-bundler.js",
@@ -36,6 +36,6 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/reactivity#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39"
+    "@vue/shared": "3.2.40"
   }
 }

packages/runtime-core/__tests__/apiLifecycle.spec.ts

@@ -378,4 +378,27 @@ describe('api: lifecycle hooks', () => {
       newValue: 3
     })
   })
+
+  it('runs shared hook fn for each instance', async () => {
+    const fn = jest.fn()
+    const toggle = ref(true)
+    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'))
+    expect(fn).toHaveBeenCalledTimes(2)
+    toggle.value = false
+    await nextTick()
+    expect(fn).toHaveBeenCalledTimes(4)
+  })
 })

packages/runtime-core/__tests__/helpers/createSlots.spec.ts

@@ -26,6 +26,14 @@ describe('createSlot', () => {
     expect(ret.key).toBe('1')
   })
 
+  it('should check nullability', () => {
+    const slot = (() => {}) as Slot
+    const dynamicSlot = [{ name: 'descriptor', fn: slot, key: '1' }]
+
+    const actual = createSlots(record, dynamicSlot)
+    expect(actual).toHaveProperty('descriptor')
+  })
+
   it('should add all slots to the record', () => {
     const dynamicSlot = [
       { name: 'descriptor', fn: slot },

packages/runtime-core/__tests__/hydration.spec.ts

@@ -982,6 +982,14 @@ describe('SSR hydration', () => {
     expect((container as any)._vnode).toBe(null)
   })
 
+  // #6637
+  test('stringified root fragment', () => {
+    mountWithHydration(`<!--[--><div></div><!--]-->`, () =>
+      createStaticVNode(`<div></div>`, 1)
+    )
+    expect(`mismatch`).not.toHaveBeenWarned()
+  })
+
   describe('mismatch handling', () => {
     test('text node', () => {
       const { container } = mountWithHydration(`foo`, () => 'bar')

packages/runtime-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-core",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/runtime-core",
   "main": "index.js",
   "module": "dist/runtime-core.esm-bundler.js",
@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-core#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39",
-    "@vue/reactivity": "3.2.39"
+    "@vue/shared": "3.2.40",
+    "@vue/reactivity": "3.2.40"
   }
 }

packages/runtime-core/src/apiLifecycle.ts

@@ -68,7 +68,7 @@ export const createHook =
   (hook: T, target: ComponentInternalInstance | null = currentInstance) =>
     // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
     (!isInSSRComponentSetup || lifecycle === LifecycleHooks.SERVER_PREFETCH) &&
-    injectHook(lifecycle, hook, target)
+    injectHook(lifecycle, (...args: unknown[]) => hook(...args), target)
 
 export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
 export const onMounted = createHook(LifecycleHooks.MOUNTED)

packages/runtime-core/src/helpers/createSlots.ts

@@ -1,9 +1,12 @@
-import { Slot } from '../componentSlots'
 import { isArray } from '@vue/shared'
+import { VNode } from '../vnode'
+
+// #6651 res can be undefined in SSR in string push mode
+type SSRSlot = (...args: any[]) => VNode[] | undefined
 
 interface CompiledSlotDescriptor {
   name: string
-  fn: Slot
+  fn: SSRSlot
   key?: string
 }
 
@@ -12,13 +15,13 @@ interface CompiledSlotDescriptor {
  * @private
  */
 export function createSlots(
-  slots: Record<string, Slot>,
+  slots: Record<string, SSRSlot>,
   dynamicSlots: (
     | CompiledSlotDescriptor
     | CompiledSlotDescriptor[]
     | undefined
   )[]
-): Record<string, Slot> {
+): Record<string, SSRSlot> {
   for (let i = 0; i < dynamicSlots.length; i++) {
     const slot = dynamicSlots[i]
     // array of dynamic slot generated by <template v-for="..." #[...]>
@@ -33,7 +36,7 @@ export function createSlots(
             const res = slot.fn(...args)
             // attach branch key so each conditional branch is considered a
             // different fragment
-            ;(res as any).key = slot.key
+            if (res) (res as any).key = slot.key
             return res
           }
         : slot.fn

packages/runtime-core/src/hydration.ts

@@ -108,7 +108,7 @@ export function createHydrationFunctions(
       )
 
     const { type, ref, shapeFlag, patchFlag } = vnode
-    const domType = node.nodeType
+    let domType = node.nodeType
     vnode.el = node
 
     if (patchFlag === PatchFlags.BAIL) {
@@ -150,9 +150,12 @@ export function createHydrationFunctions(
         }
         break
       case Static:
-        if (domType !== DOMNodeTypes.ELEMENT && domType !== DOMNodeTypes.TEXT) {
-          nextNode = onMismatch()
-        } else {
+        if (isFragmentStart) {
+          // entire template is static but SSRed as a fragment
+          node = nextSibling(node)!
+          domType = node.nodeType
+        }
+        if (domType === DOMNodeTypes.ELEMENT || domType === DOMNodeTypes.TEXT) {
           // determine anchor, adopt content
           nextNode = node
           // if the static vnode has its content stripped during build,
@@ -169,7 +172,9 @@ export function createHydrationFunctions(
             }
             nextNode = nextSibling(nextNode)!
           }
-          return nextNode
+          return isFragmentStart ? nextSibling(nextNode) : nextNode
+        } else {
+          onMismatch()
         }
         break
       case Fragment:

packages/runtime-core/src/renderer.ts

@@ -345,7 +345,6 @@ function baseCreateRenderer(
     parentNode: hostParentNode,
     nextSibling: hostNextSibling,
     setScopeId: hostSetScopeId = NOOP,
-    cloneNode: hostCloneNode,
     insertStaticContent: hostInsertStaticContent
   } = options
 
@@ -618,82 +617,71 @@ function baseCreateRenderer(
   ) => {
     let el: RendererElement
     let vnodeHook: VNodeHook | undefined | null
-    const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode
-    if (
-      !__DEV__ &&
-      vnode.el &&
-      hostCloneNode !== undefined &&
-      patchFlag === PatchFlags.HOISTED
-    ) {
-      // If a vnode has non-null el, it means it's being reused.
-      // Only static vnodes can be reused, so its mounted DOM nodes should be
-      // exactly the same, and we can simply do a clone here.
-      // only do this in production since cloned trees cannot be HMR updated.
-      el = vnode.el = hostCloneNode(vnode.el)
-    } else {
-      el = vnode.el = hostCreateElement(
-        vnode.type as string,
-        isSVG,
-        props && props.is,
-        props
+    const { type, props, shapeFlag, transition, dirs } = vnode
+
+    el = vnode.el = hostCreateElement(
+      vnode.type as string,
+      isSVG,
+      props && props.is,
+      props
+    )
+
+    // mount children first, since some props may rely on child content
+    // being already rendered, e.g. `<select value>`
+    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
+      hostSetElementText(el, vnode.children as string)
+    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      mountChildren(
+        vnode.children as VNodeArrayChildren,
+        el,
+        null,
+        parentComponent,
+        parentSuspense,
+        isSVG && type !== 'foreignObject',
+        slotScopeIds,
+        optimized
       )
+    }
 
-      // mount children first, since some props may rely on child content
-      // being already rendered, e.g. `<select value>`
-      if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
-        hostSetElementText(el, vnode.children as string)
-      } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-        mountChildren(
-          vnode.children as VNodeArrayChildren,
-          el,
-          null,
-          parentComponent,
-          parentSuspense,
-          isSVG && type !== 'foreignObject',
-          slotScopeIds,
-          optimized
-        )
+    if (dirs) {
+      invokeDirectiveHook(vnode, null, parentComponent, 'created')
+    }
+    // props
+    if (props) {
+      for (const key in props) {
+        if (key !== 'value' && !isReservedProp(key)) {
+          hostPatchProp(
+            el,
+            key,
+            null,
+            props[key],
+            isSVG,
+            vnode.children as VNode[],
+            parentComponent,
+            parentSuspense,
+            unmountChildren
+          )
+        }
       }
-
-      if (dirs) {
-        invokeDirectiveHook(vnode, null, parentComponent, 'created')
+      /**
+       * Special case for setting value on DOM elements:
+       * - it can be order-sensitive (e.g. should be set *after* min/max, #2325, #4024)
+       * - it needs to be forced (#1471)
+       * #2353 proposes adding another renderer option to configure this, but
+       * the properties affects are so finite it is worth special casing it
+       * here to reduce the complexity. (Special casing it also should not
+       * affect non-DOM renderers)
+       */
+      if ('value' in props) {
+        hostPatchProp(el, 'value', null, props.value)
       }
-      // props
-      if (props) {
-        for (const key in props) {
-          if (key !== 'value' && !isReservedProp(key)) {
-            hostPatchProp(
-              el,
-              key,
-              null,
-              props[key],
-              isSVG,
-              vnode.children as VNode[],
-              parentComponent,
-              parentSuspense,
-              unmountChildren
-            )
-          }
-        }
-        /**
-         * Special case for setting value on DOM elements:
-         * - it can be order-sensitive (e.g. should be set *after* min/max, #2325, #4024)
-         * - it needs to be forced (#1471)
-         * #2353 proposes adding another renderer option to configure this, but
-         * the properties affects are so finite it is worth special casing it
-         * here to reduce the complexity. (Special casing it also should not
-         * affect non-DOM renderers)
-         */
-        if ('value' in props) {
-          hostPatchProp(el, 'value', null, props.value)
-        }
-        if ((vnodeHook = props.onVnodeBeforeMount)) {
-          invokeVNodeHook(vnodeHook, parentComponent, vnode)
-        }
+      if ((vnodeHook = props.onVnodeBeforeMount)) {
+        invokeVNodeHook(vnodeHook, parentComponent, vnode)
       }
-      // scopeId
-      setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent)
     }
+    // scopeId
+    setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent)
+
     if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
       Object.defineProperty(el, '__vnode', {
         value: vnode,
@@ -1005,6 +993,23 @@ function baseCreateRenderer(
     isSVG: boolean
   ) => {
     if (oldProps !== newProps) {
+      if (oldProps !== EMPTY_OBJ) {
+        for (const key in oldProps) {
+          if (!isReservedProp(key) && !(key in newProps)) {
+            hostPatchProp(
+              el,
+              key,
+              oldProps[key],
+              null,
+              isSVG,
+              vnode.children as VNode[],
+              parentComponent,
+              parentSuspense,
+              unmountChildren
+            )
+          }
+        }
+      }
       for (const key in newProps) {
         // empty string is not valid prop
         if (isReservedProp(key)) continue
@@ -1025,23 +1030,6 @@ function baseCreateRenderer(
           )
         }
       }
-      if (oldProps !== EMPTY_OBJ) {
-        for (const key in oldProps) {
-          if (!isReservedProp(key) && !(key in newProps)) {
-            hostPatchProp(
-              el,
-              key,
-              oldProps[key],
-              null,
-              isSVG,
-              vnode.children as VNode[],
-              parentComponent,
-              parentSuspense,
-              unmountChildren
-            )
-          }
-        }
-      }
       if ('value' in newProps) {
         hostPatchProp(el, 'value', oldProps.value, newProps.value)
       }

packages/runtime-core/src/vnode.ts

@@ -737,7 +737,10 @@ export function normalizeVNode(child: VNodeChild): VNode {
 
 // optimized normalization for template-compiled render fns
 export function cloneIfMounted(child: VNode): VNode {
-  return child.el === null || child.memo ? child : cloneVNode(child)
+  return (child.el === null && child.patchFlag !== PatchFlags.HOISTED) ||
+    child.memo
+    ? child
+    : cloneVNode(child)
 }
 
 export function normalizeChildren(vnode: VNode, children: unknown) {

packages/runtime-dom/__tests__/nodeOps.spec.ts

@@ -1,15 +1,6 @@
 import { nodeOps, svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: node-ops', () => {
-  test('the _value property should be cloned', () => {
-    const el = nodeOps.createElement('input') as HTMLDivElement & {
-      _value: any
-    }
-    el._value = 1
-    const cloned = nodeOps.cloneNode!(el) as HTMLDivElement & { _value: any }
-    expect(cloned._value).toBe(1)
-  })
-
   test("the <select>'s multiple attr should be set in createElement", () => {
     const el = nodeOps.createElement('select', false, undefined, {
       multiple: ''

packages/runtime-dom/__tests__/patchProps.spec.ts

@@ -240,6 +240,8 @@ describe('runtime-dom: props patching', () => {
     expect(el.size).toBe(100)
     patchProp(el, 'size', 100, null)
     expect(el.getAttribute('size')).toBe(null)
+    expect('Failed setting prop "size" on <input>').not.toHaveBeenWarned()
+    patchProp(el, 'size', null, 'foobar')
     expect('Failed setting prop "size" on <input>').toHaveBeenWarnedLast()
   })
 

packages/runtime-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-dom",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/runtime-dom",
   "main": "index.js",
   "module": "dist/runtime-dom.esm-bundler.js",
@@ -35,8 +35,8 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-dom#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39",
-    "@vue/runtime-core": "3.2.39",
+    "@vue/shared": "3.2.40",
+    "@vue/runtime-core": "3.2.40",
     "csstype": "^2.6.8"
   }
 }

packages/runtime-dom/src/modules/attrs.ts

@@ -53,23 +53,23 @@ export function compatCoerceAttr(
   instance: ComponentInternalInstance | null = null
 ): boolean {
   if (isEnumeratedAttr(key)) {
-    const v2CocercedValue =
+    const v2CoercedValue =
       value === null
         ? 'false'
         : typeof value !== 'boolean' && value !== undefined
         ? 'true'
         : null
     if (
-      v2CocercedValue &&
+      v2CoercedValue &&
       compatUtils.softAssertCompatEnabled(
         DeprecationTypes.ATTR_ENUMERATED_COERCION,
         instance,
         key,
         value,
-        v2CocercedValue
+        v2CoercedValue
       )
     ) {
-      el.setAttribute(key, v2CocercedValue)
+      el.setAttribute(key, v2CoercedValue)
       return true
     }
   } else if (

packages/runtime-dom/src/modules/props.ts

@@ -63,7 +63,6 @@ export function patchDOMProp(
       needRemove = true
     } else if (type === 'number') {
       // e.g. <img :width="null">
-      // the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error
       value = 0
       needRemove = true
     }
@@ -96,7 +95,8 @@ export function patchDOMProp(
   try {
     el[key] = value
   } catch (e: any) {
-    if (__DEV__) {
+    // do not warn if value is auto-coerced from nullish values
+    if (__DEV__ && !needRemove) {
       warn(
         `Failed setting prop "${key}" on <${el.tagName.toLowerCase()}>: ` +
           `value ${value} is invalid.`,

packages/runtime-dom/src/nodeOps.ts

@@ -52,23 +52,6 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     el.setAttribute(id, '')
   },
 
-  cloneNode(el) {
-    const cloned = el.cloneNode(true)
-    // #3072
-    // - in `patchDOMProp`, we store the actual value in the `el._value` property.
-    // - normally, elements using `:value` bindings will not be hoisted, but if
-    //   the bound value is a constant, e.g. `:value="true"` - they do get
-    //   hoisted.
-    // - in production, hoisted nodes are cloned when subsequent inserts, but
-    //   cloneNode() does not copy the custom property we attached.
-    // - This may need to account for other custom DOM properties we attach to
-    //   elements in addition to `_value` in the future.
-    if (`_value` in el) {
-      ;(cloned as any)._value = (el as any)._value
-    }
-    return cloned
-  },
-
   // __UNSAFE__
   // Reason: innerHTML.
   // Static content here can only come from compiled templates.

packages/runtime-test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/runtime-test",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/runtime-test",
   "private": true,
   "main": "index.js",
@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/runtime-test#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39",
-    "@vue/runtime-core": "3.2.39"
+    "@vue/shared": "3.2.40",
+    "@vue/runtime-core": "3.2.40"
   }
 }

packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts

@@ -98,6 +98,17 @@ describe('ssr: renderAttrs', () => {
       )
     ).toBe(` fooBar="ok"`)
   })
+
+  test('preserve name on svg elements', () => {
+    expect(
+      ssrRenderAttrs(
+        {
+          viewBox: 'foo'
+        },
+        'svg'
+      )
+    ).toBe(` viewBox="foo"`)
+  })
 })
 
 describe('ssr: renderAttr', () => {

packages/server-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/server-renderer",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "@vue/server-renderer",
   "main": "index.js",
   "module": "dist/server-renderer.esm-bundler.js",
@@ -32,10 +32,10 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/server-renderer#readme",
   "peerDependencies": {
-    "vue": "3.2.39"
+    "vue": "3.2.40"
   },
   "dependencies": {
-    "@vue/shared": "3.2.39",
-    "@vue/compiler-ssr": "3.2.39"
+    "@vue/shared": "3.2.40",
+    "@vue/compiler-ssr": "3.2.40"
   }
 }

packages/server-renderer/src/helpers/ssrRenderAttrs.ts

@@ -1,4 +1,4 @@
-import { escapeHtml, stringifyStyle } from '@vue/shared'
+import { escapeHtml, isSVGTag, stringifyStyle } from '@vue/shared'
 import {
   normalizeClass,
   normalizeStyle,
@@ -51,8 +51,8 @@ export function ssrRenderDynamicAttr(
     return ``
   }
   const attrKey =
-    tag && tag.indexOf('-') > 0
-      ? key // preserve raw name on custom elements
+    tag && (tag.indexOf('-') > 0 || isSVGTag(tag))
+      ? key // preserve raw name on custom elements and svg
       : propsToAttrMap[key] || key.toLowerCase()
   if (isBooleanAttr(attrKey)) {
     return includeBooleanAttr(value) ? ` ${attrKey}` : ``

packages/sfc-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/sfc-playground",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -12,7 +12,7 @@
     "vite": "^3.0.0"
   },
   "dependencies": {
-    "vue": "3.2.39",
+    "vue": "3.2.40",
     "@vue/repl": "^1.3.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0"

packages/sfc-playground/public/_headers

@@ -0,0 +1,3 @@
+/assets/*
+  cache-control: max-age=31536000
+  cache-control: immutable

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/shared",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "internal utils shared across @vue packages",
   "main": "index.js",
   "module": "dist/shared.esm-bundler.js",

packages/size-check/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/size-check",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "private": true,
   "scripts": {
     "build": "vite build"

packages/template-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/template-explorer",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "private": true,
   "buildOptions": {
     "formats": [

packages/vue-compat/README.md

@@ -311,7 +311,7 @@ Features that start with `COMPILER_` are compiler-specific: if you are using the
 | V_ON_KEYCODE_MODIFIER        | ✔    | `v-on` no longer supports keyCode modifiers                           | [link](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html)                                            |
 | CUSTOM_DIR                   | ✔    | Custom directive hook names changed                                   | [link](https://v3-migration.vuejs.org/breaking-changes/custom-directives.html)                                            |
 | ATTR_FALSE_VALUE             | ✔    | No longer removes attribute if binding value is boolean `false`       | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
-| ATTR_ENUMERATED_COERSION     | ✔    | No longer special case enumerated attributes                          | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
+| ATTR_ENUMERATED_COERCION     | ✔    | No longer special case enumerated attributes                          | [link](https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html)                                           |
 | TRANSITION_GROUP_ROOT        | ✔    | `<transition-group>` no longer renders a root element by default      | [link](https://v3-migration.vuejs.org/breaking-changes/transition-group.html)                                             |
 | COMPONENT_ASYNC              | ✔    | Async component API changed (now requires `defineAsyncComponent`)     | [link](https://v3-migration.vuejs.org/breaking-changes/async-components.html)                                             |
 | COMPONENT_FUNCTIONAL         | ✔    | Functional component API changed (now must be plain functions)        | [link](https://v3-migration.vuejs.org/breaking-changes/functional-components.html)                                        |

packages/vue-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compat",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "Vue 3 compatibility build for Vue 2",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -37,7 +37,12 @@
     "url": "https://github.com/vuejs/core/issues"
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue-compat#readme",
+  "dependencies": {
+    "@babel/parser": "^7.16.4",
+    "estree-walker": "^2.0.2",
+    "source-map": "^0.6.1"
+  },
   "peerDependencies": {
-    "vue": "3.2.39"
+    "vue": "3.2.40"
   }
 }

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "The progressive JavaScript framework for building modern web UI.",
   "main": "index.js",
   "module": "dist/vue.runtime.esm-bundler.js",
@@ -68,10 +68,10 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/vue#readme",
   "dependencies": {
-    "@vue/shared": "3.2.39",
-    "@vue/compiler-dom": "3.2.39",
-    "@vue/runtime-dom": "3.2.39",
-    "@vue/compiler-sfc": "3.2.39",
-    "@vue/server-renderer": "3.2.39"
+    "@vue/shared": "3.2.40",
+    "@vue/compiler-dom": "3.2.40",
+    "@vue/runtime-dom": "3.2.40",
+    "@vue/compiler-sfc": "3.2.40",
+    "@vue/server-renderer": "3.2.40"
   }
 }