4 ms·
Kind of interesting,i would like it if it had a cleaner fallback to a non JSX version. If you one day decide to not use rux ~~~ h('div.example', [
by hhthrowaway1230 4y ago
Kind of interesting,i would like it if it had a cleaner fallback to a non JSX version. If you one day decide to not use rux
~~~
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')
])
])
);
~~~
- deleted 4y ago[deleted]
- sarahdellysse 4y agoeven 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...