Need Dynamic HOC Flow help

hoc.js

const myHOC = <Props: {}>(
    Component: React.ComponentType<{}>
): React.ComponentType<Props> (
    (props: Props) = {
        let handlers = genDynamicAdditionalProps(props.eventName)

        // The keys in `additionalProps` are dependent upon `props.eventName` value
        // The values in `additionalProps` are all functions
        
        let propsToPassThru = {...props}
    
        delete propsToPassThru[props.eventName]
    
        // Also removing `props.eventName` from `props`!

        return (
            <Component 
                {...propsToPassThru} 
                {...handlers}
            />
        )
    }
)

Yeah.... eventName can basically be any DOM event (when Component is a DOM element) or literally any function prop (when Component is a React Component). So it seems like I've hit the max of static typing. I do know eventName is a string, but that's about it.

I was assuming it wasn't possible to statically type, but I wanted to make sure there wasn't any fancy syntax since I do in theory know that the initial props include eventName, but exclude handlers and the resultant props exclude eventName, but include handlers.

Thanks for the help!

Hmm, it’s hard to say without know the details of why the code is this way and what the other constraints are. It seems like something must be knowable statically, since whoever wrote the inner component’s code had to develop an idea of which props to expect in which cases and whoever uses the wrapped component must have an idea of which props other than th event name they need to pass in.

So anyways, if you want to go into more detail on why this exists I’m happy to try to help. Or if you’re happy to drop it, then so am I. Best of luck with your project either way!

Sorry, I missed your post! I would love to figure out a way to make it work if you're up for it. It'll certainly help me learn more Flow along the way.

So what I put in the gist is stripped down version of the full code, which is part of benmvp/react-composite-events#9. Essentially there's a function that takes a configuration of options that ends up returning the HOC above. So props.eventName in the example above ends up being props[eventPropName], making it even more dynamic.

In case you're curious what this is all about, here are the docs for the utility function: https://github.com/benmvp/react-composite-events/blob/master/src/compose.md

Thanks for the help!