Compile JSX to custom element (proof of concept)

[thescientist13]

Discussed in #69

^{Originally posted by thescientist13 June 26, 2022}
In thinking about a different approach, what if #66 was explored through JSX? 🤔

JSX is similar to tagged template literals, but per my understanding, doesn't prescribe a specific implementation. So perhaps this could be used to provide an (optional) development experience, through a render function, that can take JSX and the compiler can unwind that into valid custom element lifecycles. So no VDOM here, it would just be vanilla JS.

# input
class Counter extends HTMLElement {
  constructor() {
    this.count = 0;
  }

  dec() {
    this.count -= 1;
  }
  
  inc() {
    this.count += 1;
  }

  render() {
    const count = this;
   
    return (
      <button click={this.dec}>-</span>
      <span>{count}</span>
      <button click={this.inc}>+</span>      
    )
  }
}

# output
class Counter extends HTMLElement {
  constructor() {
    this.count = 0;
  }

  static get observedAttributes() { 
    return ['count'];
  }

  set count() {
    this.render();
  }
  
  dec() {
    this.count -= 1;
  }
  
  inc() {
    this.count += 1;
  }

  render() {
    const count = this;
   
    return `
      <button click=${this.dec}>-</span>
      <span>${count}</span>
      <button click=${this.inc}>+</span>      
    `;
  }
}

Or something like that, the devil is in details and so will want to play around with it, but think I can probably get a prototype whipped up.

Some useful links / references:

• https://github.com/acornjs/acorn-jsx
• https://blog.jim-nielsen.com/2019/jsx-like-syntax-for-tagged-template-literals/

Perhaps this is something built into #29 ?