Discussion issue for community tooling, polyfills, etc.

[domenic]

I want to consolidate #60 and #108 into a single issue that is more explicitly for discussion, and has a title that is general and not focused on specific ecosystems or files.

Also, I'll be putting up a pull request shortly that creates a section in the README for links to things people have created in this space.

So yeah, let's discuss all the cool things people are creating in this space!

[LarsDenBakker]

Hi there! At https://open-wc.org/ we aim to help people with building web components, and in general modern web development with fewer build steps.

We think import maps have great potential in helping with that, especially to use es modules during development without requiring any code transformations.

That's why we're working on tools across the front-end stack for import map support. We want to explore different workflows and see how it can help developers. It's still early stages, but this is what we have so far:

• import-maps-generate generate import maps from lockfiles.
  supports flattening the import map since that's a huge pain in front-end development right now

• import-maps-resolve resolve import map
  this is mostly a utility to use from a bundler

• es-dev-server dev server to use import maps during development
  on browsers which don't support import maps, it takes a valid index.html with <script type="importmap"> and uses es-module-shims or system-js (on IE11) to polyfill/shim import maps

• rollup-plugin-index-html rollup plugin which takes an index.html as input
  if it finds an importmap it will use that to resolve module ids against

We're also planning on releasing a standalone rollup plugin for resolving modules based on a provided import map, and we're looking to have a setup for testing as well.

We're hoping that we can get people to use and experiment with these tools, so that there is more valuable input for progressing the standard.

[dmail]

@LarsDenBakker, amazing will take a look at what you did shortly :)

@domenic, thank you for the mention in the readme and this issue.
You might also be interested by an other module to resolve import accepting an optionnal importMap.
The most representative part would be unit tests, so I give you the link to one of them: https://github.com/jsenv/jsenv-module-resolution/blob/a35588dee7bffb4afa00610db6dc2b75ec76377d/test/remap-basic.test.js

Please keep in mind modules I have written around importMap are not up to date with latest spec and may have been biased by my understanding of specs at that time.
Still, they use importMap to solve actual issues and use scopes extensively.

[joeldenning]

Guy Bedford and I are currently creating a package called tracemap that will create import maps from package.json dependencies, recursing through your node_modules. First release will be soon.

Additionally, for those using jspm@2, you can use jspm map to generate import maps.

[chase-moskal]

i made an import map generator that works today

• importly generates import maps from package.json dependencies
  usage: importly < package.json > importmap.json
  can be configured to point at unpkg, jsdelivr, or your local node_modules

intended to be used with guy bedford's amazing import maps polyfill: es-module-shims

[thepassle]

@pika/web now also outputs an import map in the generated web-modules/ folder: https://github.com/pikapkg/web/releases/tag/v0.5.0

Also, I guess this is not tooling (but still community related?), but I wrote a blog that has a section on import maps as well: https://dev.to/open-wc/on-the-bleeding-edge-3cb8

[joeldenning]

I maintain a project called import-map-overrides, which allows developers to dynamically inject an import map that overrides the default URLs for modules, as a local development flow:

https://github.com/joeldenning/import-map-overrides

[joeldenning]

I also maintain a project called import-map-deployer, which is a server that is called from CIs to update external import maps. I've used it for production deployments for four years now (even before import maps existed, we had a similar thing called sofe!)

https://github.com/CanopyTax/import-map-deployer

[dmail]

One more package related to importmap:

@jsenv/importmap-eslint-resolver: an import resolver working with eslint-plugin-import to apply importmap when resolving your import.

How it works: You configure where your importmap file in JSON format is and this resolver takes it into account when eslint resolves your import.

[LarsDenBakker]

@domenic we're still really excited about import maps, but holding off on promoting our tools until there is a bit more perspective on import maps getting shipped (unflagged) in browsers. Is this topic still under discussion somewhere?

[domenic]

You can watch https://bugs.chromium.org/p/chromium/issues/detail?id=848607 to see Chrome's progress on implementation.

[LarsDenBakker]

You can watch https://bugs.chromium.org/p/chromium/issues/detail?id=848607 to see Chrome's progress on implementation.

Thanks!

[joeldenning]

I think this might be the best place for checking in on FF - mozilla/standards-positions#146

[zleight1]

I wrote a webpack plugin to help generate import-maps from the result manifest, I originally forked from webpack-manifest-plugin. It's proven useful so far, as it let's us easily build patch files for import-map-deployer, etc.

One of the big challenges is we wanted to publish files to a CDN and use hashed filenames, so this tool let's you build the import-map or an import-map delta easily no matter how you have file hashing set up, in fact we use a placeholder to allow us to rewrite the value path prefixes on the fly depending on the environment (qa cdn vs. prod etc.).

Hopefully it can help others!

https://github.com/zleight1/webpack-import-map-plugin

[domenic]

Hi folks,

I've attempted to incorporate the latest updates people have mentioned here in #231. I've also tried to remove packages that are marked as deprecated, including some that @LarsDenBakker mentioned, and removed mention of Pika, which @thepassle mentioned, as their current website doesn't seem to discuss import maps. Any thoughts or review would be appreciated!

[fuweichin]

I created rollup-plugin-import-maps, it is more like a polyfill but is used at build-time rather than at runtime.

[chase-moskal]

importly now generates an import map from package-lock.json (with proper sub-dependency scoping), and you can set the importmap to point at /node_modules or a cloud provider like unpkg or jsdelivr

npx importly < package-lock.json > importmap.json

[user3232]

Hi folks,

I've created CLI/API for building importmap from runtime node directories and a scheme for naming runtime packages. Idea is as follows: traverse filesystem for packages as node does for files, this builds something like package-lock.json, then instead of naming package as directory name, lib uses package package.json name and version and all dependencies in recursive way, creating this way universal name (package name + version, dependencies names + versions), something like rust cargo lock's, also by the way resolve packages imports/exports with provided environment scopes (import, browser, ..) , computes possibly importable files integrities. CLI produces importmap with directories names, another importmap with global names and spec file with information how global names maps to package specifiers (github:user3232/pipable@1.0.2, npm:react@18.3.1, ..). Spec files may be used to fetch packages and serve them anywhere, if two importmaps uses same global name that only means they use exacly same runtime package (and context), so multiple global importmaps (or apps) may safely use same static files server. Additionally if files server files was for example tempered, app importmap will have different integrity, so its safe. Sorry that I've gave such lengthy description here but I wish to here also your thoughts. Lib is not polished but works. Check it here: https://github.com/user3232/importmap .