It's great to see more attention coming to it. Some other libraries worth keeping an eye on:
https://www.phlex.fun - Joel shipped this a few months ago ... it's very similar to Rux except it uses Ruby classes to achieve a similar effect. What's particularly interesting about Joel's efforts is that he is very worried about speed and performance, so it's a very fast templating framework.
https://youtu.be/9-rqBLjr5Eo?t=560 - This is the best overview of what Phoenix is shipping for their HTML framework, which is called HeeX (most of the docs already assume you're "in the know" with Elixir). HeeX is nice (like Rux) in that you can use HTML tags to embed server-side rendered components in markup with tags like `<.icon/>`. Not sure about Rux, but HeeX can reason about HTML from within itself, which means it can validate the DOM and make technologies like LiveView possible (https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html).
I'm hoping at some point in the future a "de facto" (or actual) standard for Rails view components come into being so we can have an HTML-aware templating layer in Rails and improve the ecosystem through more standard UI components.
[1]: https://github.com/markaby/markaby
Modifying their own example, I kinda like it.
class GreetingComponent
def call
div {
"Hey There" +
NameComponent(first_name: "Homer", last_name: "Simpson")
}
end
end[0] https://govuk-components.netlify.app/
[1] https://github.com/DFE-Digital/govuk-components/blob/main/ap...
They are fast and easy to write and easy to modify for sure. I wouldn't mind having the code look more like the output (without a template) but it's not something I've been missing...
Don’t partials get compiled when used from a ViewComponent?
Also - the gov.uk project makes my heart sing ;)
You could easily write a method to do this:
def html(&blk)
io = StringIO.new()
builder = Builder::XmlMarkup.new(:target => io, :indent => 2)
blk.call(builder)
io.to_s
end
html do |t|
t.span "#{@first_name} #{@last_name}"
end
Not the prettiest, but it doesn't require additional gems or a new syntax highlighter and linter.~~~ h('div.example', [
h('h1#heading', 'This is hyperscript'),
h('h2', 'creating React.js markup'),
h(AnotherComponent, {foo: 'bar'}, [
h('li', [
h('a', {href: 'http://whatever.com'}, 'One list item')
]),
h('li', 'Another list item')
])
])
);
~~~ <div class="example">
<h1 id="heading">This is an example</h1>
<h2>creating React markup</h2>
<AnotherComponent foo="bar">
<li>
<a href="http://whatever.com">One list item</a>
</li>
<li>
Another list item <hr />
</li>
</AnotherComponent>
</div>
would translate to something like this: ["div", {"class": "example"}, [
["h1", {"id": "heading"}, ["This is an example"]],
["h2", {}, ["creating React markup"]],
[AnotherComponent, {"foo": "bar"}, [
["li", {}, [
["a", {"href": "http://whatever.com"}, ["One list item"]],
],
["li", {}, [
"Another list item",
["hr", {}, []],
],
],
]
and that all Rux/JSX/hyperscript/whatever would compile down to that div(class: "example") do
h1(id: "heading") { "This is an example" }
h2 { "creating React markup" }
AnotherComponent(foo: "bar") do
li { a(href: "http://whatever.com") { "One list item" } }
li do
text " Another list item"
hr
end
end
end[1]: https://github.com/weavejester/hiccup/blob/master/doc/syntax...
Here's the JSON for a landing page written in my syntax: https://github.com/jazzyjackson/lookalive/blob/master/docs/i...
In another project I use it extensively to mix javascript in with the object syntax as you would with JSX: https://github.com/lookalive-software/geodesy/blob/newfocus/...
The implementation is fairly simple, given JSON returns an HTML string.
https://github.com/lookalive-software/elementary/blob/master...
Hypertext allows you to write HTML from Ruby. https://github.com/soveran/hypertext
rbexy - A Ruby template language inspired by JSX https://github.com/patbenatar/rbexy
imho, hypertext has a great deal of potential especially the DSL.
From the README: Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Vue-like syntax, but with Python!
- Reactivity (made possible by leveraging observ)
- Function components
- Class components with local state and life-cycle methods/hooks
- Single-file components with Vue-like syntax (.cgx files)
- Custom renderers