Merge branch 'vuejs:main' into fix/7095

Author: edison1105

.eslintrc.js renamed to .eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
   parserOptions: {
     sourceType: 'module'
   },
-  plugins: ["jest"],
+  plugins: ['jest'],
   rules: {
     'no-debugger': 'error',
     'no-unused-vars': [
@@ -17,20 +17,22 @@ module.exports = {
     ],
     // most of the codebase are expected to be env agnostic
     'no-restricted-globals': ['error', ...DOMGlobals, ...NodeGlobals],
-    // since we target ES2015 for baseline support, we need to forbid object
-    // rest spread usage in destructure as it compiles into a verbose helper.
-    // TS now compiles assignment spread into Object.assign() calls so that
-    // is allowed.
+
     'no-restricted-syntax': [
       'error',
+      // since we target ES2015 for baseline support, we need to forbid object
+      // rest spread usage in destructure as it compiles into a verbose helper.
       'ObjectPattern > RestElement',
+      // tsc compiles assignment spread into Object.assign() calls, but esbuild
+      // still generates verbose helpers, so spread assignment is also prohiboted
+      'ObjectExpression > SpreadElement',
       'AwaitExpression'
     ]
   },
   overrides: [
     // tests, no restrictions (runs in Node / jest with jsdom)
     {
-      files: ['**/__tests__/**', 'test-dts/**'],
+      files: ['**/__tests__/**', 'packages/dts-test/**'],
       rules: {
         'no-restricted-globals': 'off',
         'no-restricted-syntax': 'off',
@@ -72,7 +74,12 @@ module.exports = {
     },
     // Node scripts
     {
-      files: ['scripts/**', './*.js', 'packages/**/index.js', 'packages/size-check/**'],
+      files: [
+        'scripts/**',
+        './*.js',
+        'packages/**/index.js',
+        'packages/size-check/**'
+      ],
       rules: {
         'no-restricted-globals': 'off',
         'no-restricted-syntax': 'off'

.github/contributing.md

@@ -30,15 +30,15 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
   - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
   - Provide a detailed description of the bug in the PR. Live demo preferred.
-  - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `npm test -- --coverage`.
+  - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `nr test-coverage`.
 
 - It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.
 
 - 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
 
@@ -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.
@@ -69,14 +70,36 @@ $ pnpm i # install the dependencies of the project
 A high level overview of tools used:
 
 - [TypeScript](https://www.typescriptlang.org/) as the development language
-- [Rollup](https://rollupjs.org) for bundling
-- [Jest](https://jestjs.io/) for unit testing
+- [Vite](https://vitejs.dev/) and [ESBuild](https://esbuild.github.io/) for development bundling
+- [Rollup](https://rollupjs.org) for production bundling
+- [Vitest](https://vitest.dev/) for unit testing
 - [Prettier](https://prettier.io/) for code formatting
+- [ESLint](https://eslint.org/) for static error prevention (outside of types)
+
+## Git Hooks
+
+The project uses [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) to enforce the following on each commit:
+
+- Type check the entire project
+- Automatically format changed files using Prettier
+- Verify commit message format (logic in `scripts/verifyCommit.js`)
 
 ## Scripts
 
 **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`](#nr-build)
+- [`nr build-dts`](#nr-build-dts)
+- [`nr check`](#nr-check)
+- [`nr dev`](#nr-dev)
+- [`nr dev-sfc`](#nr-dev-sfc)
+- [`nr dev-esm`](#nr-dev-esm)
+- [`nr dev-compiler`](#nr-dev-compiler)
+- [`nr test`](#nr-test)
+- [`nr test-dts`](#nr-test-dts)
+
 ### `nr build`
 
 The `build` script builds all public packages (packages without `private: true` in their `package.json`).
@@ -91,6 +114,8 @@ nr build runtime-core
 nr build runtime --all
 ```
 
+Note that `nr build` uses `rollup-plugin-esbuild` for transpiling typescript and **does not perform type checking**. To run type check on the entire codebase, run `nr check`. Type checks are also automatically run on each commit.
+
 #### Build Formats
 
 By default, each package will be built in multiple distribution formats as specified in the `buildOptions.formats` field in its `package.json`. These can be overwritten via the `-f` flag. The following formats are supported:
@@ -124,13 +149,11 @@ nr build runtime-core -f esm-browser,cjs
 
 Use the `--sourcemap` or `-s` flag to build with source maps. Note this will make the build much slower.
 
-#### Build with Type Declarations
+### `nr build-dts`
 
-The `--types` or `-t` flag will generate type declarations during the build and in addition:
+This command builds the type declarations for all packages. It first generates the raw `.d.ts` files in the `temp` directory, then uses [rollup-plugin-dts](https://github.com/Swatinem/rollup-plugin-dts) to roll the types into a single `.d.ts` file for each package.
 
-- Roll the declarations into a single `.d.ts` file for each package;
-- Generate an API report in `<projectRoot>/temp/<packageName>.api.md`. This report contains potential warnings emitted by [api-extractor](https://api-extractor.com/).
-- Generate an API model json in `<projectRoot>/temp/<packageName>.api.json`. This file can be used to generate a Markdown version of the exported APIs.
+### `nr check`
 
 ### `nr dev`
 
@@ -139,7 +162,7 @@ The `dev` script bundles a target package (default: `vue`) in a specified format
 ```bash
 $ nr dev
 
-> watching: packages/vue/dist/vue.global.js
+> built: packages/vue/dist/vue.global.js
 ```
 
 - **Important:** output of the `dev` script is for development and debugging only. While it has the same runtime behavior, the generated code should never be published to npm.
@@ -152,29 +175,44 @@ $ 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`
 
-The `test` script simply calls the `jest` binary, so all [Jest CLI Options](https://jestjs.io/docs/en/cli) can be used. Some examples:
+The `test` script simply calls the `vitest` binary, so all [Vitest CLI Options](https://vitest.dev/guide/cli.html#options) can be used. Some examples:
 
 ```bash
-# run all tests
+# run all tests in watch mode
 $ nr test
 
+# run once and exit (equivalent to `vitest run`)
+$ nr test run
+
 # run all tests under the runtime-core package
 $ nr test runtime-core
 
-# run tests in a specific file
-$ nr test fileName
+# run tests in files matching the pattern
+$ nr test <fileNamePattern>
 
-# run a specific test in a specific file
-$ nr test fileName -t 'test name'
+# run a specific test in specific files
+$ nr test <fileNamePattern> -t 'test name'
 ```
 
-The default `test` script includes the `--runInBand` jest flag to improve test stability, especially for the CSS transition related tests. When you are testing specific test specs, you can also run `npx jest` with flags directly to speed up tests (jest runs them in parallel by default).
+Tests that test against source code are grouped under `nr test-unit`, while tests that test against built files that run in real browsers are grouped under `nr test-e2e`.
+
+### `nr test-dts`
+
+Runs `nr build-dts` first, then verify the type tests in `packages/dts-test` are working correctly against the actual built type declarations.
 
 ## Project Structure
 
@@ -198,14 +236,20 @@ This repository employs a [monorepo](https://en.wikipedia.org/wiki/Monorepo) set
 
 - `compiler-ssr`: Compiler that produces render functions optimized for server-side rendering.
 
-- `template-explorer`: A development tool for debugging compiler output. You can run `nr dev template-explorer` and open its `index.html` to get a repl of template compilation based on current source code.
-
-  A [live version](https://vue-next-template-explorer.netlify.com) of the template explorer is also available, which can be used for providing reproductions for compiler bugs. You can also pick the deployment for a specific commit from the [deploy logs](https://app.netlify.com/sites/vue-next-template-explorer/deploys).
-
 - `shared`: Internal utilities shared across multiple packages (especially environment-agnostic utils used by both runtime and compiler packages).
 
 - `vue`: The public facing "full build" which includes both the runtime AND the compiler.
 
+- Private utility packages:
+
+  - `dts-test`: Contains type-only tests against generated dts files.
+
+  - `sfc-playground`: The playground continuously deployed at https://sfc.vuejs.org. To run the playground locally, use [`nr dev-sfc`](#nr-dev-sfc).
+
+  - `template-explorer`: A development tool for debugging compiler output, continuously deployed at https://template-explorer.vuejs.org/. To run it locally, run [`nr dev-compiler`](#nr-dev-compiler).
+
+  - `size-check`: Used for checking built bundle sizes on CI.
+
 ### Importing Packages
 
 The packages can import each other directly using their package names. Note that when importing a package, the name listed in its `package.json` should be used. Most of the time the `@vue/` prefix is needed:
@@ -217,32 +261,34 @@ import { h } from '@vue/runtime-core'
 This is made possible via several configurations:
 
 - For TypeScript, `compilerOptions.paths` in `tsconfig.json`
-- For Jest, `moduleNameMapper` in `jest.config.js`
+- Vitest and Rollup share the sae set of aliases from `scripts/aliases.js`
 - For plain Node.js, they are linked using [PNPM Workspaces](https://pnpm.io/workspaces).
 
 ### 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:
@@ -255,21 +301,19 @@ There are some rules to follow when importing across package boundaries:
 
 ## Contributing Tests
 
-Unit tests are collocated with the code being tested in each package, inside directories named `__tests__`. Consult the [Jest docs](https://jestjs.io/docs/en/using-matchers) and existing test cases for how to write new test specs. Here are some additional guidelines:
+Unit tests are collocated with the code being tested in each package, inside directories named `__tests__`. Consult the [Vitest docs](https://vitest.dev/api/) and existing test cases for how to write new test specs. Here are some additional guidelines:
 
 - Use the minimal API needed for a test case. For example, if a test can be written without involving the reactivity system or a component, it should be written so. This limits the test's exposure to changes in unrelated parts and makes it more stable.
 
 - If testing platform agnostic behavior or asserting low-level virtual DOM operations, use `@vue/runtime-test`.
 
 - Only use platform-specific runtimes if the test is asserting platform-specific behavior.
 
-Test coverage is continuously deployed at https://vue-next-coverage.netlify.app/. PRs that improve test coverage are welcome, but in general the test coverage should be used as a guidance for finding API use cases that are not covered by tests. We don't recommend adding tests that only improve coverage but not actually test a meaning use case.
+Test coverage is continuously deployed at https://coverage.vuejs.org. PRs that improve test coverage are welcome, but in general the test coverage should be used as a guidance for finding API use cases that are not covered by tests. We don't recommend adding tests that only improve coverage but not actually test a meaning use case.
 
 ### 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`.
+Type tests are located in the `packages/dts-test` 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 running `nr test-dts-only`.
 
 ## Financial Contribution
 

.github/workflows/ci.yml

@@ -17,15 +17,15 @@ jobs:
       - uses: actions/checkout@v3
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v2
 
-      - name: Set node version to 16
+      - 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
@@ -35,13 +35,19 @@ 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
 
-      - name: Set node version to 16
+      - name: Set node version to 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'pnpm'
 
       - run: pnpm install
@@ -57,17 +63,20 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 16
+      - 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
 
@@ -81,13 +90,13 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v2
 
-      - name: Set node version to 16
+      - 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