|
1 | 1 | defmodule PhoenixImportmap do
|
2 |
| - @moduledoc """ |
3 |
| - Use [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. |
4 |
| -
|
5 |
| - With this approach you'll ship many small JavaScript files instead of one big JavaScript file. |
6 |
| -
|
7 |
| - Import maps are [supported natively](https://caniuse.com/?search=importmap) in all major, modern browsers. |
8 |
| -
|
9 |
| - ## Installation |
10 |
| -
|
11 |
| - The package can be installed by adding `phoenix_importmap` to your list of dependencies in mix.exs: |
12 |
| -
|
13 |
| - ```elixir |
14 |
| - def deps do |
15 |
| - [ |
16 |
| - {:phoenix_importmap, "~> 0.4.0"} |
17 |
| - ] |
18 |
| - end |
19 |
| - ``` |
20 |
| -
|
21 |
| - If you are using the esbuild package you may also remove it, along with its configuration. |
22 |
| -
|
23 |
| - In `config/dev.exs` add the asset watcher to your `Endpoint` configuration: |
24 |
| -
|
25 |
| - ```elixir |
26 |
| - watchers: [ |
27 |
| - assets: {PhoenixImportmap, :copy_and_watch, [~w(/assets)]}, |
28 |
| - ] |
29 |
| - ``` |
30 |
| -
|
31 |
| - In `config/config.exs` add an importmap. The following is a good start for a conventional Phoenix app: |
32 |
| -
|
33 |
| - ```elixir |
34 |
| - config :phoenix_importmap, :importmap, %{ |
35 |
| - app: "/assets/js/app.js", |
36 |
| - topbar: "/assets/vendor/topbar.js", |
37 |
| - phoenix_html: "/deps/phoenix_html/priv/static/phoenix_html.js", |
38 |
| - phoenix: "/deps/phoenix/priv/static/phoenix.mjs", |
39 |
| - phoenix_live_view: "/deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js" |
40 |
| - } |
41 |
| - ``` |
42 |
| -
|
43 |
| - If 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: |
44 |
| -
|
45 |
| - ```js |
46 |
| - import topbar from "topbar" |
47 |
| - ``` |
48 |
| -
|
49 |
| - You'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). |
50 |
| -
|
51 |
| - In `lib/<project>/components/layouts/root.html.heex` replace the `app.js` `<script>` tag. |
52 |
| -
|
53 |
| - Be sure to use your own project's module name in place of `YourAppWeb`. |
54 |
| -
|
55 |
| - ```html |
56 |
| - <script type="importmap"> |
57 |
| - <%= PhoenixImportmap.importmap(YourAppWeb.Endpoint) %> |
58 |
| - </script> |
59 |
| - <script type="module"> |
60 |
| - import 'app'; |
61 |
| - </script> |
62 |
| - ``` |
63 |
| -
|
64 |
| - Finally, in `mix.exs` update your assets aliases to replace esbuild with this library: |
65 |
| -
|
66 |
| - ``` |
67 |
| - "assets.setup": ["tailwind.install --if-missing"], |
68 |
| - "assets.build": ["tailwind default", "phoenix_importmap.copy"], |
69 |
| - "assets.deploy": ["tailwind default --minify", "phoenix_importmap.copy", "phx.digest"] |
70 |
| - ``` |
71 |
| -
|
72 |
| - The [phoenix_importmap_example repository](https://github.com/gilest/phoenix_importmap_example) also demonstrates configuring a newly-generated Phoenix app. |
73 |
| -
|
74 |
| - ## Importmap configuration |
75 |
| -
|
76 |
| - - `:importmap` - Map representing your assets. This is used to copy and watch files, and resolve public paths in `PhoenixImportmap.importmap()` |
77 |
| -
|
78 |
| - ## Asset path configuration |
79 |
| -
|
80 |
| - The defaults should work out of the box with a conventional Phoenix application. There are two global configuration options available. |
81 |
| -
|
82 |
| - - `: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. |
83 |
| -
|
84 |
| - - `: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. |
85 |
| - """ |
| 2 | + @moduledoc "README.md" |
| 3 | + |> File.read!() |
| 4 | + |> String.split("<!-- MDOC !-->") |
| 5 | + |> Enum.fetch!(1) |
86 | 6 |
|
87 | 7 | alias PhoenixImportmap.Importmap
|
88 | 8 |
|
|
0 commit comments