Merge branch 'main' into main

.github/workflows/autofix.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Set node version to 18
         uses: actions/setup-node@v4

.github/workflows/canary-minor.yml

@@ -17,7 +17,7 @@ jobs:
           ref: minor
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Set node version to 18
         uses: actions/setup-node@v4

.github/workflows/canary.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -43,7 +43,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -72,7 +72,7 @@ jobs:
           key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -98,7 +98,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/size-data.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -41,13 +41,3 @@ jobs:
         with:
           name: size-data
           path: temp/size
-
-      - name: Save PR number
-        if: ${{github.event_name == 'pull_request'}}
-        run: echo ${{ github.event.number }} > ./pr.txt
-
-      - uses: actions/upload-artifact@v4
-        if: ${{github.event_name == 'pull_request'}}
-        with:
-          name: pr-number
-          path: pr.txt

.github/workflows/size-report.yml

@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3.0.0
+        uses: pnpm/action-setup@v4.0.0
 
       - name: Install Node.js
         uses: actions/setup-node@v4
@@ -35,28 +35,15 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Download PR number
-        uses: dawidd6/action-download-artifact@v3
-        with:
-          name: pr-number
-          run_id: ${{ github.event.workflow_run.id }}
-          path: /tmp/pr-number
-
-      - name: Read PR Number
-        id: pr-number
-        uses: juliangruber/read-file-action@v1
-        with:
-          path: /tmp/pr-number/pr.txt
-
       - name: Download Size Data
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v4
         with:
           name: size-data
           run_id: ${{ github.event.workflow_run.id }}
           path: temp/size
 
       - name: Download Previous Size Data
-        uses: dawidd6/action-download-artifact@v3
+        uses: dawidd6/action-download-artifact@v4
         with:
           branch: main
           workflow: size-data.yml
@@ -78,7 +65,6 @@ jobs:
         uses: actions-cool/maintain-one-comment@v3
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ steps.pr-number.outputs.content }}
           body: |
             ${{ steps.size-report.outputs.content }}
             <!-- VUE_CORE_SIZE -->

eslint.config.js

@@ -45,6 +45,12 @@ export default tseslint.config(
           message:
             'Our output target is ES2016, so async/await syntax should be avoided.',
         },
+        {
+          selector: 'ChainExpression',
+          message:
+            'Our output target is ES2016, and optional chaining results in ' +
+            'verbose helpers and should be avoided.',
+        },
       ],
       'sort-imports': ['error', { ignoreDeclarationSort: true }],
 
@@ -134,7 +140,7 @@ export default tseslint.config(
   {
     files: [
       'eslint.config.js',
-      'rollup.config.js',
+      'rollup*.config.js',
       'scripts/**',
       './*.{js,ts}',
       'packages/*/*.js',

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "version": "3.4.27",
-  "packageManager": "pnpm@9.1.1",
+  "packageManager": "pnpm@9.2.0",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
@@ -59,58 +59,58 @@
     "node": ">=18.12.0"
   },
   "devDependencies": {
-    "@babel/parser": "^7.24.5",
-    "@babel/types": "^7.24.5",
+    "@babel/parser": "^7.24.7",
+    "@babel/types": "^7.24.7",
     "@codspeed/vitest-plugin": "^3.1.0",
     "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "5.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hash-sum": "^1.0.2",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.14.2",
     "@types/semver": "^7.5.8",
     "@vitest/coverage-istanbul": "^1.5.2",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^4.1.0",
     "enquirer": "^2.4.1",
-    "esbuild": "^0.21.3",
+    "esbuild": "^0.21.5",
     "esbuild-plugin-polyfill-node": "^0.3.0",
-    "eslint": "^9.2.0",
-    "eslint-plugin-import-x": "^0.5.0",
+    "eslint": "^9.4.0",
+    "eslint-plugin-import-x": "^0.5.1",
     "eslint-plugin-vitest": "^0.5.4",
     "estree-walker": "^2.0.2",
-    "execa": "^8.0.1",
+    "execa": "^9.2.0",
     "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.5",
     "lodash": "^4.17.21",
     "magic-string": "^0.30.10",
     "markdown-table": "^3.0.3",
     "marked": "^12.0.2",
     "minimist": "^1.2.8",
     "npm-run-all2": "^6.2.0",
     "picocolors": "^1.0.1",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.1",
     "pretty-bytes": "^6.1.1",
-    "pug": "^3.0.2",
+    "pug": "^3.0.3",
     "puppeteer": "~22.7.1",
     "rimraf": "^5.0.7",
-    "rollup": "^4.17.2",
+    "rollup": "^4.18.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "semver": "^7.6.2",
     "serve": "^14.2.3",
     "simple-git-hooks": "^2.11.1",
-    "terser": "^5.31.0",
+    "terser": "^5.31.1",
     "todomvc-app-css": "^2.4.3",
-    "tslib": "^2.6.2",
-    "tsx": "^4.10.5",
+    "tslib": "^2.6.3",
+    "tsx": "^4.15.1",
     "typescript": "~5.4.5",
-    "typescript-eslint": "^7.8.0",
-    "vite": "^5.2.11",
+    "typescript-eslint": "^7.12.0",
+    "vite": "^5.2.13",
     "vitest": "^1.5.2"
   },
   "pnpm": {

packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap

@@ -16,6 +16,22 @@ export function render(_ctx, _cache) {
 }"
 `;
 
+exports[`scopeId compiler support > should push typescript-compatible 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"
+
+const _withScopeId = (n: any) => (_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: any,_cache: any) {
+  return (_openBlock(), _createElementBlock("div", null, [
+    _hoisted_1,
+    _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
+    _hoisted_2
+  ]))
+}"
+`;
+
 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"
 

packages/compiler-core/__tests__/scopeId.spec.ts

@@ -81,4 +81,29 @@ describe('scopeId compiler support', () => {
     ].forEach(c => expect(code).toMatch(c))
     expect(code).toMatchSnapshot()
   })
+
+  test('should push typescript-compatible scopeId for hoisted nodes', () => {
+    const { ast, code } = baseCompile(
+      `<div><div>hello</div>{{ foo }}<div>world</div></div>`,
+      {
+        mode: 'module',
+        scopeId: 'test',
+        hoistStatic: true,
+        isTS: true,
+      },
+    )
+    expect(ast.helpers).toContain(PUSH_SCOPE_ID)
+    expect(ast.helpers).toContain(POP_SCOPE_ID)
+    expect(ast.hoists.length).toBe(2)
+    ;[
+      `const _withScopeId = (n: any) => (_pushScopeId("test"),n=n(),_popScopeId(),n)`,
+      `const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
+        PatchFlags.HOISTED,
+      )}))`,
+      `const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
+        PatchFlags.HOISTED,
+      )}))`,
+    ].forEach(c => expect(code).toMatch(c))
+    expect(code).toMatchSnapshot()
+  })
 })

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

@@ -1284,6 +1284,18 @@ describe('compiler: element transform', () => {
     })
   })
 
+  test('<math> should be forced into blocks', () => {
+    const ast = parse(`<div><math/></div>`)
+    transform(ast, {
+      nodeTransforms: [transformElement],
+    })
+    expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      tag: `"math"`,
+      isBlock: true,
+    })
+  })
+
   test('force block for runtime custom directive w/ children', () => {
     const { node } = parseWithElementTransform(`<div v-foo>hello</div>`)
     expect(node.isBlock).toBe(true)

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

@@ -18,7 +18,7 @@ import {
 import { ErrorCodes } from '../../src/errors'
 import { type CompilerOptions, generate } from '../../src'
 import { FRAGMENT, RENDER_LIST, RENDER_SLOT } from '../../src/runtimeHelpers'
-import { PatchFlags } from '@vue/shared'
+import { PatchFlagNames, PatchFlags } from '@vue/shared'
 import { createObjectMatcher, genFlagText } from '../testUtils'
 
 export function parseWithForTransform(
@@ -202,6 +202,18 @@ describe('compiler: v-for', () => {
       expect(forNode.valueAlias).toBeUndefined()
       expect((forNode.source as SimpleExpressionNode).content).toBe('items')
     })
+
+    test('source containing string expression with spaces', () => {
+      const { node: forNode } = parseWithForTransform(
+        `<span v-for="item in state ['my items']" />`,
+      )
+      expect(forNode.keyAlias).toBeUndefined()
+      expect(forNode.objectIndexAlias).toBeUndefined()
+      expect((forNode.valueAlias as SimpleExpressionNode).content).toBe('item')
+      expect((forNode.source as SimpleExpressionNode).content).toBe(
+        "state ['my items']",
+      )
+    })
   })
 
   describe('errors', () => {
@@ -253,6 +265,18 @@ describe('compiler: v-for', () => {
       )
     })
 
+    test('missing source and have multiple spaces with', () => {
+      const onError = vi.fn()
+      parseWithForTransform('<span v-for="item in  " />', { onError })
+
+      expect(onError).toHaveBeenCalledTimes(1)
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION,
+        }),
+      )
+    })
+
     test('missing value', () => {
       const onError = vi.fn()
       parseWithForTransform('<span v-for="in items" />', { onError })
@@ -1019,5 +1043,33 @@ describe('compiler: v-for', () => {
       })
       expect(generate(root).code).toMatchSnapshot()
     })
+
+    test('template v-for key w/ :key shorthand on div', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform('<div v-for="key in keys" :key>test</div>')
+      expect(codegenNode.patchFlag).toBe(
+        `${PatchFlags.KEYED_FRAGMENT} /* ${PatchFlagNames[PatchFlags.KEYED_FRAGMENT]} */`,
+      )
+    })
+
+    test('template v-for key w/ :key shorthand on template injected to the child', () => {
+      const {
+        node: { codegenNode },
+      } = parseWithForTransform(
+        '<template v-for="key in keys" :key><div>test</div></template>',
+      )
+      expect(assertSharedCodegen(codegenNode, true)).toMatchObject({
+        source: { content: `keys` },
+        params: [{ content: `key` }],
+        innerVNodeCall: {
+          type: NodeTypes.VNODE_CALL,
+          tag: `"div"`,
+          props: createObjectMatcher({
+            key: '[key]',
+          }),
+        },
+      })
+    })
   })
 })