Why JSX ppx overrides makeProps?

1

Hey,

If a react component contains a prop with a conflicting name with makeProps field, the component prop overrides the react makeProps. Why does it work like that?

Should other tools that work on top of JSX provide similar behaviour?

Thanks!

2

Do you have any more visual code example? Not sure what behaviour you are describing… do you combine @react.component with a makeProps function?

3

Sure, I missed giving some context.

I’m working on styled-ppx and one of the functionalities that is implemented is to extend makeProps with the dynamic props. Let me show an example of what that means:

module Button = [%styled.button (~size) => [|
	switch (size) {
    | `Small => [%css "padding: 4px 10px"]
    | `Big => [%css "padding: 20px 40px"]
  }
|]];

Let me introduce a dynamic component, there’s a lot going on here, but the key concept here is about the ~size argument that behaves as a makeProp under the hood. So, in this case it gets generated something like:

module Button = {
	type makeProps('size) = {
	  ...all the makeProps from React,
	
	  size: 'size
	};

	let make = (~size: makeProps('size)) => {

  };
};

The reason for that is that styled components are wrappers around React components and they need to maintain the makeProps API underneath.

One of the issues here is the collision between “custom” props and makeProps, since makeProps are meant to apply to all HTML elements (would be neat to have attributes per element, but that’s another story).

My post here was to ask what would be any solution better than the current behaviour, I warn the user that there’s a conflict between props.