Coarse Grained (Inferred) Observability for JSX

[thescientist13]

Type of Change

• New Feature Request

Summary

Related to #84 , it would be cool if for something like this

class TodoListItem extends HTMLElement {
  constructor() {
    super();
    this.todo = {};
  }

  render() {
    const { completed, task } = this.todo;
    const completionStatus = completed ? '✅' : '⛔';
    
    return (
      <span>
        {task} <span>{completionStatus}</span>
        
         <button onclick={() => this.dispatchDeleteTodoEvent(this.todo.id)}>❌</button>          
      </span>
    );
  }
}

customElements.define('todo-list-item', TodoListItem);

Details

So the compiled output would look something like this

class TodoListItem extends HTMLElement {
  constructor() {
    super();
    this.todo = {};
  }

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

  attributeChangedCallback(name, oldValue, newValue) {
    if (newValue !== oldValue) {
      this.render();
    }
  }

  render() {
    ...
  }
}

customElements.define('todo-list-item', TodoListItem);

In this case we can automatically infer generate the observedAttributes based on what is getting used in the render function, and then from there compute the an attributeChangedCallback function. 🤩

Details

To be fair, the reason this is considered coarse-grained is because attributeChangedCallback just reruns the render function completely, so all the (inner) HTML is blown out, so not very efficient, but certainly helpful nonetheless IMO!

But... as the name also implies, this means that there could / should be room for fine-grained observability as well, such that we can the compiled knowledge about the template and component and instead run an update function that knows hows to more tactically call textContent or setAttribute to the specific DOM node, rather than just re-computing innerHTML. One thing at a time though. 😅