Phoenix Importmap - Alternative to esbuild

Your Libraries & OS Mentoring Seeking Feedback/Help
, , ,
1

Hi all

Relatively new to Elixir, but was curious to see how Phoenix might run with a basic importmap configuration.

Introducing, phoenix_importmap.

Benefits:
In dev - minimal file-based tooling, removal of esbuild transpilation step, parity with prod
In prod - more granular caching of js files since they are many rather than a few bundles

Curious to know if folks are interested in this approach, anyway.

Usual disclaimer - this is an early stage library. I’ve not yet used it in prod :slightly_smiling_face:

13 Likes
2

This is really interesting thanks for making it!

I’ll have to take a closer look next time I venture outside the LiveView bubble.

1 Like
3

Neat. I am using a more bare bone nobuild setup. I made sym links of phoenix js into my static dir:

derek@roastidious:~/projects/gara$ ls -al priv/static/js/
total 36
drwxr-xr-x 3 derek derek 4096 Mar  3 16:20  .
drwxr-xr-x 7 derek derek 4096 Oct 12 15:00  ..
-rw-r--r-- 1 derek derek 2160 Oct 12 15:08  app.js
drwxr-xr-x 2 derek derek 4096 Apr  8  2023  _hooks
lrwxrwxrwx 1 derek derek   54 Oct 12 14:49  phoenix_html.js -> ../../../deps/phoenix_html/priv/static/phoenix_html.js
lrwxrwxrwx 1 derek derek   45 Oct 12 14:51  phoenix.js -> ../../../deps/phoenix/priv/static/phoenix.mjs
lrwxrwxrwx 1 derek derek   68 Oct 12 14:52  phoenix_live_view.js -> ../../../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js

Then I directly import those phoenix js in my app.js:

import "./phoenix_html.js";
import {Socket} from "./phoenix.js";
import {LiveSocket} from "./phoenix_live_view.js";
import Hooks from "./_hooks/index.js";

If I need to use more than a couple of npm modules, I will consider using the importmap package.

3 Likes
4

Do these get copied correctly when you build releases too?

5

I don’t copy assets from assets/ to priv/ any more. My original js and css lives directly under priv/static/ and the phoenix js are symlink’ed to priv/static/js/ and remain that way in the release. The symlinks are flatten in deploy.