adding displayName and propTypes to the template directly
DrYSG opened this issue · comments
Currently, I am adding the PropTypes and displayName manually after the call to t7.
I am not sure I 100% like the syntax. But it might be nice to consolidate the temaplate with this meta data. This is one idea I had (looking for a special values[0] in the tag function, and if it is not there, just ignore it.
with an additional field called:
ElementName: "Wrapper"
we could also do an automatic t7.assign() which would also clean up some of the code.
const Wrapper = props => (
t7`${{
displayName: "Wrapper",
propTypes: {
name: React.PropTypes.string.isRequired
}
}}
<div className="WrapperDiv">
<h1>Wrapper-${props.name}</h1>
<Inner name=${props.name} />
</div>
`
);
Wrapper.displayName = "Wrapper";
Wrapper.propTypes = {
name: React.PropTypes.string.isRequired
};
@DrYSG Wouldn't this couple t7 with React? I'm not entirely sure I understand what putting the displayName and propTypes inside the render would give you above defining it outside (as you've done in your example?).
You are correct. I retract this. What makes more sense is that I might want a React specific ea6 wrapper for t7, That I can use a module to export a ReactElement. Where that element would have:
- A display name
- Be assigned an name (so that I can use it as a child for other components in other modules (I might be off here, I am new to React)
- add propTypes.
Something like
<reactElement> = function(<assignnameString>, [proptypes], <className>, protypeString) {
// I have a little trouble filling this in, any ideas
}
..