Merge branch 'main' into pr/5912

Author: johnsoncodehk

.eslintrc.js

@@ -69,6 +69,14 @@ module.exports = {
         'no-restricted-globals': ['error', ...NodeGlobals],
         'no-restricted-syntax': 'off'
       }
+    },
+    // Node scripts
+    {
+      files: ['scripts/**', './*.js', 'packages/**/index.js', 'packages/size-check/**'],
+      rules: {
+        'no-restricted-globals': 'off',
+        'no-restricted-syntax': 'off'
+      }
     }
   ]
 }

.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/contributing.md

@@ -36,9 +36,24 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 - Make sure tests pass!
 
-- Commit messages must follow the [commit message convention](./commit-convention.md) so that changelogs can be automatically generated. Commit messages are automatically validated before commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [yorkie](https://github.com/yyx990803/yorkie)).
+- Commit messages must follow the [commit message convention](./commit-convention.md) so that changelogs can be automatically generated. Commit messages are automatically validated before commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)).
 
-- No need to worry about code style as long as you have installed the dev dependencies - modified files are automatically formatted with Prettier on commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [yorkie](https://github.com/yyx990803/yorkie)).
+- No need to worry about code style as long as you have installed the dev dependencies - modified files are automatically formatted with Prettier on commit (by invoking [Git Hooks](https://git-scm.com/docs/githooks) via [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)).
+
+### Advanced Pull Request Tips
+
+- The PR should fix the intended bug **only** and not introduce unrelated changes. This includes unnecessary refactors - a PR should focus on the fix and not code style, this makes it easier to trace changes in the future.
+
+- 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.
+    - 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`.
 
 ## Development Setup
 
@@ -63,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`).
@@ -138,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`
 
@@ -208,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:
@@ -253,8 +280,6 @@ Test coverage is continuously deployed at https://vue-next-coverage.netlify.app/
 
 ### Testing Type Definition Correctness
 
-This project uses [tsd](https://github.com/SamVerschueren/tsd) to test the built definition files (`*.d.ts`).
-
 Type tests are located in the `test-dts` directory. To run the dts tests, run `nr test-dts`. Note that the type test requires all relevant `*.d.ts` files to be built first (and the script does it for you). Once the `d.ts` files are built and up-to-date, the tests can be re-run by simply running `nr test-dts`.
 
 ## Financial Contribution

.github/workflows/ci.yml

@@ -6,38 +6,48 @@ on:
   pull_request:
     branches:
       - main
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
 jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 16
-        uses: actions/setup-node@v2
+      - name: Set node version to 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'pnpm'
 
-      - run: pnpm install
+      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
 
       - name: Run unit tests
         run: pnpm run test-unit
 
   e2e-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - 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
 
-      - name: Set node version to 16
-        uses: actions/setup-node@v2
+      - name: Set node version to 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'pnpm'
 
       - run: pnpm install
@@ -48,22 +58,25 @@ jobs:
   lint-and-test-dts:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 16
-        uses: actions/setup-node@v2
+      - name: Set node version to 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          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
+
       - name: Run type declaration tests
         run: pnpm run test-dts
 
@@ -72,18 +85,18 @@ jobs:
     env:
       CI_JOB_NUMBER: 1
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 16
-        uses: actions/setup-node@v2
+      - name: Set node version to 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'pnpm'
 
-      - run: pnpm install
+      - run: PUPPETEER_SKIP_DOWNLOAD=1 pnpm install
       - run: pnpm run size
 
       # - name: Check build size

.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:

.gitignore

@@ -7,3 +7,4 @@ explorations
 TODOs.md
 *.log
 .idea
+.eslintcache

.prettierignore

@@ -0,0 +1 @@
+dist

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">