Skip to content

Commit f75ebc8

Browse files
committed
Read main module doc from README.md
1 parent 422b6de commit f75ebc8

File tree

2 files changed

+6
-84
lines changed

2 files changed

+6
-84
lines changed

README.md

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
[![CI](https://github.com/gilest/phoenix_importmap/actions/workflows/ci.yml/badge.svg)](https://github.com/gilest/phoenix_importmap/actions/workflows/ci.yml)
44

5+
<!-- MDOC !-->
6+
57
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.
68

79
With this approach you'll ship many small JavaScript files instead of one big JavaScript file.

lib/phoenix_importmap.ex

+4-84
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,8 @@
11
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)
866

877
alias PhoenixImportmap.Importmap
888

0 commit comments

Comments
 (0)