Adding library charts.js to composer.json [closed]

Question

I've installed module Moderation Dashboard, now I would like to install charts.js, which is needed by the module, locally by using composer. The readme of the module says:

Add following code inside repositories section in your project's composer.json:

"chart.js": { "type": "package", "package": { "name": "nnnick/chartjs", "version": "v3.9.1", "type": "drupal-library", "dist": { "url": "https://github.com/chartjs/Chart.js/releases/download/v3.9.1/chart.js-3.9.1.tgz", "type": "tar" } } }

Unfortunately, I don't know exactly how to add the code in my existing composer.json. The start looks like this:

{
    "name": "drupal/recommended-project",
    "description": "Project template for Drupal 9 projects with a relocated document root",
    "type": "project",
    "license": "GPL-2.0-or-later",
    "homepage": "https://www.drupal.org/project/drupal",
    "support": {
        "docs": "https://www.drupal.org/docs/user_guide/en/index.html",
        "chat": "https://www.drupal.org/node/314178"
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        }
    ],
    "require": {
        "composer/installers": "^1.9",
        "drupal/admin_toolbar": "^3.1",
        …

Could someone show me, where to put the snippet exactly?

Answer 1

Your composer.json contains a repository section where the chart.js related definition has to be added like this:

...
"repositories": [
  {
    "type": "composer",
    "url": "https://packages.drupal.org/8"
  },
  {
    "type": "package",
    "package": {
      "name": "nnnick/chartjs",
      "version": "v3.9.1",
      "type": "drupal-library",
      "dist": {
        "url": "https://github.com/chartjs/Chart.js/releases/download/v3.9.1/chart.js-3.9.1.tgz",
        "type": "tar"
      }
    }
  },
],
...

An alternative suggested by leymannx is this, which allows to simply do composer require npm-asset/FOOBAR for any JS library that has an NPM release:

...
"repositories": [
  ...
  {
    "type": "composer",
    "url": "https://asset-packagist.org",
  },
  ...
],
...
"scripts": {
  ...
  "extras": {
    ...
    "installer-types": ["bower-asset", "npm-asset"],
    "installer-paths": {
      ...
      "web/libraries/{$name}": [
        "type:drupal-library",
        "type:bower-asset",
        "type:npm-asset"
      ],
      ...
    }
    ...
  }
  ...
}
...