Feature/issue 87 jsx automatic observability

[thescientist13]

Related Issue

resolves #87

Summary of Changes

1. Scan render and constructor functions for usage of this to generate observedAttributes and attributeChangedCallback

For example, this

export default class Greeting extends HTMLElement {
  constructor() {
    this.name = '';
  }
  
  render() {
   const { name = 'World' } = this;
 
   return (
     <h1>Hello ${name}!</h1>  
  }
}

customElements.define('my-greeting', Greeting);

Would produce this

export default class Greeting extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    this.name = '';
  }
  
  render() {
   const { name = 'World' } = this;
 
   this.innerHTML = `<h1>Hello ${name}!</h1>`;
  }
}

customElements.define('my-greeting', Greeting);

Use it as

<my-greeting name="WCC"></my-greeting>

See a demo at https://github.com/thescientist13/todo-app/pull/3

TODOs

1. [ ] Tests
2. [ ] Match this usages at the top of render function
   • const showTodo = this.todo.completed ? true : false;
   • const showTodo = this.todo.completed;
3. [ ] Match this usages in return of render function (JSX) <span>{this.todo.description}</span>
4. [ ] Match this usages at top of constructor in if or ternary statements
5. [x] Try and get an example of attributeChangedCallback
6. [ ] Documentation
7. [ ] Other cases?

Questions

1. [ ] Currently this assumes attributes map to properties. Need to distinguish the two?
2. [ ] Do we need to match in both render and constructor?
3. [ ] Check if observedAttributes or attributeChangedCallback exists, and merge? Or defer to what already exists?
4. [ ] better way to determine value type in attributeChangedCallback?