Comment by osener

4 months ago

Since this is marked as a departure from HTML and has it's own syntax, I think this is a good point to improve upon JSX.

- Remove curly braces from props and children

    <MyComponent name="Joe" onClick=(() => canBeInParanthesis()) />
    <div>userName</div>
    <div>"Text contents"</div>

- Add punning (like how { age: age } becomes { age } in JS)

    const age = 40;
    <MyComponent age />/
    <MyComponent active=true />  // explicit boolean attributes

2 comments

osener

Or (hear me out) we don’t need any DSL that doesn’t add anything while making code just more verbose compared to Js/ts.

How about... inlining children:

    const age = 40;
    const children = [<div ~ "Moe" />, <div ~ "Larry"/>, <div ~ "Curly" />];
    return <div age ~ children />;

Rationale: single child elements are ubiquitous in web dev, but most JSX formatters will require 3 lines of code even if there's a single child.