t7

t7 copied to clipboard

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:

1. A display name
2. 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)
3. add propTypes.

Something like

<reactElement> = function(<assignnameString>, [proptypes], <className>, protypeString) {
// I have a little trouble filling this in, any ideas
}
..