{"id":22829288,"url":"https://github.com/gilest/phoenix_importmap","last_synced_at":"2025-04-14T03:34:01.289Z","repository":{"id":267713877,"uuid":"901044000","full_name":"gilest/phoenix_importmap","owner":"gilest","description":"Use ESM with importmap to efficiently serve JavaScript without transpiling or bundling.","archived":false,"fork":false,"pushed_at":"2025-03-10T11:07:19.000Z","size":57,"stargazers_count":31,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T17:35:53.965Z","etag":null,"topics":["assets","esmodules","importmaps","javascript","phoenix"],"latest_commit_sha":null,"homepage":"https://hexdocs.pm/phoenix_importmap","language":"Elixir","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/gilest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2024-12-09T23:59:19.000Z","updated_at":"2025-03-25T12:07:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"68e3deee-c7ab-4f8c-8785-2403b72edee4","html_url":"https://github.com/gilest/phoenix_importmap","commit_stats":null,"previous_names":["gilest/phoenix_importmap"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilest%2Fphoenix_importmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilest%2Fphoenix_importmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilest%2Fphoenix_importmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilest%2Fphoenix_importmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilest","download_url":"https://codeload.github.com/gilest/phoenix_importmap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248815637,"owners_count":21165958,"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":["assets","esmodules","importmaps","javascript","phoenix"],"created_at":"2024-12-12T19:14:50.584Z","updated_at":"2025-04-14T03:34:01.270Z","avatar_url":"https://github.com/gilest.png","language":"Elixir","readme":"# Phoenix Importmap\n\n[![CI](https://github.com/gilest/phoenix_importmap/actions/workflows/ci.yml/badge.svg)](https://github.com/gilest/phoenix_importmap/actions/workflows/ci.yml)\n\n\u003c!-- MDOC !--\u003e\n\nUse [ES/JS Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) with [importmap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to efficiently serve JavaScript without transpiling or bundling.\n\nWith this approach you'll ship many small JavaScript files instead of one big JavaScript file.\n\nImport maps are [supported natively](https://caniuse.com/?search=importmap) in all major, modern browsers.\n\n## Installation\n\nThe package can be installed by adding `phoenix_importmap` to your list of dependencies in mix.exs:\n\n```elixir\ndef deps do\n  [\n    {:phoenix_importmap, \"~\u003e 0.4.0\"}\n  ]\nend\n```\n\nIf you are using the esbuild package you may also remove it, along with its configuration.\n\nIn `config/dev.exs` add the asset watcher to your `Endpoint` configuration:\n\n```elixir\nwatchers: [\n  assets: {PhoenixImportmap, :copy_and_watch, [~w(/assets)]},\n]\n```\n\nIn `config/config.exs` add an importmap. The following is a good start for a conventional Phoenix app:\n\n```elixir\nconfig :phoenix_importmap, :importmap, %{\n  app: \"/assets/js/app.js\",\n  topbar: \"/assets/vendor/topbar.js\",\n  phoenix_html: \"/deps/phoenix_html/priv/static/phoenix_html.js\",\n  phoenix: \"/deps/phoenix/priv/static/phoenix.mjs\",\n  phoenix_live_view: \"/deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js\"\n}\n```\n\nIf you are using topbar, replace the relative topbar import in `assets/app/app.js` with a module specifier. This asset will be resolved by our importmap:\n\n```js\nimport topbar from 'topbar';\n```\n\nYou'll also need to replace the contents of `assets/vendor/topbar.js` with a wrapped version that supports ESM, like this [from jsDelivr](https://cdn.jsdelivr.net/npm/topbar@2.0.0/topbar.js/+esm).\n\nIn `lib/\u003cproject\u003e/components/layouts/root.html.heex` replace the `app.js` `\u003cscript\u003e` tag.\n\nBe sure to use your own project's module name in place of `YourAppWeb`.\n\n```html\n\u003cscript type=\"importmap\"\u003e\n  \u003c%= PhoenixImportmap.importmap(YourAppWeb.Endpoint) %\u003e\n\u003c/script\u003e\n\u003cscript type=\"module\"\u003e\n  import 'app';\n\u003c/script\u003e\n```\n\nFinally, in `mix.exs` update your assets aliases to replace esbuild with this library:\n\n```\n  \"assets.setup\": [\"tailwind.install --if-missing\"],\n  \"assets.build\": [\"tailwind default\", \"phoenix_importmap.copy\"],\n  \"assets.deploy\": [\"tailwind default --minify\", \"phoenix_importmap.copy\", \"phx.digest\"]\n```\n\nThe [phoenix_importmap_example repository](https://github.com/gilest/phoenix_importmap_example) demonstrates configuring a newly-generated Phoenix app.\n\n## Importmap configuration\n\n- `:importmap` - Map representing your assets. This is used to copy and watch files, and resolve public paths in `PhoenixImportmap.importmap()`\n\n## Asset path configuration\n\nThe defaults should work out of the box with a conventional Phoenix application. There are two global configuration options available.\n\n- `:copy_destination_path` - Where your mapped assets will be copied to. Defaults to `/priv/static/assets` which is the default path for to serve assets from.\n\n- `:public_asset_path_prefix` - The public path from which your assets are served. Defaults to `/priv/static` which is the default path for `Plug.Static` to serve `/` at.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilest%2Fphoenix_importmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilest%2Fphoenix_importmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilest%2Fphoenix_importmap/lists"}