3 ms·
even simpler, I have always wished that JSX/JSX-alikes would serialize to something like a tuple like `(tag: string | Component, attributes: Record, children: L
by sarahdellysse 4y ago
even simpler, I have always wished that JSX/JSX-alikes would serialize to something like a tuple like `(tag: string | Component, attributes: Record, children: List)`, so your example would start looking something like this:
<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
- jazzyjackson 4y ago"JSX-inspired" caught me off gaurd, the only thing JSX could inspire me to do was build something so I never had to touch it again, I landed on something similar to what you have here, I call it "Elementary" Here's the JSON for a landing page written in my syntax: https://github.com/jazzyjackson/lookalive/blob/master/docs/index.elem.json 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/source/lib/paintmask.js 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/elementary.ts https://github.com/lookalive-software/elementary/blob/master...
- joeldrapper 4y agoRuby has blocks, so in Phlex, you’d write it like this using methods and keyword arguments. 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
- mechanicum 4y agoYou’re halfway to Clojure’s hiccup syntax[1] there. [1]: https://github.com/weavejester/hiccup/blob/master/doc/syntax.md https://github.com/weavejester/hiccup/blob/master/doc/syntax...