React Wrappers for PFE

[bennypowers]

I wrote a short demo showing off semi-automated react wrappers for PFE

https://codesandbox.io/p/sandbox/pfe-react-wrappers-3g6x6r?file=%2Fsrc%2FApp.tsx%3A13%2C1

In the future, these wrappers will be constructed and shipped automatically.

Here's an abridged version of the demo component:

function App() {
  const [count, setCount] = useState(0);

  const inc () => setCount((count) => count + 1);

  return (
      <Card rounded>
        <p>The <strong>count</strong> is <output>{count}</output></p>
        <Button slot="footer" onClick={inc}>Increment</Button>
      </Card>
  );
}

So you can see that from the react dev's perspective, they don't really have to think about custom elements all that much here.

Note that as of this writing the demo brought a potential bug in SlotController to light: hasSlotted does not update the state of the DOM when rendered from React in this way. We will deal with that in a separate issue.