Problem/Motivation

I just attended the following presentation at MidCamp, and the speaker presented a way to use NPM (from the project root) to download assets rather than use asset-packagist.

https://www.midcamp.org/2025/topic-proposal/modern-strategies-dependency...

This approach could be added without disrupting any of the existing ways that sites currently download their charting libraries.

Proposed resolution

Add a package.json to each of the submodules and document how to use NPM for downloading the assets and adding them to the appropriate library directory.

Issue fork charts-3525615

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

andileco created an issue. See original summary.

tommasorandazzo’s picture

Assigned: andileco » tommasorandazzo
Issue tags: +MidCamp 2025

Taking a look at MidCamp 2025

tommasorandazzo’s picture

Assigned: tommasorandazzo » Unassigned
Status: Active » Needs review

I updated the MR with a first pass at the Highcharts libraries. Let's refine Highcharts and then we can duplicate the effort for the other library options!

tommasorandazzo’s picture

andileco mentioned that the install hooks are checking for these in the `/libraries` dir in the webroot. Instead of `[submodule/dist/js` we will want to match those paths to the `/libraries` dir.

andileco’s picture

Status: Needs review » Needs work

Thank you for getting this started, @tommasorandazzo! The video of the presentation is up: https://youtu.be/irKVKHPSWZ4?si=OrASg2ELCrJ3SLPv&t=2014

andileco’s picture

Status: Needs work » Needs review

Thank you for your work on this, @tommasorandazzo! Would you be willing to take a look at the branch I created? This allows one to have a package.json at the root like:

{
"name": "foo",
"private": true,
"scripts": {
"postinstall": "npm run libraries:copy --workspaces --if-present"
},
"workspaces": [
"web/modules/**/*"
]
}

and when you run `npm install`, it puts the libraries into their proper folders (if you only wanted certain charts submodules, you could adjust the workspaces).

You are clearly more adept at using npm than me, so please let me know if your thoughts on this approach.

erutan’s picture

Having trouble pushing, in the base readme.md I'd make the following changes to lines 1 & 2 to make them actionable vs vague "ensure":

1. Run `composer require wikimedia/composer-merge-plugin` to ensure that you have
the `wikimedia/composer-merge-plugin` package installed.
2. Run `composer require oomphinc/composer-installers-extender` to ensure that you
have the `oomphinc/composer-installers-extender` package installed.

Should these be pinned to a major version or something?

Also the following should refer to creating/modifying package.json, not running `composer require`

7. Run the `composer require` specified in the submodule’s README.md file

erutan’s picture

Status: Needs review » Needs work

So this runs, and is really cool. Once things settle down I think it'd be really neat to have some kind of post-install script in composer that just runs `npm install` after a `composer upgrade` run. :)

There's a LOT of deprecated packages in here that should be modernized (redundant console output removed). I had a package-lock.json but it basically just had the project name in it. Along with updating the readme.md I'd put it as needs work, but this runs as is (I'll keep the changes in my composer.json heh).

npm install
npm warn deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @stylelint/postcss-markdown@0.36.2: Use the original unforked package instead: postcss-markdown
npm warn deprecated @stylelint/postcss-css-in-js@0.37.3: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @ckeditor/ckeditor5-dev-webpack-plugin@30.5.0: This package is no longer maintained. Please, read the migration path: https://github.com/ckeditor/ckeditor5-dev/releases/tag/v32.0.0.
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
erutan’s picture

Ran a standard composer upgrade on top of it out of curiousity and it pulled highcharts/solid-gauge. Looking at the package.json in charts_highcharts it's missing that package.

andileco’s picture

@erutan, good catch about solid-gauge.

I'm realizing that it may make sense to update the readme to be more specific to charts. The "workspaces" that you used travelled through *all* the modules in your site, and some of them must be using outdated npm versions. Instead, we should put, "web/modules/contrib/charts/**/*" for "workspaces".

That said, I did identify that some D3 packages need updating. I don't know if these are recent updates. But anyway, those will need to be updated before this is ready to go live.

andileco’s picture

Status: Needs work » Needs review
andileco’s picture

Status: Needs review » Needs work

- Fix eslint
- Update C3 libraries.yml
- Update Highcharts in package.json

erutan’s picture

Yeah I just ran `npm install` at the base level of the site - interesting side effect there. If things are properly scoped it'd be nice to just be able to update all the modules in a project with it at once, I have to imagine it's capable of running different tasks with their own dependencies.

I've bumped into (and noticed others having) this issue of not being able to update someone else's issue branch, sorry for not being able to just fix some of the little things. :)

andileco’s picture

Status: Needs work » Needs review
erutan’s picture

I might just be doing something wrong here, but I think the workspace limitation might have borked the install?

Copied this fork over, deleted my package-lock.json, and removed the highcharts libraries from web/libraries.

Running npm install from both root and from the contrib folder just outputs the following and no highcharts libraries are downloaded.

npm install

> postinstall
> npm run libraries:copy --workspaces --if-present


up to date, audited 1042 packages in 2s
[...]
andileco’s picture

StatusFileSize
new10.56 MB

@erutan - I've attached a screenshare. Please take a look and let me know what you are doing differently.

erutan’s picture

Status: Needs review » Reviewed & tested by the community

Looked things over, and the most likely explanation was that I goofed on copying over the right charts folder. Did it again and it worked. Assuming the rest of the libraries work as you've gone over them I'll mark it as RBTC. Once it's in dev I can pull an issue fork and make a stab at updating documentation at some point.

The old root package.json had:

    "workspaces": [
        "web/modules/**/*"
    ]

I have a very basic functional understanding of NPM but never have had the need to dig deep into it. On a more meta level going forward in order to keep dependencies clean one would just keep adding new workspaces to package.json per project that uses this approach?

    "workspaces": [
        "web/modules/contrib/charts/**/*",
        "web/modules/contrib/FOO/**/*",
        "web/modules/contrib/BAR/**/*"
    ]
andileco’s picture

@erutan, yes, exactly, that's how they can opt-in other projects where they need a JS library to be installed.

andileco’s picture

Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.