workflow: move to pnpm (#4766)

.github/contributing.md

@@ -28,7 +28,7 @@ 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 `yarn test --coverage`.
+ - Add appropriate test coverage if applicable. You can check the coverage of your code addition by running `npm test -- --coverage`.
 
 - It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.
 
@@ -40,12 +40,14 @@ Hi! I'm really excited that you are interested in contributing to Vue.js. Before
 
 ## Development Setup
 
-You will need [Node.js](https://nodejs.org) **version 10+**, and [Yarn 1.x](https://yarnpkg.com/en/docs/install).
+You will need [Node.js](https://nodejs.org) **version 10+**, and [PNPM](https://pnpm.io).
+
+We also recommend installing [ni](https://github.com/antfu/ni) to help switching between repos using different package managers. `ni` also provides the handy `nr` command which running npm scripts easier.
 
 After cloning the repo, run:
 
 ```bash
-$ yarn # install the dependencies of the project
+$ pnpm i # install the dependencies of the project
 ```
 
 A high level overview of tools used:
@@ -57,18 +59,20 @@ A high level overview of tools used:
 
 ## Scripts
 
-### `yarn build`
+**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`.
+
+### `nr build`
 
 The `build` script builds all public packages (packages without `private: true` in their `package.json`).
 
 Packages to build can be specified with fuzzy matching:
 
 ```bash
 # build runtime-core only
-yarn build runtime-core
+nr build runtime-core
 
 # build all packages matching "runtime"
-yarn build runtime --all
+nr build runtime --all
 ```
 
 #### Build Formats
@@ -91,13 +95,13 @@ More details about each of these formats can be found in the [`vue` package READ
 For example, to build `runtime-core` with the global build only:
 
 ```bash
-yarn build runtime-core -f global
+nr build runtime-core -f global
 ```
 
 Multiple formats can be specified as a comma-separated list:
 
 ```bash
-yarn build runtime-core -f esm-browser,cjs
+nr build runtime-core -f esm-browser,cjs
 ```
 
 #### Build with Source Maps
@@ -112,12 +116,12 @@ The `--types` or `-t` flag will generate type declarations during the build and
 - 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.
 
-### `yarn dev`
+### `nr dev`
 
 The `dev` script bundles a target package (default: `vue`) in a specified format (default: `global`) in dev mode and watches for changes. This is useful when you want to load up a build in an HTML page for quick debugging:
 
 ```bash
-$ yarn dev
+$ nr dev
 
 > rollup v1.19.4
 > bundles packages/vue/src/index.ts → packages/vue/dist/vue.global.js...
@@ -129,31 +133,30 @@ $ yarn dev
 
 - The `dev` script also supports the `-s` flag for generating source maps, but it will make rebuilds slower.
 
-### `yarn dev-compiler`
+### `nr dev-compiler`
 
 The `dev-compiler` script builds, watches and serves the [Template Explorer](https://github.com/vuejs/vue-next/tree/master/packages/template-explorer) at `http://localhost:5000`. This is extremely useful when working on the compiler.
 
-### `yarn test`
+### `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:
 
 ```bash
 # run all tests
-$ yarn test
-
-# run tests in watch mode
-$ yarn test --watch
+$ nr test
 
 # run all tests under the runtime-core package
-$ yarn test runtime-core
+$ nr test runtime-core
 
 # run tests in a specific file
-$ yarn test fileName
+$ nr test fileName
 
 # run a specific test in a specific file
-$ yarn test fileName -t 'test name'
+$ nr test fileName -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).
+
 ## Project Structure
 
 This repository employs a [monorepo](https://en.wikipedia.org/wiki/Monorepo) setup which hosts a number of associated packages under the `packages` directory:
@@ -174,7 +177,7 @@ 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 `yarn dev template-explorer` and open its `index.html` to get a repl of template compilation based on current source code.
+- `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).
 
@@ -194,7 +197,7 @@ This is made possible via several configurations:
 
 - For TypeScript, `compilerOptions.path` in `tsconfig.json`
 - For Jest, `moduleNameMapper` in `jest.config.js`
-- For plain Node.js, they are linked using [Yarn Workspaces](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/).
+- For plain Node.js, they are linked using [PNPM Workspaces](https://pnpm.io/workspaces).
 
 ### Package Dependencies
 
@@ -245,7 +248,7 @@ Test coverage is continuously deployed at https://vue-next-coverage.netlify.app/
 
 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 `yarn 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 `yarn test-dts`.
+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

@@ -11,43 +11,68 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v2
+
+ - name: Install pnpm
+ uses: pnpm/[email protected]
+ with:
+ version: 6.15.1
+
  - name: Set node version to 16
  uses: actions/setup-node@v2
  with:
  node-version: 16
- cache: 'yarn'
- - run: yarn install --frozen-lockfile
+ cache: 'pnpm'
+
+ - run: pnpm install
+
  - name: Run unit tests
- run: yarn test --ci
+ run: pnpm run test -- --ci
 
  test-dts:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v2
+
+ - name: Install pnpm
+ uses: pnpm/[email protected]
+ with:
+ version: 6.15.1
+
  - name: Set node version to 16
  uses: actions/setup-node@v2
  with:
  node-version: 16
- cache: 'yarn'
- - run: yarn install --frozen-lockfile
+ cache: 'pnpm'
+
+ - run: pnpm install
+
  - name: Run type declaration tests
- run: yarn test-dts
+ run: pnpm run test-dts
 
  size:
  runs-on: ubuntu-latest
  env:
  CI_JOB_NUMBER: 1
  steps:
  - uses: actions/checkout@v1
+
+ - name: Install pnpm
+ uses: pnpm/[email protected]
+ with:
+ version: 6.15.1
+
  - name: Set node version to 16
  uses: actions/setup-node@v2
  with:
  node-version: 16
- cache: 'yarn'
- - run: yarn install --frozen-lockfile
- - name: Check build size
- uses: posva/[email protected]
- with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
- build_script: size
- files: packages/vue/dist/vue.global.prod.js packages/runtime-dom/dist/runtime-dom.global.prod.js packages/size-check/dist/index.js
+ cache: 'pnpm'
+
+ - run: pnpm install
+ - run: pnpm run size
+
+ # - name: Check build size
+ # uses: posva/[email protected]
+ # with:
+ # github_token: ${{ secrets.GITHUB_TOKEN }}
+ # build_script: size
+ # files: packages/vue/dist/vue.global.prod.js packages/runtime-dom/dist/runtime-dom.global.prod.js packages/size-check/dist/index.js

netlify.toml

@@ -0,0 +1,3 @@
+[build.environment]
+ NODE_VERSION = "16"
+ NPM_FLAGS = "--version" # prevent Netlify npm install

package.json

@@ -1,9 +1,6 @@
 {
  "private": true,
  "version": "3.2.20",
- "workspaces": [
- "packages/*"
- ],
  "scripts": {
  "dev": "node scripts/dev.js",
  "build": "node scripts/build.js",
@@ -13,16 +10,16 @@
  "lint": "eslint --ext .ts packages/*/src/**.ts",
  "format": "prettier --write --parser typescript \"packages/**/*.ts?(x)\"",
  "test": "node scripts/build.js vue -f global -d && jest --runInBand",
- "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && yarn test-dts-only",
+ "test-dts": "node scripts/build.js shared reactivity runtime-core runtime-dom -dt -f esm-bundler && npm run test-dts-only",
  "test-dts-only": "tsc -p ./test-dts/tsconfig.json && tsc -p ./test-dts/tsconfig.build.json",
  "release": "node scripts/release.js",
  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
  "dev-compiler": "run-p \"dev template-explorer\" serve",
- "dev-sfc": "run-p \"dev compiler-sfc -f esm-browser\" \"dev runtime-core -f esm-bundler\" \"dev runtime-dom -f esm-bundler\" serve-sfc-playground",
+ "dev-sfc": "run-p \"dev compiler-sfc -- -f esm-browser\" \"dev runtime-core -- -f esm-bundler\" \"dev runtime-dom -- -f esm-bundler\" serve-sfc-playground",
  "serve-sfc-playground": "vite packages/sfc-playground --host",
  "serve": "serve",
  "open": "open http://localhost:5000/packages/template-explorer/local.html",
- "preinstall": "node ./scripts/checkYarn.js",
+ "preinstall": "node ./scripts/preinstall.js",
  "prebuild-sfc-playground": "node scripts/build.js compiler ref-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 -f esm-browser",
  "build-sfc-playground": "cd packages/sfc-playground && vite build"
  },
@@ -47,6 +44,10 @@
  "node": ">=16.5.0"
  },
  "devDependencies": {
+ "vue": "workspace:*",
+ "@vue/runtime-dom": "workspace:*",
+ "@vue/runtime-core": "workspace:*",
+ "@vue/reactivity": "workspace:*",
  "@babel/types": "^7.12.0",
  "@microsoft/api-extractor": "^7.15.1",
  "@rollup/plugin-commonjs": "^18.0.0",
@@ -85,6 +86,7 @@
  "yorkie": "^2.0.0",
  "lodash": "^4.17.15",
  "marked": "^0.7.0",
- "todomvc-app-css": "^2.3.0"
+ "todomvc-app-css": "^2.3.0",
+ "vite": "^2.6.0"
  }
 }

packages/sfc-playground/package.json

@@ -8,10 +8,10 @@
  "serve": "vite preview"
  },
  "devDependencies": {
- "@vitejs/plugin-vue": "^1.8.1",
- "vite": "^2.5.10"
+ "@vitejs/plugin-vue": "^1.9.3"
  },
  "dependencies": {
+ "vue": "workspace:*",
  "@vue/repl": "^0.4.3",
  "file-saver": "^2.0.5",
  "jszip": "^3.6.0"

packages/sfc-playground/vite.config.ts

@@ -28,7 +28,7 @@ function copyVuePlugin(): Plugin {
  if (!fs.existsSync(filePath)) {
  throw new Error(
  `vue.runtime.esm-browser.js not built. ` +
- `Run "yarn build vue -f esm-browser" first.`
+ `Run "nr build vue -f esm-browser" first.`
  )
  }
  this.emitFile({

packages/size-check/package.json

@@ -6,6 +6,6 @@
  "build": "vite build"
  },
  "devDependencies": {
- "vite": "^2.5.10"
+ "vite": "^2.6.0"
  }
 }

packages/size-check/src/index.ts

@@ -1,4 +1,4 @@
-import { h, createApp } from 'vue'
+import { h, createApp } from '@vue/runtime-dom'
 
 // The bare minimum code required for rendering something to the screen
 createApp({

packages/size-check/vite.config.js

@@ -1,9 +1,4 @@
 export default {
- resolve: {
- alias: {
- vue: '@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'
- }
- },
  build: {
  rollupOptions: {
  input: ['src/index.ts'],

packages/template-explorer/README.md

@@ -4,7 +4,7 @@ Live explorer for template compilation output.
 
 To run:
 
-- `yarn dev-compiler`
-- When the compilation is done, in another terminal run `yarn open`
+- `npm run dev-compiler` in repo root
+- When the compilation is done, in another terminal run `npm run open`
 
 Note: `index.html` uses CDN for dependencies and is continuously deployed at [https://vue-next-template-explorer.netlify.com/](https://vue-next-template-explorer.netlify.com/). For local development, use the scripts above.