Use a reference to consuming projects Endpoint module to generate digested asset paths in production.

Author: gilest

README.md

@@ -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/topbar@2.0.0/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';

lib/phoenix_importmap.ex

@@ -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/topbar@2.0.0/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>
   ```
 
@@ -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
 

lib/phoenix_importmap/importmap.ex

@@ -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)
     }

test/phoenix_importmap_test.exs

@@ -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)
 
@@ -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