Skip to content

Commit

Permalink
Use a reference to consuming projects Endpoint module to generate dig…
Browse files Browse the repository at this point in the history
…ested asset paths in production.
  • Loading branch information
gilest committed Jan 8, 2025
1 parent 6310546 commit 8b2fd0b
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 13 deletions.
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,13 @@ import topbar from 'topbar';

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/[email protected]/topbar.js/+esm).

In `lib/<project>/components/layouts/root.html.heex` replace the `app.js` `<script>` tag with:
In `lib/<project>/components/layouts/root.html.heex` replace the `app.js` `<script>` tag.

Be sure to use your own project's module name in place of `YourAppWeb`.

```html
<script type="importmap">
<%= raw PhoenixImportmap.importmap() %>
<%= raw PhoenixImportmap.importmap(YourAppWeb.Endpoint) %>
</script>
<script type="module">
import 'app';
Expand Down
14 changes: 8 additions & 6 deletions lib/phoenix_importmap.ex
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,16 @@ defmodule PhoenixImportmap do
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/[email protected]/topbar.js/+esm).
In `lib/<project>/components/layouts/root.html.heex` replace the `app.js` `<script>` tag with:
In `lib/<project>/components/layouts/root.html.heex` replace the `app.js` `<script>` tag.
Be sure to use your own project's module name in place of `YourAppWeb`.
```html
<script type="importmap">
<%= raw PhoenixImportmap.importmap() %>
<%= raw PhoenixImportmap.importmap(YourAppWeb.Endpoint) %>
</script>
<script type="module">
import "app";
import 'app';
</script>
```
Expand Down Expand Up @@ -87,11 +89,11 @@ defmodule PhoenixImportmap do
@doc """
Returns a JSON-formatted importmap based on your application configuration.
Asset paths will have `:public_asset_path_prefix` stripped out.
Requires `YourAppWeb.Endpoint` to be passed in for path generation.
"""
def importmap() do
def importmap(endpoint) do
application_importmap()
|> Importmap.prepare()
|> Importmap.prepare(endpoint)
|> Importmap.json()
end

Expand Down
9 changes: 6 additions & 3 deletions lib/phoenix_importmap/importmap.ex
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,21 @@ defmodule PhoenixImportmap.Importmap do
end

@doc """
Strips `:public_asset_path_prefix` from asset paths so they may be resolved
Maps local paths from the configured importmap to the location they are being served from.
- Strips `:public_asset_path_prefix` from asset paths so they may be resolved
by `Plug.Static`.
- Uses `YourAppWeb.Endpoint.static_path/1` to determine whether to use digest URLs.
"""
def prepare(importmap = %{}) do
def prepare(importmap = %{}, endpoint) do
%{
imports:
importmap
|> Enum.reduce(%{}, fn {specifier, path}, acc ->
Map.put(
acc,
specifier,
Asset.public_path(path)
Asset.public_path(path) |> endpoint.static_path()
)
end)
}
Expand Down
8 changes: 6 additions & 2 deletions test/phoenix_importmap_test.exs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ defmodule PhoenixImportmapTest do

@moduletag :tmp_dir

defmodule MockEndpoint do
def static_path(path), do: "#{path}?busted=t"
end

setup %{tmp_dir: tmp_dir} do
relative_tmp_dir = Util.relative_path(tmp_dir)

Expand All @@ -27,7 +31,7 @@ defmodule PhoenixImportmapTest do
end

test "importmap" do
assert PhoenixImportmap.importmap() ==
"{\"imports\":{\"remote\":\"https://cdn.es6/package.js\",\"app\":\"/assets/app.js\"}}"
assert PhoenixImportmap.importmap(MockEndpoint) ==
"{\"imports\":{\"remote\":\"https://cdn.es6/package.js?busted=t\",\"app\":\"/assets/app.js?busted=t\"}}"
end
end

0 comments on commit 8b2fd0b

Please sign in to comment.