{"id":18814284,"url":"https://github.com/forgepackages/forge-importmap","last_synced_at":"2025-09-12T17:38:47.878Z","repository":{"id":62592828,"uuid":"525151699","full_name":"forgepackages/forge-importmap","owner":"forgepackages","description":"Use JS libraries in Django through import maps","archived":false,"fork":false,"pushed_at":"2023-06-01T19:08:11.000Z","size":99,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-30T01:31:22.841Z","etag":null,"topics":["forgepackages"],"latest_commit_sha":null,"homepage":"https://www.forgepackages.com/docs/forge-importmap","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forgepackages.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":"2022-08-15T22:03:15.000Z","updated_at":"2023-01-20T16:19:41.000Z","dependencies_parsed_at":"2024-11-07T23:40:12.241Z","dependency_job_id":"6126d69b-d831-43c3-aaae-d5f15bd0e0a3","html_url":"https://github.com/forgepackages/forge-importmap","commit_stats":{"total_commits":31,"total_committers":4,"mean_commits":7.75,"dds":0.3548387096774194,"last_synced_commit":"d957055a00df0fb08ab9874ecfbef19fa155a7d5"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forgepackages%2Fforge-importmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forgepackages%2Fforge-importmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forgepackages%2Fforge-importmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forgepackages%2Fforge-importmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forgepackages","download_url":"https://codeload.github.com/forgepackages/forge-importmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231800772,"owners_count":18428572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["forgepackages"],"created_at":"2024-11-07T23:40:00.552Z","updated_at":"2024-12-30T00:47:53.229Z","avatar_url":"https://github.com/forgepackages.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# forge-importmap\n\nHeavily inspired by [rails/importmap-rails](https://github.com/rails/importmap-rails),\nthis app adds a simple process for integrating [import maps](https://github.com/WICG/import-maps) into Django.\n\nThis is a new project and it hasn't been used in production yet.\nBut if you're looking to use import maps with Django, give it a try and tell us how it goes.\nThe structure (and code) is pretty simple.\nContributions are welcome!\n\n## How to use it\n\nYou'll need to do four things to use forge-importmap.\n\nThe TL;DR is:\n\n- Add \"importmap\" to `INSTALLED_APPS`\n- Create an `importmap.toml`\n- Run `python manage.py importmap_generate`\n- Use `{% importmap_scripts %}` in your template\n\n### 1. Install it\n\nDo the equivalent of `pip install forge-importmap` and add it to your `INSTALLED_APPS` list in your `settings.py` file.\n\n```python\n# settings.py\nINSTALLED_APPS = [\n    ...\n    \"importmap\",\n]\n```\n\n### 2. Create an `importmap.toml` file\n\nThis should live next to your `manage.py` file.\nHere you'll add a list of \"packages\" you want to use.\n\nThe \"name\" can be anything, but should probably be the same as what it you would import from in typical bundling setups (i.e. `import React from \"react\"`).\n\nThe \"source\" will get passed on to the [jspm.org generator](https://jspm.org/docs/api#install), but is basically the `\u003cnpm package\u003e@\u003cversion\u003e` you want to use.\n\n```toml\n[[packages]]\nname = \"react\"\nsource = \"react@17.0.2\"\n```\n\n### 3. Run `importmap_generate`\n\nTo resolve the import map, you'll need to run `python manage.py importmap_generate`.\n\nThis will create `importmap.lock` (which you should save and commit to your repo) that contains the actual import map JSON (both for development and production).\n\nYou don't need to look at this file yourself, but here is an example of what it will contain:\n\n```json\n{\n  \"config_hash\": \"09d6237cdd891aad07de60f54689d130\",\n  \"importmap\": {\n    \"imports\": {\n      \"react\": \"https://ga.jspm.io/npm:react@17.0.2/index.js\"\n    },\n    \"scopes\": {\n      \"https://ga.jspm.io/\": {\n        \"object-assign\": \"https://ga.jspm.io/npm:object-assign@4.1.1/index.js\"\n      }\n    }\n  },\n  \"importmap_dev\": {\n    \"imports\": {\n      \"react\": \"https://ga.jspm.io/npm:react@17.0.2/dev.index.js\"\n    },\n    \"scopes\": {\n      \"https://ga.jspm.io/\": {\n        \"object-assign\": \"https://ga.jspm.io/npm:object-assign@4.1.1/index.js\"\n      }\n    }\n  }\n}\n```\n\n### 4. Add the scripts to your template\n\nThe import map itself gets added by using `{% load importmap %}` and then `{% importmap_scripts %}` in the head of your HTML. This will include the [es-module-shim](https://github.com/guybedford/es-module-shims).\n\nAfter that, you can include your own JavaScript!\nThis could be inline or from `static`.\nJust be sure to use `type=\"module\"` and the \"name\" you provided when doing your JS imports (i.e. \"react\").\n\n```html\n{% load importmap %}\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    {% importmap_scripts %}\n    \u003cscript type=\"module\"\u003e\n        import React from \"react\"\n\n        console.log(React);\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nWhen it renders you should get something like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cscript async src=\"https://ga.jspm.io/npm:es-module-shims@1.3.6/dist/es-module-shims.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"importmap\"\u003e\n    {\n        \"imports\": {\n            \"react\": \"https://ga.jspm.io/npm:react@17.0.2/dev.index.js\"\n        },\n        \"scopes\": {\n            \"https://ga.jspm.io/\": {\n                \"object-assign\": \"https://ga.jspm.io/npm:object-assign@4.1.1/index.js\"\n            }\n        }\n    }\n    \u003c/script\u003e\n\n    \u003cscript type=\"module\"\u003e\n        import React from \"react\"\n\n        console.log(React);\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Project status\n\nThis is partly an experiment,\nbut honestly it's so simple that I don't think there can be much wrong with how it works currently.\n\nHere's a list of things that would be nice to do (PRs welcome):\n\n- Command to add new importmap dependency (use `^` version automatically?)\n- Django check for comparing lock and config (at deploy time, etc.)\n- Use [deps](https://www.dependencies.io/) to update shim version\n- Preload option\n- Vendoring option (including shim)\n- More complete error handling (custom exceptions, etc.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforgepackages%2Fforge-importmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforgepackages%2Fforge-importmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforgepackages%2Fforge-importmap/lists"}