Compile JSX to custom element (reactive) lifecycles

[thescientist13]

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 ?

[thescientist13]

JSX would also support this.

import Header from './header.js';
import Footer from './footer.js';

class Layout export HTMLElement ?{
  ...
  
  render() {
    return (
      <Header/>
      <h1>Hello World!</h1>
      <Footer/>
    )
  }
}

The compiler would figure it out from the custom element definition and so would turn into

import Header from './header.js';
import Footer from './footer.js';

class Layout export HTMLElement ?{
  ...
  
  render() {
    return (
      <wc-header></wc-header>
      <h1>Hello World!</h1>
      <wc-footer></wc-footer>
    )
  }
}

[thescientist13]

Made pretty good progress on this in #73 , so going to turn this into an issue and create new discussion to track some of the syntax and feature ideas I'm tracking in the PR.

[thescientist13]

Coming out of #87, following up with #108

[thescientist13]

Follow along with #84 as we carry through on this, but the basic premise for this is already in progress.