Allow mixed providers

[geigerzaehler]

I’m currently stuck between a rock and a hard place: I’m depending on @shoelace-style/shoelace, lit and jquery. jquery requires me to use a provider that exposes ES modules but both the esm.sh and jspm providers are broken (for lit and shoelace, respectively). The problem could be addressed if I could use different providers, like

{
  "imports": {
    "@shoelace-style/shoelace": "https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js",
    "jquery": "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
  }
}

But running jspm install on this import map switches the provider for jquery to jsdelivr. Maybe this is related to #256? Happy to contribute to the design and implementation of the feature.

[guybedford]

In the generator it is possible to provide a default providers field by package / scope https://jspm.org/docs/generator/stable/interfaces/GeneratorOptions.html#providers.

We don't expose this configuration option to the main CLI yet though - it would likely need either a .jspmrc (which we also don't support currently) or it would need some kind of flag.

Would something like that solve this do you think?

[geigerzaehler]

In the generator it is possible to provide a default providers field by package / scope

That’s good to know. I might write a small script as a workaround for now.

Regarding the CLI I’m gonna give a bit more context on my usage. I’m using package.json as the source of truth for my dependencies and the version range ¹. I want most of my packages to be delivered by a non-transforming provider (e.g. JSDelivr) and some from an ES Module host (e.g. jspm.io) ².

There are two scenarios where I update importmap.json.

1. I add an new dependency and to both package.json and importmap.json and in the latter I also choose which provider to use.
2. I (or a bot) have updated package.json and I sync the changes to importmap.json, keeping the selected provider for the package.

I would like to use jspm install for both but I currently can’t since it will change all the providers to the most frequent one.

I think the most convenient way to use jspm install would be

1. jspm install jquery -p jsdelivr adds jquery with the jsdelivr provider and does not change any other providers.
2. jspm install will sync the version of all packages in the import map but leave the provider unchanged.

Of course, jspm already has the --provider option but it sets the provider for all packages even if I only install a specific one. I found this confusing.

A configuration file in the repository would work, but it would be less convenient if I have to manually edit it. I guess adding a new dependency would involve setting the provider in the configuration and then running jspm install <package>.

I don’t think a CLI option would work for 2. If I understand it correctly, I would need to select the provider for each package like jspm install -p jquery:jspm.io -p lodash:jsdelivr ...?

Footnotes

1. I’m actually pinning specific versions like jquery: "=3.7.1" and let Renovate update package.json, but I don’t think that’s important. ↩

2. The reason for using both types of providers is that sometimes ESM is useful, e.g. to import jquery, and sometimes it breaks things when not all all files, especially styles, are available or the build has failed. ↩

[guybedford]

Yes, JSPM does not currently store provider information at the granularity level of per-package.

Adding this would be a new generator feature that would need to be worked out in detail further.

I think it sounds like a worthwhile effort though, transferring to the generator repo as a feature.