Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

map className to class when updating htmlAttributes #205

Merged
merged 7 commits into from
Dec 21, 2016

Conversation

koenpunt
Copy link
Contributor

@koenpunt koenpunt commented Nov 18, 2016

This introduces a mapping of React attributes (e.g. className) to html attributes (class).
If other attributes have to be mapped later on they can be added easily to the HTML_TAG_MAP object.

should fix #204

@CLAassistant
Copy link

CLAassistant commented Nov 18, 2016

CLA assistant check
All committers have signed the CLA.

@koenpunt koenpunt force-pushed the html-attributes-class branch from 694fdf8 to 917fea9 Compare November 19, 2016 00:14
@koenpunt koenpunt changed the title map class to className when server rendering map className to class when updating htmlAttributes Nov 19, 2016
@koenpunt
Copy link
Contributor Author

Ping ✨

@cwelch5
Copy link
Contributor

cwelch5 commented Dec 2, 2016

@koenpunt Thanks for your patience. If you look at how we handled things like charset or http-equiv for meta tags, the API is taking in an html string that we map to React. Could we follow this same convention and put "class": "className" in the REACT_TAG_MAP?

expect(htmlTag.getAttribute("class")).to.equal("myClassName");
expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("class");
});

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also a client and server side test would be optimal. Thank you.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed the server section in the test file, will look into adding a test

@koenpunt
Copy link
Contributor Author

koenpunt commented Dec 3, 2016

REACT_TAG_MAP is for conversion the other way around, and looking up a property by its value isn't too efficient IMO.

@koenpunt
Copy link
Contributor Author

koenpunt commented Dec 3, 2016

Updated per request

@cwelch5
Copy link
Contributor

cwelch5 commented Dec 3, 2016

All the other Helmet props take html keys in their objects, but htmlAttributes will be the only one that takes React keys, this could be confusing for people as the API doesn't match:

            <Helmet
                htmlAttributes={{"lang": "en", "amp": undefined, "className": "testclass"}}
                title="My Title"
                meta={[
                    {"charset": "utf-8"},
                    {"http-equiv": "content-type", "content": "text/html"}
                ]}
            />

@koenpunt
Copy link
Contributor Author

koenpunt commented Dec 3, 2016

All the other Helmet props take html keys in their objects

You got a point there. Makes me think that these html keys actually should've been React keys in the first place. Would you accept a PR to flip that, of course with deprecation warnings in place?

@cwelch5
Copy link
Contributor

cwelch5 commented Dec 4, 2016

@koenpunt I'd rather not change the whole API for this one feature. If you could switch your solution to use REACT_TAG_MAP it would be the simplest.

@cwelch5
Copy link
Contributor

cwelch5 commented Dec 4, 2016

Having just html keys seems more declarative to me because what you are putting in is exactly what you will get out. Because these keys are in an object and not passed directly to the component we aren't forced to use camel casing like React props. And if you are rendering on the server as a string you never have to do any conversion.

@koenpunt
Copy link
Contributor Author

koenpunt commented Dec 8, 2016

Because these keys are in an object and not passed directly to the component we aren't forced to use camel casing like React props.

Why is it that generateTagsAsString is using its own kind of templating instead of using renderToStaticMarkup? I know that renderToStaticMarkup is in react-dom/server, so obviously not to be (or even can't be) used on the client, but I don't believe the toString() of Helmet components is ought to to be used on the client?

@cwelch5
Copy link
Contributor

cwelch5 commented Dec 8, 2016

@koenpunt excellent point, we have been meaning to convert the logic to use renderToStaticMarkup. Which would take React keys... although, we'll have to test out how this affects all the different tag types and we'll have to put in logic that satisfies cases like innerHTML and cssText.

We don't use the toString() method on the client. That's purely for the server.

@cwelch5
Copy link
Contributor

cwelch5 commented Dec 20, 2016

@koenpunt Just merged a PR that is using itemprop as a key for title attributes. If you could flip this to convert class to className, I can pull this in. Thanks.

@koenpunt koenpunt force-pushed the html-attributes-class branch from 0b64ebd to f393dc8 Compare December 20, 2016 09:04
@koenpunt koenpunt force-pushed the html-attributes-class branch from f393dc8 to 6de3b64 Compare December 20, 2016 09:05
@koenpunt
Copy link
Contributor Author

Updated, need me to squash some of these commits?

Also I expect people complaining about the inconsistency between class/className, but we'll see :)

@cwelch5 cwelch5 merged commit ef47e8f into nfl:master Dec 21, 2016
@koenpunt koenpunt deleted the html-attributes-class branch December 21, 2016 18:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

htmlAttributes with className doesn't work with isomorphic applications
3 participants