mwmiller

mwmiller

I’m wondering if there is a way to use some Javascript client APIs via Hologram without writing some kind of pure JS hooks.

I want to add some date information to my pages. A notoriously sticky wicket, to be sure. However my needs are fairly simple. I have UTC instants in my data source. I’d like to display them as local times for user convenience.

I don’t like pushing client concerns to the server or vice-versa. So I’d rather not round trip the client’s TZ to the server to create a date string in Elixir which might not even match their locale’s preferred formatting. Instead, I’d like to push the common-to-all-clients UTC instants to the clients and allow them to format it as desired.

Is this just something for which I will have to write some Javascript? Or is there a clever workaround of which I cannot think?

Showing Posts 1 to 3

bartblast

bartblast

Creator of Hologram

Web API wrappers are planned, but locale and time handling need a special isomorphic-aware approach. For your use case, you’d probably want to server-render with a default timezone first, then update client-side - otherwise you’d have to render all dates only after client load.

Some DateTime timezone functions are impractical to transpile directly because they require timezone database libraries like tzdata (Elixir’s default UTCOnlyTimeZoneDatabase only supports UTC). These libraries contain large IANA timezone databases that would bloat the JS bundle. Instead, it’s better to port them manually using Web APIs underneath while maintaining the same Elixir API.

You could theoretically get the timezone like this now:

timezone = ~JS"return Type.string(Intl.DateTimeFormat().resolvedOptions().timeZone)"

This would return something like "Europe/Warsaw", but the DateTime functions to format dates with that timezone won’t compile correctly yet for the reasons mentioned above.

Two insights from your use case:

  • I need to manually port key DateTime functions
  • There’s probably a need for client-side system info modules like Hologram.Client, Hologram.Device, Hologram.Platform, etc. (you’d use something like Hologram.Client.timezone())

Is this blocking you at the moment?

mwmiller

mwmiller OP

Thanks for the explanation! This is actually further along than I expected already.

It’s a silly little side project and my explorations of what’s possible. It could not matter less in the grand scheme of things.

bartblast

bartblast

Creator of Hologram

I won’t prioritize the DateTime porting immediately then, but I’ll keep it high in the backlog since others will likely hit this pattern too.

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
Blokh
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
roeland
Kia ora, We have been using elixir-google-api to connect to Google Drive. However, with the updates to Tesla due to CVEs this is now bro...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews