{"id":19494287,"url":"https://github.com/dnsos/importmaps-exploration","last_synced_at":"2026-02-28T23:03:46.534Z","repository":{"id":114310417,"uuid":"606440379","full_name":"dnsos/importmaps-exploration","owner":"dnsos","description":"Exploration of using importmaps as an alternative to using JavaScript bundlers and build steps","archived":false,"fork":false,"pushed_at":"2023-02-25T14:01:12.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T20:31:22.563Z","etag":null,"topics":["importmap","importmaps"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dnsos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-02-25T13:59:06.000Z","updated_at":"2023-02-25T14:01:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"bc28133d-5f99-4d66-9dfb-4bd07fb1ee9d","html_url":"https://github.com/dnsos/importmaps-exploration","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"2f742459bf3a6607f22dbfebd232bf03d3af5b4f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dnsos/importmaps-exploration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnsos%2Fimportmaps-exploration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnsos%2Fimportmaps-exploration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnsos%2Fimportmaps-exploration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnsos%2Fimportmaps-exploration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dnsos","download_url":"https://codeload.github.com/dnsos/importmaps-exploration/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dnsos%2Fimportmaps-exploration/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29954583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["importmap","importmaps"],"created_at":"2024-11-10T21:29:08.852Z","updated_at":"2026-02-28T23:03:46.512Z","avatar_url":"https://github.com/dnsos.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `importmap`s exploration\n\nThis repository is a little exploration of using [`importmap`s](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) as an alternative to using JavaScript bundlers and build steps. It is loosely following this [introduction blog post](https://www.honeybadger.io/blog/import-maps/) to `importmap`s.\n\n## Setup\n\nThere are two simple HTML files here: `index.html` and `about.html`. Their contents are both hardcoded to avoid unnecessary distraction from the main topic of this exploration.\n\n\u003e Note that both files have largely the same content because this exploration is done by importmapping [Turbo](https://turbo.hotwired.dev/) which is a library for intercepting HTTP requests and only updating the HTML content without a full page reload, essentially enabling a Single Page application feel for HTML.\n\nThe interesting pieces are the script tags:\n\n```html\n\u003cscript type=\"importmap\"\u003e\n  {\n    \"imports\": {\n      \"@hotwired/turbo\": \"https://cdn.skypack.dev/@hotwired/turbo\"\n    }\n  }\n\u003c/script\u003e\n```\n\n```html\n\u003cscript type=\"module\"\u003e\n  import * as Turbo from \"@hotwired/turbo\";\n\u003c/script\u003e\n```\n\nIt is important that they appear in the HTML in that order ensuring that the `type=\"module\"` knows how to resolve the package.\n\n---\n\nWe can verify that the `importmap` is working by starting a server, e.g. via `npx http-server` and typing `Turbo` into the browser console. If no errors show up, the `importmap` is properly resolving.\n\n## Pinning packages\n\nIf we want to explicitly pin which version we resolve, we can do so by pinning it like so:\n\n```html\n\u003cscript type=\"importmap\"\u003e\n  {\n    \"imports\": {\n      \"@hotwired/turbo\": \"https://cdn.skypack.dev/pin/@hotwired/turbo@v7.2.5-jwYMmpCb8mVWq1WRn6YH/mode=imports,min/optimized/@hotwired/turbo.js\"\n    }\n  }\n\u003c/script\u003e\n```\n\nIt seems that the only way to find out the URL for pinning on Skypack is via visiting https://cdn.skypack.dev/@hotwired/turbo where something like this should show up:\n\n```js\n/*\n * Skypack CDN - @hotwired/turbo@7.2.5\n *\n * Learn more:\n *   📙 Package Documentation: https://www.skypack.dev/view/@hotwired/turbo\n *   📘 Skypack Documentation: https://www.skypack.dev/docs\n *\n * Pinned URL: (Optimized for Production)\n *   ▶️ Normal: https://cdn.skypack.dev/pin/@hotwired/turbo@v7.2.5-jwYMmpCb8mVWq1WRn6YH/mode=imports/optimized/@hotwired/turbo.js\n *   ⏩ Minified: https://cdn.skypack.dev/pin/@hotwired/turbo@v7.2.5-jwYMmpCb8mVWq1WRn6YH/mode=imports,min/optimized/@hotwired/turbo.js\n *\n */\n\n// Browser-Optimized Imports (Don't directly import the URLs below in your application!)\nexport * from '/-/@hotwired/turbo@v7.2.5-jwYMmpCb8mVWq1WRn6YH/dist=es2019,mode=imports/optimized/@hotwired/turbo.js';\nexport {default} from '/-/@hotwired/turbo@v7.2.5-jwYMmpCb8mVWq1WRn6YH/dist=es2019,mode=imports/optimized/@hotwired/turbo.js';\n```\n\n## Open questions\n\n- How to resolve packages from other CDN's such as [UNPKG](https://unpkg.com/), [JSPM](https://jspm.org/), etc.?\n- How to import CSS files from packages that require CSS to function properly such as [MapLibre GL](https://maplibre.org/maplibre-gl-js-docs/api/#quickstart)?","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdnsos%2Fimportmaps-exploration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdnsos%2Fimportmaps-exploration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdnsos%2Fimportmaps-exploration/lists"}