Merge branch 'vuejs:main' into fix-5847

.github/contributing.md

@@ -47,6 +47,7 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 - Consider the performance / size impact of the changes, and whether the bug being fixes justifies the cost. If the bug being fixed is a very niche edge case, we should try to minimize the size / perf cost to make it worthwhile.
 
   - Is the code perf-sensitive (e.g. in "hot paths" like component updates or the vdom patch function?)
+
     - If the branch is dev-only, performance is less of a concern.
 
   - Check how much extra bundle size the change introduces.
@@ -77,6 +78,8 @@ A high level overview of tools used:
 
 **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 `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".
+
 ### `nr build`
 
 The `build` script builds all public packages (packages without `private: true` in their `package.json`).
@@ -152,9 +155,17 @@ $ nr dev
 
 - The `dev` script supports the `-i` flag for inlining all deps. This is useful when debugging `esm-bundler` builds which externalizes deps by default.
 
+### `nr dev-sfc`
+
+Shortcut for starting the SFC Playground in local dev mode. This provides the fastest feedback loop when debugging issues that can be reproduced in the SFC Playground.
+
+### `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.
+
 ### `nr dev-compiler`
 
-The `dev-compiler` script builds, watches and serves the [Template Explorer](https://github.com/vuejs/core/tree/main/packages/template-explorer) at `http://localhost:5000`. This is extremely useful when working on the compiler.
+The `dev-compiler` script builds, watches and serves the [Template Explorer](https://github.com/vuejs/core/tree/main/packages/template-explorer) at `http://localhost:5000`. This is useful when working on pure compiler issues.
 
 ### `nr test`
 
@@ -222,27 +233,29 @@ This is made possible via several configurations:
 
 ### Package Dependencies
 
-```
-                                    +---------------------+
-                                    |                     |
-                                    |  @vue/compiler-sfc  |
-                                    |                     |
-                                    +-----+--------+------+
-                                          |        |
-                                          v        v
-                      +---------------------+    +----------------------+
-                      |                     |    |                      |
-        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
-        |             |                     |    |                      |
-   +----+----+        +---------------------+    +----------------------+
-   |         |
-   |   vue   |
-   |         |
-   +----+----+        +---------------------+    +----------------------+    +-------------------+
-        |             |                     |    |                      |    |                   |
-        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
-                      |                     |    |                      |    |                   |
-                      +---------------------+    +----------------------+    +-------------------+
+```mermaid
+  flowchart LR
+    compiler-sfc["@vue/compiler-sfc"]
+    compiler-dom["@vue/compiler-dom"]
+    compiler-core["@vue/compiler-core"]
+    vue["vue"]
+    runtime-dom["@vue/runtime-dom"]
+    runtime-core["@vue/runtime-core"]
+    reactivity["@vue/reactivity"]
+
+    subgraph "Runtime Packages"
+      runtime-dom --> runtime-core
+      runtime-core --> reactivity
+    end
+
+    subgraph "Compiler Packages"
+      compiler-sfc --> compiler-core
+      compiler-sfc --> compiler-dom
+      compiler-dom --> compiler-core
+    end
+
+    vue ---> compiler-dom
+    vue --> runtime-dom
 ```
 
 There are some rules to follow when importing across package boundaries:

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
           node-version: 18
           cache: 'pnpm'
 
-      - run: pnpm install
+      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
 
       - name: Run unit tests
         run: pnpm run test-unit
@@ -35,6 +35,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Setup cache for Chromium binary
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/puppeteer/chrome
+          key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
+
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
@@ -63,13 +69,13 @@ jobs:
           node-version: 18
           cache: 'pnpm'
 
-      - run: pnpm install
+      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
 
       - name: Run eslint
         run: pnpm run lint
 
       # - name: Run prettier
-        # run: pnpm run format-check
+      # run: pnpm run format-check
 
       - name: Run type declaration tests
         run: pnpm run test-dts
@@ -90,7 +96,7 @@ jobs:
           node-version: 18
           cache: 'pnpm'
 
-      - run: pnpm install
+      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
       - run: pnpm run size
 
       # - name: Check build size

BACKERS.md

@@ -1,6 +1,6 @@
 <h1 align="center">Sponsors &amp; Backers</h1>
 
-Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of the awesome sponsors and backers listed in this file. If you'd like to join them, please consider [ sponsor Vue's development](https://vuejs.org/sponsor/).
+Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of the awesome sponsors and backers listed in this file. If you'd like to join them, please consider [ sponsoring Vue's development](https://vuejs.org/sponsor/).
 
 <p align="center">
   <a target="_blank" href="https://sponsors.vuejs.org/backers.svg">

README.md

@@ -6,7 +6,7 @@ Please follow the documentation at [vuejs.org](https://vuejs.org/)!
 
 ## Sponsors
 
-Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome [backers](https://github.com/vuejs/core/blob/main/BACKERS.md). If you'd like to join them, please consider [ sponsor Vue's development](https://vuejs.org/sponsor/).
+Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome [backers](https://github.com/vuejs/core/blob/main/BACKERS.md). If you'd like to join them, please consider [ sponsoring Vue's development](https://vuejs.org/sponsor/).
 
 <p align="center">
   <h3 align="center">Special Sponsor</h3>

jest.config.js

@@ -2,6 +2,17 @@ module.exports = {
   testEnvironment: 'jsdom',
   preset: 'ts-jest',
   setupFilesAfterEnv: ['./scripts/setupJestEnv.ts'],
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: {
+          target: 'esnext',
+          sourceMap: true
+        }
+      }
+    ]
+  },
   globals: {
     __DEV__: true,
     __TEST__: true,
@@ -15,13 +26,7 @@ module.exports = {
     __FEATURE_OPTIONS_API__: true,
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,
-    __COMPAT__: true,
-    'ts-jest': {
-      tsconfig: {
-        target: 'esnext',
-        sourceMap: true
-      }
-    }
+    __COMPAT__: true
   },
   coverageDirectory: 'coverage',
   coverageReporters: ['html', 'lcov', 'text'],

package.json

@@ -21,12 +21,17 @@
     "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-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" serve-sfc-playground",
-    "serve-sfc-playground": "vite packages/sfc-playground --host",
+    "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-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",
     "serve": "serve",
     "open": "open http://localhost:5000/packages/template-explorer/local.html",
-    "prebuild-sfc-playground": "node scripts/build.js compiler reactivity-transform shared -af cjs && 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 && node scripts/build.js compiler-sfc server-renderer -f esm-browser",
-    "build-sfc-playground": "cd packages/sfc-playground && npm run build",
+    "build-sfc-playground": "run-s build-compiler-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
+    "build-compiler-cjs": "node scripts/build.js compiler reactivity-transform shared -af cjs",
+    "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
+    "build-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": "node ./scripts/preinstall.js",
     "postinstall": "simple-git-hooks"
   },
@@ -51,15 +56,16 @@
     "@babel/types": "^7.12.0",
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@microsoft/api-extractor": "~7.20.0",
-    "@rollup/plugin-commonjs": "^18.0.0",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
     "@types/hash-sum": "^1.0.0",
-    "@types/jest": "^27.0.1",
+    "@types/jest": "^29.2.2",
     "@types/node": "^16.4.7",
-    "@types/puppeteer": "^5.0.0",
     "@typescript-eslint/parser": "^5.23.0",
+    "@vue/consolidate": "0.17.3",
     "@vue/reactivity": "workspace:*",
     "@vue/runtime-core": "workspace:*",
     "@vue/runtime-dom": "workspace:*",
@@ -68,31 +74,32 @@
     "conventional-changelog-cli": "^2.0.31",
     "csstype": "^3.0.3",
     "enquirer": "^2.3.2",
-    "esbuild": "^0.14.35",
+    "esbuild": "^0.15.13",
     "eslint": "^7.7.0",
     "eslint-plugin-jest": "26.1.5",
     "execa": "^4.0.2",
     "fs-extra": "^9.0.1",
-    "jest": "^27.1.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^10.2.10",
     "lodash": "^4.17.15",
     "marked": "^4.0.10",
     "minimist": "^1.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "puppeteer": "^10.0.0",
-    "rollup": "~2.38.5",
+    "pug": "^3.0.1",
+    "puppeteer": "^19.2.2",
+    "rollup": "~3.2.3",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-polyfill-node": "^0.6.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-polyfill-node": "^0.11.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "semver": "^7.3.2",
     "serve": "^12.0.0",
-    "terser": "^5.15.1",
     "simple-git-hooks": "^2.8.1",
+    "terser": "^5.15.1",
     "todomvc-app-css": "^2.3.0",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.8.0",
     "vite": "^3.0.0",

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

@@ -48,12 +48,12 @@ exports[`compiler: codegen Element (callExpression + objectExpression + Template
 "
 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,15 +165,15 @@ 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
 }"
 `;
 
 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"
   }
 }"
 `;