Hologram JS Interop: stdlib namespaces (Intl.DurationFormat)

Hey Chris, the thing that trips Elixir folks up here is that Intl.DurationFormat looks like a module name, but it isn’t one. In Elixir, Intl.DurationFormat is a single atom and the dots are part of the name. In JS, Intl is a global object, think of a map sitting in a global variable, and .DurationFormat reads a key off it at runtime. That key holds a class. new makes an instance of the class, and format is a method you call on that instance.

Hologram resolves an atom as one global name, so :"Intl.DurationFormat" looks for a global called “Intl.DurationFormat”, dot included, and there’s none. Each JS step gets its own call instead:

defp human_readable_time(seconds) do
  # Intl.DurationFormat
  :Intl
  |> JS.get(:DurationFormat)
  # new DurationFormat("en", {style: "long"})
  |> JS.new(["en", %{style: "long"}])
  # formatter.format({seconds: seconds})
  |> JS.call(:format, [%{seconds: seconds}])
end

The options have to be maps. A JS object is the closest thing to an Elixir map, and JS has no keyword lists. ["en", style: "long"] is ["en", {:style, "long"}], and tuples become JS arrays, so the constructor got ["style", "long"] instead of {style: "long"}. Same for seconds: seconds, which reached format as ["seconds", seconds].

Your JS.exec version works. Intl.DurationFormat formats a zero duration as an empty string, so seconds was probably 0.

Where you call it matters too. Call it from an action, not straight from the template. Templates also render on the server, and there every JS.* call does nothing and returns :ok, so the HTML the server sends would say “ok” in that spot. Format the string in the action that changes seconds, put it in state, and render the state:

def action(:tick, _params, component) do
  seconds = component.state.seconds + 1

  put_state(component, seconds: seconds, duration: human_readable_time(seconds))
end

Then the template just shows {@duration}.

It’s not a bug, but writing the name the way JS writes it would be nicer, so I filed an issue for dotted names:
JS interop can’t name a namespaced global like Intl.DurationFormat (#1550)

This worked, thanks!

My situation here took me a second to figure out. Hopefully that means I’m getting better at hologram! In my case:

• seconds is a prop on the component, passed down from a parent component
• that sometimes changes post-SSR-render on the client, sometimes is static

So, there won’t always be a client-side action to trigger re-render over the server-side one.

Initially, I tried to calculate them as a derived state in init/2 as an on-mount-only thing, but ofc that’s not called because init/3 is instead. Eventually I found the docs that explain the idiomatic way to get on-mount behaviour in server-rendered components is to enqueue an action from the server side, very slick.

This makes sense. I can see where my Elixir-writing mental model diverged from the JS reality long enough to be confused, but being informed about the right way now, honestly I’m not 100% convinced supporting :Intl.DurationFormat should be preferred over operating on the right mental model, and perhaps a note in the JS interop guide. Your call ofc!

Sure enough, I ran into this before reading your full answer, rushing off to try out the right way! Off the cuff, this is a strong smell to me that JS.call should return {:ok, result} | {:error, :runtime_unavailable} or some such: that way the caller could choose to be defensive about noticing such issues by matching on the result if it chose. Maybe there’s another more compelling reason for the API as-is though?

Glad it worked

If what you need is a value that keeps updating, like a running timer, you can queue a tick from init/3 and have the tick action queue itself again with a delay:

def init(props, component, _server) do
  component
  |> put_state(:elapsed, props.seconds)
  |> put_action(:tick)
end

def action(:tick, _params, component) do
  elapsed = component.state.elapsed

  component
  |> put_state(duration: human_readable_time(elapsed), elapsed: elapsed + 1)
  |> put_action(name: :tick, delay: 1_000)
end

I’ll keep the dotted names issue, since that’s how every JS example spells it, and the docs will cover the mental model too.

As for tagged tuples, interop only runs in code reached from actions, and actions run in the browser. So in supported code there’s no “unavailable” case to match on, and tuples would break piping one call into the next. Template calls are the gap, and that question is open in Question: is JS interop in render-reachable functions (with the server-side :ok fallback) supported? · Issue #1409 · bartblast/hologram · GitHub

That’s exactly what I’m doing, just a few components up! The one that displays it receives the elapsed seconds as a prop.