Discussion issue for community tooling, polyfills, etc.

domenic commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

LarsDenBakker commented 4 years ago

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

Thanks!

joeldenning commented 4 years ago

I think this might be the best place for checking in on FF - https://github.com/mozilla/standards-positions/issues/146

zleight1 commented 4 years ago

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 commented 3 years ago

Hi folks,

I've attempted to incorporate the latest updates people have mentioned here in https://github.com/WICG/import-maps/pull/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 commented 2 years ago

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

chase-moskal commented 2 years ago

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

WICG / import-maps

Discussion issue for community tooling, polyfills, etc. #146