3 ms·
Speaking of writing javascript instead of JSX, I'm a big fan of the hyperscript approach: var ListComponent = () => { let count = 0, selected = n
by fouc 11mo ago
Speaking of writing javascript instead of JSX, I'm a big fan of the hyperscript approach:
var ListComponent = () => {
let count = 0, selected = null
return {
view: ({attrs: {items}}) =>
m("div", [
m("p", "Clicked: " + count + " times"),
m("ul", items.map(item =>
m("li", {
onclick: () => { count++; selected = item },
style: {cursor: "pointer", color: item === selected ? "blue" : "black"}
}, item)
)),
selected && m("p", "Selected: " + selected)
])
}
}
- Rohansi 11mo agoThis looks like what JSX compiles into. You can do the same (or similar) with React by using `React.createElement` instead of `m` (or just alias it) so you don't need JSX.
- tills13 11mo agofwiw I think this is worse than Marko in terms of syntax and certainly in terms of readability. For all its flaws, HTML / XML / like syntax is such a good declarative way of writing UI imo. React would not be as popular as it is today were it not for JSX. Like the other reply to your comment said: this is effectively identical to what JSX compiles to assuming your jsxPragma is `m`
- dualogy 11mo ago> Speaking of writing javascript instead of JSX, I'm a big fan of the hyperscript approach Speaking of writing JS instead of JSX or your example, I like the vanjs.org approach: const Hello = () => div( p("Hello"), ul( li("World"), li(a({href: "https://vanjs.org/"}, "VanJS")), ), ) van.add(document.body, Hello())
- insin 11mo agoJSX was such a breath of fresh air after having written and maintained apps which used both of these formats for years (and also having written a library which supported both of them for reusing the same templates on the server and in the browser) - it's the commas! I'm glad it's everywhere now. But that was also back in the days when trailing commas at the end could break things, JavaScript editor support was relatively poor, and tooling wasn't where it is now (knowing your code is once again valid because the autoformatter just kicked in).
- mb2100 11mo agoSince we're sharing HTML in JS syntaxes. Don't forget JS tagged template literals like https://jsr.io/@mastrojs/mastro/doc/~/html https://jsr.io/@mastrojs/mastro/doc/~/html
- nymanjon 11mo agoMastro looks like what I do for my offline-first, rendered from Service Workers. I just compose html template string literals and stream them back to the front end. The lib I use for HTML is a bit more powerful though. It is a very elegant way to program. https://github.com/jon49/Soccer https://github.com/jon49/Soccer
- mb2100 11mo agoThanks, this one? https://github.com/jon49/html-template-tag-async https://github.com/jon49/html-template-tag-async Looks very similar indeed! What makes it "more powerful" than Mastro's html template?
- lf-non 11mo agoYes, I also like relying on just functions. I have found aberdeenjs a better dx than hyperscript. https://aberdeenjs.org/ https://aberdeenjs.org/
- aatd86 11mo agooh didn't know that one. Been building something that shares the same goals although I can see it is different in many ways. Interesting.
- kevlened 11mo agoYour example template and the others here are almost jsx after it's compiled (handwritten below). This jsx discussion seems more about removing the compile step, which you can do with https://github.com/developit/htm https://github.com/developit/htm import { createElement as m } from "your-jsx-compatible-library"; var ListComponent = () => { let count = 0, selected = null; return { view: ({ attrs: { items }}) => m("div", null, m("p", null, "Clicked: " + count + " times"), m("ul", null, items.map((item) => m("li", { onclick: () => { count++; selected = item; }, style: { cursor: "pointer", color: item === selected ? "blue" : "black" }, }, item) )), selected && m("p", null, "Selected: " + selected) ) }; };