{"id":23763876,"url":"https://github.com/tomashubelbauer/esm-import-map","last_synced_at":"2026-01-27T17:32:07.587Z","repository":{"id":107986097,"uuid":"543777605","full_name":"TomasHubelbauer/esm-import-map","owner":"TomasHubelbauer","description":"An experiment with ES import maps.","archived":false,"fork":false,"pushed_at":"2022-09-30T21:42:55.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-01T16:42:22.258Z","etag":null,"topics":["es","es-modules","esm","import-maps"],"latest_commit_sha":null,"homepage":"https://TomasHubelbauer.github.io/esm-import-map","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TomasHubelbauer.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-09-30T20:25:32.000Z","updated_at":"2022-09-30T21:12:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"6f7f26a4-8dcc-4df9-ab35-f1eb94c76047","html_url":"https://github.com/TomasHubelbauer/esm-import-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TomasHubelbauer/esm-import-map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fesm-import-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fesm-import-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fesm-import-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fesm-import-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomasHubelbauer","download_url":"https://codeload.github.com/TomasHubelbauer/esm-import-map/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fesm-import-map/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28816923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T12:25:15.069Z","status":"ssl_error","status_checked_at":"2026-01-27T12:25:05.297Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es","es-modules","esm","import-maps"],"created_at":"2024-12-31T22:13:44.886Z","updated_at":"2026-01-27T17:32:07.582Z","avatar_url":"https://github.com/TomasHubelbauer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ESM Import Map\n\nIn this repository I am playing around with ES Import Maps.\n\nSee the [GitHub Pages site](https://tomashubelbauer.github.io/esm-import-map).\n\nComing in, I had a few ideas in my head for how to (ab)use import maps:\n\n- Self-test: run the entry-point script of the application, but map all scripts\n  to their test/mock/stub/fake versions and let the application run all of its\n  tests.\n  Only then run it in normal mode.\n  If the tests were fast enough or only some were cherry-picked, this would be a\n  great feature for discovering potential breakage pro-actively.\n- Backend toggle: add a UI toggle to dev builds that allows switching to what\n  endpoints the ES module scripts resolve.\n  Could be used for flipping between the TEST and STAG environments.\n  Or even PROD and have a secret option for switching the PROD deployment to\n  STAG in some hidden/auth-gated UI to be able to diagnose issues on the fly.\n- \"Test mode\": this is similar to self-test, but instead of front-loading the\n  tests, it would be possible to run them on-demand, maybe in response to user\n  idle and then send any issues to analytics.\n- Build-step free testing: again, very similar to the already stated ideas, but\n  the trick here is that to run tests, only a cookie would be dropped or some\n  other type of flag and the page would reload to the test runner mode of the\n  app showing tests as they execute and then their results.\n\n## Results\n\nI found that dynamically inserting import maps on the fly is not possible! Even\nusing multiple import maps on one page doesn't work!\n\nBut… it is possible to insert an import map at runtime if done synchronously and\nbefore any ES module script loads! That means using a normal type `script` to\nmake and insert that import map and then `script[type=\"module\"]` which when\nresolving module specifiers already has the import map available.\n\nThis means that any sort of interactive scenario is impossible. To switch import\nmaps, a page reload is always needed to be able to rerun the synchronous script\nand have the ES module runtime restart.\n\nHow does this bode for the ideas coming in?\n\n- Self-test is possible, but would have to work by running the tests, dropping a\n  flag and then refreshing the page to the normal mode. Infeasible for user\n  facing sites. Can't have double load.\n- Backend switch: totally feasible, drop a cookie, refresh, check what backend\n  the cookie says to point to, generate a corresponding map, use it. Easy!\n- \"Test mode\": also feasible! Use `location.hash` and refresh or drop a cookie\n  or similar and on load, check for this flag and run tests with the test import\n  map, then refresh back to normal mode.\n- Build-step free testing: possible but only though something like the above\n  mentioned \"Test mode\", not so much as the self-test idea. Shame!\n\nOverall, less impressive than I was hoping, but still usable for my crazy\nexperiments!\n\n## Notes\n\n### `file:`-based import map\n\nUsing a file-based import map is problematic when running off the `file:` scheme\neven with CORS disabled for that protocol, because the import map referenced by\nthe `src` attribute must have the `application/importmap+json` MIME type, which\nis not going to happen unless using a static file server which understands MIME\nof import maps.\n\nI am working around this by using an inline import map.\n\n## Multiple import maps\n\nNeither Firefox nor Chrome support merging multiple import maps at the time of\nwriting.\n\nFirefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1688879 (?)\n\nChrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=927119\n\n## Scope patterns\n\nThe import maps spec also includes this idea of scopes which at the current\ncould be useful to make all files in `test/` import test versions of the main\napplication's references.\n\nHowever I like my tests at `*.test.js` so scopes as they exist today won't help\nthere.\nSomeone already asked about patterns in `scopes` (and `imports`) here:\n\nhttps://github.com/WICG/import-maps/issues/7\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomashubelbauer%2Fesm-import-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomashubelbauer%2Fesm-import-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomashubelbauer%2Fesm-import-map/lists"}