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,7 +59,9 @@ 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`).
 
@@ -65,10 +69,10 @@ 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
+$ nr test
-
-# run tests in watch mode
-$ yarn test --watch
 
 # 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,27 +11,43 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.15.1
+
       - name: Set node version to 16
         uses: actions/setup-node@v2
         with:
           node-version: 16
-          cache: 'yarn'
+          cache: 'pnpm'
-      - run: yarn install --frozen-lockfile
+
+      - 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/action-setup@v2.0.1
+        with:
+          version: 6.15.1
+
       - name: Set node version to 16
         uses: actions/setup-node@v2
         with:
           node-version: 16
-          cache: 'yarn'
+          cache: 'pnpm'
-      - run: yarn install --frozen-lockfile
+
+      - run: pnpm install
+
       - name: Run type declaration tests
-        run: yarn test-dts
+        run: pnpm run test-dts
 
   size:
     runs-on: ubuntu-latest
@@ -39,15 +55,24 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - uses: actions/checkout@v1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.15.1
+
       - name: Set node version to 16
         uses: actions/setup-node@v2
         with:
           node-version: 16
-          cache: 'yarn'
+          cache: 'pnpm'
-      - run: yarn install --frozen-lockfile
+
-      - name: Check build size
+      - run: pnpm install
-        uses: posva/size-check-action@v1.1.2
+      - run: pnpm run size
-        with:
+
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+      # - name: Check build size
-          build_script: size
+      #   uses: posva/size-check-action@v1.1.2
-          files: packages/vue/dist/vue.global.prod.js packages/runtime-dom/dist/runtime-dom.global.prod.js packages/size-check/dist/index.js
+      #   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",
+    "@vitejs/plugin-vue": "^1.9.3"
-    "vite": "^2.5.10"
   },
   "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`
+- `npm run dev-compiler` in repo root
-- When the compilation is done, in another terminal run `yarn open`
+- 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.

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

scripts/build.js

@@ -7,10 +7,10 @@ or "esm,cjs"):
 
 ```
 # name supports fuzzy match. will build all packages with name containing "dom":
-yarn build dom
+nr build dom
 
 # specify the format to output
-yarn build core --formats cjs
+nr build core --formats cjs
 ```
 */
 

scripts/checkYarn.js

@@ -1,6 +0,0 @@
-if (!/yarn\.js$/.test(process.env.npm_execpath || '')) {
-  console.warn(
-    '\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n'
-  )
-  process.exit(1)
-}

scripts/dev.js

@@ -6,13 +6,13 @@ formats to watch (defaults to "global"):
 
 ```
 # name supports fuzzy match. will watch all packages with name containing "dom"
-yarn dev dom
+nr dev dom
 
 # specify the format to output
-yarn dev core --formats cjs
+nr dev core --formats cjs
 
 # Can also drop all __DEV__ blocks with:
-__DEV__=false yarn dev
+__DEV__=false nr dev
 ```
 */
 

scripts/preinstall.js

@@ -0,0 +1,7 @@
+if (!/pnpm/.test(process.env.npm_execpath || '')) {
+  console.warn(
+    `\u001b[33mThis repository requires using pnpm as the package manager ` +
+      ` for scripts to work properly.\u001b[39m\n`
+  )
+  process.exit(1)
+}

scripts/release.js

@@ -80,7 +80,7 @@ async function main() {
   step('\nRunning tests...')
   if (!skipTests && !isDryRun) {
     await run(bin('jest'), ['--clearCache'])
-    await run('yarn', ['test', '--bail'])
+    await run('npm', ['test', '--', '--bail'])
   } else {
     console.log(`(skipped)`)
   }
@@ -92,16 +92,16 @@ async function main() {
   // build all packages with types
   step('\nBuilding all packages...')
   if (!skipBuild && !isDryRun) {
-    await run('yarn', ['build', '--release'])
+    await run('npm', ['run', 'build', '--', '--release'])
     // test generated dts files
     step('\nVerifying type declarations...')
-    await run('yarn', ['test-dts-only'])
+    await run('npm', ['run', 'test-dts-only'])
   } else {
     console.log(`(skipped)`)
   }
 
   // generate changelog
-  await run(`yarn`, ['changelog'])
+  await run(`npm`, ['run', 'changelog'])
 
   const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })
   if (stdout) {
@@ -205,6 +205,8 @@ async function publishPackage(pkgName, version, runIfNotDry) {
   step(`Publishing ${pkgName}...`)
   try {
     await runIfNotDry(
+      // note: use of yarn is intentional here as we rely on its publishing
+      // behavior.
       'yarn',
       [
         'publish',

test-dts/tsconfig.build.json

@@ -1,22 +1,11 @@
 {
-  "extends": "./tsconfig.json",
   "compilerOptions": {
-    "noEmit": false,
+    "noEmit": true,
-    "paths": {
+    "jsx": "preserve",
-      "@vue/*": ["../packages/*/dist"],
+    "module": "esnext",
-      "vue": ["../packages/vue/dist"]
+    "strict": true,
-    }
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"]
   },
-  "exclude": [
+  "include": ["./*"]
-    "../packages/*/__tests__",
-    "../packages/*/src",
-    "../packages/template-explorer"
-  ],
-  "include": [
-    "../packages/global.d.ts",
-    "../packages/*/dist",
-    "../packages/runtime-dom/types/jsx.d.ts",
-    "../packages/*/__tests__",
-    "../test-dts"
-  ]
 }