Svx 0.1.16
- Github: GitHub - dmitriid/svx: A PoC for single-file components for Phoenix LiveView
- Hex: svx | Hex
- HexDocs: Svx — Svx v0.2.0
Code is horrible (I was basically typing whatever first came to mind, no thinking about architecture, or tests, or…). But it works 
What does it look like?
See priv/example in the repo above for a full example with Phoenix and LiveView. Just the component looks like this:
<script language="elixir">
alias Example.Thermostat
def mount(_params, _session, socket) do
if connected?(socket), do: Process.send_after(self(), :update, 1000)
case Thermostat.get_reading() do
{:ok, temperature} ->
{:ok, assign(socket, temperature: temperature)}
{:error, _reason} ->
{:ok, redirect(socket, to: "/error")}
end
end
def handle_info(:update, socket) do
Process.send_after(self(), :update, 1000)
{:ok, temperature} = Thermostat.get_reading()
{:noreply, assign(socket, :temperature, temperature)}
end
</script>
<p class={"example temp-#{ @temperature > 30 }"}>
Current temperature: <%= @temperature %>
</p>
<style>
.example {
font-size: 40pt;
}
.temp-true {
color: orange;
}
.temp-false {
color: blue;
}
</style>
Follow the steps in the README to install and see how this works for yourself.
Why?
Why not
It turns out I have quite a few components where there’s not that much elixir code, but there’s a lot of template code. I always found it weird to place that inside a string, or to put a component’s css so far away from the actual component, or…
Also, I like Svelte, and I wanted a similar thing.
OMG Scoped CSS?!!
No 
It’s definitely doable with this approach, but parsing CSS correctly is not for the faint of heart, and definitely outside the scope of a simple PoC.
Will you use this?
I will definitely use this in a side project.
