Providing a View Helper with bits of JavaScript and CSS

Phoenix Forum Questions / Help
, ,
1

In the PHP framework I used before switching to Elixir/Phoenix, I could create view helpers that inject bits of JavaScript and CSS into the template when needed.

Imagine I create a <select> element that allows the user to select his default language:

<%= select_language() %>

The view helper would be able to inject a small JS code that auto-selects a default language, based on the browser’s language. If I create a package, the only thing the user would need to do is write <%= select_language() %> in the template; JS is injected automatically. It can even come with a nice styling, as I could inject a small piece of CSS as well.

I do not have to ask the user, “oh and don’t forget to add that JavaScript bit here, and also write the following CSS there, …”, which is error-prone, especially with updates.

This worked because you could hook into the master template rendering.
When rendering the master template, at one point all subscribers to onHeadScripts event would be called to render some small inline JavaScript snippet if needed.

In the example of the language selector, the view helper would have one function to render the actual <select> element with the supported languages, and another function onBodyScripts() (called when the master template reaches the closing body tag) to inject the JavaScript that selects by default the language used by the browser.

The rendering of the master template in the framework looks like the following:

echo "<!DOCTYPE html>\n";
echo '<html';
$this->viewEventDispatcher->dispatch('htmlAttributes');
echo ">\n";

echo "<head>\n";
$this->viewEventDispatcher->dispatch('headOpened');
echo "<meta charset=\"utf-8\">\n";

$this->viewEventDispatcher->dispatch('meta');

echo '<title>';
$this->viewEventDispatcher->dispatch('headTitle');
echo "</title>\n";

$this->viewEventDispatcher->dispatch('headLinks');

// print stylesheets
$this->viewEventDispatcher->dispatch('headStylesheets');

// print scripts
$this->viewEventDispatcher->dispatch('headScripts');

View helpers can subscribe to those events; they can implement any function as onHeadTitle(), onBodyAttributes(), etc. as they like, and inject code.

Question (and sorry for the long introduction):

What is the best way to provide such reusable components in Phoenix that includes a little bit of JS and CSS, without the user having change the code at different places?

2

I think what you describe are the same as content_for blocks in Rails. I am not fond of this pattern myself. However, I haven’t seen this approach in Phoenix and would also say that Phoenix has better tools for this. LiveView for example. But if you really want JS, then look at Stimulus or AlpineJS.

3

I think one of the main goal of LiveView is to have real-time communication. I do not have a need for real-time experiences for many cases.

I do not see the purpose of Stimulus or AlpineJS for my question. I just use vanilla JS and I am fine with it. The question is: how can I make a view helper that adds (injects) a little inline JS and CSS to the page; and be able to create a reusable library and avoid the user having to add manually the JS and CSS code with instructions.

1 Like
4

What you want to have doesn’t work with plain phoenix view. Views are rendered stateless from the outside in. So something nested in a component of your page cannot affect any of the markup around it. What you’re coming from is stateful template rendering, where an inner template can modify certain state, which only later is rendered as part of the outer layout.

2 Likes
5

LiveView is great for real-time, but it also works really nicely for adding user interaction. I have very little real-time currently in the project I’m working on, but have built it mostly in LiveView because of the efficient programming model. There’s a component library built on top of LiveView that takes this further: Surface. You can also render liveviews within normal views using live_render

To answer your original question - I don’t think there is currently an equivalent method whereby calling a “component function” in a template will cause the app template to pick up the other bits and pieces outside of the body html to make the component work nicely (EDIT: for the reasons @LostKobrakai describes above ). You do get access to the @view_module (the elixir module defining the view) and @view_template in the main application template - it would be an interesting experiment to see if these could be interpreted to dynamically inject CSS & JS. It would be an even more interesting experiment to do this at compile time to maintain performance.

1 Like
6

LiveView works fine for what I suspect is your use case. Just to improve interactivity without any JS.

I have an example for a typeahead without any JS. That LiveView is just rendered in a normal Phoenix template.
https://fullstackphoenix.com/tutorials/typeahead-with-liveview-and-tailwind