PETL stack - is AlpineJS still relevant?

Phoenix Forum Chat / Discussions
,
21

In most cases, you should still include the raw timestamp, so you have a fallback when JS isn’t working.
So do something like this:

    <div 
      x-data="{date: new Date($el.dataset.time)}"
      x-text="date.toLocaleString()" 
      data-time={@starts_at} /><%= @starts_at %></div>

Another option would be to use phx-update="ignore" if you know @starts_at isn’t going to change.

4 Likes
22

Even better when used with the proper semantic markup: <time>: The (Date) Time element - HTML: HyperText Markup Language | MDN

2 Likes
23

You could implement something similar with LiveView:

<time data-time={@time_from_server} phx-update="ignore"></time>

Now, when you start the LiveSocket, you could register the onNodeAdded dom callback:

dom: {
  onNodeAdded: (element) => {
    if(element.getAttribute("data-time"){ element.innerText = ... }
  }
}

Or something along those lines. :slight_smile: I would actually appreciate a lot if someone could give it a try and send a PR documenting this in LiveView guides. :slight_smile:

5 Likes
24

I’d be happy to give it a try, but is there a specific reason why you’d go with onNodeAdded rather than more explicitly with a LiveView hook?

1 Like
25

just when I thought I understood LV-JavaScript interop. :upside_down_face:

Lot of possible ways to interop.

  • new LV.JS
  • hooks
  • webcomponents
  • Alpine
  • plain JS
  • and now I learn about onNodeAdded - is it documented somewhere? Is it considered public API?
26

I think you just volunteered to write the docs for it @Sebb :wink:

2 Likes
27

A hook works too, there is only a minor requirement of generating unique IDs. I guess a web component mentioned below would work too, and maybe cleaner?

28

I think this is coming from morphdom lib.

On the topic, what is your current take: is AlpineJS still relevant? Where have you seen it still needed, if anywhere?

My current need is to track the currently focused <li>. Atm doing this with Alpine’s $data, initially storing { focus: 0; /* and more */ }, but wondering whether I can/should use, say, localStorage via LV’s hooks for that. (Probably not, since such an ephemeral UI state as ‘current focus index’ isn’t best use of localStorage.)

If you have already been on the same path, trying to do with only the LV built-ins (hooks, LV.JS module, etc.) or plain JS: did you find any area where you still needed to rely on AlpineJS or some other tool? If so, what were the particular problems were you still reached for a tool outside LV?