JSX Syntax Enhancements and Features

[thescientist13]

Overview

Just an umbrella grouping of syntax specific features for JSX support coming out of #73 . They should be broken out into their own threads / issues and linked back to here, but that can be done over time.

Review Full JSX Feature Set

Should review the JSX Specification and see if there is anything else I'm missing or that would be a "show stopper"
https://facebook.github.io/jsx/

Coarse Grained Inferred Observability ✅

Tracked in

1. Coarse Grained (Inferred) Observability for JSX #87
2. Fine Grained Inferred Observability for JSX #108

From this comment, seeing it all laid out, could be some real neat opportunities for some automatic observability when compiling down. At least the observerAttributes?

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

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 partial hydration (side effect free custom elements, e.g. tree shaking) #11 ? Also see next section 👇

Loops

Be able to do something like this

render() {
  const { todos } = this;
  return (
   <ol>
      todos.map(todo => <li>{todo.label}</li>)
    </ol>
  )
} 

Literal This Evaluation

Tracked In - #88

Support having something like this syntax

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

I think I was getting this error when I tried

ReferenceError: __this__ is not defined

Form Controls

Tracked In - #89

Boolean Attributes

Like a checked attribute

render() {
  const { completed, task } = this.todo;
  const checked = completed ? 'checked' : '';

  return (
    <input class="complete-todo" type="checkbox" checked/>
  );
}

To my knowledge, JSX does not support this syntax

<input type="checkbox" {isChecked} />

Form Submission

Would like be able to do something like this

class Todo extends HTMLElement {
  addTodo(e) {
    e.preventDefault();
    ...

    this.render();
  }

  render() {
    return 
      <form onsubmit={this.addTodo}>
        <input class="todo-input" type="text" placeholder="Food Shopping" required/>
        <button class="add-todo" type="button" onclick={this.addTodo}>+ Add</button>
      </form>
    );
  }
}

Right now it works, but by accident I think, and seeing this error in the console

Fine Grained Inferred Observability 🚧

As a companion to #97, currently we just compile down to an innerHTML call and just call this.render(), like with an event handler. attributes.

class MyComponent extends HTMLElement {
  render() {
    this.innerHTML = `...`;
  }
}

But obviously that blows everything away, so it would be nice to find something that could be a little more selective, a la like lit-html works. Tracked in #108

---

Should also take into consideration with Shadow DOM - #73 (comment)

So this is interesting. Realized that although we were rendering JSX into a Shadow Root, I was not actually return the content into a declarative shadow root. So in the control group for example I had this

# before
class CounterControlShadow extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' });
    }
    this.render();
  }

  increment() {
    this.count += 1;
    this.render();
  }

  decrement() {
    this.count -= 1;
    this.render();
  }

  render() {
    const { count } = this;

    this.shadowRoot.innerHTML = `
      <div>
        <h3>CounterControlShadow</h3>
        <button id="dec" onclick="this.parentElement.parentNode.host.decrement()"> - </button>
        <span>You have clicked <span id="count">${count}</span> times</span>
        <button id="inc" onclick="this.parentElement.parentNode.host.increment();"> + </button>
      </div>
    `;
  }
}

customElements.define('wcc-counter-control-shadow', CounterControlShadow);

So when I "fixed" the render function to this

  render() {
    const { count } = this;

    this.shadowRoot.innerHTML = `
      <template shadowroot="open">
        <div>
          <h3>CounterControlShadow</h3>
          <button id="dec" onclick="this.parentElement.parentNode.host.decrement()"> - </button>
          <span>You have clicked <span id="count">${count}</span> times</span>
          <button id="inc" onclick="this.parentElement.parentNode.host.increment();"> + </button>
        </div>
      </template>
    `;
  }

And then was getting this this error in the browser on load

So this could be an issue with continuously redeclaring the <template> tag when setting innerHTML? not sure if this would get fixed with more explicit / less naive reactivity model, but found some links that might be relevant - https://stackoverflow.com/questions/67932949/html-template-shadow-dom-not-rendering-within-handlebars-template .

CSS

Being tracked in #136

From experience, JSX does not support <style> tags in JSX (need to link to a source) and so would like to align with #33 to figure out a way to get first party CSS support into custom elements in an SSR and platform compatible way, like with Declarative Shadow DOM.

Destructured this Expressions

Support destructured this references

render() {
  const { id  } = this.todo;

  return (
     <button onclick={() => this.dispatchDeleteTodoEvent(id)}>❌</button>
  );
}

Bundling

How to best give JSX contents / metadata to consumers (URLs, compiled source, etc)? Currently we are returning the source and original URL as metadata.

Do we also need to do anything about the .jsx extension file inside source files? Or just example of how to use the jsx-loader as a transformer for any other system.

Fragment

Being tracked in #137

JSX defines a "empty" tag to help with needing to always have a render function return a single parent element

render() {
  return (
    <>
      <h1>Hello World</h1>
      <p>This is some content</p>
    </>
  )
}

Definition Name as Tag

JSX supports using the the component class definition would enable something like this

import Header from './header.js';

class Layout extends HTMLElement {
  render() {
    return (<Header/>
  }
}