Support trailing-slash mappings

[mattrossman]

I'm using Three.js in my project. The library provides an "addons" directory for extended functionality. It's recommended to use a trailing-slash mapping for these addons.

From the Three.js installation manual:

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@<version>/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
    }
  }
</script>

I can't find a way to set this up on https://generator.jspm.io/ so I can't copy/paste the result in my project. Instead I have to manually re-add the three/addons/ entry each time I update the import map.

Related: jspm/generator#250

[guybedford]

@mattrossman we do actually support trailing slash mappings, just not as you might think.

The reasoning is that we do actually need to trace all import paths that are expected to be loaded because there may be an unknown dependency that is being imported - so we need to ensure everything is being mapped.

In theory we could support what you're asking for by tracing every single example file using a glob and including the full mappings for everything there.

But it's better to build a smaller map of only what you actually expect to import, but explicitly linking the list of examples you expect to load.

[mattrossman]

we do actually support trailing slash mappings, just not as you might think.

Is this referring to the "Add Package Exports" button? I thought by definition a trailing slash mapping needs to end in a / character. I can only see how to add imports for individual .js files.

This is frustrating for three because it has >1000 exported files, and right now the only way I can see to pick among these is by manually scrolling to the one I want. Some kind of search box would help with the UX for this. Perhaps that's a separate issue.

Thanks for the explanation about dependency tracking. Would it be possible to figure out what dependencies might be needed from the package.json of the package you're requesting? I don't fully understand the part about needing to check all possible file exports to look for unknown dependencies. E.g. Three.js has no dependencies listed in package.json so it seems reasonable to assume that no additional mappings are needed for the "addons" directory.

[guybedford]

@mattrossman the output import map will automatically use a trailing slash when necessary - that is if there is a map like:

{
  "imports": {
    "a/b.js": "https://ga.jspm.io/a@v/path/b.js",
    "a/c.js": "https://ga.jspm.io/a@v/path/c.js"
  }
}

it will automatically only output:

{
  "imports": {
    "a/": "https://ga.jspm.io/a@v/path/"
  }
}

But you can't "add" an arbitrary mapping into the import map as the model of import map generation is based on analyzing what you are including. If modules are missed, dependencies are missed. And if we just blindly added all "dependencies" maps would get very large indeed.

There is a "subpath deoptimization" feature to track this though (jspm/generator#50), which I think is what you're talking about.

[mattrossman]

@guybedford Following that example, if I have this map:

{
  "imports": {
    "three/addons/animation/AnimationClipCreator.js": "https://ga.jspm.io/npm:three@0.150.1/examples/jsm/animation/AnimationClipCreator.js",
    "three/addons/controls/ArcballControls.js": "https://ga.jspm.io/npm:three@0.150.1/examples/jsm/controls/ArcballControls.js"
  }
}

then I expect to see this output with a trailing slash:

{
  "imports": {
    "three/addons/": "https://ga.jspm.io/npm:three@0.150.1/examples/jsm/"
  }
}

What I actually see is this, with separate entries preserved instead of collapsed into a trailing slash mapping:

[guybedford]

@mattrossman ah, the reason for this is we only do that in scoped dependencies, and not the top-level imports. The reason being that the top-level imports list is important for retaining the top-level listing. If you run a local linkage workflow you can get JSPM to scope the dependencies and then it should do the trailing slash reduction for you. See eg https://jspm.org/getting-started#linking-from-importmapjson.