Automatic (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);

Could we automatically generate the observedAttributes ? Maybe even the attributeChangedCallback? 🤩

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) {
      if (name === 'todo') {
        this.todo = JSON.parse(newValue);
      }

      this.render();
    }
  }

  render() {
    ...
  }
}

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

Some thoughts

• how to automatically render when just touching state? e.g. calls to an update / patch method vs this.render()?
• can we leverage setters and getters (attributes vs properties) so addTodo doesn't also have to call this.render()?
• is this closing in on fine grained reactivity and / or #11 ? Also see next section 👇

---

Bonus Points: Could we get some sort of reactivity, so the render function would only update the specific place in the DOM, not the entire innerHTML.