Allow specifying prop types with automatic type casting from attr value string into the underlying React component. Remove propTypes requirement.

[janebitovi]

for: (R2WC-19)
for: (R2WC-17)
for: (R2WC-20)
for: #13

Passing the string to new Function would be useless in most cases (since there's no local context) and would be referencing global functions internally to do anything useful...
So I skipped the eval and use the attr value to directly check for a function on window (or global) (if they exist) and pass that value instead.

Sucks that it has to be on global buuut it's still very useful if needed on the underlying react component.

Thoughts?

New functionality documented here:
https://github.com/bitovi/react-to-webcomponent/blob/a7bf224cd5406d1cdd50a4397e514c6042173fcc/docs/api.md

[janebitovi]

Currently we only use the keys on propTypes (and they're necessary for now)

If we move forward with https://bitovi.slack.com/archives/C031D2P4SUA/p1659636864346109 though, then maybe instead of merging this as-is,
(we're assuming it's a global function reference based on the attribute beginning with on- or handle-)
we can take a closer look at the values on propTypes and do make the assumption for any prop that's a function type automatically regardless of the name, and, similarly, per the proposal, we'll be allowing the consuming user to specify that it's a function reference when propTypes are not used in the underlying react component.

tl;dr:
don't merge this as is IF the linked proposal is approved, if it's not, then this is still independently ready for review/discussion

[christopherjbaker]

Please only do this for on-, not for handle-; on- is the convention and is the only style in use by official elements, mimicking DOM usage too.

As to the functionality: Limited as it may be, I feel like it would be ideal if it behaved exactly as regular dom events do. My thought was that we could pass the input into new Function and predefined what arguments they can use (dom uses event only afaik). Something like new Function('event', value), then they could set on-click="console.log(event)" and it would work just like any other element. More importantly, this allows them to control how that global function is called: on-click="doThing("hello", event.value)", something they lose if all they can specify is the name of the function.

[janebitovi]

Re: dropping handle-
The proposal we're discussing in slack would also have us drop on- b/c type specifications would say when to use function handoff behavior (so any param can be a function instead of relying on hacky sentinel values) which is way better.
(fwiw: I added handle- because the react docs use handlePrefixedCBFunctions in their examples)

---

Re: Using custom events in the translation layer
Yeahhhh it's not uncommon to curry on the fly like onData={cbParam => myFn("curry", cbParam)} but in our case myFn would already have to be specially placed on window... So either way, the webcomponents dev is forced to dump a function to window to do anything useful...

The added indirection and js engine's inability to optimize eval'd functions makes everything slower too... Plus the implementation on our side of using events just for the translation layer -- then making sure the event is in scope of the callback... you're adding a ton of overhead and gross code to maintain.
I'm not sure the tradeoff is a gain here...

BUT that did give me an idea to improve something:
we should call the global cb function with this set to the web component instance so their global function at least has the opportunity to map updates back to the correct parent when there are multiple instances.

---

Let's hop on a call asap to hash out the plans! :)

[janebitovi]

New functionality documented here:
https://github.com/bitovi/react-to-webcomponent/blob/a7bf224cd5406d1cdd50a4397e514c6042173fcc/docs/api.md

also removed dashStyleAttributes and left room for a future option for users to specify their own camelCasedProp -> kebab-attr mapping per Justin's request.

[luantrasel]

Was this already merged and released? I'm using v1.7.2 and it's not working