re: syntax, I agree, it's stopped me from ever trying React/JSX-based frameworks, which I am sure is an over-reaction.
I have a POC syntax extension (babel parser fork) I named JSXG where I introduced "generator elements" which treats the body of the element as a JS generator function that yields JSX elements.
The simple/naive implementation of just running the generator was okay, but I (perhaps prematurely) worried that it would be not ideal to have the resulting list of child elements be actually dynamic-- as opposed to being fixed size but have false/null in place of "empty" slots and also using arrays for lists made by loops.
So, I also had a transform that followed conditional branching and loops etc. and made a template of "slots" and that resulted in a stable count of children, and that improved things a whole lot.
It's been a while since I revisited that, I should try and find it!
Comparisons below.
Aberdeen:
$('div', () => {
if (user.loggedIn) {
$('button.outline:Logout', {
click: () => user.loggedIn = false
});
} else {
$('button:Login', {
click: () => user.loggedIn = true
});
}
});
$('div.row.wide', {$marginTop: '1em'}, () => {
$('div.box:By key', () => {
onEach(pairs, (value, key) => {
$(`li:${key}: ${value}`)
});
})
$('div.box:By desc value', () => {
onEach(pairs, (value, key) => {
$(`li:${key}: ${value}`)
}, value => invertString(value));
})
})
JSX:
{user.loggedIn ? (
user.loggedIn = false}
>
Logout
) : (
user.loggedIn = true}>
Login
)}
By key
{Object.entries(pairs).map(([key, value]) => (
{key}: {value}
))}
By desc value
{Object.entries(pairs).map(([key, value]) => (
{key}: {invertString(value)}
))}
JSXG:
if (user.loggedIn) {
yield user.loggedIn = false}
>
Logout
} else {
yield user.loggedIn = true}>
Login
}
By key
for (const [key, value] of Object.entries(pairs)) {
yield
{key}: {value}
}
By desc value
for (const [key, value] of Object.entries(pairs)) {
yield
{key}: {invertString(value)}
}
Edit:
Come to think of it, I think it may have been ... or even (:O gasp) ....