JSX Feature: Dynamic Attributes

[lxsmnsyc]

This feature would allow JSX to accept dynamic attributes rather than static attributes.

const useName = isInForm() ? 'name' : 'id';

<input [useName]={inputName} />

The API allows it to be closer to JS rather than XML/HTML, which means that with this feature, we can also use other values like Symbols:

<Button [Symbol('INTERNAL_FLAG')] />

Random:
We can also expand the usage for namespaces, for example, the use directive:

function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}

<div class="modal" use:[clickOutside]={() => setShow(false)}>
  Some Modal
</div>