I found an issue with JSX4 and styled-ppx. I’m pinging @cristianoc @cknitt @moondaddi for help just in case you can give some guidance here.
styled-ppx has 2 ways of defining components: static and dynamic.
- static:
module Static = %styled.div("display: block")
- dynamic:
module Dynamic = %styled.div((~param1) => "display: $(param1)"))
In both cases, the resulting code would need to create a div and expose all props (previously called makeProps) as props of the new defined component (Static or Dynamic in this example)
This is currently done without using [@react.component] and generating makeProps with bs.deriving abstract, so then props become an object (which match the represetation in JavaScript) and can use the bs.deriving access (propNameGet(props)) which gets translated into props.propName.
This method was preferred from other approaches for minimize the JS output, even thought the code generation might suffer a bit (because we render all makeProps to all styled components).
So, this works great for both cases. In static only makeProps, in dynamic makeProps + any parameter the user defined in the payload.
Since I’m exploring the JSX4 support, this might need to change a bit.
Since I need to expose all JsxDOM.domProps, using [@react.component] is discarded.
The approach left was to keep the generation of props the same way, removing the bs.deriving abstract and treat it as a record field, but I ran into an issue where I generate a record type (the same shape as ReScript expects) and I got an error of Some required record fields are missing: [...the list of all domProps]. I suspect have something to do with not having the attribute react.component, but I’m unsure about those details.
Let me paste the generated code in case my explanation is poor:
For static components (works perfectly):
module OneSingleProperty = {
type props = JsxDOM.domProps
let make = (props: props) => {
// .. stuff
React.createElement("div")
}
For dynamic components (fails at the crash descried above):
Pasting the reason code to discard any translation issue. Her
module DynamicComponent = {
type props('var) = {
[@res.optional]
ref: ReactDOM.domRef,
[@res.optional]
children: React.element,
[@res.optional]
about: option(string),
// ... all makeProps with `about?: option(xxx)`
var: 'var,
};
let make = (props: props('var)) => {
let className = styles(~var=props.var, ());
let stylesObject = {"className": className, "ref": props.ref};
let newProps = assign2(Js.Obj.empty(), Obj.magic(props), stylesObject);
ignore(deleteProp(newProps, "var"));
createVariadicElement("div", newProps);
};
};
I’m got paranoid at the beginning where I wasn’t sure if the parsetree from Reason translated well (classic ppx issue nowadays) but I think there’s no problem in the translation.
The questions I have are:
Thanks for reading until here.