├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .nvmrc
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── karma.config.js
├── logo.png
├── package-lock.json
├── package.json
└── src
    ├── Helmet.js
    ├── HelmetConstants.js
    └── test
        └── HelmetTest.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "presets": [
 3 |       [
 4 |         "latest",
 5 |         {
 6 |           "es2015": {
 7 |             "modules": false
 8 |           }
 9 |         }
10 |       ],
11 |       "stage-0"
12 |     ],
13 |     "plugins": [
14 |         [
15 |           "transform-react-jsx", {
16 |             "pragma": "h"
17 |           }
18 |         ]
19 |     ],
20 |     "env": {
21 |       "commonjs": {
22 |         "plugins": [
23 |           "add-module-exports",
24 |           [
25 |             "transform-es2015-modules-commonjs",
26 |             {
27 |               "loose": true,
28 |               "strict": false
29 |             }
30 |           ]
31 |         ]
32 |       }
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [package.json]
13 | indent_style = space
14 | indent_size = 2
15 | 
16 | [.travis.yml]
17 | indent_style = space
18 | indent_size = 2
19 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "nfl",
 3 |     "env": {
 4 |         "browser": true,
 5 |         "mocha": true,
 6 |         "es6": true
 7 |     },
 8 |     "globals": {
 9 |         "expect": false,
10 |         "sinon": false
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | lib
 3 | build
 4 | npm-debug.log
 5 | .DS_Store
 6 | 
 7 | .idea
 8 | .eslintcache
 9 | es
10 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | src
 3 | build
 4 | .arcconfig
 5 | *.yml
 6 | .editorconfig
 7 | karma.config.js
 8 | travis.yml
 9 | CHANGELOG.md
10 | CONTRIBUTING.md
11 | lib/test
12 | .nvmrc
13 | .babelrc
14 | .eslintrc
15 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v6.6.0
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | node_js:
 4 |   - 'node'
 5 |   - 6
 6 |   - 5
 7 |   - 4
 8 | 
 9 | install:
10 |   - npm i -g npm@latest
11 |   - npm install
12 | 
13 | before_install:
14 |   - export CHROME_BIN=chromium-browser
15 |   - export DISPLAY=:99.0
16 |   - sh -e /etc/init.d/xvfb start
17 | 
18 | cache:
19 |   directories:
20 |     - node_modules
21 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
  3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
  4 | 
  5 | - [4.0.0](#400)
  6 | - [3.3.2](#332)
  7 | - [3.3.1 [BROKEN]](#331-broken)
  8 | - [3.3.0](#330)
  9 | - [3.2.3](#323)
 10 | - [3.2.2](#322)
 11 | - [3.2.1 [BROKEN]](#321-broken)
 12 | - [3.2.0 [BROKEN]](#320-broken)
 13 | - [3.1.0](#310)
 14 | - [3.0.2](#302)
 15 | - [3.0.1](#301)
 16 | - [3.0.0](#300)
 17 | - [2.3.1](#231)
 18 | - [2.3.0](#230)
 19 | - [2.2.0](#220)
 20 | - [2.1.1](#211)
 21 | - [2.1.0](#210)
 22 | - [2.0.0](#200)
 23 | - [1.1.5](#115)
 24 | - [1.1.4](#114)
 25 | - [1.1.3](#113)
 26 | - [1.1.2](#112)
 27 | - [1.1.1](#111)
 28 | - [1.1.0](#110)
 29 | - [1.0.1](#101)
 30 | - [1.0.0](#100)
 31 | 
 32 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 33 | ## 4.0.0
 34 | 
 35 | Features:
 36 | 
 37 |   - Replacing PlainComponent with stateless functional component `NullComponent`, with a hard requirement to use React 15 or higher.
 38 | 
 39 | ## 3.3.2
 40 | 
 41 | Bugfixes:
 42 | 
 43 |   - Removed stateless functional component `NullComponent` because of it's incompatibility with React 14 and reverted back to PlainComponent.
 44 | 
 45 | ## 3.3.1 [BROKEN]
 46 | 
 47 | Bugfixes:
 48 | 
 49 |   - README updates - npm badge and helmet image
 50 |   - Bump react-side-effect to 1.1.0
 51 |   - Removing PlainComponent, replaced with NullComponent defined within Helmet.js
 52 |   - Refactored code - cut lines of code and used `reduce` to simplify functions
 53 |   - Replaced PlainComponent with NullComponent (now within Helmet.js)
 54 | 
 55 | ## 3.3.0
 56 | 
 57 | Features:
 58 | 
 59 |   - `itemprop` available in meta tags
 60 |   - New API - `titleAttributes` to add attributes to the title tag
 61 |   - `class` support for html tag
 62 | 
 63 | ## 3.2.3
 64 | 
 65 | Bugfixes:
 66 | 
 67 |   - applied previous fix (undefined value for primary attribute key) to base tag
 68 |   - fix htmlAttributes fallback value when calling rewind() on blank Helmet
 69 |   - Removed unneeded dependencies - shallowequal, warning
 70 |   - babel configuration moved into .babelrc
 71 |   - eslint configuration moved into .eslintrc
 72 | 
 73 | ## 3.2.2
 74 | 
 75 | Bugfixes:
 76 | 
 77 |   - Removed breaking changes `jsnext:main` and `module` from package.json. `es` version required special babel configuration for end users and needs to be re-thought for major release.
 78 |   - Reverted `canUseDOM` setter in `Helmet.js`, as this was a breaking change for some users.
 79 |   - [fix] runtime error when providing undefined value for primary attribute key (applies to meta, link, script, noscript, style)
 80 | 
 81 | ## 3.2.1 [BROKEN]
 82 | 
 83 | Bugfixes:
 84 | 
 85 |   - Removing "engines" field in package.json.
 86 | 
 87 | ## 3.2.0 [BROKEN]
 88 | 
 89 | Features:
 90 | 
 91 |   - `<noscript>` support
 92 | 
 93 | Bugfixes:
 94 | 
 95 |   - Prevent stripping dollar signs from title when titleTemplate is present
 96 |   - Offering jsnext:main build
 97 |   - Removed Gulp Dependency
 98 |   - Bump Dependencies
 99 |   - IE8 Support
100 | 
101 | ## 3.1.0
102 | 
103 | Features:
104 | 
105 |   - Add support for `<style>` elements.
106 | 
107 | ## 3.0.2
108 | 
109 | Bugfixes:
110 | 
111 |   - Avoids rendering "undefined" if it's passed in as a value of an attribute, but instead renders just the attribute name.
112 |   - When htmlAttributes gets cleared, or is blank, the helmet attribute on the html tag, used for tracking, is cleaned up.
113 |   - Upgrading devDependency of React to 15.
114 | 
115 | ## 3.0.1
116 | 
117 | Bugfixes:
118 | 
119 |   - The htmlAttributes feature will no longer remove existing attributes on the HTML tag
120 | 
121 | ## 3.0.0
122 | 
123 | Features:
124 | 
125 |   - innerHTML for scripts.  Originally added to support the use of JSON-LD (https://developers.google.com/schemas/formats/json-ld?hl=en), but this can be used for any inline scripts you would like in your document head.
126 |   - New htmlAttributes prop which allows users to add attributes to their html tag.
127 |   - New defaultTitle prop which allows users to have a fallback title in the scenario where a Helmet wants to define a titleTemplate for it's nested routes, but not for itself (for example, at the root component level).  See README for use cases.
128 | 
129 | Bugfixes:
130 | 
131 |   - Removed all polyfills from Helmet.  Due to reported conflicts, to remove bloat, and to encourage users to polyfill at the application level.  Please double-check that you weren't relying solely on Helmet for polyfilling certain features.
132 | 
133 | ## 2.3.1
134 | 
135 | Bugfixes:
136 | 
137 |   - Fallback values for rewind on the server threw a `tags.map` error in Node.  Changing the tag default values to `[]` fixes it.
138 | 
139 | ## 2.3.0
140 | 
141 | Bugfixes:
142 | 
143 |   - FOUC fix - existing tags that persist between route changes, will not be removed and re-added to the DOM.  They will remain unchanged.  This will avoid, in particular, stylesheets being removed and re-added causing an unstyled flash when the new Helmet is rendered.
144 |   - onChangeClientState enhanced to also return the html tags that were added and removed.
145 |   - provide fallback object for rewind() result - If no Helmets are rendered, rewind() will still return head.base, head.title, etc.
146 |   - Tag attributes ordering does not matter.  It no longer looks at the first valid attribute to identify the tag.  All attributes of the tag will be searched for names that can be found in HelmetConstants.js.  When rel="canonical" is included, it will take priority over href.
147 |   - Bump dependencies
148 | 
149 | ## 2.2.0
150 | 
151 | Features:
152 | 
153 |   - New prop `onChangeClientState` to set a callback function that is called in the event the DOM is changed by Helmet.  When set on a Helmet, it will apply to all subsequent Helmet instances downstream (similar to titleTemplate).
154 | 
155 | Bugfixes:
156 | 
157 |   - Fix for double encoding when returning state to the server as React components.
158 |   - dist -> lib
159 |   - Added CLA url to CONTRIBUTING.
160 |   - Added .babelrc to .npmignore (fix for now, as the settings were not compatible with Babel 6)
161 |   - Bump dependencies (except Babel 6 as a dev dependency - coming soon)
162 | 
163 | ## 2.1.1
164 | 
165 | Bugfixes:
166 | 
167 |   - Remove npm he dependency
168 |   - HTML entitiy encode only special characters instead of all characters that have HTML entity equivalents
169 | 
170 | ## 2.1.0
171 | 
172 | Features:
173 | 
174 |   - All head attributes (title / base / meta / link / script) returned with `.toComponent()` and `.toString()` methods to use in any scenario when calling rewind on the server.
175 |   - Helmet using React 14 for unit testing.
176 | 
177 | Bugfixes:
178 | 
179 |   - Bump dependencies
180 | 
181 | ## 2.0.0
182 | 
183 | Features:
184 | 
185 |   - Base tag support.
186 |   - Script tag support.
187 |   - All head attributes (title / base / meta / link / script) returned as React components on the server with toString() support
188 |   - Removed ability to nest children in Helmet.
189 |   - Decorated component from react-side-effect, now wrapped by Helmet in order to enforce deep equal check on shouldComponentUpdate. This will limit unnecessary DOM changes and rendering.
190 | 
191 | Bugfixes:
192 | 
193 |   - Bump dependencies
194 | 
195 | ## 1.1.5
196 | 
197 | Bugfixes:
198 | 
199 |   - Adding webpack under devDependencies, as it's no longer automatically installed as a peer dependency
200 |   - Bump dependencies
201 | 
202 | ## 1.1.4
203 | 
204 | Bugfixes:
205 | 
206 |   - Bumping to react-side-effect 1.0.2
207 |   - Updating peer dependences for react 0.14.0-rc1
208 |   - Bump dependencies
209 | 
210 | ## 1.1.3
211 | 
212 | Bugfixes:
213 | 
214 |   - Externalize react-side-effect
215 |   - shouldComponentUpdate compares props with deep equal
216 |   - handleClientStateChange compares DOM changes with deep equal to prevent unnecessary DOM changes
217 |   - Warning users to not nest children in their Helmet components.  We found that when Helmet contains children, those children are part of the props that are compared in shouldComponentUpdate.  And this causes unnecessary renders as the props are always different, even with the same Helmet title/meta/link props.
218 |   - Adding react-helmet-example to README
219 |   - Bumping to react-side-effect 1.0.1
220 |   - Bump dependencies.
221 | 
222 | ## 1.1.2
223 | 
224 | Bugfixes:
225 | 
226 |   - Use named exports in HelmetConstants
227 |   - Allow all React 0.14 betas in peer dependencies
228 |   - Bump dependencies.
229 |   - Fixed invariant check in CreateSideEffect
230 | 
231 | ## 1.1.1
232 | 
233 | Bugfixes:
234 | 
235 |   - Externalizing of React helpers - exenv, invariant, shallowequal
236 |   - Using ES6 collections to manage tags
237 |   - Bumping peer dependency for use in React 0.14.0-beta.
238 |   - Title encoded when being rendered on the server
239 |   - Import a smaller subset of core-js modules instead of the whole shim.
240 | 
241 | ## 1.1.0
242 | 
243 | Features:
244 | 
245 |   - titleTemplate attribute to help format `document.title`
246 | 
247 | Bugfixes:
248 | 
249 |   - Bump dependencies.
250 |   - Title will never be overwritten with blank title.  Lifts constraint where every component with Helmet needed to define a title.
251 |   - Re-organization of unit tests.
252 | 
253 | ## 1.0.1
254 | 
255 | Bugfixes:
256 | 
257 |   - Bump dependencies
258 |   - rewind() saves title/meta/link values before disposing
259 |   - Typo in README - use Helmet.rewind()
260 |   - "he" package added to dependencies
261 |   - Added Travis CI integration
262 |   - npm requirement removed - removed reference in README (System Requirements) and in package.json (engines)
263 | 
264 | ## 1.0.0
265 | 
266 | Features:
267 | 
268 |   - Initial release
269 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 2 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 3 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 4 | 
 5 | - [Contributing to this project](#contributing-to-this-project)
 6 |   - [Pull requests](#pull-requests)
 7 |   - [Development Process](#development-process)
 8 | 
 9 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
10 | 
11 | # Contributing to this project
12 | 
13 | Please take a moment to review this document in order to make the contribution
14 | process easy and effective for everyone involved.
15 | 
16 | _**Please Note:** These guidelines are adapted from [@necolas](https://github.com/necolas)'s
17 | [issue-guidelines](https://github.com/necolas/issue-guidelines) and serve as
18 | an excellent starting point for contributing to any open source project._
19 | 
20 | <a name="pull-requests"></a>
21 | ## Pull requests
22 | 
23 | Good pull requests - patches, improvements, new features - are a fantastic
24 | help. They should remain focused in scope and avoid containing unrelated
25 | commits.
26 | 
27 | **Please ask first** before embarking on any significant pull request (e.g.
28 | implementing features, refactoring code, porting to a different language),
29 | otherwise you risk spending a lot of time working on something that the
30 | project's developers might not want to merge into the project.
31 | 
32 | <a name="development"></a>
33 | ## Development Process
34 | Here are some guidelines to making changes and preparing your PR:
35 | 
36 | 1. Make your proposed changes to the repository, along with updating/adding test cases.
37 | 2. (Optional) If you prefer to also test your changes in a real application, you can do the following:
38 |   1. Run `npm link` in `preact-helmet` repository.
39 |   2. `cd` to your favorite Preact application, run `npm link preact-helmet` to point to your local repository.
40 |   3. Run your application to verify your changes.
41 | 3. Run `npm test` to verify all test cases pass.
42 | 4. Run `npm run lint` to verify there are no linting errors.
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015 NFL, port to Preact copyright (c) 2017 Stijn de Witt
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Preact Helmet
  2 | ## A document head manager for Preact
  3 | 
  4 | > This project is a port of [react-helmet](https://github.com/nfl/react-helmet)
  5 | to [Preact](https://preactjs.com), the 3kB lightweight React alternative.
  6 | 
  7 | <img align="right" height="200" src="https://raw.githubusercontent.com/download/preact-helmet/master/logo.png" />
  8 | 
  9 | [![npm Version](https://img.shields.io/npm/v/preact-helmet.svg?style=flat-square)](https://www.npmjs.org/package/preact-helmet)
 10 | [![Build Status](https://img.shields.io/travis/Download/preact-helmet/master.svg?style=flat-square)](https://travis-ci.org/Download/preact-helmet)
 11 | [![Dependency Status](https://img.shields.io/david/Download/preact-helmet.svg?style=flat-square)](https://david-dm.org/Download/preact-helmet)
 12 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
 13 | 
 14 | This Preact component will manage all of your changes to the document head with support
 15 | for document title, meta, link, style, script, noscript, and base tags.
 16 | 
 17 | Inspired by:
 18 | * [react-document-title](https://github.com/gaearon/react-document-title)
 19 | * [react-side-effect](https://github.com/gaearon/react-side-effect)
 20 | * [preact-side-effect](https://github.com/ooade/preact-side-effect) (port)
 21 | * [react-helmet](https://github.com/nfl/react-helmet) (obviously)
 22 | 
 23 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 24 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 25 | **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 26 | 
 27 | - [Examples](#examples)
 28 | - [Features](#features)
 29 | - [Installation](#installation)
 30 | - [Server Usage](#server-usage)
 31 |   - [As string output](#as-string-output)
 32 |   - [As Preact components](#as-preact-components)
 33 | - [Use Cases](#use-cases)
 34 | - [Contributing to this project](#contributing-to-this-project)
 35 | - [License](#license)
 36 | - [More Examples](#more-examples)
 37 | 
 38 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 39 | 
 40 | ## Examples
 41 | ```javascript
 42 | import {h} from "preact"; /** @jsx h */
 43 | import Helmet from "preact-helmet";
 44 | 
 45 | export default function Application () {
 46 |     return (
 47 |         <div className="application">
 48 |             <Helmet title="My Title" />
 49 |             ...
 50 |         </div>
 51 |     );
 52 | };
 53 | ```
 54 | 
 55 | ```javascript
 56 | import {h} from "preact"; /** @jsx h */
 57 | import Helmet from "preact-helmet";
 58 | 
 59 | export default function Application () {
 60 |     return (
 61 |         <div className="application">
 62 |             <Helmet
 63 |                 htmlAttributes={{lang: "en", amp: undefined}} // amp takes no value
 64 |                 title="My Title"
 65 |                 titleTemplate="MySite.com - %s"
 66 |                 defaultTitle="My Default Title"
 67 |                 titleAttributes={{itemprop: "name", lang: "en"}}
 68 |                 base={{target: "_blank", href: "http://mysite.com/"}}
 69 |                 meta={[
 70 |                     {name: "description", content: "Helmet application"},
 71 |                     {property: "og:type", content: "article"}
 72 |                 ]}
 73 |                 link={[
 74 |                     {rel: "canonical", href: "http://mysite.com/example"},
 75 |                     {rel: "apple-touch-icon", href: "http://mysite.com/img/apple-touch-icon-57x57.png"},
 76 |                     {rel: "apple-touch-icon", sizes: "72x72", href: "http://mysite.com/img/apple-touch-icon-72x72.png"}
 77 |                 ]}
 78 |                 script={[
 79 |                     {src: "http://include.com/pathtojs.js", type: "text/javascript"},
 80 |                     {type: "application/ld+json", innerHTML: `{ "@context": "http://schema.org" }`}
 81 |                 ]}
 82 |                 noscript={[
 83 |                     {innerHTML: `<link rel="stylesheet" type="text/css" href="foo.css" />`}
 84 |                 ]}
 85 |                 style={[
 86 |                   {type: "text/css", cssText: "body {background-color: blue;} p {font-size: 12px;}"}
 87 |                 ]}
 88 |                 onChangeClientState={(newState) => console.log(newState)}
 89 |             />
 90 |             ...
 91 |         </div>
 92 |     );
 93 | };
 94 | ```
 95 | 
 96 | ## Features
 97 | - Supports `title`, `base`, `meta`, `link`, `script`, `noscript`, and `style` tags.
 98 | - Attributes for `html` and `title` tags.
 99 | - Supports isomorphic/universal environment.
100 | - Nested components override duplicate head changes.
101 | - Duplicate head changes preserved when specified in same component (support for tags like "apple-touch-icon").
102 | - Callback for tracking DOM changes.
103 | 
104 | ## Installation
105 | ```
106 | npm install --save preact-helmet
107 | ```
108 | 
109 | ## Server Usage
110 | To use on the server, call `rewind()` after using `render` from `preact-render-to-string`
111 | to get the head data for use in your prerender.
112 | 
113 | Because this component keeps track of mounted instances, **you have to make sure to call `rewind` on server**, or you'll get a memory leak.
114 | 
115 | ```javascript
116 | import { render } from 'preact-render-to-string'
117 | import Helmet from 'preact-helmet'
118 | 
119 | const markup = renderToString(<MyApp />);
120 | const head = Helmet.rewind();
121 | 
122 | // populate some document template using `markup` and `head`
123 | const html = `
124 |     <!doctype html>
125 |     <html>
126 |         <head>
127 |             ${head.title.toString()}
128 |             ${head.meta.toString()}
129 |             ${head.link.toString()}
130 |         </head>
131 |         <body>
132 |             <div id="content">
133 |                 ${markup}
134 |             </div>
135 |         </body>
136 |     </html>
137 | `;
138 | 
139 | ```
140 | 
141 | `head` contains the following properties:
142 | - `htmlAttributes`
143 | - `title`
144 | - `base`
145 | - `meta`
146 | - `link`
147 | - `script`
148 | - `noscript`
149 | - `style`
150 | 
151 | Each property contains `toComponent()` and `toString()` methods. Use whichever is appropriate
152 | for your environment. For htmlAttributes, use the JSX spread operator on the object returned
153 | by `toComponent()`. E.g:
154 | 
155 | ### As string output
156 | ```javascript
157 | const html = `
158 |     <!doctype html>
159 |     <html ${head.htmlAttributes.toString()}>
160 |         <head>
161 |             ${head.title.toString()}
162 |             ${head.meta.toString()}
163 |             ${head.link.toString()}
164 |         </head>
165 |         <body>
166 |             <div id="content">
167 |                 ${markup}
168 |             </div>
169 |         </body>
170 |     </html>
171 | `;
172 | ```
173 | 
174 | ### As Preact components
175 | If you are doing server side rendering with Preact, it may be easier to render the
176 | document template with Preact as well:
177 | 
178 | ```javascript
179 | function HTML({head}) {
180 |     const attrs = head.htmlAttributes.toComponent();
181 | 
182 |     return (
183 |         <html {...attrs}>
184 |             <head>
185 |                 {head.title.toComponent()}
186 |                 {head.meta.toComponent()}
187 |                 {head.link.toComponent()}
188 |             </head>
189 |             <body>
190 |                 <div id="content">
191 |                     <MyApp />
192 |                 </div>
193 |             </body>
194 |         </html>
195 |     );
196 | }
197 | ```
198 | 
199 | ## Use Cases
200 | 1. Nested or latter components will override duplicate changes.
201 |   ```javascript
202 |   <Helmet
203 |       title="My Title"
204 |       meta={[
205 |           {"name": "description", "content": "Helmet application"}
206 |       ]}
207 |   />
208 |   <Helmet
209 |       title="Nested Title"
210 |       meta={[
211 |           {"name": "description", "content": "Nested component"}
212 |       ]}
213 |   />
214 |   ```
215 |   Yields:
216 |   ```
217 |   <head>
218 |       <title>Nested Title</title>
219 |       <meta name="description" content="Nested component">
220 |   </head>
221 |   ```
222 | 
223 | 2. Use a titleTemplate to format title text in your page title
224 |   ```javascript
225 |   <Helmet
226 |       title="My Title"
227 |       titleTemplate="%s | MyAwesomeWebsite.com"
228 |   />
229 |   <Helmet
230 |       title="Nested Title"
231 |   />
232 |   ```
233 |   Yields:
234 |   ```
235 |   <head>
236 |       <title>Nested Title | MyAwesomeWebsite.com</title>
237 |   </head>
238 |   ```
239 | 
240 | 3. Duplicate `meta` and/or `link` tags in the same component are preserved
241 |   ```javascript
242 |   <Helmet
243 |       link={[
244 |           {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
245 |           {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
246 |       ]}
247 |   />
248 |   ```
249 |   Yields:
250 |   ```
251 |   <head>
252 |       <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png">
253 |       <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png">
254 |   </head>
255 |   ```
256 | 
257 | 4. Duplicate tags can still be overwritten
258 |   ```javascript
259 |   <Helmet
260 |       link={[
261 |           {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-57x57.png"},
262 |           {"rel": "apple-touch-icon", "sizes": "72x72", "href": "http://mysite.com/img/apple-touch-icon-72x72.png"}
263 |       ]}
264 |   />
265 |   <Helmet
266 |       link={[
267 |           {"rel": "apple-touch-icon", "href": "http://mysite.com/img/apple-touch-icon-180x180.png"}
268 |       ]}
269 |   />
270 |   ```
271 |   Yields:
272 |   ```
273 |   <head>
274 |       <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-180x180.png">
275 |   </head>
276 |   ```
277 | 
278 | 5. Only one base tag is allowed
279 |   ```javascript
280 |   <Helmet
281 |       base={{"href": "http://mysite.com/"}}
282 |   />
283 |   <Helmet
284 |       base={{"href": "http://mysite.com/blog"}}
285 |   />
286 |   ```
287 |   Yields:
288 |   ```
289 |   <head>
290 |       <base href="http://mysite.com/blog">
291 |   </head>
292 |   ```
293 | 
294 | 6. defaultTitle will be used as a fallback when the template does not want to be used in the current Helmet
295 |   ```javascript
296 |   <Helmet
297 |       defaultTitle="My Site"
298 |       titleTemplate="My Site - %s"
299 |   />
300 |   ```
301 |   Yields:
302 |   ```
303 |   <head>
304 |       <title>My Site</title>
305 |   </head>
306 |   ```
307 | 
308 |   But a child route with a title will use the titleTemplate, giving users a way to declare a titleTemplate for their app, but not have it apply to the root.
309 | 
310 |   ```javascript
311 |   <Helmet
312 |       defaultTitle="My Site"
313 |       titleTemplate="My Site - %s"
314 |   />
315 | 
316 |   <Helmet
317 |       title="Nested Title"
318 |   />
319 |   ```
320 |   Yields:
321 |   ```
322 |   <head>
323 |       <title>My Site - Nested Title</title>
324 |   </head>
325 |   ```
326 | 
327 |   And other child route components without a Helmet will inherit the defaultTitle.
328 | 
329 | 7. Usage with `<script>` tags:
330 |   ```javascript
331 |   <Helmet
332 |       script={[{
333 |           "type": "application/ld+json",
334 |           "innerHTML": `{
335 |               "@context": "http://schema.org",
336 |               "@type": "NewsArticle"
337 |           }`
338 |       }]}
339 |   />
340 |   ```
341 |   Yields:
342 |   ```
343 |   <head>
344 |       <script type="application/ld+json">
345 |         {
346 |             "@context": "http://schema.org",
347 |             "@type": "NewsArticle"
348 |         }
349 |       </script>
350 |   </head>
351 |   ```
352 | 
353 | 8. Usage with `<style>` tags:
354 |   ```javascript
355 |   <Helmet
356 |       style={[{
357 |           "cssText": `
358 |               body {
359 |                   background-color: green;
360 |               }
361 |           `
362 |       }]}
363 |   />
364 |   ```
365 |   Yields:
366 |   ```
367 |   <head>
368 |       <style>
369 |           body {
370 |               background-color: green;
371 |           }
372 |       </style>
373 |   </head>
374 |   ```
375 | 
376 | ## Contributing to this project
377 | Please take a moment to review the [guidelines for contributing](CONTRIBUTING.md).
378 | 
379 | * [Pull requests](CONTRIBUTING.md#pull-requests)
380 | * [Development Process](CONTRIBUTING.md#development)
381 | 
382 | ## License
383 | 
384 | MIT
385 | 
386 | ## More Examples
387 | [react-helmet-example](https://github.com/mattdennewitz/react-helmet-example) (for React, but still useful)
388 | 


--------------------------------------------------------------------------------
/karma.config.js:
--------------------------------------------------------------------------------
  1 | // Karma configuration
  2 | 
  3 | module.exports = function (config) {
  4 |     config.set({
  5 |         // ... normal karma configuration
  6 |         basePath: "",
  7 | 
  8 |         // How long will Karma wait for a message from a browser before disconnecting from it (in ms).
  9 |         browserNoActivityTimeout: 60000,
 10 | 
 11 |         client: {
 12 |             mocha: {
 13 |                 reporter: "html"
 14 |             }
 15 |         },
 16 | 
 17 |         // frameworks to use
 18 |         frameworks: [
 19 |             "phantomjs-shim",
 20 |             "chai-sinon",
 21 |             "mocha"
 22 |         ],
 23 | 
 24 |         files: [
 25 |             "lib/test/*.js"
 26 |         ],
 27 | 
 28 |         preprocessors: {
 29 |             // add webpack as preprocessor
 30 |             "lib/test/*.js": [
 31 |                 "webpack",
 32 |                 "sourcemap"
 33 |             ]
 34 |         },
 35 | 
 36 |         coverageReporter: {
 37 |             dir: "build/reports/coverage",
 38 |             reporters: [{
 39 |                 type: "html",
 40 |                 subdir: "html"
 41 |             }, {
 42 |                 type: "text",
 43 |                 subdir: ".",
 44 |                 file: "text.txt"
 45 |             }, {
 46 |                 type: "lcov",
 47 |                 subdir: ".",
 48 |                 file: "lcov.info"
 49 |             }]
 50 |         },
 51 | 
 52 |         webpack: {
 53 |             devtool: "inline-source-map",
 54 |             module: {
 55 |                 rules: [{
 56 |                     enforce: "pre",
 57 |                     test: /(\.js(x)?)$/,
 58 |                     // exclude this dirs from coverage
 59 |                     exclude: /(node_modules|bower_components)\//,
 60 |                     use: [{
 61 |                         loader: "isparta-loader"
 62 |                     }]
 63 |                 }]
 64 |             },
 65 | 
 66 |             resolve: {
 67 |                 extensions: ["*", ".web.js", ".js"]
 68 |             },
 69 | 
 70 |             watch: true
 71 |         },
 72 | 
 73 |         webpackServer: {
 74 |             noInfo: true
 75 |         },
 76 | 
 77 |         // test results reporter to use
 78 |         // possible values: "dots", "progress", "junit", "growl", "coverage"
 79 |         reporters: [
 80 |             "coverage",
 81 |             "spec"
 82 |         ],
 83 | 
 84 |         // web server port
 85 |         port: 9876,
 86 | 
 87 |         // enable / disable colors in the output (reporters and logs)
 88 |         colors: true,
 89 | 
 90 |         // level of logging
 91 |         // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
 92 |         logLevel: config.LOG_INFO,
 93 | 
 94 |         // enable / disable watching file and executing tests whenever any file changes
 95 |         autoWatch: true,
 96 | 
 97 |         // Start these browsers, currently available:
 98 |         // - Chrome
 99 |         // - ChromeCanary
100 |         // - Firefox
101 |         // - Opera (has to be installed with `npm install karma-opera-launcher`)
102 |         // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
103 |         // - PhantomJS
104 |         // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
105 |         browsers: process.env.TRAVIS
106 |             ? ["ChromeTravis", "PhantomJS"]
107 |             : ["Chrome", "PhantomJS"],
108 | 
109 |         customLaunchers: {
110 |             ChromeTravis: {
111 |                 base: "Chrome",
112 |                 flags: ["--no-sandbox"]
113 |             }
114 |         },
115 | 
116 |         // If browser does not capture in given timeout [ms], kill it
117 |         captureTimeout: 60000,
118 | 
119 |         // Continuous Integration mode
120 |         // if true, it capture browsers, run tests and exit
121 |         singleRun: true
122 |     });
123 | };
124 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Download/preact-helmet/9811143d23628ed99a817efe7dab5886aa3611a9/logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "preact-helmet",
 3 |   "description": "A document head manager for Preact",
 4 |   "version": "4.0.0-alpha-3",
 5 |   "main": "./lib/Helmet.js",
 6 |   "author": "NFL <engineers@nfl.com>",
 7 |   "contributors": [
 8 |     "Chris Welch <chris.welch@nfl.com>",
 9 |     "Stijn de Witt <StijnDeWitt@hotmail.com> (https://stijndewitt.com)"
10 |   ],
11 |   "license": "MIT",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/download/preact-helmet"
15 |   },
16 |   "keywords": [
17 |     "react-helmet",
18 |     "preact-helmet",
19 |     "nfl",
20 |     "react",
21 |     "preact",
22 |     "document",
23 |     "head",
24 |     "title",
25 |     "meta",
26 |     "link",
27 |     "script",
28 |     "base"
29 |   ],
30 |   "dependencies": {
31 |     "deep-equal": "^1.0.1",
32 |     "object-assign": "^4.0.1",
33 |     "preact-side-effect": "^1.3.0"
34 |   },
35 |   "peerDependencies": {
36 |     "preact": ">=8.2.*"
37 |   },
38 |   "devDependencies": {
39 |     "babel-cli": "6.22.2",
40 |     "babel-core": "6.22.1",
41 |     "babel-eslint": "7.1.1",
42 |     "babel-plugin-add-module-exports": "0.2.1",
43 |     "babel-plugin-transform-es2015-modules-commonjs": "6.22.0",
44 |     "babel-plugin-transform-react-jsx": "^6.22.0",
45 |     "babel-preset-es2015-minimal": "^2.1.0",
46 |     "babel-preset-latest": "6.22.0",
47 |     "babel-preset-stage-0": "6.22.0",
48 |     "chai": "3.5.0",
49 |     "cross-env": "3.1.4",
50 |     "eslint": "3.15.0",
51 |     "eslint-config-nfl": "11.1.0",
52 |     "eslint-plugin-import": "2.2.0",
53 |     "eslint-plugin-jsx-a11y": "4.0.0",
54 |     "eslint-plugin-mocha": "4.8.0",
55 |     "eslint-plugin-react": "6.9.0",
56 |     "estraverse": "4.2.0",
57 |     "estraverse-fb": "1.3.1",
58 |     "isparta-loader": "2.0.0",
59 |     "karma": "1.4.1",
60 |     "karma-chai-sinon": "0.1.5",
61 |     "karma-chrome-launcher": "2.0.0",
62 |     "karma-coverage": "1.1.1",
63 |     "karma-html-reporter": "0.2.7",
64 |     "karma-mocha": "1.3.0",
65 |     "karma-phantomjs-launcher": "1.0.2",
66 |     "karma-phantomjs-shim": "1.4.0",
67 |     "karma-sourcemap-loader": "0.3.7",
68 |     "karma-spec-reporter": "0.0.27",
69 |     "karma-tap-reporter": "0.0.6",
70 |     "karma-webpack": "2.0.2",
71 |     "mocha": "3.2.0",
72 |     "phantomjs-prebuilt": "2.1.14",
73 |     "preact": "^8.2.1",
74 |     "preact-render-to-string": "3.5.0",
75 |     "rimraf": "2.5.4",
76 |     "sinon": "1.17.7",
77 |     "sinon-chai": "2.8.0",
78 |     "webpack": "2.2.1"
79 |   },
80 |   "scripts": {
81 |     "clean": "rimraf lib build es",
82 |     "lint": "eslint --ignore-path .gitignore -- .",
83 |     "test": "karma start karma.config.js",
84 |     "posttest": "cat ./build/reports/coverage/text.txt",
85 |     "pretest": "npm run clean && npm run lint && npm run compile",
86 |     "compile": "npm run compile:commonjs && npm run compile:es",
87 |     "compile:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
88 |     "compile:es": "cross-env BABEL_ENV=es babel src --out-dir es --ignore test.js",
89 |     "prepublish": "npm run compile"
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/src/Helmet.js:
--------------------------------------------------------------------------------
  1 | import {h /** @jsx h */, Component} from "preact";
  2 | import withSideEffect from "preact-side-effect";
  3 | import deepEqual from "deep-equal";
  4 | import objectAssign from "object-assign";
  5 | import {TAG_NAMES, TAG_PROPERTIES} from "./HelmetConstants.js";
  6 | 
  7 | const HELMET_ATTRIBUTE = "data-preact-helmet";
  8 | 
  9 | const encodeSpecialCharacters = (str) => {
 10 |     return String(str)
 11 |             .replace(/&/g, "&amp;")
 12 |             .replace(/</g, "&lt;")
 13 |             .replace(/>/g, "&gt;")
 14 |             .replace(/"/g, "&quot;")
 15 |             .replace(/'/g, "&#x27;");
 16 | };
 17 | 
 18 | const getInnermostProperty = (propsList, property) => {
 19 |     for (let i = propsList.length - 1; i >= 0; i--) {
 20 |         const props = propsList[i];
 21 | 
 22 |         if (props[property]) {
 23 |             return props[property];
 24 |         }
 25 |     }
 26 |     return null;
 27 | };
 28 | 
 29 | const getTitleFromPropsList = (propsList) => {
 30 |     const innermostTitle = getInnermostProperty(propsList, "title");
 31 |     const innermostTemplate = getInnermostProperty(propsList, "titleTemplate");
 32 | 
 33 |     if (innermostTemplate && innermostTitle) {
 34 |         // use function arg to avoid need to escape $ characters
 35 |         return innermostTemplate.replace(/%s/g, () => innermostTitle);
 36 |     }
 37 | 
 38 |     const innermostDefaultTitle = getInnermostProperty(propsList, "defaultTitle");
 39 | 
 40 |     return innermostTitle || innermostDefaultTitle || "";
 41 | };
 42 | 
 43 | const getOnChangeClientState = (propsList) => {
 44 |     return getInnermostProperty(propsList, "onChangeClientState") ||(() => {});
 45 | };
 46 | 
 47 | const getAttributesFromPropsList = (tagType, propsList) => {
 48 |     return propsList
 49 |         .filter(props => typeof props[tagType] !== "undefined")
 50 |         .map(props => props[tagType])
 51 |         .reduce((tagAttrs, current) => {
 52 |             return {...tagAttrs, ...current};
 53 |         }, {});
 54 | };
 55 | 
 56 | const getBaseTagFromPropsList = (primaryAttributes, propsList) => {
 57 |     return propsList
 58 |         .filter(props => typeof props[TAG_NAMES.BASE] !== "undefined")
 59 |         .map(props => props[TAG_NAMES.BASE])
 60 |         .reverse()
 61 |         .reduce((innermostBaseTag, tag) => {
 62 |             if (!innermostBaseTag.length) {
 63 |                 const keys = Object.keys(tag);
 64 | 
 65 |                 for (let i = 0; i < keys.length; i++) {
 66 |                     const attributeKey = keys[i];
 67 |                     const lowerCaseAttributeKey = attributeKey.toLowerCase();
 68 | 
 69 |                     if (primaryAttributes.indexOf(lowerCaseAttributeKey) !== -1 &&
 70 |                         tag[lowerCaseAttributeKey]) {
 71 |                         return innermostBaseTag.concat(tag);
 72 |                     }
 73 |                 }
 74 |             }
 75 | 
 76 |             return innermostBaseTag;
 77 |         }, []);
 78 | };
 79 | 
 80 | const getTagsFromPropsList = (tagName, primaryAttributes, propsList) => {
 81 |     // Calculate list of tags, giving priority innermost component (end of the propslist)
 82 |     const approvedSeenTags = {};
 83 | 
 84 |     return propsList
 85 |         .filter(props => typeof props[tagName] !== "undefined")
 86 |         .map(props => props[tagName])
 87 |         .reverse()
 88 |         .reduce((approvedTags, instanceTags) => {
 89 |             const instanceSeenTags = {};
 90 | 
 91 |             instanceTags.filter(tag => {
 92 |                 let primaryAttributeKey;
 93 |                 const keys = Object.keys(tag);
 94 |                 for (let i = 0; i < keys.length; i++) {
 95 |                     const attributeKey = keys[i];
 96 |                     const lowerCaseAttributeKey = attributeKey.toLowerCase();
 97 | 
 98 |                     // Special rule with link tags, since rel and href are both primary tags, rel takes priority
 99 |                     if (primaryAttributes.indexOf(lowerCaseAttributeKey) !== -1
100 |                         && !(primaryAttributeKey === TAG_PROPERTIES.REL && tag[primaryAttributeKey].toLowerCase() === "canonical")
101 |                         && !(lowerCaseAttributeKey === TAG_PROPERTIES.REL && tag[lowerCaseAttributeKey].toLowerCase() === "stylesheet")) {
102 |                         primaryAttributeKey = lowerCaseAttributeKey;
103 |                     }
104 |                     // Special case for innerHTML which doesn't work lowercased
105 |                     if (primaryAttributes.indexOf(attributeKey) !== -1 && (attributeKey === TAG_PROPERTIES.INNER_HTML || attributeKey === TAG_PROPERTIES.CSS_TEXT || attributeKey === TAG_PROPERTIES.ITEM_PROP)) {
106 |                         primaryAttributeKey = attributeKey;
107 |                     }
108 |                 }
109 | 
110 |                 if (!primaryAttributeKey || !tag[primaryAttributeKey]) {
111 |                     return false;
112 |                 }
113 | 
114 |                 const value = tag[primaryAttributeKey].toLowerCase();
115 | 
116 |                 if (!approvedSeenTags[primaryAttributeKey]) {
117 |                     approvedSeenTags[primaryAttributeKey] = {};
118 |                 }
119 | 
120 |                 if (!instanceSeenTags[primaryAttributeKey]) {
121 |                     instanceSeenTags[primaryAttributeKey] = {};
122 |                 }
123 | 
124 |                 if (!approvedSeenTags[primaryAttributeKey][value]) {
125 |                     instanceSeenTags[primaryAttributeKey][value] = true;
126 |                     return true;
127 |                 }
128 | 
129 |                 return false;
130 |             })
131 |             .reverse()
132 |             .forEach(tag => approvedTags.push(tag));
133 | 
134 |             // Update seen tags with tags from this instance
135 |             const keys = Object.keys(instanceSeenTags);
136 |             for (let i = 0; i < keys.length; i++) {
137 |                 const attributeKey = keys[i];
138 |                 const tagUnion = objectAssign(
139 |                     {},
140 |                     approvedSeenTags[attributeKey],
141 |                     instanceSeenTags[attributeKey]
142 |                 );
143 | 
144 |                 approvedSeenTags[attributeKey] = tagUnion;
145 |             }
146 | 
147 |             return approvedTags;
148 |         }, [])
149 |         .reverse();
150 | };
151 | 
152 | const updateTitle = (title, attributes) => {
153 |     document.title = title || document.title;
154 |     updateAttributes(TAG_NAMES.TITLE, attributes);
155 | };
156 | 
157 | const updateAttributes = (tagName, attributes) => {
158 |     const htmlTag = document.getElementsByTagName(tagName)[0];
159 |     const helmetAttributeString = htmlTag.getAttribute(HELMET_ATTRIBUTE);
160 |     const helmetAttributes = helmetAttributeString ? helmetAttributeString.split(",") : [];
161 |     const attributesToRemove = [].concat(helmetAttributes);
162 |     const attributeKeys = Object.keys(attributes);
163 | 
164 |     for (let i = 0; i < attributeKeys.length; i++) {
165 |         const attribute = attributeKeys[i];
166 |         const value = attributes[attribute] || "";
167 |         htmlTag.setAttribute(attribute, value);
168 | 
169 |         if (helmetAttributes.indexOf(attribute) === -1) {
170 |             helmetAttributes.push(attribute);
171 |         }
172 | 
173 |         const indexToSave = attributesToRemove.indexOf(attribute);
174 |         if (indexToSave !== -1) {
175 |             attributesToRemove.splice(indexToSave, 1);
176 |         }
177 |     }
178 | 
179 |     for (let i = attributesToRemove.length - 1; i >= 0; i--) {
180 |         htmlTag.removeAttribute(attributesToRemove[i]);
181 |     }
182 | 
183 |     if (helmetAttributes.length === attributesToRemove.length) {
184 |         htmlTag.removeAttribute(HELMET_ATTRIBUTE);
185 |     } else {
186 |         htmlTag.setAttribute(HELMET_ATTRIBUTE, helmetAttributes.join(","));
187 |     }
188 | };
189 | 
190 | const updateTags = (type, tags) => {
191 |     const headElement = document.head || document.querySelector("head");
192 |     const tagNodes = headElement.querySelectorAll(`${type}[${HELMET_ATTRIBUTE}]`);
193 |     const oldTags = Array.prototype.slice.call(tagNodes);
194 |     const newTags = [];
195 |     let indexToDelete;
196 | 
197 |     if (tags && tags.length) {
198 |         tags.forEach(tag => {
199 |             const newElement = document.createElement(type);
200 | 
201 |             for (const attribute in tag) {
202 |                 if (tag.hasOwnProperty(attribute)) {
203 |                     if (attribute === "innerHTML") {
204 |                         newElement.innerHTML = tag.innerHTML;
205 |                     } else if (attribute === "cssText") {
206 |                         if (newElement.styleSheet) {
207 |                             newElement.styleSheet.cssText = tag.cssText;
208 |                         } else {
209 |                             newElement.appendChild(document.createTextNode(tag.cssText));
210 |                         }
211 |                     } else {
212 |                         const value = (typeof tag[attribute] === "undefined") ? "" : tag[attribute];
213 |                         newElement.setAttribute(attribute, value);
214 |                     }
215 |                 }
216 |             }
217 | 
218 |             newElement.setAttribute(HELMET_ATTRIBUTE, "true");
219 | 
220 |             // Remove a duplicate tag from domTagstoRemove, so it isn't cleared.
221 |             if (oldTags.some((existingTag, index) => {
222 |                 indexToDelete = index;
223 |                 return newElement.isEqualNode(existingTag);
224 |             })) {
225 |                 oldTags.splice(indexToDelete, 1);
226 |             } else {
227 |                 newTags.push(newElement);
228 |             }
229 |         });
230 |     }
231 | 
232 |     oldTags.forEach(tag => tag.parentNode.removeChild(tag));
233 |     newTags.forEach(tag => headElement.appendChild(tag));
234 | 
235 |     return {
236 |         oldTags,
237 |         newTags
238 |     };
239 | };
240 | 
241 | const generateHtmlAttributesAsString = (attributes) => Object.keys(attributes)
242 |     .reduce((str, key) => {
243 |         const attr = typeof attributes[key] !== "undefined"
244 |             ? `${key}="${attributes[key]}"`
245 |             : `${key}`;
246 |         return str ? `${str} ${attr}` : attr;
247 |     }, "");
248 | 
249 | const generateTitleAsString = (type, title, attributes) => {
250 |     const attributeString = generateHtmlAttributesAsString(attributes);
251 |     return attributeString
252 |         ? `<${type} ${HELMET_ATTRIBUTE} ${attributeString}>${encodeSpecialCharacters(title)}</${type}>`
253 |         : `<${type} ${HELMET_ATTRIBUTE}>${encodeSpecialCharacters(title)}</${type}>`;
254 | };
255 | 
256 | const generateTagsAsString = (type, tags) => tags.reduce((str, tag) => {
257 |     const attributeHtml = Object.keys(tag)
258 |         .filter(attribute => !(attribute === "innerHTML" || attribute === "cssText"))
259 |         .reduce((string, attribute) => {
260 |             const attr = typeof tag[attribute] === "undefined"
261 |                 ? attribute
262 |                 : `${attribute}="${encodeSpecialCharacters(tag[attribute])}"`;
263 |             return string ? `${string} ${attr}` : attr;
264 |         }, "");
265 | 
266 |     const tagContent = tag.innerHTML || tag.cssText || "";
267 | 
268 |     const isSelfClosing = [TAG_NAMES.NOSCRIPT, TAG_NAMES.SCRIPT, TAG_NAMES.STYLE].indexOf(type) === -1;
269 | 
270 |     return `${str}<${type} ${HELMET_ATTRIBUTE} ${attributeHtml}${isSelfClosing ? `>` : `>${tagContent}</${type}>`}`;
271 | }, "");
272 | 
273 | const generateTitleAsPreactComponent = (type, title, attributes) => {
274 |     // assigning into an array to define toString function on it
275 |     const initProps = {
276 |         key: title,
277 |         [HELMET_ATTRIBUTE]: true
278 |     };
279 |     const props = Object.keys(attributes).reduce((obj, key) => {
280 |         obj[key] = attributes[key];
281 |         return obj;
282 |     }, initProps);
283 | 
284 |     return [h(TAG_NAMES.TITLE, props, title)];
285 | };
286 | 
287 | const generateTagsAsPreactComponent = (type, tags) => tags.map((tag, i) => {
288 |     const mappedTag = {
289 |         key: i,
290 |         [HELMET_ATTRIBUTE]: true
291 |     };
292 | 
293 |     Object.keys(tag).forEach((attribute) => {
294 |         const mappedAttribute = attribute;
295 | 
296 |         if (mappedAttribute === "innerHTML" || mappedAttribute === "cssText") {
297 |             const content = tag.innerHTML || tag.cssText;
298 |             mappedTag.dangerouslySetInnerHTML = {__html: content};
299 |         } else {
300 |             mappedTag[mappedAttribute] = tag[attribute];
301 |         }
302 |     });
303 | 
304 |     return h(type, mappedTag);
305 | });
306 | 
307 | const getMethodsForTag = (type, tags) => {
308 |     switch (type) {
309 |         case TAG_NAMES.TITLE:
310 |             return {
311 |                 toComponent: () => generateTitleAsPreactComponent(type, tags.title, tags.titleAttributes),
312 |                 toString: () => generateTitleAsString(type, tags.title, tags.titleAttributes)
313 |             };
314 |         case TAG_NAMES.HTML:
315 |             return {
316 |                 toComponent: () => tags,
317 |                 toString: () => generateHtmlAttributesAsString(tags)
318 |             };
319 |         default:
320 |             return {
321 |                 toComponent: () => generateTagsAsPreactComponent(type, tags),
322 |                 toString: () => generateTagsAsString(type, tags)
323 |             };
324 |     }
325 | };
326 | 
327 | const mapStateOnServer = ({htmlAttributes, title, titleAttributes, baseTag, metaTags, linkTags, scriptTags, noscriptTags, styleTags}) => ({
328 |     htmlAttributes: getMethodsForTag(TAG_NAMES.HTML, htmlAttributes),
329 |     title: getMethodsForTag(TAG_NAMES.TITLE, {title, titleAttributes}),
330 |     base: getMethodsForTag(TAG_NAMES.BASE, baseTag),
331 |     meta: getMethodsForTag(TAG_NAMES.META, metaTags),
332 |     link: getMethodsForTag(TAG_NAMES.LINK, linkTags),
333 |     script: getMethodsForTag(TAG_NAMES.SCRIPT, scriptTags),
334 |     noscript: getMethodsForTag(TAG_NAMES.NOSCRIPT, noscriptTags),
335 |     style: getMethodsForTag(TAG_NAMES.STYLE, styleTags)
336 | });
337 | 
338 | 
339 | /**
340 |  * @param {Object} htmlAttributes: {"lang": "en", "amp": undefined}
341 |  * @param {String} title: "Title"
342 |  * @param {String} defaultTitle: "Default Title"
343 |  * @param {String} titleTemplate: "MySite.com - %s"
344 |  * @param {Object} titleAttributes: {"itemprop": "name"}
345 |  * @param {Object} base: {"target": "_blank", "href": "http://mysite.com/"}
346 |  * @param {Array} meta: [{"name": "description", "content": "Test description"}]
347 |  * @param {Array} link: [{"rel": "canonical", "href": "http://mysite.com/example"}]
348 |  * @param {Array} script: [{"type": "text/javascript", "src": "http://mysite.com/js/test.js"}]
349 |  * @param {Array} noscript: [{"innerHTML": "<img src='http://mysite.com/js/test.js'"}]
350 |  * @param {Array} style: [{"type": "text/css", "cssText": "div{ display: block; color: blue; }"}]
351 |  * @param {Function} onChangeClientState: "(newState) => console.log(newState)"
352 |  */
353 | const Helmet = (WrappedComponent) => class HelmetWrapper extends Component {
354 |     // WrappedComponent.peek comes from react-side-effect:
355 |     // For testing, you may use a static peek() method available on the returned component.
356 |     // It lets you get the current state without resetting the mounted instance stack.
357 |     // Don’t use it for anything other than testing.
358 |     static peek = WrappedComponent.peek
359 | 
360 |     static rewind = () => {
361 |         let mappedState = WrappedComponent.rewind();
362 |         if (!mappedState) {
363 |             // provide fallback if mappedState is undefined
364 |             mappedState = mapStateOnServer({
365 |                 htmlAttributes: {},
366 |                 title: "",
367 |                 titleAttributes: {},
368 |                 baseTag: [],
369 |                 metaTags: [],
370 |                 linkTags: [],
371 |                 scriptTags: [],
372 |                 noscriptTags: [],
373 |                 styleTags: []
374 |             });
375 |         }
376 | 
377 |         return mappedState;
378 |     }
379 | 
380 |     static set canUseDOM(canUseDOM) {
381 |         WrappedComponent.canUseDOM = canUseDOM;
382 |     }
383 | 
384 |     shouldComponentUpdate(nextProps) {
385 |         const props = {...nextProps};
386 |         if (!props.children || !props.children.length) {
387 |             delete props.children;
388 |         }
389 |         return !deepEqual(this.props, props);
390 |     }
391 | 
392 |     render() {
393 |         return (<WrappedComponent {...this.props} />);
394 |     }
395 | };
396 | 
397 | const reducePropsToState = (propsList) => ({
398 |     htmlAttributes: getAttributesFromPropsList(TAG_NAMES.HTML, propsList),
399 |     title: getTitleFromPropsList(propsList),
400 |     titleAttributes: getAttributesFromPropsList("titleAttributes", propsList),
401 |     baseTag: getBaseTagFromPropsList([TAG_PROPERTIES.HREF], propsList),
402 |     metaTags: getTagsFromPropsList(TAG_NAMES.META, [TAG_PROPERTIES.NAME, TAG_PROPERTIES.CHARSET, TAG_PROPERTIES.HTTPEQUIV, TAG_PROPERTIES.PROPERTY, TAG_PROPERTIES.ITEM_PROP], propsList),
403 |     linkTags: getTagsFromPropsList(TAG_NAMES.LINK, [TAG_PROPERTIES.REL, TAG_PROPERTIES.HREF], propsList),
404 |     scriptTags: getTagsFromPropsList(TAG_NAMES.SCRIPT, [TAG_PROPERTIES.SRC, TAG_PROPERTIES.INNER_HTML], propsList),
405 |     noscriptTags: getTagsFromPropsList(TAG_NAMES.NOSCRIPT, [TAG_PROPERTIES.INNER_HTML], propsList),
406 |     styleTags: getTagsFromPropsList(TAG_NAMES.STYLE, [TAG_PROPERTIES.CSS_TEXT], propsList),
407 |     onChangeClientState: getOnChangeClientState(propsList)
408 | });
409 | 
410 | const handleClientStateChange = (newState) => {
411 |     const {
412 |         htmlAttributes,
413 |         title,
414 |         titleAttributes,
415 |         baseTag,
416 |         metaTags,
417 |         linkTags,
418 |         scriptTags,
419 |         noscriptTags,
420 |         styleTags,
421 |         onChangeClientState
422 |     } = newState;
423 | 
424 |     updateAttributes("html", htmlAttributes);
425 | 
426 |     updateTitle(title, titleAttributes);
427 | 
428 |     const tagUpdates = {
429 |         baseTag: updateTags(TAG_NAMES.BASE, baseTag),
430 |         metaTags: updateTags(TAG_NAMES.META, metaTags),
431 |         linkTags: updateTags(TAG_NAMES.LINK, linkTags),
432 |         scriptTags: updateTags(TAG_NAMES.SCRIPT, scriptTags),
433 |         noscriptTags: updateTags(TAG_NAMES.NOSCRIPT, noscriptTags),
434 |         styleTags: updateTags(TAG_NAMES.STYLE, styleTags)
435 |     };
436 | 
437 |     const addedTags = {};
438 |     const removedTags = {};
439 | 
440 |     Object.keys(tagUpdates).forEach(tagType => {
441 |         const {newTags, oldTags} = tagUpdates[tagType];
442 | 
443 |         if (newTags.length) {
444 |             addedTags[tagType] = newTags;
445 |         }
446 |         if (oldTags.length) {
447 |             removedTags[tagType] = tagUpdates[tagType].oldTags;
448 |         }
449 |     });
450 | 
451 |     onChangeClientState(newState, addedTags, removedTags);
452 | };
453 | 
454 | const NullComponent = () => null;
455 | 
456 | const HelmetSideEffects = withSideEffect(
457 |     reducePropsToState,
458 |     handleClientStateChange,
459 |     mapStateOnServer
460 | )(NullComponent);
461 | 
462 | export default Helmet(HelmetSideEffects);
463 | 


--------------------------------------------------------------------------------
/src/HelmetConstants.js:
--------------------------------------------------------------------------------
 1 | export const TAG_NAMES = {
 2 |     HTML: "htmlAttributes",
 3 |     TITLE: "title",
 4 |     BASE: "base",
 5 |     META: "meta",
 6 |     LINK: "link",
 7 |     SCRIPT: "script",
 8 |     NOSCRIPT: "noscript",
 9 |     STYLE: "style"
10 | };
11 | 
12 | export const TAG_PROPERTIES = {
13 |     NAME: "name",
14 |     CHARSET: "charset",
15 |     HTTPEQUIV: "http-equiv",
16 |     REL: "rel",
17 |     HREF: "href",
18 |     PROPERTY: "property",
19 |     SRC: "src",
20 |     INNER_HTML: "innerHTML",
21 |     CSS_TEXT: "cssText",
22 |     ITEM_PROP: "itemprop"
23 | };
24 | 
25 | export const PREACT_TAG_MAP = {
26 |     "charset": "charSet",
27 |     "http-equiv": "httpEquiv",
28 |     "itemprop": "itemProp",
29 |     "class": "className"
30 | };
31 | 


--------------------------------------------------------------------------------
/src/test/HelmetTest.js:
--------------------------------------------------------------------------------
   1 | /* eslint max-nested-callbacks: [1, 5] */
   2 | 
   3 | import {h, render} from "preact"; /** @jsx h */
   4 | 
   5 | import {render as renderToString} from "preact-render-to-string";
   6 | import Helmet from "../Helmet";
   7 | 
   8 | const HELMET_ATTRIBUTE = "data-preact-helmet";
   9 | 
  10 | describe("Helmet", () => {
  11 |     let headElement;
  12 | 
  13 |     const container = document.createElement("div");
  14 |     let child;
  15 | 
  16 |     beforeEach(() => {
  17 |         headElement = headElement || document.head || document.querySelector("head");
  18 |     });
  19 | 
  20 |     afterEach(() => {
  21 |         child = unmountComponentAtNode(container, child);
  22 |     });
  23 | 
  24 |     describe("api", () => {
  25 |         describe("title", () => {
  26 |             it("can update page title", () => {
  27 |                 child = render(
  28 |                     <Helmet
  29 |                         defaultTitle={"Fallback"}
  30 |                         title={"Test Title"}
  31 |                     />,
  32 |                     container, child
  33 |                 );
  34 | 
  35 |                 expect(document.title).to.equal("Test Title");
  36 |             });
  37 | 
  38 |             it("can update page title with multiple children", () => {
  39 |                 child = render(
  40 |                     <div>
  41 |                         <Helmet title={"Test Title"} />
  42 |                         <Helmet title={"Child One Title"} />
  43 |                         <Helmet title={"Child Two Title"} />
  44 |                     </div>,
  45 |                     container, child
  46 |                 );
  47 | 
  48 |                 expect(document.title).to.equal("Child Two Title");
  49 |             });
  50 | 
  51 |             it("will set title based on deepest nested component", () => {
  52 |                 child = render(
  53 |                     <div>
  54 |                         <Helmet title={"Main Title"} />
  55 |                         <Helmet title={"Nested Title"} />
  56 |                     </div>,
  57 |                     container, child
  58 |                 );
  59 | 
  60 |                 expect(document.title).to.equal("Nested Title");
  61 |             });
  62 | 
  63 |             it("will set title using deepest nested component with a defined title", () => {
  64 |                 child = render(
  65 |                     <div>
  66 |                         <Helmet title={"Main Title"} />
  67 |                         <Helmet />
  68 |                     </div>,
  69 |                     container, child
  70 |                 );
  71 | 
  72 |                 expect(document.title).to.equal("Main Title");
  73 |             });
  74 | 
  75 |             it("will use defaultTitle if no title is defined", () => {
  76 |                 child = render(
  77 |                     <Helmet
  78 |                         defaultTitle={"Fallback"}
  79 |                         title={""}
  80 |                         titleTemplate={"This is a %s of the titleTemplate feature"}
  81 |                     />,
  82 |                     container, child
  83 |                 );
  84 | 
  85 |                 expect(document.title).to.equal("Fallback");
  86 |             });
  87 | 
  88 |             it("will use a titleTemplate if defined", () => {
  89 |                 child = render(
  90 |                     <Helmet
  91 |                         defaultTitle={"Fallback"}
  92 |                         title={"Test"}
  93 |                         titleTemplate={"This is a %s of the titleTemplate feature"}
  94 |                     />,
  95 |                     container, child
  96 |                 );
  97 | 
  98 |                 expect(document.title).to.equal("This is a Test of the titleTemplate feature");
  99 |             });
 100 | 
 101 |             it("will replace multiple title strings in titleTemplate", () => {
 102 |                 child = render(
 103 |                     <Helmet
 104 |                         title={"Test"}
 105 |                         titleTemplate={"This is a %s of the titleTemplate feature. Another %s."}
 106 |                     />,
 107 |                     container, child
 108 |                 );
 109 | 
 110 |                 expect(document.title).to.equal("This is a Test of the titleTemplate feature. Another Test.");
 111 |             });
 112 | 
 113 |             it("will use a titleTemplate based on deepest nested component", () => {
 114 |                 child = render(
 115 |                     <div>
 116 |                         <Helmet
 117 |                             title={"Test"}
 118 |                             titleTemplate={"This is a %s of the titleTemplate feature"}
 119 |                         />
 120 |                         <Helmet
 121 |                             title={"Second Test"}
 122 |                             titleTemplate={"A %s using nested titleTemplate attributes"}
 123 |                         />
 124 |                     </div>,
 125 |                     container, child
 126 |                 );
 127 | 
 128 |                 expect(document.title).to.equal("A Second Test using nested titleTemplate attributes");
 129 |             });
 130 | 
 131 |             it("will merge deepest component title with nearest upstream titleTemplate", () => {
 132 |                 child = render(
 133 |                     <div>
 134 |                         <Helmet
 135 |                             title={"Test"}
 136 |                             titleTemplate={"This is a %s of the titleTemplate feature"}
 137 |                         />
 138 |                         <Helmet title={"Second Test"} />
 139 |                     </div>,
 140 |                     container, child
 141 |                 );
 142 | 
 143 |                 expect(document.title).to.equal("This is a Second Test of the titleTemplate feature");
 144 |             });
 145 | 
 146 |             it("will render dollar characters in a title correctly when titleTemplate present", () => {
 147 |                 const dollarTitle = "te$t te$$t te$$$t te$$$$t";
 148 | 
 149 |                 child = render(
 150 |                     <Helmet title={dollarTitle}
 151 |                             titleTemplate={"This is a %s"}
 152 |                     />,
 153 |                     container, child
 154 |                 );
 155 | 
 156 |                 expect(document.title).to.equal("This is a te$t te$$t te$$$t te$$$$t");
 157 |             });
 158 | 
 159 |             it("will not encode all characters with HTML character entity equivalents", () => {
 160 |                 const chineseTitle = "膣膗 鍆錌雔";
 161 | 
 162 |                 child = render(
 163 |                     <div>
 164 |                         <Helmet title={chineseTitle} />
 165 |                     </div>,
 166 |                     container, child
 167 |                 );
 168 | 
 169 |                 expect(document.title).to.equal(chineseTitle);
 170 |             });
 171 | 
 172 |             it("page title with prop itemprop", () => {
 173 |                 child = render(
 174 |                     <Helmet
 175 |                         defaultTitle={"Fallback"}
 176 |                         title={"Test Title with itemProp"}
 177 |                         titleAttributes={{itemprop: "name"}}
 178 |                     />,
 179 |                     container, child
 180 |                 );
 181 | 
 182 |                 const titleTag = document.getElementsByTagName("title")[0];
 183 |                 expect(document.title).to.equal("Test Title with itemProp");
 184 |                 expect(titleTag.getAttribute("itemprop")).to.equal("name");
 185 |             });
 186 |         });
 187 | 
 188 |         describe("title attributes", () => {
 189 |             it("update title attributes", () => {
 190 |                 child = render(
 191 |                     <Helmet
 192 |                         titleAttributes={{
 193 |                             itemprop: "name"
 194 |                         }}
 195 |                     />,
 196 |                     container, child
 197 |                 );
 198 | 
 199 |                 const titleTag = document.getElementsByTagName("title")[0];
 200 | 
 201 |                 expect(titleTag.getAttribute("itemprop")).to.equal("name");
 202 |                 expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("itemprop");
 203 |             });
 204 | 
 205 |             it("set attributes based on the deepest nested component", () => {
 206 |                 child = render(
 207 |                     <div>
 208 |                         <Helmet
 209 |                             titleAttributes={{
 210 |                                 "lang": "en",
 211 |                                 "hidden": undefined
 212 |                             }}
 213 |                         />
 214 |                         <Helmet
 215 |                             titleAttributes={{
 216 |                                 "lang": "ja"
 217 |                             }}
 218 |                         />
 219 |                     </div>,
 220 |                     container, child
 221 |                 );
 222 | 
 223 |                 const titleTag = document.getElementsByTagName("title")[0];
 224 | 
 225 |                 expect(titleTag.getAttribute("lang")).to.equal("ja");
 226 |                 expect(titleTag.getAttribute("hidden")).to.equal("");
 227 |                 expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang,hidden");
 228 |             });
 229 | 
 230 |             it("handle valueless attributes", () => {
 231 |                 child = render(
 232 |                     <Helmet
 233 |                         titleAttributes={{
 234 |                             "hidden": undefined
 235 |                         }}
 236 |                     />,
 237 |                     container, child
 238 |                 );
 239 | 
 240 |                 const titleTag = document.getElementsByTagName("title")[0];
 241 | 
 242 |                 expect(titleTag.getAttribute("hidden")).to.equal("");
 243 |                 expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("hidden");
 244 |             });
 245 | 
 246 |             it("clears title attributes that are handled within helmet", () => {
 247 |                 child = render(
 248 |                     <Helmet
 249 |                         titleAttributes={{
 250 |                             "lang": "en",
 251 |                             "hidden": undefined
 252 |                         }}
 253 |                     />,
 254 |                     container, child
 255 |                 );
 256 | 
 257 |                 child = render(
 258 |                     <Helmet />,
 259 |                     container, child
 260 |                 );
 261 | 
 262 |                 const titleTag = document.getElementsByTagName("title")[0];
 263 | 
 264 |                 expect(titleTag.getAttribute("lang")).to.be.null;
 265 |                 expect(titleTag.getAttribute("hidden")).to.be.null;
 266 |                 expect(titleTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null);
 267 |             });
 268 |         });
 269 | 
 270 |         describe("html attributes", () => {
 271 |             it("update html attributes", () => {
 272 |                 child = render(
 273 |                     <Helmet
 274 |                         htmlAttributes={{
 275 |                             "class": "myClassName",
 276 |                             "lang": "en"
 277 |                         }}
 278 |                     />,
 279 |                     container, child
 280 |                 );
 281 | 
 282 |                 const htmlTag = document.getElementsByTagName("html")[0];
 283 | 
 284 |                 expect(htmlTag.getAttribute("class")).to.equal("myClassName");
 285 |                 expect(htmlTag.getAttribute("lang")).to.equal("en");
 286 |                 expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("class,lang");
 287 |             });
 288 | 
 289 |             it("set attributes based on the deepest nested component", () => {
 290 |                 child = render(
 291 |                     <div>
 292 |                         <Helmet
 293 |                             htmlAttributes={{
 294 |                                 "lang": "en"
 295 |                             }}
 296 |                         />
 297 |                         <Helmet
 298 |                             htmlAttributes={{
 299 |                                 "lang": "ja"
 300 |                             }}
 301 |                         />
 302 |                     </div>,
 303 |                     container, child
 304 |                 );
 305 | 
 306 |                 const htmlTag = document.getElementsByTagName("html")[0];
 307 | 
 308 |                 expect(htmlTag.getAttribute("lang")).to.equal("ja");
 309 |                 expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang");
 310 |             });
 311 | 
 312 |             it("handle valueless attributes", () => {
 313 |                 child = render(
 314 |                     <Helmet
 315 |                         htmlAttributes={{
 316 |                             "amp": undefined
 317 |                         }}
 318 |                     />,
 319 |                     container, child
 320 |                 );
 321 | 
 322 |                 const htmlTag = document.getElementsByTagName("html")[0];
 323 | 
 324 |                 expect(htmlTag.getAttribute("amp")).to.equal("");
 325 |                 expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("amp");
 326 |             });
 327 | 
 328 |             it("clears html attributes that are handled within helmet", () => {
 329 |                 child = render(
 330 |                     <Helmet
 331 |                         htmlAttributes={{
 332 |                             "lang": "en",
 333 |                             "amp": undefined
 334 |                         }}
 335 |                     />,
 336 |                     container, child
 337 |                 );
 338 | 
 339 |                 child = render(
 340 |                     <Helmet />,
 341 |                     container, child
 342 |                 );
 343 | 
 344 |                 const htmlTag = document.getElementsByTagName("html")[0];
 345 | 
 346 |                 expect(htmlTag.getAttribute("lang")).to.be.null;
 347 |                 expect(htmlTag.getAttribute("amp")).to.be.null;
 348 |                 expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null);
 349 |             });
 350 | 
 351 |             it("updates with multiple additions and removals - overwrite and new", () => {
 352 |                 child = render(
 353 |                     <Helmet
 354 |                         htmlAttributes={{
 355 |                             "lang": "en",
 356 |                             "amp": undefined
 357 |                         }}
 358 |                     />,
 359 |                     container, child
 360 |                 );
 361 | 
 362 |                 child = render(
 363 |                     <Helmet
 364 |                         htmlAttributes={{
 365 |                             "lang": "ja",
 366 |                             "id": "html-tag",
 367 |                             "title": "html tag"
 368 |                         }}
 369 |                     />,
 370 |                     container, child
 371 |                 );
 372 | 
 373 |                 const htmlTag = document.getElementsByTagName("html")[0];
 374 | 
 375 |                 expect(htmlTag.getAttribute("amp")).to.equal(null);
 376 |                 expect(htmlTag.getAttribute("lang")).to.equal("ja");
 377 |                 expect(htmlTag.getAttribute("id")).to.equal("html-tag");
 378 |                 expect(htmlTag.getAttribute("title")).to.equal("html tag");
 379 |                 expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang,amp,id,title");
 380 |             });
 381 | 
 382 |             it("updates with multiple additions and removals - all new", () => {
 383 |                 child = render(
 384 |                     <Helmet
 385 |                         htmlAttributes={{
 386 |                             "lang": "en",
 387 |                             "amp": undefined
 388 |                         }}
 389 |                     />,
 390 |                     container, child
 391 |                 );
 392 | 
 393 |                 child = render(
 394 |                     <Helmet
 395 |                         htmlAttributes={{
 396 |                             "id": "html-tag",
 397 |                             "title": "html tag"
 398 |                         }}
 399 |                     />,
 400 |                     container, child
 401 |                 );
 402 | 
 403 |                 const htmlTag = document.getElementsByTagName("html")[0];
 404 | 
 405 |                 expect(htmlTag.getAttribute("amp")).to.equal(null);
 406 |                 expect(htmlTag.getAttribute("lang")).to.equal(null);
 407 |                 expect(htmlTag.getAttribute("id")).to.equal("html-tag");
 408 |                 expect(htmlTag.getAttribute("title")).to.equal("html tag");
 409 |                 expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("lang,amp,id,title");
 410 |             });
 411 | 
 412 |             context("initialized outside of helmet", () => {
 413 |                 before(() => {
 414 |                     const htmlTag = document.getElementsByTagName("html")[0];
 415 |                     htmlTag.setAttribute("test", "test");
 416 |                 });
 417 | 
 418 |                 it("will not be cleared", () => {
 419 |                     child = render(
 420 |                         <Helmet />,
 421 |                         container, child
 422 |                     );
 423 | 
 424 |                     const htmlTag = document.getElementsByTagName("html")[0];
 425 | 
 426 |                     expect(htmlTag.getAttribute("test")).to.equal("test");
 427 |                     expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null);
 428 |                 });
 429 | 
 430 |                 it("will be overwritten if specified in helmet", () => {
 431 |                     child = render(
 432 |                         <Helmet
 433 |                             htmlAttributes={{
 434 |                                 "test": "helmet-attr"
 435 |                             }}
 436 |                         />,
 437 |                         container, child
 438 |                     );
 439 | 
 440 |                     const htmlTag = document.getElementsByTagName("html")[0];
 441 | 
 442 |                     expect(htmlTag.getAttribute("test")).to.equal("helmet-attr");
 443 |                     expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal("test");
 444 |                 });
 445 | 
 446 |                 it("can be cleared once it is managed in helmet", () => {
 447 |                     child = render(
 448 |                         <Helmet
 449 |                             htmlAttributes={{
 450 |                                 "test": "helmet-attr"
 451 |                             }}
 452 |                         />,
 453 |                         container, child
 454 |                     );
 455 | 
 456 |                     child = render(
 457 |                         <Helmet />,
 458 |                         container, child
 459 |                     );
 460 | 
 461 |                     const htmlTag = document.getElementsByTagName("html")[0];
 462 | 
 463 |                     expect(htmlTag.getAttribute("test")).to.equal(null);
 464 |                     expect(htmlTag.getAttribute(HELMET_ATTRIBUTE)).to.equal(null);
 465 |                 });
 466 |             });
 467 |         });
 468 | 
 469 |         describe("onChangeClientState", () => {
 470 |             it("when handling client state change, calls the function with new state, addedTags and removedTags ", () => {
 471 |                 const spy = sinon.spy();
 472 |                 child = render(
 473 |                     <div>
 474 |                         <Helmet
 475 |                             base={{"href": "http://mysite.com/"}}
 476 |                             link={[{"href": "http://localhost/helmet", "rel": "canonical"}]}
 477 |                             meta={[{"charset": "utf-8"}]}
 478 |                             script={[{"src": "http://localhost/test.js", "type": "text/javascript"}]}
 479 |                             title={"Main Title"}
 480 |                             onChangeClientState={spy}
 481 |                         />
 482 |                     </div>,
 483 |                     container, child
 484 |                 );
 485 | 
 486 |                 expect(spy.called).to.equal(true);
 487 |                 const newState = spy.getCall(0).args[0];
 488 |                 const addedTags = spy.getCall(0).args[1];
 489 |                 const removedTags = spy.getCall(0).args[2];
 490 | 
 491 |                 expect(newState).to.contain({title: "Main Title"});
 492 |                 expect(newState.baseTag).to.contain({href: "http://mysite.com/"});
 493 |                 expect(newState.metaTags).to.contain({"charset": "utf-8"});
 494 |                 expect(newState.linkTags).to.contain({"href": "http://localhost/helmet", "rel": "canonical"});
 495 |                 expect(newState.scriptTags).to.contain({"src": "http://localhost/test.js", "type": "text/javascript"});
 496 | 
 497 |                 expect(addedTags).to.have.property("baseTag");
 498 |                 expect(addedTags.baseTag).to.have.deep.property("[0]");
 499 |                 expect(addedTags.baseTag[0].outerHTML).to.equal(`<base href="http://mysite.com/" ${HELMET_ATTRIBUTE}="true">`);
 500 | 
 501 |                 expect(addedTags).to.have.property("metaTags");
 502 |                 expect(addedTags.metaTags).to.have.deep.property("[0]");
 503 |                 expect(addedTags.metaTags[0].outerHTML).to.equal(`<meta charset="utf-8" ${HELMET_ATTRIBUTE}="true">`);
 504 | 
 505 |                 expect(addedTags).to.have.property("linkTags");
 506 |                 expect(addedTags.linkTags).to.have.deep.property("[0]");
 507 |                 expect(addedTags.linkTags[0].outerHTML).to.equal(`<link href="http://localhost/helmet" rel="canonical" ${HELMET_ATTRIBUTE}="true">`);
 508 | 
 509 |                 expect(addedTags).to.have.property("scriptTags");
 510 |                 expect(addedTags.scriptTags).to.have.deep.property("[0]");
 511 |                 expect(addedTags.scriptTags[0].outerHTML).to.equal(`<script src="http://localhost/test.js" type="text/javascript" ${HELMET_ATTRIBUTE}="true"></script>`);
 512 | 
 513 |                 expect(removedTags).to.be.empty;
 514 |             });
 515 | 
 516 |             it("calls the deepest defined callback with the deepest state", () => {
 517 |                 const spy = sinon.spy();
 518 |                 child = render(
 519 |                     <div>
 520 |                         <Helmet title={"Main Title"} onChangeClientState={spy} />
 521 |                         <Helmet title={"Deeper Title"} />
 522 |                     </div>,
 523 |                     container, child
 524 |                 );
 525 | 
 526 |                 expect(spy.callCount).to.equal(2);
 527 |                 expect(spy.getCall(0).args[0]).to.contain({title: "Main Title"});
 528 |                 expect(spy.getCall(1).args[0]).to.contain({title: "Deeper Title"});
 529 |             });
 530 |         });
 531 | 
 532 |         describe("base tag", () => {
 533 |             it("can update base tag", () => {
 534 |                 child = render(
 535 |                     <Helmet
 536 |                         base={{"href": "http://mysite.com/"}}
 537 |                     />,
 538 |                     container, child
 539 |                 );
 540 | 
 541 |                 const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`);
 542 | 
 543 |                 expect(existingTags).to.not.equal(undefined);
 544 | 
 545 |                 const filteredTags = [].slice.call(existingTags).filter((tag) => {
 546 |                     return tag.getAttribute("href") === "http://mysite.com/";
 547 |                 });
 548 | 
 549 |                 expect(filteredTags.length).to.equal(1);
 550 |             });
 551 | 
 552 |             it("will clear the base tag if one is not specified", () => {
 553 |                 child = render(
 554 |                     <Helmet
 555 |                         base={{"href": "http://mysite.com/"}}
 556 |                     />,
 557 |                     container, child
 558 |                 );
 559 | 
 560 |                 child = render(
 561 |                     <Helmet />,
 562 |                     container, child
 563 |                 );
 564 | 
 565 |                 const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`);
 566 | 
 567 |                 expect(existingTags).to.not.equal(undefined);
 568 |                 expect(existingTags.length).to.equal(0);
 569 |             });
 570 | 
 571 |             it("tags without 'href' will not be accepted", () => {
 572 |                 child = render(
 573 |                     <Helmet
 574 |                         base={{"property": "won't work"}}
 575 |                     />,
 576 |                     container, child
 577 |                 );
 578 | 
 579 |                 const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`);
 580 | 
 581 |                 expect(existingTags).to.not.equal(undefined);
 582 |                 expect(existingTags.length).to.equal(0);
 583 |             });
 584 | 
 585 |             it("will set base tag based on deepest nested component", () => {
 586 |                 child = render(
 587 |                     <div>
 588 |                         <Helmet
 589 |                             base={{"href": "http://mysite.com/"}}
 590 |                         />
 591 |                         <Helmet
 592 |                             base={{"href": "http://mysite.com/public"}}
 593 |                         />
 594 |                     </div>,
 595 |                     container, child
 596 |                 );
 597 | 
 598 |                 const existingTags = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`);
 599 |                 const firstTag = Array.prototype.slice.call(existingTags)[0];
 600 | 
 601 |                 expect(existingTags).to.not.equal(undefined);
 602 | 
 603 |                 expect(existingTags.length).to.be.equal(1);
 604 | 
 605 |                 expect(existingTags)
 606 |                     .to.have.deep.property("[0]")
 607 |                     .that.is.an.instanceof(Element);
 608 |                 expect(firstTag).to.have.property("getAttribute");
 609 |                 expect(firstTag.getAttribute("href")).to.equal("http://mysite.com/public");
 610 |                 expect(firstTag.outerHTML).to.equal(`<base href="http://mysite.com/public" ${HELMET_ATTRIBUTE}="true">`);
 611 |             });
 612 | 
 613 |             it("won't render tag when primary attribute is null", () => {
 614 |                 child = render(
 615 |                     <Helmet
 616 |                         base={{"href": undefined}}
 617 |                     />,
 618 |                     container, child
 619 |                 );
 620 | 
 621 |                 const tagNodes = headElement.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`);
 622 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 623 |                 expect(existingTags).to.be.empty;
 624 |             });
 625 |         });
 626 | 
 627 |         describe("meta tags", () => {
 628 |             it("can update meta tags", () => {
 629 |                 child = render(
 630 |                     <Helmet
 631 |                         meta={[
 632 |                             {"charset": "utf-8"},
 633 |                             {"name": "description", "content": "Test description"},
 634 |                             {"http-equiv": "content-type", "content": "text/html"},
 635 |                             {"property": "og:type", "content": "article"},
 636 |                             {"itemprop": "name", "content": "Test name itemprop"}
 637 |                         ]}
 638 |                     />,
 639 |                     container, child
 640 |                 );
 641 | 
 642 |                 const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 643 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 644 | 
 645 |                 expect(existingTags).to.not.equal(undefined);
 646 | 
 647 |                 const filteredTags = [].slice.call(existingTags).filter((tag) => {
 648 |                     return tag.getAttribute("charset") === "utf-8" ||
 649 |                         (tag.getAttribute("name") === "description" && tag.getAttribute("content") === "Test description") ||
 650 |                         (tag.getAttribute("http-equiv") === "content-type" && tag.getAttribute("content") === "text/html") ||
 651 |                         (tag.getAttribute("itemprop") === "name" && tag.getAttribute("content") === "Test name itemprop");
 652 |                 });
 653 | 
 654 |                 expect(filteredTags.length).to.be.at.least(4);
 655 |             });
 656 | 
 657 |             it("will clear all meta tags if none are specified", () => {
 658 |                 child = render(
 659 |                     <Helmet
 660 |                         meta={[{"name": "description", "content": "Test description"}]}
 661 |                     />,
 662 |                     container, child
 663 |                 );
 664 | 
 665 |                 child = render(
 666 |                     <Helmet />,
 667 |                     container, child
 668 |                 );
 669 | 
 670 |                 const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 671 | 
 672 |                 expect(existingTags).to.not.equal(undefined);
 673 |                 expect(existingTags.length).to.equal(0);
 674 |             });
 675 | 
 676 |             it("tags without 'name', 'http-equiv', 'property', 'charset', or 'itemprop' will not be accepted", () => {
 677 |                 child = render(
 678 |                     <Helmet
 679 |                         meta={[{"href": "won't work"}]}
 680 |                     />,
 681 |                     container, child
 682 |                 );
 683 | 
 684 |                 const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 685 | 
 686 |                 expect(existingTags).to.not.equal(undefined);
 687 |                 expect(existingTags.length).to.equal(0);
 688 |             });
 689 | 
 690 |             it("will set meta tags based on deepest nested component", () => {
 691 |                 child = render(
 692 |                     <div>
 693 |                         <Helmet
 694 |                             meta={[
 695 |                                 {"charset": "utf-8"},
 696 |                                 {"name": "description", "content": "Test description"}
 697 |                             ]}
 698 |                         />
 699 |                         <Helmet
 700 |                             meta={[
 701 |                                 {"name": "description", "content": "Inner description"},
 702 |                                 {"name": "keywords", "content": "test,meta,tags"}
 703 |                             ]}
 704 |                         />
 705 |                     </div>,
 706 |                     container, child
 707 |                 );
 708 | 
 709 |                 const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 710 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 711 | 
 712 |                 const firstTag = existingTags[0];
 713 |                 const secondTag = existingTags[1];
 714 |                 const thirdTag = existingTags[2];
 715 | 
 716 |                 expect(existingTags).to.not.equal(undefined);
 717 | 
 718 |                 expect(existingTags.length).to.be.equal(3);
 719 | 
 720 |                 expect(existingTags)
 721 |                     .to.have.deep.property("[0]")
 722 |                     .that.is.an.instanceof(Element);
 723 |                 expect(firstTag).to.have.property("getAttribute");
 724 |                 expect(firstTag.getAttribute("charset")).to.equal("utf-8");
 725 |                 expect(firstTag.outerHTML).to.equal(`<meta charset="utf-8" ${HELMET_ATTRIBUTE}="true">`);
 726 | 
 727 |                 expect(existingTags)
 728 |                     .to.have.deep.property("[1]")
 729 |                     .that.is.an.instanceof(Element);
 730 |                 expect(secondTag).to.have.property("getAttribute");
 731 |                 expect(secondTag.getAttribute("name")).to.equal("description");
 732 |                 expect(secondTag.getAttribute("content")).to.equal("Inner description");
 733 |                 expect(secondTag.outerHTML).to.equal(`<meta name="description" content="Inner description" ${HELMET_ATTRIBUTE}="true">`);
 734 | 
 735 |                 expect(existingTags)
 736 |                     .to.have.deep.property("[2]")
 737 |                     .that.is.an.instanceof(Element);
 738 |                 expect(thirdTag).to.have.property("getAttribute");
 739 |                 expect(thirdTag.getAttribute("name")).to.equal("keywords");
 740 |                 expect(thirdTag.getAttribute("content")).to.equal("test,meta,tags");
 741 |                 expect(thirdTag.outerHTML).to.equal(`<meta name="keywords" content="test,meta,tags" ${HELMET_ATTRIBUTE}="true">`);
 742 |             });
 743 | 
 744 |             it("will allow duplicate meta tags if specified in the same component", () => {
 745 |                 child = render(
 746 |                     <Helmet
 747 |                         meta={[
 748 |                             {"name": "description", "content": "Test description"},
 749 |                             {"name": "description", "content": "Duplicate description"}
 750 |                         ]}
 751 |                     />,
 752 |                     container, child
 753 |                 );
 754 | 
 755 |                 const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 756 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 757 |                 const firstTag = existingTags[0];
 758 |                 const secondTag = existingTags[1];
 759 | 
 760 |                 expect(existingTags).to.not.equal(undefined);
 761 | 
 762 |                 expect(existingTags.length).to.equal(2);
 763 | 
 764 |                 expect(existingTags)
 765 |                     .to.have.deep.property("[0]")
 766 |                     .that.is.an.instanceof(Element);
 767 |                 expect(firstTag).to.have.property("getAttribute");
 768 |                 expect(firstTag.getAttribute("name")).to.equal("description");
 769 |                 expect(firstTag.getAttribute("content")).to.equal("Test description");
 770 |                 expect(firstTag.outerHTML).to.equal(`<meta name="description" content="Test description" ${HELMET_ATTRIBUTE}="true">`);
 771 | 
 772 |                 expect(existingTags)
 773 |                     .to.have.deep.property("[1]")
 774 |                     .that.is.an.instanceof(Element);
 775 |                 expect(secondTag).to.have.property("getAttribute");
 776 |                 expect(secondTag.getAttribute("name")).to.equal("description");
 777 |                 expect(secondTag.getAttribute("content")).to.equal("Duplicate description");
 778 |                 expect(secondTag.outerHTML).to.equal(`<meta name="description" content="Duplicate description" ${HELMET_ATTRIBUTE}="true">`);
 779 |             });
 780 | 
 781 |             it("will override duplicate meta tags with single meta tag in a nested component", () => {
 782 |                 child = render(
 783 |                     <div>
 784 |                         <Helmet
 785 |                             meta={[
 786 |                                 {"name": "description", "content": "Test description"},
 787 |                                 {"name": "description", "content": "Duplicate description"}
 788 |                             ]}
 789 |                         />
 790 |                         <Helmet
 791 |                             meta={[
 792 |                                 {"name": "description", "content": "Inner description"}
 793 |                             ]}
 794 |                         />
 795 |                     </div>,
 796 |                     container, child
 797 |                 );
 798 | 
 799 |                 const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 800 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 801 |                 const firstTag = existingTags[0];
 802 | 
 803 |                 expect(existingTags).to.not.equal(undefined);
 804 | 
 805 |                 expect(existingTags.length).to.equal(1);
 806 | 
 807 |                 expect(existingTags)
 808 |                     .to.have.deep.property("[0]")
 809 |                     .that.is.an.instanceof(Element);
 810 |                 expect(firstTag).to.have.property("getAttribute");
 811 |                 expect(firstTag.getAttribute("name")).to.equal("description");
 812 |                 expect(firstTag.getAttribute("content")).to.equal("Inner description");
 813 |                 expect(firstTag.outerHTML).to.equal(`<meta name="description" content="Inner description" ${HELMET_ATTRIBUTE}="true">`);
 814 |             });
 815 | 
 816 |             it("will override single meta tag with duplicate meta tags in a nested component", () => {
 817 |                 child = render(
 818 |                     <div>
 819 |                         <Helmet
 820 |                             meta={[
 821 |                                 {"name": "description", "content": "Test description"}
 822 |                             ]}
 823 |                         />
 824 |                         <Helmet
 825 |                             meta={[
 826 |                                 {"name": "description", "content": "Inner description"},
 827 |                                 {"name": "description", "content": "Inner duplicate description"}
 828 |                             ]}
 829 |                         />
 830 |                     </div>,
 831 |                     container, child
 832 |                 );
 833 | 
 834 |                 const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 835 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 836 |                 const firstTag = existingTags[0];
 837 |                 const secondTag = existingTags[1];
 838 | 
 839 |                 expect(existingTags).to.not.equal(undefined);
 840 | 
 841 |                 expect(existingTags.length).to.equal(2);
 842 | 
 843 |                 expect(existingTags)
 844 |                     .to.have.deep.property("[0]")
 845 |                     .that.is.an.instanceof(Element);
 846 |                 expect(firstTag).to.have.property("getAttribute");
 847 |                 expect(firstTag.getAttribute("name")).to.equal("description");
 848 |                 expect(firstTag.getAttribute("content")).to.equal("Inner description");
 849 |                 expect(firstTag.outerHTML).to.equal(`<meta name="description" content="Inner description" ${HELMET_ATTRIBUTE}="true">`);
 850 | 
 851 |                 expect(existingTags)
 852 |                     .to.have.deep.property("[1]")
 853 |                     .that.is.an.instanceof(Element);
 854 |                 expect(secondTag).to.have.property("getAttribute");
 855 |                 expect(secondTag.getAttribute("name")).to.equal("description");
 856 |                 expect(secondTag.getAttribute("content")).to.equal("Inner duplicate description");
 857 |                 expect(secondTag.outerHTML).to.equal(`<meta name="description" content="Inner duplicate description" ${HELMET_ATTRIBUTE}="true">`);
 858 |             });
 859 | 
 860 |             it("won't render tag when primary attribute is null", () => {
 861 |                 child = render(
 862 |                     <Helmet
 863 |                         meta={[
 864 |                             {"name": undefined, "content": "Inner duplicate description"}
 865 |                         ]}
 866 |                     />,
 867 |                     container, child
 868 |                 );
 869 | 
 870 |                 const tagNodes = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
 871 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 872 |                 expect(existingTags).to.be.empty;
 873 |             });
 874 |         });
 875 | 
 876 |         describe("link tags", () => {
 877 |             it("can update link tags", () => {
 878 |                 child = render(
 879 |                     <Helmet
 880 |                         link={[
 881 |                             {"href": "http://localhost/helmet", "rel": "canonical"},
 882 |                             {"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css"}
 883 |                         ]}
 884 |                     />,
 885 |                     container, child
 886 |                 );
 887 | 
 888 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
 889 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 890 | 
 891 |                 expect(existingTags).to.not.equal(undefined);
 892 | 
 893 |                 const filteredTags = [].slice.call(existingTags).filter((tag) => {
 894 |                     return (tag.getAttribute("href") === "http://localhost/style.css" && tag.getAttribute("rel") === "stylesheet" && tag.getAttribute("type") === "text/css") ||
 895 |                         (tag.getAttribute("href") === "http://localhost/helmet" && tag.getAttribute("rel") === "canonical");
 896 |                 });
 897 | 
 898 |                 expect(filteredTags.length).to.be.at.least(2);
 899 |             });
 900 | 
 901 |             it("will clear all link tags if none are specified", () => {
 902 |                 child = render(
 903 |                     <Helmet
 904 |                         link={[
 905 |                             {"href": "http://localhost/helmet", "rel": "canonical"}
 906 |                         ]}
 907 |                     />,
 908 |                     container, child
 909 |                 );
 910 | 
 911 |                 child = render(
 912 |                     <Helmet />,
 913 |                     container, child
 914 |                 );
 915 | 
 916 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
 917 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 918 | 
 919 |                 expect(existingTags).to.not.equal(undefined);
 920 |                 expect(existingTags.length).to.equal(0);
 921 |             });
 922 | 
 923 |             it("tags without 'href' or 'rel' will not be accepted, even if they are valid for other tags", () => {
 924 |                 child = render(
 925 |                     <Helmet
 926 |                         link={[{"http-equiv": "won't work"}]}
 927 |                     />,
 928 |                     container, child
 929 |                 );
 930 | 
 931 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
 932 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 933 | 
 934 |                 expect(existingTags).to.not.equal(undefined);
 935 |                 expect(existingTags.length).to.equal(0);
 936 |             });
 937 | 
 938 |             it("tags 'rel' and 'href' will properly use 'rel' as the primary identification for this tag, regardless of ordering", () => {
 939 |                 child = render(
 940 |                     <div>
 941 |                         <Helmet
 942 |                             link={[{"href": "http://localhost/helmet", "rel": "canonical"}]}
 943 |                         />
 944 |                         <Helmet
 945 |                             link={[{"rel": "canonical", "href": "http://localhost/helmet/new"}]}
 946 |                         />
 947 |                         <Helmet
 948 |                             link={[{"href": "http://localhost/helmet/newest", "rel": "canonical"}]}
 949 |                         />
 950 |                     </div>,
 951 |                     container, child
 952 |                 );
 953 | 
 954 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
 955 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 956 |                 const firstTag = existingTags[0];
 957 | 
 958 |                 expect(existingTags).to.not.equal(undefined);
 959 | 
 960 |                 expect(existingTags.length).to.equal(1);
 961 | 
 962 |                 expect(existingTags)
 963 |                     .to.have.deep.property("[0]")
 964 |                     .that.is.an.instanceof(Element);
 965 |                 expect(firstTag).to.have.property("getAttribute");
 966 |                 expect(firstTag.getAttribute("rel")).to.equal("canonical");
 967 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/newest");
 968 |                 expect(firstTag.outerHTML).to.equal(`<link href="http://localhost/helmet/newest" rel="canonical" ${HELMET_ATTRIBUTE}="true">`);
 969 |             });
 970 | 
 971 |             it("tags with rel='stylesheet' will use the href as the primary identification of the tag, regardless of ordering", () => {
 972 |                 child = render(
 973 |                     <div>
 974 |                         <Helmet
 975 |                             link={[
 976 |                                 {"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css", "media": "all"}
 977 |                             ]}
 978 |                         />
 979 |                         <Helmet
 980 |                             link={[
 981 |                                 {"rel": "stylesheet", "href": "http://localhost/inner.css", "type": "text/css", "media": "all"}
 982 |                             ]}
 983 |                         />
 984 |                     </div>,
 985 |                     container, child
 986 |                 );
 987 | 
 988 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
 989 |                 const existingTags = Array.prototype.slice.call(tagNodes);
 990 |                 const firstTag = existingTags[0];
 991 |                 const secondTag = existingTags[1];
 992 | 
 993 |                 expect(existingTags).to.not.equal(undefined);
 994 | 
 995 |                 expect(existingTags.length).to.equal(2);
 996 | 
 997 |                 expect(existingTags)
 998 |                     .to.have.deep.property("[0]")
 999 |                     .that.is.an.instanceof(Element);
1000 |                 expect(firstTag).to.have.property("getAttribute");
1001 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/style.css");
1002 |                 expect(firstTag.getAttribute("rel")).to.equal("stylesheet");
1003 |                 expect(firstTag.getAttribute("type")).to.equal("text/css");
1004 |                 expect(firstTag.getAttribute("media")).to.equal("all");
1005 |                 expect(firstTag.outerHTML).to.equal(`<link href="http://localhost/style.css" rel="stylesheet" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`);
1006 | 
1007 |                 expect(existingTags)
1008 |                     .to.have.deep.property("[1]")
1009 |                     .that.is.an.instanceof(Element);
1010 |                 expect(secondTag).to.have.property("getAttribute");
1011 |                 expect(secondTag.getAttribute("rel")).to.equal("stylesheet");
1012 |                 expect(secondTag.getAttribute("href")).to.equal("http://localhost/inner.css");
1013 |                 expect(secondTag.getAttribute("type")).to.equal("text/css");
1014 |                 expect(secondTag.getAttribute("media")).to.equal("all");
1015 |                 expect(secondTag.outerHTML).to.equal(`<link rel="stylesheet" href="http://localhost/inner.css" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`);
1016 |             });
1017 | 
1018 |             it("will set link tags based on deepest nested component", () => {
1019 |                 child = render(
1020 |                     <div>
1021 |                         <Helmet
1022 |                             link={[
1023 |                                 {"rel": "canonical", "href": "http://localhost/helmet"},
1024 |                                 {"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css", "media": "all"}
1025 |                             ]}
1026 |                         />
1027 |                         <Helmet
1028 |                             link={[
1029 |                                 {"rel": "canonical", "href": "http://localhost/helmet/innercomponent"},
1030 |                                 {"href": "http://localhost/inner.css", "rel": "stylesheet", "type": "text/css", "media": "all"}
1031 |                             ]}
1032 |                         />
1033 |                     </div>,
1034 |                     container, child
1035 |                 );
1036 | 
1037 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
1038 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1039 |                 const firstTag = existingTags[0];
1040 |                 const secondTag = existingTags[1];
1041 |                 const thirdTag = existingTags[2];
1042 | 
1043 |                 expect(existingTags).to.not.equal(undefined);
1044 | 
1045 |                 expect(existingTags.length).to.be.at.least(2);
1046 | 
1047 |                 expect(existingTags)
1048 |                     .to.have.deep.property("[0]")
1049 |                     .that.is.an.instanceof(Element);
1050 |                 expect(firstTag).to.have.property("getAttribute");
1051 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/style.css");
1052 |                 expect(firstTag.getAttribute("rel")).to.equal("stylesheet");
1053 |                 expect(firstTag.getAttribute("type")).to.equal("text/css");
1054 |                 expect(firstTag.getAttribute("media")).to.equal("all");
1055 |                 expect(firstTag.outerHTML).to.equal(`<link href="http://localhost/style.css" rel="stylesheet" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`);
1056 | 
1057 |                 expect(existingTags)
1058 |                     .to.have.deep.property("[1]")
1059 |                     .that.is.an.instanceof(Element);
1060 |                 expect(secondTag).to.have.property("getAttribute");
1061 |                 expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent");
1062 |                 expect(secondTag.getAttribute("rel")).to.equal("canonical");
1063 |                 expect(secondTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet/innercomponent" ${HELMET_ATTRIBUTE}="true">`);
1064 | 
1065 |                 expect(existingTags)
1066 |                     .to.have.deep.property("[2]")
1067 |                     .that.is.an.instanceof(Element);
1068 |                 expect(thirdTag).to.have.property("getAttribute");
1069 |                 expect(thirdTag.getAttribute("href")).to.equal("http://localhost/inner.css");
1070 |                 expect(thirdTag.getAttribute("rel")).to.equal("stylesheet");
1071 |                 expect(thirdTag.getAttribute("type")).to.equal("text/css");
1072 |                 expect(thirdTag.getAttribute("media")).to.equal("all");
1073 |                 expect(thirdTag.outerHTML).to.equal(`<link href="http://localhost/inner.css" rel="stylesheet" type="text/css" media="all" ${HELMET_ATTRIBUTE}="true">`);
1074 |             });
1075 | 
1076 |             it("will allow duplicate link tags if specified in the same component", () => {
1077 |                 child = render(
1078 |                     <Helmet
1079 |                         link={[
1080 |                             {"rel": "canonical", "href": "http://localhost/helmet"},
1081 |                             {"rel": "canonical", "href": "http://localhost/helmet/component"}
1082 |                         ]}
1083 |                     />,
1084 |                     container, child
1085 |                 );
1086 | 
1087 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
1088 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1089 |                 const firstTag = existingTags[0];
1090 |                 const secondTag = existingTags[1];
1091 | 
1092 |                 expect(existingTags).to.not.equal(undefined);
1093 | 
1094 |                 expect(existingTags.length).to.be.at.least(2);
1095 | 
1096 |                 expect(existingTags)
1097 |                     .to.have.deep.property("[0]")
1098 |                     .that.is.an.instanceof(Element);
1099 |                 expect(firstTag).to.have.property("getAttribute");
1100 |                 expect(firstTag.getAttribute("rel")).to.equal("canonical");
1101 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet");
1102 |                 expect(firstTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet" ${HELMET_ATTRIBUTE}="true">`);
1103 | 
1104 |                 expect(existingTags)
1105 |                     .to.have.deep.property("[1]")
1106 |                     .that.is.an.instanceof(Element);
1107 |                 expect(secondTag).to.have.property("getAttribute");
1108 |                 expect(secondTag.getAttribute("rel")).to.equal("canonical");
1109 |                 expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/component");
1110 |                 expect(secondTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet/component" ${HELMET_ATTRIBUTE}="true">`);
1111 |             });
1112 | 
1113 |             it("will override duplicate link tags with a single link tag in a nested component", () => {
1114 |                 child = render(
1115 |                     <div>
1116 |                         <Helmet
1117 |                             link={[
1118 |                                 {"rel": "canonical", "href": "http://localhost/helmet"},
1119 |                                 {"rel": "canonical", "href": "http://localhost/helmet/component"}
1120 |                             ]}
1121 |                         />
1122 |                         <Helmet
1123 |                             link={[
1124 |                                 {"rel": "canonical", "href": "http://localhost/helmet/innercomponent"}
1125 |                             ]}
1126 |                         />
1127 |                     </div>,
1128 |                     container, child
1129 |                 );
1130 | 
1131 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
1132 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1133 |                 const firstTag = existingTags[0];
1134 | 
1135 |                 expect(existingTags).to.not.equal(undefined);
1136 | 
1137 |                 expect(existingTags.length).to.be.equal(1);
1138 | 
1139 |                 expect(existingTags)
1140 |                     .to.have.deep.property("[0]")
1141 |                     .that.is.an.instanceof(Element);
1142 |                 expect(firstTag).to.have.property("getAttribute");
1143 |                 expect(firstTag.getAttribute("rel")).to.equal("canonical");
1144 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent");
1145 |                 expect(firstTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet/innercomponent" ${HELMET_ATTRIBUTE}="true">`);
1146 |             });
1147 | 
1148 |             it("will override single link tag with duplicate link tags in a nested component", () => {
1149 |                 child = render(
1150 |                     <div>
1151 |                         <Helmet
1152 |                             link={[
1153 |                                 {"rel": "canonical", "href": "http://localhost/helmet"}
1154 |                             ]}
1155 |                         />
1156 |                         <Helmet
1157 |                             link={[
1158 |                                 {"rel": "canonical", "href": "http://localhost/helmet/component"},
1159 |                                 {"rel": "canonical", "href": "http://localhost/helmet/innercomponent"}
1160 |                             ]}
1161 |                         />
1162 |                     </div>,
1163 |                     container, child
1164 |                 );
1165 | 
1166 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
1167 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1168 |                 const firstTag = existingTags[0];
1169 |                 const secondTag = existingTags[1];
1170 | 
1171 |                 expect(existingTags).to.not.equal(undefined);
1172 | 
1173 |                 expect(existingTags.length).to.be.equal(2);
1174 | 
1175 |                 expect(existingTags)
1176 |                     .to.have.deep.property("[0]")
1177 |                     .that.is.an.instanceof(Element);
1178 |                 expect(firstTag).to.have.property("getAttribute");
1179 |                 expect(firstTag.getAttribute("rel")).to.equal("canonical");
1180 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/component");
1181 |                 expect(firstTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet/component" ${HELMET_ATTRIBUTE}="true">`);
1182 | 
1183 |                 expect(existingTags)
1184 |                     .to.have.deep.property("[1]")
1185 |                     .that.is.an.instanceof(Element);
1186 |                 expect(secondTag).to.have.property("getAttribute");
1187 |                 expect(secondTag.getAttribute("rel")).to.equal("canonical");
1188 |                 expect(secondTag.getAttribute("href")).to.equal("http://localhost/helmet/innercomponent");
1189 |                 expect(secondTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet/innercomponent" ${HELMET_ATTRIBUTE}="true">`);
1190 |             });
1191 | 
1192 |             it("won't render tag when primary attribute is null", () => {
1193 |                 child = render(
1194 |                     <Helmet
1195 |                         link={[
1196 |                             {"rel": "icon", "sizes": "192x192", "href": null},
1197 |                             {"rel": "canonical", "href": "http://localhost/helmet/component"}
1198 |                         ]}
1199 |                     />,
1200 |                     container, child
1201 |                 );
1202 | 
1203 |                 const tagNodes = headElement.querySelectorAll(`link[${HELMET_ATTRIBUTE}]`);
1204 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1205 |                 const firstTag = existingTags[0];
1206 | 
1207 |                 expect(existingTags).to.not.equal(undefined);
1208 |                 expect(existingTags.length).to.be.equal(1);
1209 | 
1210 |                 expect(existingTags)
1211 |                     .to.have.deep.property("[0]")
1212 |                     .that.is.an.instanceof(Element);
1213 |                 expect(firstTag).to.have.property("getAttribute");
1214 |                 expect(firstTag.getAttribute("rel")).to.equal("canonical");
1215 |                 expect(firstTag.getAttribute("href")).to.equal("http://localhost/helmet/component");
1216 |                 expect(firstTag.outerHTML).to.equal(`<link rel="canonical" href="http://localhost/helmet/component" ${HELMET_ATTRIBUTE}="true">`);
1217 |             });
1218 |         });
1219 | 
1220 |         describe("script tags", () => {
1221 |             it("can update script tags", () => {
1222 |                 const scriptInnerHTML = `
1223 |                   {
1224 |                     "@context": "http://schema.org",
1225 |                     "@type": "NewsArticle",
1226 |                     "url": "http://localhost/helmet"
1227 |                   }
1228 |                 `;
1229 |                 child = render(
1230 |                     <Helmet
1231 |                         script={[
1232 |                             {"src": "http://localhost/test.js", "type": "text/javascript"},
1233 |                             {"src": "http://localhost/test2.js", "type": "text/javascript"},
1234 |                             {
1235 |                                 type: "application/ld+json",
1236 |                                 innerHTML: scriptInnerHTML
1237 |                             }
1238 |                         ]}
1239 |                     />,
1240 |                     container, child
1241 |                 );
1242 | 
1243 |                 const existingTags = headElement.getElementsByTagName("script");
1244 | 
1245 |                 expect(existingTags).to.not.equal(undefined);
1246 | 
1247 |                 const filteredTags = [].slice.call(existingTags).filter((tag) => {
1248 |                     return (tag.getAttribute("src") === "http://localhost/test.js" && tag.getAttribute("type") === "text/javascript") ||
1249 |                         (tag.getAttribute("src") === "http://localhost/test2.js" && tag.getAttribute("type") === "text/javascript") ||
1250 |                         (tag.getAttribute("type") === "application/ld+json" && tag.innerHTML === scriptInnerHTML);
1251 |                 });
1252 | 
1253 |                 expect(filteredTags.length).to.be.at.least(3);
1254 |             });
1255 | 
1256 |             it("will clear all scripts tags if none are specified", () => {
1257 |                 child = render(
1258 |                     <Helmet
1259 |                         script={[
1260 |                             {"src": "http://localhost/test.js", "type": "text/javascript"}
1261 |                         ]}
1262 |                     />,
1263 |                     container, child
1264 |                 );
1265 | 
1266 |                 child = render(
1267 |                     <Helmet />,
1268 |                     container, child
1269 |                 );
1270 | 
1271 |                 const existingTags = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`);
1272 | 
1273 |                 expect(existingTags).to.not.equal(undefined);
1274 |                 expect(existingTags.length).to.equal(0);
1275 |             });
1276 | 
1277 |             it("tags without 'src' will not be accepted", () => {
1278 |                 child = render(
1279 |                     <Helmet
1280 |                         script={[{"property": "won't work"}]}
1281 |                     />,
1282 |                     container, child
1283 |                 );
1284 | 
1285 |                 const existingTags = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`);
1286 | 
1287 |                 expect(existingTags).to.not.equal(undefined);
1288 |                 expect(existingTags.length).to.equal(0);
1289 |             });
1290 | 
1291 |             it("will set script tags based on deepest nested component", () => {
1292 |                 child = render(
1293 |                     <div>
1294 |                         <Helmet
1295 |                             script={[
1296 |                                 {"src": "http://localhost/test.js", "type": "text/javascript"}
1297 |                             ]}
1298 |                         />
1299 |                         <Helmet
1300 |                             script={[
1301 |                                 {"src": "http://localhost/test2.js", "type": "text/javascript"}
1302 |                             ]}
1303 |                         />
1304 |                     </div>,
1305 |                     container, child
1306 |                 );
1307 | 
1308 |                 const tagNodes = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`);
1309 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1310 |                 const firstTag = existingTags[0];
1311 |                 const secondTag = existingTags[1];
1312 | 
1313 |                 expect(existingTags).to.not.equal(undefined);
1314 | 
1315 |                 expect(existingTags.length).to.be.at.least(2);
1316 | 
1317 |                 expect(existingTags)
1318 |                     .to.have.deep.property("[0]")
1319 |                     .that.is.an.instanceof(Element);
1320 |                 expect(firstTag).to.have.property("getAttribute");
1321 |                 expect(firstTag.getAttribute("src")).to.equal("http://localhost/test.js");
1322 |                 expect(firstTag.getAttribute("type")).to.equal("text/javascript");
1323 |                 expect(firstTag.outerHTML).to.equal(`<script src="http://localhost/test.js" type="text/javascript" ${HELMET_ATTRIBUTE}="true"></script>`);
1324 | 
1325 |                 expect(existingTags)
1326 |                     .to.have.deep.property("[1]")
1327 |                     .that.is.an.instanceof(Element);
1328 |                 expect(secondTag).to.have.property("getAttribute");
1329 |                 expect(secondTag.getAttribute("src")).to.equal("http://localhost/test2.js");
1330 |                 expect(secondTag.getAttribute("type")).to.equal("text/javascript");
1331 |                 expect(secondTag.outerHTML).to.equal(`<script src="http://localhost/test2.js" type="text/javascript" ${HELMET_ATTRIBUTE}="true"></script>`);
1332 |             });
1333 | 
1334 | 
1335 |             it("sets undefined attribute values to empty strings", () => {
1336 |                 child = render(
1337 |                     <Helmet
1338 |                         script={[
1339 |                             {
1340 |                                 src: "foo.js",
1341 |                                 async: undefined
1342 |                             }
1343 |                         ]}
1344 |                     />,
1345 |                     container, child
1346 |                 );
1347 | 
1348 |                 const existingTag = headElement.querySelector(`script[${HELMET_ATTRIBUTE}]`);
1349 | 
1350 |                 expect(existingTag).to.not.equal(undefined);
1351 |                 expect(existingTag.outerHTML)
1352 |                     .to.be.a("string")
1353 |                     .that.equals(`<script src="foo.js" async="" ${HELMET_ATTRIBUTE}="true"></script>`);
1354 |             });
1355 | 
1356 |             it("won't render tag when primary attribute (src) is null", () => {
1357 |                 child = render(
1358 |                     <Helmet
1359 |                         script={[
1360 |                             {
1361 |                                 src: undefined,
1362 |                                 type: "text/javascript"
1363 |                             }
1364 |                         ]}
1365 |                     />,
1366 |                     container, child
1367 |                 );
1368 | 
1369 |                 const tagNodes = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`);
1370 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1371 |                 expect(existingTags).to.be.empty;
1372 |             });
1373 | 
1374 |             it("won't render tag when primary attribute (innerHTML) is null", () => {
1375 |                 child = render(
1376 |                     <Helmet
1377 |                         script={[
1378 |                             {
1379 |                                 innerHTML: undefined
1380 |                             }
1381 |                         ]}
1382 |                     />,
1383 |                     container, child
1384 |                 );
1385 | 
1386 |                 const tagNodes = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`);
1387 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1388 |                 expect(existingTags).to.be.empty;
1389 |             });
1390 |         });
1391 | 
1392 |         describe("noscript tags", () => {
1393 |             it("can update noscript tags", () => {
1394 |                 const noscriptInnerHTML = `<link rel="stylesheet" type="text/css" href="foo.css" />`;
1395 |                 child = render(
1396 |                     <Helmet noscript={[{id: "bar", innerHTML: noscriptInnerHTML}]} />,
1397 |                     container, child
1398 |                 );
1399 | 
1400 |                 const existingTags = headElement.getElementsByTagName("noscript");
1401 | 
1402 |                 expect(existingTags).to.not.equal(undefined);
1403 |                 expect(existingTags.length).to.equal(1);
1404 |                 expect(existingTags[0].innerHTML === noscriptInnerHTML && existingTags[0].id === "bar");
1405 |             });
1406 | 
1407 |             it("will clear all noscripts tags if none are specified", () => {
1408 |                 child = render(<Helmet noscript={[{id: "bar"}]} />, container, child);
1409 | 
1410 |                 child = render(<Helmet />, container, child);
1411 | 
1412 |                 const existingTags = headElement.querySelectorAll(`script[${HELMET_ATTRIBUTE}]`);
1413 | 
1414 |                 expect(existingTags).to.not.equal(undefined);
1415 |                 expect(existingTags.length).to.equal(0);
1416 |             });
1417 | 
1418 |             it("tags without 'innerHTML' will not be accepted", () => {
1419 |                 child = render(
1420 |                     <Helmet noscript={[{"property": "won't work"}]} />,
1421 |                     container, child
1422 |                 );
1423 | 
1424 |                 const existingTags = headElement.querySelectorAll(`noscript[${HELMET_ATTRIBUTE}]`);
1425 | 
1426 |                 expect(existingTags).to.not.equal(undefined);
1427 |                 expect(existingTags.length).to.equal(0);
1428 |             });
1429 | 
1430 |             it("won't render tag when primary attribute is null", () => {
1431 |                 child = render(
1432 |                     <Helmet
1433 |                         noscript={[
1434 |                             {
1435 |                                 innerHTML: undefined
1436 |                             }
1437 |                         ]}
1438 |                     />,
1439 |                     container, child
1440 |                 );
1441 | 
1442 |                 const tagNodes = headElement.querySelectorAll(`noscript[${HELMET_ATTRIBUTE}]`);
1443 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1444 |                 expect(existingTags).to.be.empty;
1445 |             });
1446 |         });
1447 | 
1448 |         describe("style tags", () => {
1449 |             it("can update style tags", () => {
1450 |                 const cssText1 = `
1451 |                     body {
1452 |                         background-color: green;
1453 |                     }
1454 |                 `;
1455 |                 const cssText2 = `
1456 |                     p {
1457 |                         font-size: 12px;
1458 |                     }
1459 |                 `;
1460 |                 child = render(
1461 |                     <Helmet
1462 |                         style={[
1463 |                             {
1464 |                                 type: "text/css",
1465 |                                 cssText: cssText1
1466 |                             },
1467 |                             {
1468 |                                 cssText: cssText2
1469 |                             }
1470 |                         ]}
1471 |                     />,
1472 |                     container, child
1473 |                 );
1474 | 
1475 |                 const tagNodes = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`);
1476 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1477 | 
1478 |                 const [
1479 |                     firstTag,
1480 |                     secondTag
1481 |                 ] = existingTags;
1482 |                 expect(existingTags).to.not.equal(undefined);
1483 |                 expect(existingTags.length).to.be.equal(2);
1484 | 
1485 |                 expect(existingTags)
1486 |                     .to.have.deep.property("[0]")
1487 |                     .that.is.an.instanceof(Element);
1488 |                 expect(firstTag).to.have.property("getAttribute");
1489 |                 expect(firstTag.getAttribute("type")).to.equal("text/css");
1490 |                 expect(firstTag.innerHTML).to.equal(cssText1);
1491 |                 expect(firstTag.outerHTML).to.equal(`<style type="text/css" ${HELMET_ATTRIBUTE}="true">${cssText1}</style>`);
1492 | 
1493 |                 expect(existingTags)
1494 |                     .to.have.deep.property("[1]")
1495 |                     .that.is.an.instanceof(Element);
1496 |                 expect(secondTag.innerHTML).to.equal(cssText2);
1497 |                 expect(secondTag.outerHTML).to.equal(`<style ${HELMET_ATTRIBUTE}="true">${cssText2}</style>`);
1498 |             });
1499 | 
1500 |             it("will clear all style tags if none are specified", () => {
1501 |                 const cssText = `
1502 |                     body {
1503 |                         background-color: green;
1504 |                     }
1505 |                 `;
1506 |                 child = render(
1507 |                     <Helmet
1508 |                         style={[
1509 |                             {
1510 |                                 type: "text/css",
1511 |                                 cssText
1512 |                             }
1513 |                         ]}
1514 |                     />,
1515 |                     container, child
1516 |                 );
1517 | 
1518 |                 child = render(
1519 |                     <Helmet />,
1520 |                     container, child
1521 |                 );
1522 | 
1523 |                 const existingTags = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`);
1524 | 
1525 |                 expect(existingTags).to.not.equal(undefined);
1526 |                 expect(existingTags.length).to.equal(0);
1527 |             });
1528 | 
1529 |             it("tags without 'cssText' will not be accepted", () => {
1530 |                 child = render(
1531 |                     <Helmet
1532 |                         style={[{"property": "won't work"}]}
1533 |                     />,
1534 |                     container, child
1535 |                 );
1536 | 
1537 |                 const existingTags = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`);
1538 | 
1539 |                 expect(existingTags).to.not.equal(undefined);
1540 |                 expect(existingTags.length).to.equal(0);
1541 |             });
1542 | 
1543 |             it("won't render tag when primary attribute is null", () => {
1544 |                 child = render(
1545 |                     <Helmet
1546 |                         style={[
1547 |                             {
1548 |                                 cssText: undefined
1549 |                             }
1550 |                         ]}
1551 |                     />,
1552 |                     container, child
1553 |                 );
1554 | 
1555 |                 const tagNodes = headElement.querySelectorAll(`style[${HELMET_ATTRIBUTE}]`);
1556 |                 const existingTags = Array.prototype.slice.call(tagNodes);
1557 |                 expect(existingTags).to.be.empty;
1558 |             });
1559 |         });
1560 |     });
1561 | 
1562 |     describe("misc", () => {
1563 |         it("throws in rewind() when a DOM is present", () => {
1564 |             child = render(
1565 |                 <Helmet
1566 |                     title={"Fancy title"}
1567 |                 />,
1568 |                 container, child
1569 |             );
1570 | 
1571 |             expect(Helmet.rewind).to.throw(
1572 |                 "You may only call rewind() on the server. Call peek() to read the current state."
1573 |             );
1574 |         });
1575 | 
1576 |         it("lets you read current state in peek() whether or not a DOM is present", () => {
1577 |             child = render(
1578 |                 <Helmet
1579 |                     title={"Fancy title"}
1580 |                 />,
1581 |                 container, child
1582 |             );
1583 | 
1584 |             expect(Helmet.peek().title).to.be.equal("Fancy title");
1585 |             Helmet.canUseDOM = false;
1586 |             expect(Helmet.peek().title).to.be.equal("Fancy title");
1587 |             Helmet.canUseDOM = true;
1588 |         });
1589 | 
1590 |         it("will html encode string", () => {
1591 |             child = render(
1592 |                 <Helmet
1593 |                     meta={[
1594 |                         {"name": "description", "content": "This is \"quoted\" text and & and '."}
1595 |                     ]}
1596 |                 />,
1597 |                 container, child
1598 |             );
1599 | 
1600 |             const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
1601 |             const existingTag = existingTags[0];
1602 | 
1603 |             expect(existingTags).to.not.equal(undefined);
1604 | 
1605 |             expect(existingTags.length).to.be.equal(1);
1606 | 
1607 |             expect(existingTags)
1608 |                 .to.have.deep.property("[0]")
1609 |                 .that.is.an.instanceof(Element);
1610 |             expect(existingTag).to.have.property("getAttribute");
1611 |             expect(existingTag.getAttribute("name")).to.equal("description");
1612 |             expect(existingTag.getAttribute("content")).to.equal("This is \"quoted\" text and & and '.");
1613 |             expect(existingTag.outerHTML).to.equal(`<meta name="description" content="This is &quot;quoted&quot; text and &amp; and '." ${HELMET_ATTRIBUTE}="true">`);
1614 |         });
1615 | 
1616 |         it("will not change the DOM if it is receives identical props", () => {
1617 |             const spy = sinon.spy();
1618 |             child = render(
1619 |                 <Helmet
1620 |                     meta={[{"name": "description", "content": "Test description"}]}
1621 |                     title={"Test Title"}
1622 |                     onChangeClientState={spy}
1623 |                 />,
1624 |                 container, child
1625 |             );
1626 | 
1627 |             // Re-rendering will pass new props to an already mounted Helmet
1628 |             child = render(
1629 |                 <Helmet
1630 |                     meta={[{"name": "description", "content": "Test description"}]}
1631 |                     title={"Test Title"}
1632 |                     onChangeClientState={spy}
1633 |                 />,
1634 |                 container, child
1635 |             );
1636 | 
1637 |             expect(spy.callCount).to.equal(1);
1638 |         });
1639 | 
1640 |         it("will only add new tags and will preserve tags when rendering additional Helmet instances", () => {
1641 |             const spy = sinon.spy();
1642 |             let addedTags;
1643 |             let removedTags;
1644 | 
1645 |             child = render(
1646 |                 <Helmet
1647 |                     link={[{"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css"}]}
1648 |                     meta={[{"name": "description", "content": "Test description"}]}
1649 |                     onChangeClientState={spy}
1650 |                 />,
1651 |                 container, child
1652 |             );
1653 | 
1654 |             expect(spy.called).to.equal(true);
1655 |             addedTags = spy.getCall(0).args[1];
1656 |             removedTags = spy.getCall(0).args[2];
1657 | 
1658 |             expect(addedTags).to.have.property("metaTags");
1659 |             expect(addedTags.metaTags).to.have.deep.property("[0]");
1660 |             expect(addedTags.metaTags[0].outerHTML).to.equal(`<meta name="description" content="Test description" ${HELMET_ATTRIBUTE}="true">`);
1661 |             expect(addedTags).to.have.property("linkTags");
1662 |             expect(addedTags.linkTags).to.have.deep.property("[0]");
1663 |             expect(addedTags.linkTags[0].outerHTML).to.equal(`<link href="http://localhost/style.css" rel="stylesheet" type="text/css" ${HELMET_ATTRIBUTE}="true">`);
1664 |             expect(removedTags).to.be.empty;
1665 | 
1666 |             // Re-rendering will pass new props to an already mounted Helmet
1667 |             child = render(
1668 |                 <Helmet
1669 |                     link={[
1670 |                         {"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css"},
1671 |                         {"href": "http://localhost/style2.css", "rel": "stylesheet", "type": "text/css"}
1672 |                     ]}
1673 |                     meta={[{"name": "description", "content": "New description"}]}
1674 |                     onChangeClientState={spy}
1675 |                 />,
1676 |                 container, child
1677 |             );
1678 | 
1679 |             expect(spy.callCount).to.equal(2);
1680 |             addedTags = spy.getCall(1).args[1];
1681 |             removedTags = spy.getCall(1).args[2];
1682 | 
1683 |             expect(addedTags).to.have.property("metaTags");
1684 |             expect(addedTags.metaTags).to.have.deep.property("[0]");
1685 |             expect(addedTags.metaTags[0].outerHTML).to.equal(`<meta name="description" content="New description" ${HELMET_ATTRIBUTE}="true">`);
1686 |             expect(addedTags).to.have.property("linkTags");
1687 |             expect(addedTags.linkTags).to.have.deep.property("[0]");
1688 |             expect(addedTags.linkTags[0].outerHTML).to.equal(`<link href="http://localhost/style2.css" rel="stylesheet" type="text/css" ${HELMET_ATTRIBUTE}="true">`);
1689 |             expect(removedTags).to.have.property("metaTags");
1690 |             expect(removedTags.metaTags).to.have.deep.property("[0]");
1691 |             expect(removedTags.metaTags[0].outerHTML).to.equal(`<meta name="description" content="Test description" ${HELMET_ATTRIBUTE}="true">`);
1692 |             expect(removedTags).to.not.have.property("linkTags");
1693 |         });
1694 | 
1695 |         it("can not nest Helmets", () => {
1696 |             child = render(
1697 |                 <Helmet
1698 |                     title={"Test Title"}
1699 |                 >
1700 |                     <Helmet
1701 |                         title={"Title you'll never see"}
1702 |                     />
1703 |                 </Helmet>,
1704 |                 container, child
1705 |             );
1706 | 
1707 |             expect(document.title).to.equal("Test Title");
1708 |         });
1709 | 
1710 |         it("will recognize valid tags regardless of attribute ordering", () => {
1711 |             child = render(
1712 |                 <Helmet
1713 |                     meta={[{"content": "Test Description", "name": "description"}]}
1714 |                 />,
1715 |                 container, child
1716 |             );
1717 | 
1718 |             const existingTags = headElement.querySelectorAll(`meta[${HELMET_ATTRIBUTE}]`);
1719 |             const existingTag = existingTags[0];
1720 | 
1721 |             expect(existingTags).to.not.equal(undefined);
1722 | 
1723 |             expect(existingTags.length).to.be.equal(1);
1724 | 
1725 |             expect(existingTags)
1726 |                 .to.have.deep.property("[0]")
1727 |                 .that.is.an.instanceof(Element);
1728 |             expect(existingTag).to.have.property("getAttribute");
1729 |             expect(existingTag.getAttribute("name")).to.equal("description");
1730 |             expect(existingTag.getAttribute("content")).to.equal("Test Description");
1731 |             expect(existingTag.outerHTML).to.equal(`<meta content="Test Description" name="description" ${HELMET_ATTRIBUTE}="true">`);
1732 |         });
1733 |     });
1734 | 
1735 | 
1736 |     describe("server", () => {
1737 |         const renderedHtmlAttributes = `lang="ga" class="myClassName"`;
1738 |         const renderedTitle = `<title ${HELMET_ATTRIBUTE}>Dangerous &lt;script&gt; include</title>`;
1739 |         const renderedTitleWithItemProp = `<title ${HELMET_ATTRIBUTE} itemprop="name">Title with Itemprop</title>`;
1740 |         const renderedBaseTag = `<base ${HELMET_ATTRIBUTE} target="_blank" href="http://localhost/">`;
1741 | 
1742 |         const renderedMetaTags = [
1743 |             `<meta ${HELMET_ATTRIBUTE} charset="utf-8">`,
1744 |             `<meta ${HELMET_ATTRIBUTE} name="description" content="Test description &amp; encoding of special characters like &quot; &gt; &lt; \`">`,
1745 |             `<meta ${HELMET_ATTRIBUTE} http-equiv="content-type" content="text/html">`,
1746 |             `<meta ${HELMET_ATTRIBUTE} property="og:type" content="article">`,
1747 |             `<meta ${HELMET_ATTRIBUTE} itemprop="name" content="Test name itemprop">`
1748 |         ].join("");
1749 | 
1750 |         const renderedLinkTags = [
1751 |             `<link ${HELMET_ATTRIBUTE} href="http://localhost/helmet" rel="canonical">`,
1752 |             `<link ${HELMET_ATTRIBUTE} href="http://localhost/style.css" rel="stylesheet" type="text/css">`
1753 |         ].join("");
1754 | 
1755 |         const renderedScriptTags = [
1756 |             `<script ${HELMET_ATTRIBUTE} src="http://localhost/test.js" type="text/javascript"></script>`,
1757 |             `<script ${HELMET_ATTRIBUTE} src="http://localhost/test2.js" type="text/javascript"></script>`
1758 |         ].join("");
1759 | 
1760 |         const renderedNoscriptTags = [
1761 |             `<noscript ${HELMET_ATTRIBUTE} id="foo"><link rel="stylesheet" type="text/css" href="/style.css" /></noscript>`,
1762 |             `<noscript ${HELMET_ATTRIBUTE} id="bar"><link rel="stylesheet" type="text/css" href="/style2.css" /></noscript>`
1763 |         ].join("");
1764 | 
1765 |         const renderedStyleTags = [
1766 |             `<style ${HELMET_ATTRIBUTE} type="text/css">body {background-color: green;}</style>`,
1767 |             `<style ${HELMET_ATTRIBUTE} type="text/css">p {font-size: 12px;}</style>`
1768 |         ].join("");
1769 | 
1770 |         before(() => {
1771 |             Helmet.canUseDOM = false;
1772 |             Helmet.rewind();
1773 |         });
1774 | 
1775 |         after(() => {
1776 |             Helmet.rewind();
1777 |             Helmet.canUseDOM = true;
1778 |         });
1779 | 
1780 |         it("will html encode title", () => {
1781 |             renderToString(
1782 |                 <Helmet
1783 |                     title="Dangerous <script> include"
1784 |                 />
1785 |             );
1786 | 
1787 |             const head = Helmet.rewind();
1788 | 
1789 |             expect(head.title).to.exist;
1790 |             expect(head.title).to.respondTo("toString");
1791 | 
1792 |             expect(head.title.toString()).to.equal(renderedTitle);
1793 |         });
1794 | 
1795 |         it("will render title as React component", () => {
1796 |             renderToString(
1797 |                 <Helmet
1798 |                     title="Dangerous <script> include"
1799 |                 />
1800 |             );
1801 | 
1802 |             const head = Helmet.rewind();
1803 | 
1804 |             expect(head.title).to.exist;
1805 |             expect(head.title).to.respondTo("toComponent");
1806 | 
1807 |             const titleComponent = head.title.toComponent();
1808 | 
1809 |             expect(titleComponent)
1810 |                 .to.be.an("array")
1811 |                 .that.has.length.of(1);
1812 | 
1813 |             titleComponent.forEach(title => {
1814 |                 expect(title)
1815 |                     .to.be.an("object")
1816 |                     .that.contains.property("nodeName", "title");
1817 |             });
1818 | 
1819 |             const markup = renderToString(
1820 |                 <div>
1821 |                     {titleComponent}
1822 |                 </div>
1823 |             );
1824 | 
1825 |             expect(markup)
1826 |                 .to.be.a("string")
1827 |                 .that.equals(`<div>${
1828 |                     renderedTitle
1829 |                 }</div>`);
1830 |         });
1831 | 
1832 |         it("will render title with itemprop name as React component", () => {
1833 |             renderToString(
1834 |                 <Helmet
1835 |                     title={"Title with Itemprop"}
1836 |                     titleAttributes={{itemprop: "name"}}
1837 |                 />
1838 |             );
1839 | 
1840 |             const head = Helmet.rewind();
1841 | 
1842 |             expect(head.title).to.exist;
1843 |             expect(head.title).to.respondTo("toComponent");
1844 | 
1845 |             const titleComponent = head.title.toComponent();
1846 | 
1847 |             expect(titleComponent)
1848 |                 .to.be.an("array")
1849 |                 .that.has.length.of(1);
1850 | 
1851 |             titleComponent.forEach(title => {
1852 |                 expect(title)
1853 |                     .to.be.an("object")
1854 |                     .that.contains.property("nodeName", "title");
1855 |             });
1856 | 
1857 |             const markup = renderToString(
1858 |                 <div>
1859 |                     {titleComponent}
1860 |                 </div>
1861 |             );
1862 | 
1863 |             expect(markup)
1864 |                 .to.be.a("string")
1865 |                 .that.equals(`<div>${
1866 |                     renderedTitleWithItemProp
1867 |                 }</div>`);
1868 |         });
1869 | 
1870 |         it("will render base tag as React component", () => {
1871 |             renderToString(
1872 |                 <Helmet
1873 |                     base={{"target": "_blank", "href": "http://localhost/"}}
1874 |                 />
1875 |             );
1876 | 
1877 |             const head = Helmet.rewind();
1878 | 
1879 |             expect(head.base).to.exist;
1880 |             expect(head.base).to.respondTo("toComponent");
1881 | 
1882 |             const baseComponent = head.base.toComponent();
1883 | 
1884 |             expect(baseComponent)
1885 |                 .to.be.an("array")
1886 |                 .that.has.length.of(1);
1887 | 
1888 |             baseComponent.forEach(base => {
1889 |                 expect(base)
1890 |                     .to.be.an("object")
1891 |                     .that.contains.property("nodeName", "base");
1892 |             });
1893 | 
1894 |             const markup = renderToString(
1895 |                 <div>
1896 |                     {baseComponent}
1897 |                 </div>
1898 |             );
1899 | 
1900 |             expect(markup)
1901 |                 .to.be.a("string")
1902 |                 .that.equals(`<div>${
1903 |                     renderedBaseTag
1904 |                 }</div>`);
1905 |         });
1906 | 
1907 |         it("will render meta tags as React components", () => {
1908 |             renderToString(
1909 |                 <Helmet
1910 |                     meta={[
1911 |                         {"charset": "utf-8"},
1912 |                         {"name": "description", "content": "Test description & encoding of special characters like \" > < `"},
1913 |                         {"http-equiv": "content-type", "content": "text/html"},
1914 |                         {"property": "og:type", "content": "article"},
1915 |                         {"itemprop": "name", "content": "Test name itemprop"}
1916 |                     ]}
1917 |                 />
1918 |             );
1919 | 
1920 |             const head = Helmet.rewind();
1921 | 
1922 |             expect(head.meta).to.exist;
1923 |             expect(head.meta).to.respondTo("toComponent");
1924 | 
1925 |             const metaComponent = head.meta.toComponent();
1926 | 
1927 |             expect(metaComponent)
1928 |                 .to.be.an("array")
1929 |                 .that.has.length.of(5);
1930 | 
1931 |             metaComponent.forEach(meta => {
1932 |                 expect(meta)
1933 |                     .to.be.an("object")
1934 |                     .that.contains.property("nodeName", "meta");
1935 |             });
1936 | 
1937 |             const markup = renderToString(
1938 |                 <div>
1939 |                     {metaComponent}
1940 |                 </div>
1941 |             );
1942 | 
1943 |             expect(markup)
1944 |                 .to.be.a("string")
1945 |                 .that.equals(`<div>${
1946 |                     renderedMetaTags
1947 |                 }</div>`);
1948 |         });
1949 | 
1950 |         it("will render link tags as React components", () => {
1951 |             renderToString(
1952 |                 <Helmet
1953 |                     link={[
1954 |                         {"href": "http://localhost/helmet", "rel": "canonical"},
1955 |                         {"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css"}
1956 |                     ]}
1957 |                 />
1958 |             );
1959 | 
1960 |             const head = Helmet.rewind();
1961 | 
1962 |             expect(head.link).to.exist;
1963 |             expect(head.link).to.respondTo("toComponent");
1964 | 
1965 |             const linkComponent = head.link.toComponent();
1966 | 
1967 |             expect(linkComponent)
1968 |                 .to.be.an("array")
1969 |                 .that.has.length.of(2);
1970 | 
1971 |             linkComponent.forEach(link => {
1972 |                 expect(link)
1973 |                     .to.be.an("object")
1974 |                     .that.contains.property("nodeName", "link");
1975 |             });
1976 | 
1977 |             const markup = renderToString(
1978 |                 <div>
1979 |                     {linkComponent}
1980 |                 </div>
1981 |             );
1982 | 
1983 |             expect(markup)
1984 |                 .to.be.a("string")
1985 |                 .that.equals(`<div>${
1986 |                     renderedLinkTags
1987 |                 }</div>`);
1988 |         });
1989 | 
1990 |         it("will render script tags as React components", () => {
1991 |             renderToString(
1992 |                 <Helmet
1993 |                     script={[
1994 |                         {"src": "http://localhost/test.js", "type": "text/javascript"},
1995 |                         {"src": "http://localhost/test2.js", "type": "text/javascript"}
1996 |                     ]}
1997 |                 />
1998 |             );
1999 | 
2000 |             const head = Helmet.rewind();
2001 | 
2002 |             expect(head.script).to.exist;
2003 |             expect(head.script).to.respondTo("toComponent");
2004 | 
2005 |             const scriptComponent = head.script.toComponent();
2006 | 
2007 |             expect(scriptComponent)
2008 |                 .to.be.an("array")
2009 |                 .that.has.length.of(2);
2010 | 
2011 |             scriptComponent.forEach(script => {
2012 |                 expect(script)
2013 |                     .to.be.an("object")
2014 |                     .that.contains.property("nodeName", "script");
2015 |             });
2016 | 
2017 |             const markup = renderToString(
2018 |                 <div>
2019 |                     {scriptComponent}
2020 |                 </div>
2021 |             );
2022 | 
2023 |             expect(markup)
2024 |                 .to.be.a("string")
2025 |                 .that.equals(`<div>${
2026 |                     renderedScriptTags
2027 |                 }</div>`);
2028 |         });
2029 | 
2030 |         it("will render noscript tags as React components", () => {
2031 |             renderToString(
2032 |                 <Helmet
2033 |                   noscript={[
2034 |                     {id: "foo", innerHTML: '<link rel="stylesheet" type="text/css" href="/style.css" />'},
2035 |                     {id: "bar", innerHTML: '<link rel="stylesheet" type="text/css" href="/style2.css" />'}
2036 |                   ]}
2037 |                 />
2038 |             );
2039 | 
2040 |             const head = Helmet.rewind();
2041 | 
2042 |             expect(head.noscript).to.exist;
2043 |             expect(head.noscript).to.respondTo("toComponent");
2044 | 
2045 |             const noscriptComponent = head.noscript.toComponent();
2046 | 
2047 |             expect(noscriptComponent)
2048 |                 .to.be.an("array")
2049 |                 .that.has.length.of(2);
2050 | 
2051 |             noscriptComponent.forEach(noscript => {
2052 |                 expect(noscript)
2053 |                     .to.be.an("object")
2054 |                     .that.contains.property("nodeName", "noscript");
2055 |             });
2056 | 
2057 |             const markup = renderToString(
2058 |                 <div>
2059 |                     {noscriptComponent}
2060 |                 </div>
2061 |             );
2062 | 
2063 |             expect(markup)
2064 |                 .to.be.a("string")
2065 |                 .that.equals(`<div>${
2066 |                     renderedNoscriptTags
2067 |                 }</div>`);
2068 |         });
2069 | 
2070 |         it("will render style tags as React components", () => {
2071 |             renderToString(
2072 |                 <Helmet
2073 |                     style={[
2074 |                         {
2075 |                             "type": "text/css",
2076 |                             "cssText": `body {background-color: green;}`
2077 |                         },
2078 |                         {
2079 |                             "type": "text/css",
2080 |                             "cssText": `p {font-size: 12px;}`
2081 |                         }
2082 |                     ]}
2083 |                 />
2084 |             );
2085 | 
2086 |             const head = Helmet.rewind();
2087 | 
2088 |             expect(head.style).to.exist;
2089 |             expect(head.style).to.respondTo("toComponent");
2090 | 
2091 |             const styleComponent = head.style.toComponent();
2092 | 
2093 |             expect(styleComponent)
2094 |                 .to.be.an("array")
2095 |                 .that.has.length.of(2);
2096 | 
2097 |             const markup = renderToString(
2098 |                 <div>
2099 |                     {styleComponent}
2100 |                 </div>
2101 |             );
2102 | 
2103 |             expect(markup)
2104 |                 .to.be.a("string")
2105 |                 .that.equals(`<div>${
2106 |                     renderedStyleTags
2107 |                 }</div>`);
2108 |         });
2109 | 
2110 |         it("will render title tag as string", () => {
2111 |             renderToString(
2112 |                 <Helmet
2113 |                     title={"Dangerous <script> include"}
2114 |                 />
2115 |             );
2116 | 
2117 |             const head = Helmet.rewind();
2118 | 
2119 |             expect(head.title).to.exist;
2120 |             expect(head.title).to.respondTo("toString");
2121 | 
2122 |             expect(head.title.toString())
2123 |                 .to.be.a("string")
2124 |                 .that.equals(renderedTitle);
2125 |         });
2126 | 
2127 |         it("will render title with itemprop name as string", () => {
2128 |             renderToString(
2129 |                 <Helmet
2130 |                     title={"Title with Itemprop"}
2131 |                     titleAttributes={{itemprop: "name"}}
2132 |                 />
2133 |             );
2134 | 
2135 |             const head = Helmet.rewind();
2136 | 
2137 |             expect(head.title).to.exist;
2138 |             expect(head.title).to.respondTo("toString");
2139 | 
2140 |             const titleString = head.title.toString();
2141 |             expect(titleString)
2142 |                 .to.be.a("string")
2143 |                 .that.equals(renderedTitleWithItemProp);
2144 |         });
2145 | 
2146 |         it("will render base tags as string", () => {
2147 |             renderToString(
2148 |                 <Helmet
2149 |                     base={{"target": "_blank", "href": "http://localhost/"}}
2150 |                 />
2151 |             );
2152 | 
2153 |             const head = Helmet.rewind();
2154 | 
2155 |             expect(head.base).to.exist;
2156 |             expect(head.base).to.respondTo("toString");
2157 | 
2158 |             expect(head.base.toString())
2159 |                 .to.be.a("string")
2160 |                 .that.equals(renderedBaseTag);
2161 |         });
2162 | 
2163 |         it("will render meta tags as string", () => {
2164 |             renderToString(
2165 |                 <Helmet
2166 |                     meta={[
2167 |                         {"charset": "utf-8"},
2168 |                         {"name": "description", "content": "Test description & encoding of special characters like \" > < `"},
2169 |                         {"http-equiv": "content-type", "content": "text/html"},
2170 |                         {"property": "og:type", "content": "article"},
2171 |                         {"itemprop": "name", "content": "Test name itemprop"}
2172 |                     ]}
2173 |                 />
2174 |             );
2175 | 
2176 |             const head = Helmet.rewind();
2177 | 
2178 |             expect(head.meta).to.exist;
2179 |             expect(head.meta).to.respondTo("toString");
2180 | 
2181 |             expect(head.meta.toString())
2182 |                 .to.be.a("string")
2183 |                 .that.equals(renderedMetaTags);
2184 |         });
2185 | 
2186 |         it("will render link tags as string", () => {
2187 |             renderToString(
2188 |                 <Helmet
2189 |                     link={[
2190 |                         {"href": "http://localhost/helmet", "rel": "canonical"},
2191 |                         {"href": "http://localhost/style.css", "rel": "stylesheet", "type": "text/css"}
2192 |                     ]}
2193 |                 />
2194 |             );
2195 | 
2196 |             const head = Helmet.rewind();
2197 | 
2198 |             expect(head.link).to.exist;
2199 |             expect(head.link).to.respondTo("toString");
2200 | 
2201 |             expect(head.link.toString())
2202 |                 .to.be.a("string")
2203 |                 .that.equals(renderedLinkTags);
2204 |         });
2205 | 
2206 |         it("will render script tags as string", () => {
2207 |             renderToString(
2208 |                 <Helmet
2209 |                     script={[
2210 |                         {"src": "http://localhost/test.js", "type": "text/javascript"},
2211 |                         {"src": "http://localhost/test2.js", "type": "text/javascript"}
2212 |                     ]}
2213 |                 />
2214 |             );
2215 | 
2216 |             const head = Helmet.rewind();
2217 | 
2218 |             expect(head.script).to.exist;
2219 |             expect(head.script).to.respondTo("toString");
2220 | 
2221 |             expect(head.script.toString())
2222 |                 .to.be.a("string")
2223 |                 .that.equals(renderedScriptTags);
2224 |         });
2225 | 
2226 |         it("will render style tags as string", () => {
2227 |             renderToString(
2228 |                 <Helmet
2229 |                     style={[
2230 |                         {
2231 |                             "type": "text/css",
2232 |                             "cssText": `body {background-color: green;}`
2233 |                         },
2234 |                         {
2235 |                             "type": "text/css",
2236 |                             "cssText": `p {font-size: 12px;}`
2237 |                         }
2238 |                     ]}
2239 |                 />
2240 |             );
2241 | 
2242 |             const head = Helmet.rewind();
2243 | 
2244 |             expect(head.style).to.exist;
2245 |             expect(head.style).to.respondTo("toString");
2246 | 
2247 |             expect(head.style.toString())
2248 |                 .to.be.a("string")
2249 |                 .that.equals(renderedStyleTags);
2250 |         });
2251 | 
2252 |         it("will render html attributes as component", () => {
2253 |             renderToString(
2254 |                 <Helmet
2255 |                     htmlAttributes={{
2256 |                         lang: "ga",
2257 |                         className: "myClassName"
2258 |                     }}
2259 |                 />
2260 |             );
2261 | 
2262 |             const {htmlAttributes} = Helmet.rewind();
2263 |             const attrs = htmlAttributes.toComponent();
2264 | 
2265 |             expect(attrs).to.exist;
2266 | 
2267 |             const markup = renderToString(
2268 |                 <html lang="en" {...attrs} />
2269 |             );
2270 | 
2271 |             expect(markup)
2272 |                 .to.be.a("string")
2273 |                 .that.equals(`<html ${renderedHtmlAttributes}></html>`);
2274 |         });
2275 | 
2276 |         it("will render html attributes as string", () => {
2277 |             renderToString(
2278 |                 <Helmet
2279 |                     htmlAttributes={{
2280 |                         lang: "ga",
2281 |                         class: "myClassName"
2282 |                     }}
2283 |                 />
2284 |             );
2285 | 
2286 |             const head = Helmet.rewind();
2287 | 
2288 |             expect(head.htmlAttributes).to.exist;
2289 |             expect(head.htmlAttributes).to.respondTo("toString");
2290 | 
2291 |             expect(head.htmlAttributes.toString())
2292 |                 .to.be.a("string")
2293 |                 .that.equals(renderedHtmlAttributes);
2294 |         });
2295 | 
2296 |         it("will not encode all characters with HTML character entity equivalents", () => {
2297 |             const chineseTitle = "膣膗 鍆錌雔";
2298 |             const stringifiedChineseTitle = `<title ${HELMET_ATTRIBUTE}>${chineseTitle}</title>`;
2299 | 
2300 |             renderToString(
2301 |                 <div>
2302 |                     <Helmet title={chineseTitle} />
2303 |                 </div>
2304 |             );
2305 | 
2306 |             const head = Helmet.rewind();
2307 | 
2308 |             expect(head.title).to.exist;
2309 |             expect(head.title).to.respondTo("toString");
2310 | 
2311 |             expect(head.title.toString())
2312 |                 .to.be.a("string")
2313 |                 .that.equals(stringifiedChineseTitle);
2314 |         });
2315 | 
2316 |         it("rewind() provides a fallback object for empty Helmet state", () => {
2317 |             renderToString(
2318 |                 <div />
2319 |             );
2320 | 
2321 |             const head = Helmet.rewind();
2322 | 
2323 |             expect(head.htmlAttributes).to.exist;
2324 |             expect(head.htmlAttributes).to.respondTo("toString");
2325 |             expect(head.htmlAttributes.toString()).to.equal("");
2326 |             expect(head.htmlAttributes).to.respondTo("toComponent");
2327 |             expect(head.htmlAttributes.toComponent()).to.be.an("object")
2328 |                 .that.is.empty;
2329 | 
2330 |             expect(head.title).to.exist;
2331 |             expect(head.title).to.respondTo("toString");
2332 |             expect(head.title.toString()).to.equal(`<title ${HELMET_ATTRIBUTE}></title>`);
2333 |             expect(head.title).to.respondTo("toComponent");
2334 | 
2335 |             const markup = renderToString(
2336 |                 <div>
2337 |                     {head.title.toComponent()}
2338 |                 </div>
2339 |             );
2340 | 
2341 |             expect(markup)
2342 |                 .to.be.a("string")
2343 |                 .that.equals(`<div><title ${HELMET_ATTRIBUTE}></title></div>`);
2344 | 
2345 |             expect(head.base).to.exist;
2346 |             expect(head.base).to.respondTo("toString");
2347 |             expect(head.base.toString()).to.equal("");
2348 |             expect(head.base).to.respondTo("toComponent");
2349 |             expect(head.base.toComponent()).to.be.an("array")
2350 |                 .that.is.empty;
2351 | 
2352 |             expect(head.meta).to.exist;
2353 |             expect(head.meta).to.respondTo("toString");
2354 |             expect(head.meta.toString()).to.equal("");
2355 |             expect(head.meta).to.respondTo("toComponent");
2356 |             expect(head.meta.toComponent()).to.be.an("array")
2357 |                 .that.is.empty;
2358 | 
2359 |             expect(head.link).to.exist;
2360 |             expect(head.link).to.respondTo("toString");
2361 |             expect(head.link.toString()).to.equal("");
2362 |             expect(head.link).to.respondTo("toComponent");
2363 |             expect(head.link.toComponent()).to.be.an("array")
2364 |                 .that.is.empty;
2365 | 
2366 |             expect(head.script).to.exist;
2367 |             expect(head.script).to.respondTo("toString");
2368 |             expect(head.script.toString()).to.equal("");
2369 |             expect(head.script).to.respondTo("toComponent");
2370 |             expect(head.script.toComponent()).to.be.an("array")
2371 |                 .that.is.empty;
2372 | 
2373 |             expect(head.noscript).to.exist;
2374 |             expect(head.noscript).to.respondTo("toString");
2375 |             expect(head.noscript.toString()).to.equal("");
2376 |             expect(head.noscript).to.respondTo("toComponent");
2377 |             expect(head.noscript.toComponent()).to.be.an("array")
2378 |                 .that.is.empty;
2379 | 
2380 |             expect(head.style).to.exist;
2381 |             expect(head.style).to.respondTo("toString");
2382 |             expect(head.style.toString()).to.equal("");
2383 |             expect(head.style).to.respondTo("toComponent");
2384 |             expect(head.style.toComponent()).to.be.an("array")
2385 |                 .that.is.empty;
2386 |         });
2387 | 
2388 |         it("does not render undefined attribute values", () => {
2389 |             renderToString(
2390 |                 <Helmet
2391 |                     script={[
2392 |                         {
2393 |                             src: "foo.js",
2394 |                             async: undefined
2395 |                         }
2396 |                     ]}
2397 |                 />
2398 |             );
2399 | 
2400 |             const {script} = Helmet.rewind();
2401 |             const stringifiedScriptTag = script.toString();
2402 | 
2403 |             expect(stringifiedScriptTag)
2404 |                 .to.be.a("string")
2405 |                 .that.equals(`<script ${HELMET_ATTRIBUTE} src="foo.js" async></script>`);
2406 |         });
2407 |     });
2408 | });
2409 | 
2410 | function unmountComponentAtNode(container, child) {
2411 |     // render an empty string to force the components to unmount
2412 |     return render("", container, child);
2413 | }
2414 | 


--------------------------------------------------------------------------------