Merge branch 'main' into chore-1

Author: edison1105

.github/workflows/size-report.yml

@@ -66,7 +66,7 @@ jobs:
           if_no_artifact_found: warn
 
       - name: Prepare report
-        run: pnpm tsx scripts/size-report.ts > size-report.md
+        run: node scripts/size-report.js > size-report.md
 
       - name: Read Size Report
         id: size-report

CHANGELOG.md

@@ -1,3 +1,21 @@
+## [3.5.4](https://github.com/vuejs/core/compare/v3.5.3...v3.5.4) (2024-09-10)
+
+
+### Bug Fixes
+
+* **compiler-sfc:** correct scoped injection for nesting selector ([#11854](https://github.com/vuejs/core/issues/11854)) ([b1de75e](https://github.com/vuejs/core/commit/b1de75ed04626b6423085dfde91fb0cb481a25e8)), closes [#10567](https://github.com/vuejs/core/issues/10567)
+* **reactivity:** fix markRaw error on already marked object ([#11864](https://github.com/vuejs/core/issues/11864)) ([67d6596](https://github.com/vuejs/core/commit/67d6596d40b1807b9cd8eb0d9282932ea77be3c0)), closes [#11862](https://github.com/vuejs/core/issues/11862)
+* Revert "fix: Revert "fix(reactivity): self-referencing computed should refresh"" ([e596378](https://github.com/vuejs/core/commit/e596378e0be728dad7d60938449f3fa557ca2ec9))
+* **runtime-core:** handle shallow reactive arrays in renderList correctly ([#11870](https://github.com/vuejs/core/issues/11870)) ([ced59ab](https://github.com/vuejs/core/commit/ced59ab8f2f2e89c13119bab3a0c25a1a1f1c3d6)), closes [#11869](https://github.com/vuejs/core/issues/11869)
+* **types:** correctly infer `TypeEmits` with both tuple and function syntax ([#11840](https://github.com/vuejs/core/issues/11840)) ([dad6738](https://github.com/vuejs/core/commit/dad673809929c084dcb8e42640eb7daa675d4ea4)), closes [#11836](https://github.com/vuejs/core/issues/11836)
+
+
+### Performance Improvements
+
+* **reactivity:** trigger deps directly instead of storing in an array first ([#11695](https://github.com/vuejs/core/issues/11695)) ([f80d447](https://github.com/vuejs/core/commit/f80d447c17662556e9e3f99f6d199967f4c8cf3d))
+
+
+
 ## [3.5.3](https://github.com/vuejs/core/compare/v3.5.2...v3.5.3) (2024-09-06)
 
 

package.json

@@ -1,14 +1,14 @@
 {
   "private": true,
-  "version": "3.5.3",
-  "packageManager": "pnpm@9.9.0",
+  "version": "3.5.4",
+  "packageManager": "pnpm@9.10.0",
   "type": "module",
   "scripts": {
     "dev": "node scripts/dev.js",
     "build": "node scripts/build.js",
-    "build-dts": "tsc -p tsconfig.build-browser.json && tsc -p tsconfig.build-node.json && rollup -c rollup.dts.config.js",
+    "build-dts": "tsc -p tsconfig.build.json --noCheck && rollup -c rollup.dts.config.js",
     "clean": "rimraf --glob packages/*/dist temp .eslintcache",
-    "size": "run-s \"size-*\" && tsx scripts/usage-size.ts",
+    "size": "run-s \"size-*\" && node scripts/usage-size.js",
     "size-global": "node scripts/build.js vue runtime-dom -f global -p --size",
     "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",
@@ -66,9 +66,9 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "5.0.4",
-    "@swc/core": "^1.7.23",
+    "@swc/core": "^1.7.24",
     "@types/hash-sum": "^1.0.2",
-    "@types/node": "^20.16.3",
+    "@types/node": "^20.16.5",
     "@types/semver": "^7.5.8",
     "@types/serve-handler": "^6.1.4",
     "@vitest/coverage-v8": "^2.0.5",
@@ -104,8 +104,7 @@
     "simple-git-hooks": "^2.11.1",
     "todomvc-app-css": "^2.4.3",
     "tslib": "^2.7.0",
-    "tsx": "^4.19.0",
-    "typescript": "~5.5.4",
+    "typescript": "~5.6.2",
     "typescript-eslint": "^8.4.0",
     "vite": "catalog:",
     "vitest": "^2.0.5"

packages-private/sfc-playground/package.json

@@ -13,7 +13,7 @@
     "vite": "catalog:"
   },
   "dependencies": {
-    "@vue/repl": "^4.3.1",
+    "@vue/repl": "^4.4.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "vue": "workspace:*"

packages-private/sfc-playground/src/App.vue

@@ -14,6 +14,12 @@ setVH()
 
 const useSSRMode = ref(false)
 
+const AUTO_SAVE_STORAGE_KEY = 'vue-sfc-playground-auto-save'
+const initAutoSave: boolean = JSON.parse(
+  localStorage.getItem(AUTO_SAVE_STORAGE_KEY) ?? 'true',
+)
+const autoSave = ref(initAutoSave)
+
 const { productionMode, vueVersion, importMap } = useVueImportMap({
   runtimeDev: import.meta.env.PROD
     ? `${location.origin}/vue.runtime.esm-browser.js`
@@ -89,6 +95,11 @@ function toggleSSR() {
   useSSRMode.value = !useSSRMode.value
 }
 
+function toggleAutoSave() {
+  autoSave.value = !autoSave.value
+  localStorage.setItem(AUTO_SAVE_STORAGE_KEY, String(autoSave.value))
+}
+
 function reloadPage() {
   replRef.value?.reload()
 }
@@ -111,9 +122,11 @@ onMounted(() => {
     :store="store"
     :prod="productionMode"
     :ssr="useSSRMode"
+    :autoSave="autoSave"
     @toggle-theme="toggleTheme"
     @toggle-prod="toggleProdMode"
     @toggle-ssr="toggleSSR"
+    @toggle-autosave="toggleAutoSave"
     @reload-page="reloadPage"
   />
   <Repl
@@ -123,6 +136,7 @@ onMounted(() => {
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
     :ssr="useSSRMode"
+    :autoSave="autoSave"
     :store="store"
     :showCompileOutput="true"
     :autoResize="true"

packages-private/sfc-playground/src/Header.vue

@@ -14,11 +14,13 @@ const props = defineProps<{
   store: ReplStore
   prod: boolean
   ssr: boolean
+  autoSave: boolean
 }>()
 const emit = defineEmits([
   'toggle-theme',
   'toggle-ssr',
   'toggle-prod',
+  'toggle-autosave',
   'reload-page',
 ])
 
@@ -107,6 +109,14 @@ function toggleDark() {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
+      <button
+        title="Toggle editor auto save mode"
+        class="toggle-autosave"
+        :class="{ enabled: autoSave }"
+        @click="$emit('toggle-autosave')"
+      >
+        <span>{{ autoSave ? 'AutoSave ON' : 'AutoSave OFF' }}</span>
+      </button>
       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
@@ -199,7 +209,8 @@ h1 img {
 }
 
 .toggle-prod span,
-.toggle-ssr span {
+.toggle-ssr span,
+.toggle-autosave span {
   font-size: 12px;
   border-radius: 4px;
   padding: 4px 6px;
@@ -214,11 +225,13 @@ h1 img {
   background: var(--purple);
 }
 
-.toggle-ssr span {
+.toggle-ssr span,
+.toggle-autosave span {
   background-color: var(--btn-bg);
 }
 
-.toggle-ssr.enabled span {
+.toggle-ssr.enabled span,
+.toggle-autosave.enabled span {
   color: #fff;
   background-color: var(--green);
 }

packages-private/sfc-playground/src/download/template/package.json

@@ -12,6 +12,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.3",
-    "vite": "^5.4.2"
+    "vite": "^5.4.3"
   }
 }

packages-private/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "isolatedDeclarations": false
+  },
+  "include": ["."]
+}

packages/compiler-core/__tests__/testUtils.ts

@@ -3,6 +3,8 @@ import {
   ElementTypes,
   Namespaces,
   NodeTypes,
+  type Property,
+  type SimpleExpressionNode,
   type VNodeCall,
   locStub,
 } from '../src'
@@ -22,7 +24,10 @@ const bracketsRE = /^\[|\]$/g
 // e.g.
 // - createObjectMatcher({ 'foo': '[bar]' }) matches { foo: bar }
 // - createObjectMatcher({ '[foo]': 'bar' }) matches { [foo]: "bar" }
-export function createObjectMatcher(obj: Record<string, any>) {
+export function createObjectMatcher(obj: Record<string, any>): {
+  type: NodeTypes
+  properties: Partial<Property>[]
+} {
   return {
     type: NodeTypes.JS_OBJECT_EXPRESSION,
     properties: Object.keys(obj).map(key => ({
@@ -31,7 +36,7 @@ export function createObjectMatcher(obj: Record<string, any>) {
         type: NodeTypes.SIMPLE_EXPRESSION,
         content: key.replace(bracketsRE, ''),
         isStatic: !leadingBracketRE.test(key),
-      },
+      } as SimpleExpressionNode,
       value: isString(obj[key])
         ? {
             type: NodeTypes.SIMPLE_EXPRESSION,
@@ -78,7 +83,7 @@ type Flags = PatchFlags | ShapeFlags
 export function genFlagText(
   flag: Flags | Flags[],
   names: { [k: number]: string } = PatchFlagNames,
-) {
+): string {
   if (isArray(flag)) {
     let f = 0
     flag.forEach(ff => {

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

@@ -13,6 +13,7 @@ import {
   type ForNode,
   type InterpolationNode,
   NodeTypes,
+  type RootNode,
   type SimpleExpressionNode,
 } from '../../src/ast'
 import { ErrorCodes } from '../../src/errors'
@@ -24,7 +25,10 @@ import { createObjectMatcher } from '../testUtils'
 export function parseWithForTransform(
   template: string,
   options: CompilerOptions = {},
-) {
+): {
+  root: RootNode
+  node: ForNode & { codegenNode: ForCodegenNode }
+} {
   const ast = parse(template, options)
   transform(ast, {
     nodeTransforms: [

packages/compiler-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-core",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "@vue/compiler-core",
   "main": "index.js",
   "module": "dist/compiler-core.esm-bundler.js",

packages/compiler-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-dom",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "@vue/compiler-dom",
   "main": "index.js",
   "module": "dist/compiler-dom.esm-bundler.js",

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

@@ -41,6 +41,12 @@ describe('SFC scoped CSS', () => {
     )
   })
 
+  test('nesting selector', () => {
+    expect(compileScoped(`h1 { color: red; .foo { color: red; } }`)).toMatch(
+      `h1 {\n&[data-v-test] { color: red;\n}\n.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;`,
@@ -95,6 +101,13 @@ describe('SFC scoped CSS', () => {
       ":where(.foo[data-v-test] .bar) { color: red;
       }"
     `)
+    expect(compileScoped(`:deep(.foo) { color: red; .bar { color: red; } }`))
+      .toMatchInlineSnapshot(`
+      "[data-v-test] .foo { color: red;
+      .bar { color: red;
+      }
+      }"
+    `)
   })
 
   test('::v-slotted', () => {

packages/compiler-sfc/__tests__/utils.ts

@@ -1,5 +1,6 @@
 import {
   type SFCParseOptions,
+  type SFCScriptBlock,
   type SFCScriptCompileOptions,
   compileScript,
   parse,
@@ -12,7 +13,7 @@ export function compileSFCScript(
   src: string,
   options?: Partial<SFCScriptCompileOptions>,
   parseOptions?: SFCParseOptions,
-) {
+): SFCScriptBlock {
   const { descriptor, errors } = parse(src, parseOptions)
   if (errors.length) {
     console.warn(errors[0])
@@ -23,7 +24,7 @@ export function compileSFCScript(
   })
 }
 
-export function assertCode(code: string) {
+export function assertCode(code: string): void {
   // parse the generated code to make sure it is valid
   try {
     babelParse(code, {

packages/compiler-sfc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -62,6 +62,6 @@
     "postcss-modules": "^6.0.0",
     "postcss-selector-parser": "^6.1.2",
     "pug": "^3.0.3",
-    "sass": "^1.77.8"
+    "sass": "^1.78.0"
   }
 }