Add support for command invokers API

[lukewarlow]

Summary

Command Invokers are shipping in chrome soon and are now in the HTML spec, this adds support to React.

Fixes #32478

How did you test this change?

I've not yet the docs are out of date and refer to a UMD build that no longer exists.

[eps1lon]

Awesome! Can you provide a fixture that illustrates their usage? You can use https://react.new/ and then specify builds from the ci/codesandbox check on this PR

[react-sizebot]

Comparing: aac177c48439ab294f72e8b5a85059daa3f8a5ee...7ac0be16b2f4615821b52814bd00b2c27d689414

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	+0.08%	518.54 kB	518.95 kB	+0.08%	92.45 kB	92.52 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	+0.07%	589.31 kB	589.71 kB	+0.07%	104.91 kB	104.99 kB
facebook-www/ReactDOM-prod.classic.js	+0.06%	642.76 kB	643.17 kB	+0.07%	113.01 kB	113.08 kB
facebook-www/ReactDOM-prod.modern.js	+0.06%	633.08 kB	633.49 kB	+0.07%	111.44 kB	111.51 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 7e636fd

[lukewarlow]

https://codesandbox.io/p/sandbox/happy-wilbur-crtsz9 - So this will show the in-built commands work aswell as showing that custom ones work, but for some reason only onCommandCapture works, not onCommand?

I'm assuming I'm missing something in this PR to make onCommand work as expected. Though command events don't bubble so perhaps this is just due to React's synthetic events?

Btw this will only work in Chrome Canary with the experimental flag enabled right now. (It's shipping to stable 135)

[eps1lon]

The target of these events won't be the element with the onCommand listener but the element that is the designated commandFor element. Not sure how to model that with our current event infrastructure. That doesn't explain why it doesn't work for commandFor="app" though.

[lukewarlow]

That makes sense right? You do <div id="foo" onCommand={handle}><button commandFor="foo" command="--foobar">...</button> and clicking the button causes the browser to fire a (non-bubbling) command event on the foo div. That shouldn't need special handling in react right?

[lukewarlow]

Though command events don't bubble, so I'm guessing I'm missing something somewhere to make the non capturing listener work with React's delegated event system?

[eps1lon]

That's why you have to attach the listener to the dom element referenced in commandFor not the one where we want to listen for command events.

[lukewarlow]

I'm going to go ahead and close this. I frankly don't have the energy to deal with React's legacy event system. If anyone else wishes to pick this up feel free to, I'm happy to explain how the API works.