GSX from ghost-lang

[davedbase]

This is an interesting package suggested by @mlrawlings on Discord: https://github.com/jamiebuilds/ghost-lang#elements-gsx

let MyComponent = fn (props) {
  let {prop, items} = props

  <OtherComponent { prop, bar: true }>
    let target = "world"
    <.h1>"hello {target}"</.h1>
    <.ul>
      for (items as item) {
        <.li { key: item.id }>item.name</.li>
      }
    </.ul>
  </OtherComponent>
}

[orenelbaum]

This is a weird version of Aster!
This is how it would look in an Aster like DSL:

const MyComponent = (props) => {
  const {prop, items} = props

  <OtherComponent prop={prop} bar={true} >
    const target = "world"
    <h1>hello {target}</h1>
    <ul>
      for (const item of items) {
        <li key={item.id} }>{item.name}</li>
      }
    </ul>
  </OtherComponent>
}

I've been advocating for Aster forever, I think that this kind of syntax is the natural progression of JSX and is by far the most valuable syntax we can implement and the one that will improve DX the most. It might be a bit tricky to implement though with how Solid works, I'm not sure.
Other than the ideas we have in Aster, we also have here two other ideas we can be relevant:

• This thing - <OtherComponent { prop, bar: true }>. Interesting idea, very different from JSX, maybe worth exploring IMO. Also this idea is not really related to the rest of it.
• Marking text as strings. Aster deals with it differently by treating one liner children as text and for multiline text you have to prefix each line with #. I think that both are interesting but both are probably not ideal, we can maybe find a better solution. Either it touches one of the things that I think would be harder to get right with this approach, the approach to how you mark text in a code first approach.