Eiji

Eiji

JavaScript Interop in Hologram

Well … that’s definitely disappointing for those waiting for new news, but we all know how life works in practice. No need to sorry, but if possible you always should consider people on second side. Some people may think that project is completely abandoned especially if they see old issues that are opened for few years … Honestly even I almost forgot about your project while I believe that I have very good memory … :sweat_smile:

On GitHub I see old issues about mouse events. Having in mind that there is also no roadmap it looks very bad - it’s as click is the only event Hologram supports. Size and performance are not as important for early steps as number of features. I’m working on some app and after seeing your post I considered to give hologram a try, but I don’t see any information about features that I already use in said LiveView-based app. For now I have no idea which events are implemented, which events are planned and so on … I cannot see what and when I can do, so I can’t plan anything. That’s a huge blocker for an early adoption / first research. :icon_confused:

We know that our code would be transpiled to JavaScript, but we have no idea how to use many JavaScript APIs …

  1. DOM API
  2. Push notifications, Fullscreen API and many other desktop features …
  3. We don’t have even a JSON support as JSON (new Elixir module) uses currently unsupported with special form and Jason also does not work. I know few sites that put JSON data in element attributes and use them inside JavaScript
  4. window-based and document-based JavaScript features - some JavaScript browser APIs depend on them (for example document.fullscreenElement)

I understand that bringing it all soon may be very difficult, so how about creating some workaround until 1.0.0 version is released?

if ~JS"return document.fullscreenElement;" do
  ~JS"…"
else
  ~JS"…"
end

Well written code could be easily migrated to 1.0.0 version, to … let’s say something like …

if Hologram.Document.get().fullscreenElement do
  # …
else
  # …
end

In such case one of the most important things would be to somehow pass action name, so we can use Hologram actions for events that are not officially supported. I believe that API like that would give people some possibilities to try Hologram on more real world cases. :bulb:

I also took a look at hexdocs documentation … there is lots of modules and most probably many of them should have @moduledoc false or they are just completely not documented. :books:

I’m currently a bit busy as I’m working on my own project, but most probably in next month I would have more time for Hologram. I think about writing some mix tasks for it - maybe even port all phx tasks. :thinking:

Marked As Solved

bartblast

bartblast

Creator of Hologram

Nope, this will work in simple cases only that don’t affect Hologram state management and DOM abstraction. Example use case: document.documentElement.requestFullscreen(). Such cases will be easily abstracted away in future anyway. Keep in mind that Hologram uses boxed types and there’s quite complex machinery for events, state management and client-server transport underneath, so you can’t just use native JavaScript types.

Also Liked

bartblast

bartblast

Creator of Hologram

I hear you! Really appreciate your extensive feedback! It’s super helpful!

The GitHub repository has been cleaned up! :sparkles:

I understand the importance of having a clear picture of what works and what doesn’t. I’m currently focusing on documentation to help people get started. Soon there will be both a Roadmap docs page and a separate Events docs page. I’ve created a separate forum thread for discussion and announcements about new documentation pages: Hologram Documentation Updates/Feedback

Hologram uses a virtual DOM under the hood, providing a declarative frontend layer that abstracts DOM manipulation. The goal is to eventually transition to more efficient mechanisms similar to SolidJS or Svelte. Could you share specific use cases where you need direct DOM access?

These features are coming in future releases. :rocket: If you have a specific use case in mind, creating a separate forum thread would be very helpful - this way the whole community can join in, share similar requirements, and maybe even suggest temporary workarounds. Plus, having focused discussions helps us better understand everyone’s needs.

Could you elaborate on your specific use cases that require JSON support?

While there was a working JS sigil implementation previously, I’m cautious about reintroducing it as it might create more challenges than benefits. Proper JavaScript interoperability is relatively straightforward to implement at this stage. If this feature is blocking adoption for you or others, I’m willing to prioritize it. After completing the documentation, I plan to create a dedicated forum thread to understand what features are blocking adoption for users.

I’ve just created a GitHub Issue for this: Add @moduledoc false to modules that don't need HexDocs documentation · Issue #162 · bartblast/hologram · GitHub
Would you like to contribute a pull request? :slight_smile:

bartblast

bartblast

Creator of Hologram

I implemented the ~JS sigil. It will be released in release 0.3.0, probably even today. But please treat it as something temporary – I’m not 100% sure if it will stay.

Example: ~JS"console.log('Hello, world!');"

To return a value, just use the return keyword: ~JS"return 123"

Multiple line statements are also allowed. The sigil just evaluates the given JS code as is.

Eiji

Eiji

Before I would take a deeper look at hologram I would like to finish current project that I’m working on. There would be not just example, but a real-world use case. I just have to write documentation and tests, lots of tests …

Well … mention APIs are not that hard to visualise … For example Discourse uses Push notifications, so that’s best real world use case … As above I plan to release also a real-world case for Fullscreen API.

Oh this one is rather low priority, but still it’s definitely part of adoption. In past I saw some hobby sites (just was curious how they work) storing JSON data in data-* attributes and uses it within JavaScript code. For sure they could be rewritten, but just for a hobby project it’s much easier to simply rewrite JavaScript code to Elixir one than rewrite core site logic even if said server/client state would be much better in specific use case.

It’s not rather a part of adoption, but a workaround which would make create demo ports of existing projects much simpler (by copy-paste) rather than waiting for only one feature that’s yet not implemented. As said if there is something relatively simple then it should be added just to see by demo projects how often some features are used and therefore you may prioritise one over others.

Look that I see issue like:

and I know that there is no JavaScript workaround support.

So if I would port an existing LiveView application into Hologram I would in fact need to implement more JavaScript logic than less. However if I would have such code:

workaround(s[document.getElementById("?").addEventListener("mousemove", ?)], "some-id", :action_name)

then when feature would be delivered it would be much simpler to update the code as all I would do is to replace said one-liner or even completely remove it in favour of ~H"" markup.

So think:

  1. Temporary rewrite logic to JavaScript code + rewrite JavaScript to Hologram when feature would be delivered
  2. Write Hologram code and 1LOC in init + remove 1LOC from init when feature would be delivered

Which one would be better for first demo adoption?

Of course in my case if you would say:

Alright, but I can spend one week on it or in exactly same time support all events. What you prefer?

then I would fully agree that such workaround is not important, but this:

  1. Would not happen when right now you are focused on documentation (which is a good thing)
  2. Even if that would happen it would create just an extra pressure on you to deliver new features asap

That’s why I suggested some kind of a “quick workaround” (if possible) … :thinking:

Sure!

Eiji

Eiji

Brilliant! Any way to reference action?

# TODO: replace sigil code when event would be officially supported:
~JS/someElement.addEentListener("eventName", {hologram_action(:action_name)})/
# …
def action(name, event_params, component) do
  # Action logic here
end

Where Next?

Popular in Discussions Top

rump13
Hi everyone, I’ve been following Elixir since around 2016 and tinkering with it on and off, but I haven’t had the opportunity to use it ...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
arcanemachine
Just wondering what the community currently thinks, prefers, and/or recommends for working with UI components. (e.g. daisyUI, MishkaChele...
New
derpycoder
So, anyone got a chance to look at this?!? I’m kind of glad this came along. We can just throw this into our Auth pages and won’t have t...
New
sym_num
I created a Forth processor in Elixir. This is my hobby project. https://github.com/sasagawa888/Forth
New
lessless
I wonder if it’s possible to mimic a simple “class reopening”/inhertinace-based SEAM in Elixir to alter a module’s behaviour without edit...
New
axelson
Hi there! :wave: @frigidcode and I (but mostly him) have been running an Elixir Book club, we’re almost done with Designing Elixir Syste...
New
travisf
In upgrading from Ecto 2 to Ecto 3 I’m dealing with a failing test. If I use ExMachina build(:address) I’ll get an error trying to put_e...
New
karlosmid
The |> operator appears in many languages, mostly in the functional world. F# has essentially the exact same operator, as does OCaml. ...
New
isaacsanders
When I try to run my applications and I haven’t updated the dependencies, the output tells me to run mix deps.get. Why doesn’t the binar...
New

Other popular topics Top

shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
beno
I will often find my self writing things similar to: case some_value do nil -> something() "" -> something() _ -> someth...
New

We're in Beta

About us Mission Statement