Switch to pnpm (#10576)

.github/workflows/ci.yml

@@ -31,10 +31,11 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          cache: npm
+          cache: pnpm
       - uses: dorny/paths-filter@v2
         id: changes
         with:
@@ -55,29 +56,29 @@ jobs:
               - 'package.json'
               - 'tsconfig.json'
       - name: Install
-        run: npm ci
+        run: pnpm install
       - name: Lint
-        run: npm run lint
+        run: pnpm run lint
       - name: Build
-        run: npm run build
+        run: pnpm run build
       - name: Test
         if: |
           (steps.changes.outputs.src == 'true' ||
           steps.changes.outputs.test == 'true') && 
           runner.os != 'Windows'
         run: |
-          npm run build
+          pnpm run build
           if [ "${{ runner.os }}" == "macOS" ]; then
-            npm run test-ci --browsers chrome,safari
+            pnpm run test-ci --browsers chrome,safari
           else
-            xvfb-run --auto-servernum npm run test-ci
+            xvfb-run --auto-servernum pnpm run test-ci
           fi
         shell: bash
       - name: Package
         if: steps.changes.outputs.docs == 'true'
         run: |
-          npm run docs
-          npm pack
+          pnpm run docs
+          pnpm pack
       - name: Coveralls Parallel - Chrome
         if: |
           steps.changes.outputs.src == 'true' &&

.github/workflows/compressed-size.yml

@@ -17,6 +17,7 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
+    - uses: pnpm/action-setup@v2.2.2
     - uses: preactjs/compressed-size-action@v2
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
@@ -25,6 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
+    - uses: pnpm/action-setup@v2.2.2
     - uses: andresz1/size-limit-action@master
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-docs.yml

@@ -24,17 +24,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.2
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          cache: npm
+          cache: pnpm
       - name: Package & Deploy Docs
         run: |
-          npm ci
-          npm run build
+          pnpm install
+          pnpm run build
           ./scripts/docs-config.sh "master"
-          npm run docs
-          npm pack
+          pnpm run docs
+          pnpm pack
           ./scripts/deploy-docs.sh "master"
         env:
           GITHUB_TOKEN: ${{ secrets.GH_AUTH_TOKEN }}

.github/workflows/release.yml

@@ -24,20 +24,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.2
       - uses: actions/setup-node@v3
         with:
           registry-url: https://registry.npmjs.org/
-          cache: npm
+          cache: pnpm
       - name: Setup and build
         run: |
-          npm ci
-          npm install -g json
+          pnpm install
+          pnpm install -g json
           json -I -f package.json -e "this.version=\"$VERSION\""
           json -I -f package-lock.json -e "this.version=\"$VERSION\""
-          npm run build
+          pnpm run build
           ./scripts/docs-config.sh "$VERSION" release
-          npm run docs
-          npm pack
+          pnpm run docs
+          pnpm pack
         env:
           VERSION: ${{ needs.setup.outputs.version }}
       - name: Publish to NPM
@@ -68,19 +69,20 @@ jobs:
     if: "!github.event.release.prerelease"
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.2
       - uses: actions/setup-node@v3
         with:
           registry-url: https://registry.npmjs.org/
-          cache: npm
+          cache: pnpm
       - name: Setup and build
         run: |
-          npm ci
-          npm install -g json
+          pnpm install
+          pnpm install -g json
           json -I -f package.json -e "this.version=\"$VERSION\""
           json -I -f package-lock.json -e "this.version=\"$VERSION\""
-          npm run build
+          pnpm run build
           ./scripts/docs-config.sh "$VERSION"
-          npm run docs
+          pnpm run docs
         env:
           VERSION: ${{ needs.setup.outputs.version }}
       - name: Deploy Docs

docs/.vuepress/config.ts

@@ -1,6 +1,8 @@
-import { DefaultThemeConfig, defineConfig, PluginTuple } from "vuepress/config";
 import * as path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin';
 import markdownItInclude from 'markdown-it-include';
+import { DefaultThemeConfig, defineConfig, PluginTuple } from 'vuepress/config';
 
 const docsVersion = "VERSION";
 const base: `/${string}/` = process.env.NODE_ENV === "development" ? '/docs/master/' : `/docs/${docsVersion}/`;
@@ -14,6 +16,16 @@ export default defineConfig({
   head: [
     ['link', {rel: 'icon', href: '/favicon.ico'}],
   ],
+  configureWebpack: (config, isServer) => {
+    configureWebpack: (config) => {
+      return {
+        plugins: [
+          new HtmlWebpackPlugin(),
+          new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
+        ],
+      };
+    };
+  },
   plugins: [
     'tabs',
     ['flexsearch'],
@@ -36,7 +48,7 @@ export default defineConfig({
     ['vuepress-plugin-typedoc', {
         entryPoints: ['../../types/index.d.ts'],
         hideInPageTOC: true,
-        tsconfig: 'tsconfig.json',
+        tsconfig: path.resolve(__dirname, '../../tsconfig.json'),
       },
     ],
     ['@simonbrunel/vuepress-plugin-versions', {

docs/developers/contributing.md

@@ -4,7 +4,7 @@ New contributions to the library are welcome, but we ask that you please follow
 
 - Before opening a PR for major additions or changes, please discuss the expected API and/or implementation by [filing an issue](https://github.com/chartjs/Chart.js/issues) or asking about it in the [Chart.js Slack](https://chartjs-slack.herokuapp.com/) #dev channel. This will save you development time by getting feedback upfront and make review faster by giving the maintainers more context and details.
 - Consider whether your changes are useful for all users, or if creating a Chart.js [plugin](plugins.md) would be more appropriate.
-- Check that your code will pass tests and `eslint` code standards. `npm test` will run both the linter and tests for you.
+- Check that your code will pass tests and `eslint` code standards. `pnpm test` will run both the linter and tests for you.
 - Add unit tests and document new functionality (in the `test/` and `docs/` directories respectively).
 - Avoid breaking changes unless there is an upcoming major release, which is infrequent. We encourage people to write plugins for most new advanced features, and care a lot about backwards compatibility.
 - We strongly prefer new methods to be added as private whenever possible. A method can be made private either by making a top-level `function` outside of a class or by prefixing it with `_` and adding `@private` JSDoc if inside a class. Public APIs take considerable time to review and become locked once implemented as we have limited ability to change them without breaking backwards compatibility. Private APIs allow the flexibility to address unforeseen cases.
@@ -15,10 +15,10 @@ Active committers and contributors are invited to introduce yourself and request
 
 ## Building and Testing
 
-Firstly, we need to ensure development dependencies are installed. With node and npm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following:
+Firstly, we need to ensure development dependencies are installed. With node and pnpm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following:
 
 ```bash
-> npm install
+> pnpm install
 ```
 
 This will install the local development dependencies for Chart.js.
@@ -26,21 +26,21 @@ This will install the local development dependencies for Chart.js.
 The following commands are now available from the repository root:
 
 ```bash
-> npm run build             // build dist files in ./dist
-> npm run autobuild         // build and watch for source changes
-> npm run dev               // run tests and watch for source and test changes
-> npm run lint              // perform code linting (ESLint, tsc)
-> npm test                  // perform code linting and run unit tests with coverage
+> pnpm run build             // build dist files in ./dist
+> pnpm run autobuild         // build and watch for source changes
+> pnpm run dev               // run tests and watch for source and test changes
+> pnpm run lint              // perform code linting (ESLint, tsc)
+> pnpm test                  // perform code linting and run unit tests with coverage
 ```
 
-`npm run dev` and `npm test` can be appended with a string that is used to match the spec filenames. For example: `npm run dev plugins` will start karma in watch mode for `test/specs/**/*plugin*.js`.
+`pnpm run dev` and `pnpm test` can be appended with a string that is used to match the spec filenames. For example: `pnpm run dev plugins` will start karma in watch mode for `test/specs/**/*plugin*.js`.
 
 ### Documentation
 
 We use [Vuepress](https://vuepress.vuejs.org/) to manage the docs which are contained as Markdown files in the docs directory. You can run the doc server locally using these commands:
 
 ```bash
-> npm run docs:dev
+> pnpm run docs:dev
 ```
 
 ### Image-Based Tests
@@ -54,7 +54,7 @@ You can create a new image-based test by following the steps below:
 - Create a JS file ([example](https://github.com/chartjs/Chart.js/blob/f7b671006a86201808402c3b6fe2054fe834fd4a/test/fixtures/controller.bubble/radius-scriptable.js)) or JSON file ([example](https://github.com/chartjs/Chart.js/blob/4b421a50bfa17f73ac7aa8db7d077e674dbc148d/test/fixtures/plugin.filler/fill-line-dataset.json)) that defines chart config and generation options.
 - Add this file in `test/fixtures/{spec.name}/{feature-name}.json`.
 - Add a [describe line](https://github.com/chartjs/Chart.js/blob/4b421a50bfa17f73ac7aa8db7d077e674dbc148d/test/specs/plugin.filler.tests.js#L10) to the beginning of `test/specs/{spec.name}.tests.js` if it doesn't exist yet.
-- Run `npm run dev`.
+- Run `pnpm run dev`.
 - Click the *"Debug"* button (top/right): a test should fail with the associated canvas visible.
 - Right click on the chart and *"Save image as..."* `test/fixtures/{spec.name}/{feature-name}.png` making sure not to activate the tooltip or any hover functionality
 - Refresh the browser page (`CTRL+R`): test should now pass

docs/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "docs",
+    "private": "true",
+    "version": "4.0.0-dev",
+    "license": "MIT",
+    "type": "module",
+    "scripts": {
+        "build": "vuepress build --no-cache",
+        "dev": "vuepress dev --no-cache"
+    },
+    "devDependencies": {
+        "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
+        "@vuepress/plugin-google-analytics": "^1.9.7",
+        "@vuepress/plugin-html-redirect": "^0.1.2",
+        "html-webpack-inline-source-plugin": "^0.0.10",
+        "html-webpack-plugin": "^4.5.2",
+        "markdown-it": "^8.4.2",
+        "markdown-it-include": "^2.0.0",
+        "typedoc": "^0.23.10",
+        "typedoc-plugin-markdown": "^3.13.4",
+        "typescript": "^4.7.4",
+        "vue": "^2.6.14",
+        "vue-tabs-component": "^1.5.0",
+        "vuepress": "^1.9.7",
+        "vuepress-plugin-code-copy": "^1.0.6",
+        "vuepress-plugin-flexsearch": "^0.3.0",
+        "vuepress-plugin-redirect": "^1.2.5",
+        "vuepress-plugin-tabs": "^0.3.0",
+        "vuepress-plugin-typedoc": "^0.11.0",
+        "vuepress-theme-chartjs": "^0.2.0",
+        "webpack": "^4.46.0"
+    }
+}

docs/samples/advanced/derived-axis-type.md

@@ -47,7 +47,7 @@ module.exports = {
 
 ## Log2 axis implementation
 
-<<< @/docs/scripts/log2.js
+<<< @/scripts/log2.js
 
 ## Docs
 * [Data structures (`labels`)](../../general/data-structures.html)

docs/samples/advanced/derived-chart-type.md

@@ -43,7 +43,7 @@ module.exports = {
 
 ## DerivedBubble Implementation
 
-<<< @/docs/scripts/derived-bubble.js
+<<< @/scripts/derived-bubble.js
 
 ## Docs
 * [Bubble Chart](../../charts/bubble.html)

docs/samples/utils.md

@@ -8,7 +8,7 @@ Because of this please don't rely on this file in production environments.
 
 ## Functions
 
-<<< @/docs/scripts/utils.js
+<<< @/scripts/utils.js
 
 [File on github](https://github.com/chartjs/Chart.js/blob/master/docs/scripts/utils.js)
 
@@ -16,6 +16,6 @@ Because of this please don't rely on this file in production environments.
 
 Some of the samples make reference to a `components` object. This is an artifact of using a module bundler to build the samples. The creation of that components object is shown below. If chart.js is included as a browser script, these items are accessible via the `Chart` object, i.e `Chart.Tooltip`.
 
-<<< @/docs/scripts/components.js
+<<< @/scripts/components.js
 
 [File on github](https://github.com/chartjs/Chart.js/blob/master/docs/scripts/components.js)

karma.conf.cjs

@@ -32,9 +32,21 @@ module.exports = async function(karma) {
     );
   }
 
+  // workaround a karma bug where it doesn't resolve dependencies correctly in
+  // the same way that Node does
+  // https://github.com/pnpm/pnpm/issues/720#issuecomment-954120387
+  const plugins = Object.keys(require('./package').devDependencies).flatMap(
+    (packageName) => {
+      if (!packageName.startsWith('karma-')) return []
+      return [require(packageName)]
+    }
+  );
+
+  plugins.push(jasmineSeedReporter);
+
   karma.set({
     frameworks: ['jasmine'],
-    plugins: ['karma-*', jasmineSeedReporter],
+    plugins,
     reporters: ['spec', 'kjhtml', 'jasmine-seed'],
     browsers: (args.browsers || 'chrome,firefox').split(','),
     logLevel: karma.LOG_INFO,

package.json

@@ -45,17 +45,17 @@
         "build": "rollup -c && npm run emitDeclarations",
         "dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome --grep",
         "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox --grep",
-        "docs": "npm run build && vuepress build docs --no-cache",
-        "docs:dev": "npm run build && vuepress dev docs --no-cache",
+        "docs": "pnpm run build && pnpm --filter './docs/**' build",
+        "docs:dev": "pnpm run build && pnpm --filter './docs/**' dev",
         "lint-js": "eslint \"src/**/*.{js,ts}\" \"test/**/*.js\" \"docs/**/*.js\"",
         "lint-md": "eslint \"**/*.md\"",
-        "lint-types": "eslint \"types/**/*.ts\" && npm run build && node types/tests/autogen.js && tsc -p types/tests/",
-        "lint": "concurrently \"npm:lint-*\"",
+        "lint-types": "eslint \"types/**/*.ts\" && pnpm run build && node types/tests/autogen.js && tsc -p types/tests/",
+        "lint": "concurrently \"pnpm:lint-*\"",
         "test-size": "size-limit",
-        "test": "npm run lint && npm run test-ci",
-        "test-ci": "concurrently \"npm:test-ci-*\"",
+        "test": "pnpm lint && pnpm test-ci",
+        "test-ci": "concurrently \"pnpm:test-ci-*\"",
         "test-ci-karma": "cross-env NODE_ENV=test karma start ./karma.conf.cjs --auto-watch --single-run --coverage --grep",
-        "test-ci-integration": "mocha --full-trace test/integration/*-test.cjs"
+        "test-ci-integration": "pnpm --filter './test/integration/**' test"
     },
     "devDependencies": {
         "@kurkle/color": "^0.2.1",
@@ -63,15 +63,12 @@
         "@rollup/plugin-inject": "^4.0.4",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
-        "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
         "@size-limit/preset-big-lib": "^8.0.0",
         "@swc/core": "^1.2.224",
         "@types/estree": "^1.0.0",
         "@types/offscreencanvas": "^2019.7.0",
         "@typescript-eslint/eslint-plugin": "^5.32.0",
         "@typescript-eslint/parser": "^5.32.0",
-        "@vuepress/plugin-google-analytics": "^1.9.7",
-        "@vuepress/plugin-html-redirect": "^0.1.4",
         "chartjs-adapter-luxon": "^1.2.0",
         "chartjs-adapter-moment": "^1.0.0",
         "chartjs-test-utils": "^0.4.0",
@@ -98,8 +95,6 @@
         "karma-safari-private-launcher": "^1.0.0",
         "karma-spec-reporter": "0.0.32",
         "luxon": "^3.0.1",
-        "markdown-it-include": "^2.0.0",
-        "mocha": "^10.0.0",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.34",
         "pixelmatch": "^5.3.0",
@@ -109,18 +104,19 @@
         "rollup-plugin-swc3": "^0.3.0",
         "rollup-plugin-terser": "^7.0.2",
         "size-limit": "^8.0.0",
-        "typedoc": "^0.23.10",
-        "typedoc-plugin-markdown": "^3.13.4",
         "typescript": "^4.7.4",
-        "vue-tabs-component": "^1.5.0",
-        "vuepress": "^1.9.7",
-        "vuepress-plugin-code-copy": "^1.0.6",
-        "vuepress-plugin-flexsearch": "^0.3.0",
-        "vuepress-plugin-redirect": "^1.2.5",
-        "vuepress-plugin-tabs": "^0.3.0",
-        "vuepress-plugin-typedoc": "^0.11.0",
-        "vuepress-theme-chartjs": "^0.2.0",
-        "webpack": "^4.46.0",
         "yargs": "^17.5.1"
+    },
+    "engines": {
+        "pnpm": "^7.0.0"
+    },
+    "packageManager": "pnpm@7.9.0",
+    "pnpm": {
+        "overrides": {
+            "html-entities": "1.4.0"
+        },
+        "peerDependencyRules": {
+            "ignoreMissing": ["chart.js"]
+        }
     }
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'docs'
+  - 'test/integration/*'

test/integration/integration-test.cjs

@@ -1,53 +0,0 @@
-'use strict';
-
-const os = require('os');
-const fs = require('fs-extra');
-const path = require('path');
-const childProcess = require('child_process');
-
-const {describe, it} = require('mocha');
-
-const platforms = [
-  'node',
-  'react-browser'
-];
-
-function exec(command, options = {}) {
-  const output = childProcess.execSync(command, {
-    encoding: 'utf-8',
-    ...options,
-  });
-  return output && output.trimEnd();
-}
-
-describe('Integration Tests', () => {
-  const tmpDir = path.join(os.tmpdir(), 'chart.js-tmp');
-  fs.rmSync(tmpDir, {recursive: true, force: true});
-  fs.mkdirSync(tmpDir);
-
-  const distDir = path.resolve('./');
-  const archiveName = exec(`npm --quiet pack ${distDir}`, {cwd: tmpDir});
-  fs.renameSync(
-    path.join(tmpDir, archiveName),
-    path.join(tmpDir, 'package.tgz'),
-  );
-
-  function testProjectOnPlatform(projectName) {
-    const projectPath = path.join(__dirname, projectName);
-
-    const packageJSONPath = path.join(projectPath, 'package.json');
-    const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, 'utf-8'));
-
-    it(packageJSON.description, () => {
-      const cwd = path.join(tmpDir, projectName);
-      fs.copySync(projectPath, cwd);
-
-      exec('npm --quiet install', {cwd, stdio: 'inherit'});
-      exec('npm --quiet test', {cwd, stdio: 'inherit'});
-    }).timeout(5 * 60 * 1000);
-  }
-
-  for (const platform of platforms) {
-    testProjectOnPlatform(platform)
-  }
-});

test/integration/node/package.json

@@ -8,6 +8,6 @@
     "test-cjs": "node test.cjs"
   },
   "dependencies": {
-    "chart.js": "file:../package.tgz"
+    "chart.js": "workspace:*"
   }
 }

test/integration/react-browser/package.json

@@ -2,10 +2,13 @@
   "private": true,
   "description": "chart.js should work in react-browser (Web)",
   "dependencies": {
-    "chart.js": "file:../package.tgz",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-flow": "^7.14.5",
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@types/node": "^18.7.6",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "chart.js": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

test/integration/react-browser/src/App.tsx

@@ -11,6 +11,9 @@ function App() {
       c.destroy();
     }
 
+    merge({a: 1}, {b: 2});
+
+    // eslint-disable-next-line no-new
     new Chart('myChart', {
       type: 'doughnut',
       data: {

test/integration/react-browser/src/AppAuto.tsx

@@ -9,6 +9,9 @@ function AppAuto() {
       c.destroy();
     }
 
+    merge({a: 1}, {b: 2});
+
+    // eslint-disable-next-line no-new
     new Chart('myChart', {
       type: 'doughnut',
       data: {