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.

Sign up for GitHub

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

Jump to bottom

Helmet 5.0.0: The no-API release #246

Merged

doctyper merged 52 commits into master from feature/declarative-api

Mar 21, 2017

Contributor

doctyper commented Mar 16, 2017 •

edited

Loading

Helmet 5

@cwelch5 and I got inspired during React Conf 2017 and worked together to overhaul the Helmet API. This release will replace the current API with, well, no API (...sort of).

Helmet 5 will allow you to rewrite this:

<Helmet
    title="My Title"
    meta={[
        {name: "description", content: "Helmet application"}
    ]}
/>

to this:

<Helmet>
    <title>My Title</title>
    <meta name="description" content="Helmet application" />
</Helmet>

That's it. There's no need to pass in props or large objects / arrays. Helmet now takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

Minimal API

The Helmet API has been reduced to just two optional convenience props and an optional callback:

<Helmet
    defaultTitle="My Default Title"
    titleTemplate="MySite.com - %s"
    onChangeClientState={(newState) => console.log(newState)}
/>

Reference Example

For a more concrete example, here is the current README example converted to Helmet 5:

<Helmet
    titleTemplate="MySite.com - %s"
    defaultTitle="My Default Title"
    onChangeClientState={(newState) => console.log(newState)}
>
    <html lang="en" amp />

    <title itemProp="name" lang="en">My Title</title>

    <base target="_blank" href="http://mysite.com/" />

    <meta name="description" content="Helmet application" />
    <meta property="og:type" content="article" />

    <link rel="canonical" href="http://mysite.com/example" />
    <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes-"72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />

    <script src="http://include.com/pathtojs.js" type="text/javascript" />
    <script type="application/ld+json">{`
        { "@context": "http://schema.org" }
    `}</script>

    <noscript>{`
        <link rel="stylesheet" type="text/css" href="foo.css" />
    `}</noscript>

    <style type="text/css">{`
        "body {background-color: blue;} p {font-size: 12px;}"
    `}</style>
</Helmet>

Todo

We have a few more items to check off, but we are excited for this release!

Rewrite Helmet API
- Maintain backward compatibility with Helmet 4
- Ensure unit tests pass using either API
- Document the new API
Add Helmet.renderStatic() alias to Helmet.rewind() to reduce confusion on what it does
Add a {Helmet} export for full ES Module compatibility
Add support for <body> attributes
Use requestIdleCallback for DOM writes

Preview

Please feel free to help us out by installing and test-driving our preview release. Feedback is much appreciated!

yarn add react-helmet@next

or:

npm install react-helmet@next

cwelch5 and others added 30 commits

March 14, 2017 12:46


          (feat) - new API to proved actual head tags as children to Helmet cre…

170fbb1

…ating a more declarative API. Fully backwards compatible.


          test: Update tests to use declarative API

6cacc3d


          Converting api -> title unit tests.

792665d


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

4ec3fad

…t-helmet into feature/declarative-api


          ESLint fix.

5f62910


          Duplicate prop

a2f533e


          title attributes unit tests

c60efc6


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

add215d

…t-helmet into feature/declarative-api


          Update tests to use declarative API

e073a3f


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

157f3c2

…t-helmet into feature/declarative-api


          ESLint fixes.

0318d34


          Merge branch 'feature/declarative-api' of github.com:nfl/react-helmet…

13a00bc

… into feature/declarative-api


          ref -> rel

dcd977e


          html Attributes unit tests

a16ecb3


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

b6ce9f0

…t-helmet into feature/declarative-api


          fix lang warning

993a52f


          test: Update onChangeClientState

d8ad1af


          Merge branch 'feature/declarative-api' of github.com:nfl/react-helmet…

66599b3

… into feature/declarative-api


          test: Update script tags

4d33271


          test: Update noscript tags

b1613df


          Update baseTag + metaTag

eb632d5


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

bf8457a

…t-helmet into feature/declarative-api


          test: Update style tags


          Merge branch 'feature/declarative-api' of github.com:nfl/react-helmet…

178572a

… into feature/declarative-api


          partial link tag unit tests

e9a4e88


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

d0d35c1

…t-helmet into feature/declarative-api


          more link tags

2b7fb5b


          test: Update link tags

5b96a18


          Merge branches 'feature/declarative-api' and 'feature/declarative-api…

4bec812

…' of github.com:nfl/react-helmet into feature/declarative-api


          fix: Don't warn if no child props are provided.

a036766

Richard Herrera and others added 9 commits

March 14, 2017 17:56


          fix: Update describe name.

3ff243b


          (fix) trailing comma

f822626


          Merge branch 'feature/declarative-api' of https://github.com/nfl/reac…

94e3115

…t-helmet into feature/declarative-api


          Bump to 5.0.0-beta

eba30b6


          feat: Add {Helmet} export

3f858f8


          feat: Add renderStatic alias

5bba481


          test: Update grammar

d7406d7


          refactor: Organize new children to props code

772e6bb


          5.0.0-beta.2

1d2c30a

CLAassistant commented Mar 16, 2017 •

edited

Loading

All committers have signed the CLA.

Richard Herrera added 4 commits

March 16, 2017 14:48


          chore: Consolidate & organize Helmet constants.

6eeb2b2


          feat: Support body attributes

fce9cba


          fix: render body attributes on the server

c3c0c00


          chore: update README

04232e7

cwelch5 approved these changes

View reviewed changes

Contributor

cwelch5 left a comment

Nicely done. Thanks for formalizing our hack session. Looks great!

Just a couple typos and you should be good to go.

src/Helmet.js Outdated

-                   * @param {Array} noscript: [{"innerHTML": "<img src='http://mysite.com/js/test.js'"}]
-                   * @param {Array} style: [{"type": "text/css", "cssText": "div{ display: block; color: blue; }"}]
+                   * @param {Array} meta: [{"name": "description", "content": "Test description"}]
+                   * @param {Array} noscript: [{TAG_PROPERTIES.INNER_HTML: "<img src='http://mysite.com/js/test.js'"}]

Contributor

cwelch5 Mar 21, 2017

"innerHTML"

src/Helmet.js Outdated

                    * @param {Function} onChangeClientState: "(newState) => console.log(newState)"
+                   * @param {Array} script: [{"type": "text/javascript", "src": "http://mysite.com/js/test.js"}]
+                   * @param {Array} style: [{"type": "text/css", TAG_PROPERTIES.CSS_TEXT: "div{ display: block; color: blue; }"}]

Contributor

cwelch5 Mar 21, 2017

"cssText"

src/Helmet.js

+              HelmetExport.renderStatic = HelmetExport.rewind;
+              export {HelmetExport as Helmet};
+              export default HelmetExport;

Contributor

cwelch5 Mar 21, 2017

well played


          chore: fix typos

235d610

doctyper merged commit 22f6806 into master

doctyper mentioned this pull request

Componentize Helmet #142

Closed

nlubin-lv commented Mar 21, 2017

This seems to have been committed to master causing some confusion with the readme (instead of to a branch for the new release)

One such confusion: #249

Contributor Author

doctyper commented Mar 21, 2017

The React community is too quick, I literally landed this a few hours ago! We'll be publishing the new API shortly.

nlubin-lv commented Mar 21, 2017 •

edited

Loading

@doctyper consider a next branch next time :-) -- or release branches.

I spent an hour this morning trying to figure out why my code wasnt working only to realize that the versions did not match up :-(

Contributor Author

doctyper commented Mar 21, 2017

I do apologize, but do note that master branches do not always align with currently published versions. This goes for any repository. I would instead direct you to the npm-hosted README, which does currently point to the published release. https://www.npmjs.com/package/react-helmet

As a general policy we do not use release branches @nfl.

nlubin-lv commented Mar 21, 2017

I understand internally @nfl may not use release branches, but as a consumer of your open source code my team cannot use a tool that introduces breaking changes into master with no warning

nlubin-lv commented Mar 21, 2017

@doctyper We do like the project though and we use it extensively -- not saying we are jumping ship :-)

Just raising concerns is all as breaking changes on master can get the community a little confused without a release.

Contributor

cwelch5 commented Mar 21, 2017

@nlubin-lv Thanks for keeping us honest, we should have held off on the README changes until we bumped the version.

ntucker commented Mar 30, 2017

Hmm, this is rather confusing because I thought I could then put some React components in there, but I'm getting Helmet expects a string as a child of <title>. Did you forget to wrap your children in braces?

So using react-intl FormattedMessage doesn't work which would be what I thought the point of this would be

nlubin-lv commented Mar 30, 2017 •

edited

Loading

@ntucker it seems you can only put the components that react-helmet accepts as children to Helmet and not any element.

I believe that was on purpose as not any element can go in the head tag.

I needs a string as a child of title due to the fact that the title gets manipulated by the module to add on attributes and other data.

kristiehoward commented Jul 27, 2017 •

edited

Loading

In case it is helpful to anyone in the future, I wrote a codemod to transform all of our react-helmet components to the new version 5 API. We had ~40 files using react-helmet and it made the transition to the v5 API ridiculously easy.
https://github.com/kristiehoward/react-helmet-v5-codemod

tmbtech deleted the feature/declarative-api branch

May 1, 2019 00:54

ccorda mentioned this pull request

Pre-set meta tags patronage/bubs-next#7

Closed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment