workflow: move to pnpm (#4766)

4 years ago · 61c5fbd3e3
19 changed files with 7097 additions and 6844 deletions
--- a/.github/contributing.md
+++ b/.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
-
-# 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

--- a/.github/workflows/ci.yml
+++ b/.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'
-      - 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/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'
-      - 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
@ -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'
-      - run: yarn install --frozen-lockfile
-      - name: Check build size
-        uses: posva/size-check-action@v1.1.2
-        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/size-check-action@v1.1.2
+      #   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
--- a/netlify.toml
+++ b/netlify.toml
@ -0,0 +1,3 @@
+[build.environment]
+  NODE_VERSION = "16"
+  NPM_FLAGS = "--version" # prevent Netlify npm install
--- a/package.json
+++ b/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"
  }
 }
--- a/packages/sfc-playground/package.json
+++ b/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"
--- a/packages/sfc-playground/vite.config.ts
+++ b/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({
--- a/packages/size-check/package.json
+++ b/packages/size-check/package.json
@ -6,6 +6,6 @@
    "build": "vite build"
  },
  "devDependencies": {
-    "vite": "^2.5.10"
+    "vite": "^2.6.0"
  }
 }
--- a/packages/size-check/src/index.ts
+++ b/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({
--- a/packages/size-check/vite.config.js
+++ b/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'],
--- a/packages/template-explorer/README.md
+++ b/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.
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'
--- a/scripts/build.js
+++ b/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
 ```
 */

--- a/scripts/checkYarn.js
+++ b/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)
-}
--- a/scripts/dev.js
+++ b/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
 ```
 */

--- a/scripts/preinstall.js
+++ b/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)
+}
--- a/scripts/release.js
+++ b/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',
--- a/test-dts/tsconfig.build.json
+++ b/test-dts/tsconfig.build.json
@ -1,22 +1,11 @@
 {
-  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "noEmit": false,
-    "paths": {
-      "@vue/*": ["../packages/*/dist"],
-      "vue": ["../packages/vue/dist"]
-    }
+    "noEmit": true,
+    "jsx": "preserve",
+    "module": "esnext",
+    "strict": true,
+    "moduleResolution": "node",
+    "lib": ["esnext", "dom"]
  },
-  "exclude": [
-    "../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"
-  ]
+  "include": ["./*"]
 }
--- a/yarn.lock
+++ b/yarn.lock