Literal `this` Evaluation and Derivative References

[thescientist13]

Type of Change

• New Feature Request

Summary

Coming from #84 , wanted to track support for having something like this

render() {  
  return (
    <h1>You have {this.todos.length} TODOs left to complete</h1>
  )
} 

---

Would also want to make sure this works with inferredObservability too, e.g.

<span>The count is {this.count.get()}</span>

Based on some initial testing in #233 , was seeing this issue where rootNode().host was not resolving as expected (at least with Shadow Roots)

Details

I think I was getting this error though when I tried

ReferenceError: __this__ is not defined

---

I think this would also handle other cases like this, but will need to double check

render() {
  const { user } = this;
  
  return (
    <button onclick={(e) => { this.deleteUser(user.id) }}>Delete User</button>
  )
}

Also would be good handle derivative this references as well, but also make sure we don't track them for observability either. Just make sure we are looking for this in all possible places, e.g.

render() {
  const { count, predicate } = this;
  const conditionClass = predicate ? 'met' : 'unmet';

  return (
    <span class={conditionClass}>{count}</span>
  )
}

Also, this usage for standardizing onclick in TypeScript land - #266

[thescientist13]

I think we're also missing this as part of our DOM depth substitutions work, as we seem to be only tracking attributes
https://github.com/ProjectEvergreen/wcc/blob/0.19.0/src/jsx-loader.js#L48