diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index a43c1889..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "presets": [
- ["kyt-react", {"modules": true}],
- ],
- "plugins": [
- "transform-class-properties",
- "transform-es2015-modules-commonjs",
- "transform-object-rest-spread",
- "transform-regenerator",
- ]
-}
diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 00000000..75678ea8
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,31 @@
+version: 2
+jobs:
+ build:
+ docker:
+ - image: cimg/node:18.17.1
+
+ steps:
+ - checkout
+
+ - restore_cache:
+ keys:
+ - deps-{{ checksum "package.json" }}
+
+ - run: yarn
+
+ - save_cache:
+ paths:
+ - node_modules
+ key: deps-{{ checksum "package.json" }}
+
+ - run:
+ name: Tests
+ command: yarn test
+
+ - run:
+ name: Type checks
+ command: yarn tsc
+
+ - run:
+ name: ESLint
+ command: yarn lint
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..a1d158e5
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+/lib
+/node_modules
+package.json
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..97a8b2c2
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,36 @@
+/**
+ * @type {import('@types/eslint').Linter.BaseConfig}
+ */
+module.exports = {
+ extends: [
+ '@remix-run/eslint-config',
+ '@remix-run/eslint-config/node',
+ '@remix-run/eslint-config/jest-testing-library',
+ 'prettier',
+ ],
+ plugins: ['prettier'],
+ rules: {
+ 'import/order': [
+ 'error',
+ {
+ 'newlines-between': 'always',
+ },
+ ],
+ 'prettier/prettier': [
+ 'error',
+ {
+ singleQuote: true,
+ trailingComma: 'es5',
+ useTabs: false,
+ tabWidth: 2,
+ printWidth: 100,
+ },
+ ],
+ 'testing-library/render-result-naming-convention': 'off',
+ },
+ settings: {
+ jest: {
+ version: 27,
+ },
+ },
+};
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 03c1371e..00000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": [
- "eslint-config-kyt"
- ]
-}
diff --git a/.gitignore b/.gitignore
index f39528b3..3063f07d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,2 @@
-es
lib
node_modules
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100755
index 00000000..2785bc1d
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1 @@
+yarn commitlint --edit $1
diff --git a/.npmignore b/.npmignore
index 876e5a28..fe00227a 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,6 +1,6 @@
-.babelrc
-.eslintrc.json
+.eslintrc.js
jest.setup.js
+*.config.js
node_modules
src
__tests__
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..4a1f488b
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+18.17.1
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..09ddce2b
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,6 @@
+/lib
+/es
+/coverage
+/node_modules
+package.json
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..54983dda
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "singleQuote": true,
+ "trailingComma": "es5",
+ "arrowParens": "avoid",
+ "printWidth": 100,
+ "useTabs": false,
+ "tabWidth": 2
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..17201341
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ "typescript",
+ "typescriptreact"
+ ],
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": "explicit"
+ }
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 00000000..aa7a7d51
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,201 @@
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright 2018 The New York Times Company
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
diff --git a/README.md b/README.md
index 597559e7..cac92ba9 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,24 @@
# react-helmet-async
+[](https://circleci.com/gh/staylor/react-helmet-async)
+
+[Announcement post on Times Open blog](https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183)
+
This package is a fork of [React Helmet](https://github.com/nfl/react-helmet).
-`` usage is synonymous, but SSR is radically different.
+`` usage is synonymous, but server and client now requires `` to encapsulate state per request.
-`react-helmet` relies on `react-side-effect`, which is not thread-safe. If you are doing anything asynchronous on the server,
-you need Helmet to to encapsulate data on a per-request basis, this package does just that.
+`react-helmet` relies on `react-side-effect`, which is not thread-safe. If you are doing anything asynchronous on the server, you need Helmet to encapsulate data on a per-request basis, this package does just that.
## Usage
-The main way that this package differs from `react-helmet` is that it requires using a Provider to encapsulate Helmet state for your React
-tree. If you use libraries like Redux or Apollo, you are already familiar with this paradigm:
+**New is 1.0.0:** No more default export! `import { Helmet } from 'react-helmet-async'`
+
+The main way that this package differs from `react-helmet` is that it requires using a Provider to encapsulate Helmet state for your React tree. If you use libraries like Redux or Apollo, you are already familiar with this paradigm:
```javascript
-import Helmet, { HelmetProvider } from 'react-helmet-async';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
const app = (
@@ -25,6 +31,11 @@ const app = (
);
+
+ReactDOM.hydrate(
+ app,
+ document.getElementById(‘app’)
+);
```
On the server, we will no longer use static methods to extract state. `react-side-effect`
@@ -32,7 +43,9 @@ exposed a `.rewind()` method, which Helmet used when calling `Helmet.renderStati
to pass a `context` prop to `HelmetProvider`, which will hold our state specific to each request.
```javascript
-import { HelmetProvider } from 'react-helmet-async';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
const helmetContext = {};
@@ -48,9 +61,11 @@ const app = (
);
+const html = renderToString(app);
+
const { helmet } = helmetContext;
-// helmet.title.toString() etc...
+// helmet.title.toString() etc…
```
## Streams
@@ -62,7 +77,7 @@ This is possible if your data hydration method already parses your React tree. E
import through from 'through';
import { renderToNodeStream } from 'react-dom/server';
import { getDataFromTree } from 'react-apollo';
-import Helmet, { HelmetProvider } from 'react-helmet-async';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
import template from 'server/template';
const helmetContext = {};
@@ -102,6 +117,88 @@ renderToNodeStream(app)
.pipe(res);
```
+## Usage in Jest
+While testing in using jest, if there is a need to emulate SSR, the following string is required to have the test behave the way they are expected to.
+
+```javascript
+import { HelmetProvider } from 'react-helmet-async';
+
+HelmetProvider.canUseDOM = false;
+```
+
+## Prioritizing tags for SEO
+
+It is understood that in some cases for SEO, certain tags should appear earlier in the HEAD. Using the `prioritizeSeoTags` flag on any `` component allows the server render of react-helmet-async to expose a method for prioritizing relevant SEO tags.
+
+In the component:
+```javascript
+
+ A fancy webpage
+
+```
+
+In your server template:
+
+```javascript
+
+
+ ${helmet.title.toString()}
+ ${helmet.priority.toString()}
+ ${helmet.meta.toString()}
+ ${helmet.link.toString()}
+ ${helmet.script.toString()}
+
+ ...
+
+```
+
+Will result in:
+
+```html
+
+
+ A fancy webpage
+ ` outside a context by manually creating a stateful `HelmetData` instance, and passing that stateful object to each `` instance:
+
+
+```js
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { Helmet, HelmetProvider, HelmetData } from 'react-helmet-async';
+
+const helmetData = new HelmetData({});
+
+const app = (
+
+
+ Hello World
+
+ Hello World
+
+);
+
+const html = renderToString(app);
+
+const { helmet } = helmetData.context;
+```
+
## License
-Licensed under the MIT License, Copyright © 2018 Scott Taylor
+Licensed under the Apache 2.0 License, Copyright © 2018 Scott Taylor
diff --git a/__tests__/__snapshots__/fragment.test.js.snap b/__tests__/__snapshots__/fragment.test.js.snap
new file mode 100644
index 00000000..c6f21889
--- /dev/null
+++ b/__tests__/__snapshots__/fragment.test.js.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fragments parses Fragments 1`] = `"Hello"`;
+
+exports[`fragments parses nested Fragments 1`] = `"Baz"`;
diff --git a/__tests__/__snapshots__/misc.test.tsx.snap b/__tests__/__snapshots__/misc.test.tsx.snap
new file mode 100644
index 00000000..a88069ad
--- /dev/null
+++ b/__tests__/__snapshots__/misc.test.tsx.snap
@@ -0,0 +1,29 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`misc > API > encodes special characters 1`] = `"膣膗 鍆錌雔 "`;
-
-exports[`server API encodes special characters in title 1`] = `"Dangerous <script> include "`;
-
-exports[`server API opts out of string encoding 1`] = `"This is text and & and '. "`;
-
-exports[`server API renders title as React component 1`] = `"Dangerous <script> include "`;
-
-exports[`server API renders title tag as string 1`] = `"Dangerous <script> include "`;
-
-exports[`server API renders title with itemprop name as React component 1`] = `"Title with Itemprop "`;
-
-exports[`server API renders title with itemprop name as string 1`] = `"Title with Itemprop "`;
-
-exports[`server Declarative API does not encode all characters with HTML character entity equivalents 1`] = `"膣膗 鍆錌雔 "`;
-
-exports[`server Declarative API encodes special characters in title 1`] = `"Dangerous <script> include "`;
-
-exports[`server Declarative API opts out of string encoding 1`] = `"This is text and & and '. "`;
-
-exports[`server Declarative API renders title and allows children containing expressions 1`] = `"Title: Some Great Title "`;
-
-exports[`server Declarative API renders title as React component 1`] = `"Dangerous <script> include "`;
-
-exports[`server Declarative API renders title tag as string 1`] = `"Dangerous <script> include "`;
-
-exports[`server Declarative API renders title with itemprop name as React component 1`] = `"Title with Itemprop "`;
-
-exports[`server Declarative API renders title with itemprop name as string 1`] = `"Title with Itemprop "`;
-
-exports[`server renderStatic does html encode title 1`] = `"Dangerous <script> include "`;
-
-exports[`server renderStatic renders title as React component 1`] = `"Dangerous <script> include "`;
diff --git a/__tests__/server/__snapshots__/title.test.tsx.snap b/__tests__/server/__snapshots__/title.test.tsx.snap
new file mode 100644
index 00000000..1a76da97
--- /dev/null
+++ b/__tests__/server/__snapshots__/title.test.tsx.snap
@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`server > API > does not encode all characters with HTML character entity equivalents 1`] = `"膣膗 鍆錌雔 "`;
+
+exports[`server > API > encodes special characters in title 1`] = `"Dangerous <script> include "`;
+
+exports[`server > API > opts out of string encoding 1`] = `"This is text and & and '. "`;
+
+exports[`server > API > renders title as React component 1`] = `"Dangerous <script> include "`;
+
+exports[`server > API > renders title tag as string 1`] = `"Dangerous <script> include "`;
+
+exports[`server > API > renders title with itemprop name as React component 1`] = `"Title with Itemprop "`;
+
+exports[`server > API > renders title with itemprop name as string 1`] = `"Title with Itemprop "`;
+
+exports[`server > Declarative API > does not encode all characters with HTML character entity equivalents 1`] = `"膣膗 鍆錌雔 "`;
+
+exports[`server > Declarative API > encodes special characters in title 1`] = `"Dangerous <script> include "`;
+
+exports[`server > Declarative API > opts out of string encoding 1`] = `"This is text and & and '. "`;
+
+exports[`server > Declarative API > renders title and allows children containing expressions 1`] = `"Title: Some Great Title "`;
+
+exports[`server > Declarative API > renders title as React component 1`] = `"Dangerous <script> include "`;
+
+exports[`server > Declarative API > renders title tag as string 1`] = `"Dangerous <script> include "`;
+
+exports[`server > Declarative API > renders title with itemprop name as React component 1`] = `"Title with Itemprop "`;
+
+exports[`server > Declarative API > renders title with itemprop name as string 1`] = `"Title with Itemprop "`;
+
+exports[`server > renderStatic > does html encode title 1`] = `"Dangerous <script> include "`;
+
+exports[`server > renderStatic > renders title as React component 1`] = `"Dangerous <script> include "`;
diff --git a/__tests__/server/base.test.js b/__tests__/server/base.test.tsx
similarity index 67%
rename from __tests__/server/base.test.js
rename to __tests__/server/base.test.tsx
index d0a5cbf9..af8b09af 100644
--- a/__tests__/server/base.test.js
+++ b/__tests__/server/base.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,16 +15,10 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('renders base tag as React component', () => {
- const context = {};
- render(
,
- context
+
);
- const head = context.helmet;
-
expect(head.base).toBeDefined();
expect(head.base.toComponent).toBeDefined();
@@ -80,7 +61,7 @@ describe('server', () => {
expect(baseComponent).toEqual(isArray);
expect(baseComponent).toHaveLength(1);
- baseComponent.forEach(base => {
+ baseComponent.forEach((base: Element) => {
expect(base).toEqual(expect.objectContaining({ type: 'base' }));
});
@@ -90,16 +71,12 @@ describe('server', () => {
});
it('renders base tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
,
- context
+
);
- const head = context.helmet;
-
expect(head.base).toBeDefined();
expect(head.base.toString).toBeDefined();
expect(head.base.toString()).toMatchSnapshot();
diff --git a/__tests__/server/bodyAttributes.test.js b/__tests__/server/bodyAttributes.test.tsx
similarity index 64%
rename from __tests__/server/bodyAttributes.test.js
rename to __tests__/server/bodyAttributes.test.tsx
index 394c9a14..a30e69ec 100644
--- a/__tests__/server/bodyAttributes.test.js
+++ b/__tests__/server/bodyAttributes.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -23,16 +18,12 @@ afterAll(() => {
describe('server', () => {
describe('Declarative API', () => {
it('renders body attributes as component', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
-
- const { bodyAttributes } = context.helmet;
- const attrs = bodyAttributes.toComponent();
+ const attrs = head.bodyAttributes.toComponent();
expect(attrs).toBeDefined();
@@ -42,16 +33,12 @@ describe('server', () => {
});
it('renders body attributes as string', () => {
- const context = {};
- render(
+ const body = renderContext(
- ,
- context
+
);
- const body = context.helmet;
-
expect(body.bodyAttributes).toBeDefined();
expect(body.bodyAttributes.toString).toBeDefined();
expect(body.bodyAttributes.toString()).toMatchSnapshot();
diff --git a/__tests__/server/helmetData.test.tsx b/__tests__/server/helmetData.test.tsx
new file mode 100644
index 00000000..0c2ec67f
--- /dev/null
+++ b/__tests__/server/helmetData.test.tsx
@@ -0,0 +1,161 @@
+import React from 'react';
+
+import { Helmet } from '../../src';
+import Provider from '../../src/Provider';
+import HelmetData from '../../src/HelmetData';
+import { HELMET_ATTRIBUTE } from '../../src/constants';
+import { render } from '../utils';
+
+Helmet.defaultProps.defer = false;
+
+describe('Helmet Data', () => {
+ describe('server', () => {
+ beforeAll(() => {
+ Provider.canUseDOM = false;
+ });
+
+ afterAll(() => {
+ Provider.canUseDOM = true;
+ });
+
+ it('renders without context', () => {
+ const helmetData = new HelmetData({});
+
+ render(
+
+
+ );
+
+ const head = helmetData.context.helmet;
+
+ expect(head.base).toBeDefined();
+ expect(head.base.toString).toBeDefined();
+ expect(head.base.toString()).toMatchSnapshot();
+ });
+
+ it('sets base tag based on deepest nested component', () => {
+ const helmetData = new HelmetData({});
+
+ render(
+
+
+
+
+
+
+ );
+
+ const head = helmetData.context.helmet;
+
+ expect(head.base).toBeDefined();
+ expect(head.base.toString).toBeDefined();
+ expect(head.base.toString()).toMatchSnapshot();
+ });
+
+ it('works with the same context object but separate HelmetData instances', () => {
+ const context = {} as any;
+
+ render(
+
+
+
+
+
+
+ );
+
+ const head = context.helmet;
+
+ expect(head.base).toBeDefined();
+ expect(head.base.toString).toBeDefined();
+ expect(head.base.toString()).toMatchSnapshot();
+ });
+ });
+
+ describe('browser', () => {
+ it('renders without context', () => {
+ const helmetData = new HelmetData({});
+
+ render(
+
+
+ );
+
+ const existingTags = [...document.head.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`)];
+ const [firstTag] = existingTags;
+
+ expect(existingTags).toBeDefined();
+ expect(existingTags).toHaveLength(1);
+
+ expect(firstTag).toBeInstanceOf(Element);
+ expect(firstTag.getAttribute).toBeDefined();
+ expect(firstTag).toHaveAttribute('href', 'http://localhost/');
+ expect(firstTag.outerHTML).toMatchSnapshot();
+ });
+
+ it('sets base tag based on deepest nested component', () => {
+ const helmetData = new HelmetData({});
+
+ render(
+
+
+
+
+
+
+ );
+
+ const existingTags = [...document.head.querySelectorAll(`base[${HELMET_ATTRIBUTE}]`)];
+ const [firstTag] = existingTags;
+
+ expect(existingTags).toBeDefined();
+ expect(existingTags).toHaveLength(1);
+
+ expect(firstTag).toBeInstanceOf(Element);
+ expect(firstTag.getAttribute).toBeDefined();
+ expect(firstTag).toHaveAttribute('href', 'http://mysite.com/public');
+ expect(firstTag.outerHTML).toMatchSnapshot();
+ });
+ });
+});
diff --git a/__tests__/server/htmlAttributes.test.js b/__tests__/server/htmlAttributes.test.tsx
similarity index 68%
rename from __tests__/server/htmlAttributes.test.js
rename to __tests__/server/htmlAttributes.test.tsx
index 8743c676..7cd87a9a 100644
--- a/__tests__/server/htmlAttributes.test.js
+++ b/__tests__/server/htmlAttributes.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -23,19 +18,16 @@ afterAll(() => {
describe('server', () => {
describe('API', () => {
it('renders html attributes as component', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
- const { htmlAttributes } = context.helmet;
- const attrs = htmlAttributes.toComponent();
+ const attrs = head.htmlAttributes.toComponent();
expect(attrs).toBeDefined();
@@ -85,16 +70,12 @@ describe('server', () => {
});
it('renders html attributes as string', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.htmlAttributes).toBeDefined();
expect(head.htmlAttributes.toString).toBeDefined();
expect(head.htmlAttributes.toString()).toMatchSnapshot();
diff --git a/__tests__/server/link.test.js b/__tests__/server/link.test.tsx
similarity index 76%
rename from __tests__/server/link.test.js
rename to __tests__/server/link.test.tsx
index d21a8944..059b0b94 100644
--- a/__tests__/server/link.test.js
+++ b/__tests__/server/link.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,15 +15,10 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('renders link tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
{
type: 'text/css',
},
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.link).toBeDefined();
expect(head.link.toComponent).toBeDefined();
@@ -52,7 +39,7 @@ describe('server', () => {
expect(linkComponent).toEqual(isArray);
expect(linkComponent).toHaveLength(2);
- linkComponent.forEach(link => {
+ linkComponent.forEach((link: Element) => {
expect(link).toEqual(expect.objectContaining({ type: 'link' }));
});
@@ -62,8 +49,7 @@ describe('server', () => {
});
it('renders link tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
{
type: 'text/css',
},
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.link).toBeDefined();
expect(head.link.toString).toBeDefined();
expect(head.link.toString()).toMatchSnapshot();
@@ -87,17 +70,13 @@ describe('server', () => {
describe('Declarative API', () => {
it('renders link tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
,
- context
+
);
- const head = context.helmet;
-
expect(head.link).toBeDefined();
expect(head.link.toComponent).toBeDefined();
@@ -106,7 +85,7 @@ describe('server', () => {
expect(linkComponent).toEqual(isArray);
expect(linkComponent).toHaveLength(2);
- linkComponent.forEach(link => {
+ linkComponent.forEach((link: Element) => {
expect(link).toEqual(expect.objectContaining({ type: 'link' }));
});
@@ -116,17 +95,13 @@ describe('server', () => {
});
it('renders link tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
,
- context
+
);
- const head = context.helmet;
-
expect(head.link).toBeDefined();
expect(head.link.toString).toBeDefined();
expect(head.link.toString()).toMatchSnapshot();
diff --git a/__tests__/server/meta.test.js b/__tests__/server/meta.test.tsx
similarity index 73%
rename from __tests__/server/meta.test.js
rename to __tests__/server/meta.test.tsx
index a10fc14e..979a34d9 100644
--- a/__tests__/server/meta.test.js
+++ b/__tests__/server/meta.test.tsx
@@ -1,17 +1,12 @@
-import React, { Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,15 +15,10 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('renders meta tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
{
{ property: 'og:type', content: 'article' },
{ itemprop: 'name', content: 'Test name itemprop' },
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.meta).toBeDefined();
expect(head.meta.toComponent).toBeDefined();
@@ -54,18 +41,17 @@ describe('server', () => {
expect(metaComponent).toEqual(isArray);
expect(metaComponent).toHaveLength(5);
- metaComponent.forEach(meta => {
+ metaComponent.forEach((meta: Element) => {
expect(meta).toEqual(expect.objectContaining({ type: 'meta' }));
});
- const markup = ReactServer.renderToStaticMarkup({metaComponent} );
+ const markup = ReactServer.renderToStaticMarkup(metaComponent);
expect(markup).toMatchSnapshot();
});
it('renders meta tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
{
{ property: 'og:type', content: 'article' },
{ itemprop: 'name', content: 'Test name itemprop' },
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.meta).toBeDefined();
expect(head.meta.toString).toBeDefined();
expect(head.meta.toString()).toMatchSnapshot();
@@ -91,8 +74,7 @@ describe('server', () => {
describe('Declarative API', () => {
it('renders meta tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
,
- context
+
);
- const head = context.helmet;
-
expect(head.meta).toBeDefined();
expect(head.meta.toComponent).toBeDefined();
@@ -116,33 +95,29 @@ describe('server', () => {
expect(metaComponent).toEqual(isArray);
expect(metaComponent).toHaveLength(5);
- metaComponent.forEach(meta => {
+ metaComponent.forEach((meta: Element) => {
expect(meta).toEqual(expect.objectContaining({ type: 'meta' }));
});
- const markup = ReactServer.renderToStaticMarkup({metaComponent} );
+ const markup = ReactServer.renderToStaticMarkup(metaComponent);
expect(markup).toMatchSnapshot();
});
it('renders meta tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
,
- context
+
);
- const head = context.helmet;
-
expect(head.meta).toBeDefined();
expect(head.meta.toString).toBeDefined();
expect(head.meta.toString()).toMatchSnapshot();
diff --git a/__tests__/server/noscript.test.js b/__tests__/server/noscript.test.tsx
similarity index 76%
rename from __tests__/server/noscript.test.js
rename to __tests__/server/noscript.test.tsx
index 000a51ab..edc514df 100644
--- a/__tests__/server/noscript.test.js
+++ b/__tests__/server/noscript.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,15 +15,10 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('renders noscript tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
{
innerHTML: '
{`
{`
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.noscript).toBeDefined();
expect(head.noscript.toComponent).toBeDefined();
@@ -85,7 +68,7 @@ describe('server', () => {
expect(noscriptComponent).toEqual(isArray);
expect(noscriptComponent).toHaveLength(2);
- noscriptComponent.forEach(noscript => {
+ noscriptComponent.forEach((noscript: Element) => {
expect(noscript).toEqual(expect.objectContaining({ type: 'noscript' }));
});
diff --git a/__tests__/server/script.test.js b/__tests__/server/script.test.tsx
similarity index 76%
rename from __tests__/server/script.test.js
rename to __tests__/server/script.test.tsx
index a2d01f72..7f844ab9 100644
--- a/__tests__/server/script.test.js
+++ b/__tests__/server/script.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,15 +15,10 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('renders script tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
{
type: 'text/javascript',
},
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.script).toBeDefined();
expect(head.script.toComponent).toBeDefined();
@@ -54,7 +41,7 @@ describe('server', () => {
expect(scriptComponent).toEqual(isArray);
expect(scriptComponent).toHaveLength(2);
- scriptComponent.forEach(script => {
+ scriptComponent.forEach((script: Element) => {
expect(script).toEqual(expect.objectContaining({ type: 'script' }));
});
@@ -64,8 +51,7 @@ describe('server', () => {
});
it('renders script tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
{
type: 'text/javascript',
},
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.script).toBeDefined();
expect(head.script.toString).toBeDefined();
expect(head.script.toString()).toMatchSnapshot();
@@ -91,17 +74,13 @@ describe('server', () => {
describe('Declarative API', () => {
it('renders script tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.script).toBeDefined();
expect(head.script.toComponent).toBeDefined();
@@ -110,7 +89,7 @@ describe('server', () => {
expect(scriptComponent).toEqual(isArray);
expect(scriptComponent).toHaveLength(2);
- scriptComponent.forEach(script => {
+ scriptComponent.forEach((script: Element) => {
expect(script).toEqual(expect.objectContaining({ type: 'script' }));
});
@@ -120,17 +99,13 @@ describe('server', () => {
});
it('renders script tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.script).toBeDefined();
expect(head.script.toString).toBeDefined();
expect(head.script.toString()).toMatchSnapshot();
diff --git a/__tests__/server/server.test.js b/__tests__/server/server.test.tsx
similarity index 63%
rename from __tests__/server/server.test.js
rename to __tests__/server/server.test.tsx
index 06caea84..9831f3e9 100644
--- a/__tests__/server/server.test.js
+++ b/__tests__/server/server.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,21 +15,14 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('rewind() provides a fallback object for empty Helmet state', () => {
- const context = {};
- render(
, context);
-
- const head = context.helmet;
+ const head = renderContext(
);
expect(head.htmlAttributes).toBeDefined();
expect(head.htmlAttributes.toString).toBeDefined();
- expect(head.htmlAttributes.toString()).toEqual('');
+ expect(head.htmlAttributes.toString()).toBe('');
expect(head.htmlAttributes.toComponent).toBeDefined();
expect(head.htmlAttributes.toComponent()).toEqual({});
@@ -49,93 +37,103 @@ describe('server', () => {
expect(head.base).toBeDefined();
expect(head.base.toString).toBeDefined();
- expect(head.base.toString()).toEqual('');
+ expect(head.base.toString()).toBe('');
expect(head.base.toComponent).toBeDefined();
+
const baseComponent = head.base.toComponent();
+
expect(baseComponent).toEqual(isArray);
expect(baseComponent).toHaveLength(0);
expect(head.meta).toBeDefined();
expect(head.meta.toString).toBeDefined();
- expect(head.meta.toString()).toEqual('');
+ expect(head.meta.toString()).toBe('');
expect(head.meta.toComponent).toBeDefined();
+
const metaComponent = head.meta.toComponent();
+
expect(metaComponent).toEqual(isArray);
expect(metaComponent).toHaveLength(0);
expect(head.link).toBeDefined();
expect(head.link.toString).toBeDefined();
- expect(head.link.toString()).toEqual('');
+ expect(head.link.toString()).toBe('');
expect(head.link.toComponent).toBeDefined();
+
const linkComponent = head.link.toComponent();
+
expect(linkComponent).toEqual(isArray);
expect(linkComponent).toHaveLength(0);
expect(head.script).toBeDefined();
expect(head.script.toString).toBeDefined();
- expect(head.script.toString()).toEqual('');
+ expect(head.script.toString()).toBe('');
expect(head.script.toComponent).toBeDefined();
+
const scriptComponent = head.script.toComponent();
+
expect(scriptComponent).toEqual(isArray);
expect(scriptComponent).toHaveLength(0);
expect(head.noscript).toBeDefined();
expect(head.noscript.toString).toBeDefined();
- expect(head.noscript.toString()).toEqual('');
+ expect(head.noscript.toString()).toBe('');
expect(head.noscript.toComponent).toBeDefined();
+
const noscriptComponent = head.noscript.toComponent();
+
expect(noscriptComponent).toEqual(isArray);
expect(noscriptComponent).toHaveLength(0);
expect(head.style).toBeDefined();
expect(head.style.toString).toBeDefined();
- expect(head.style.toString()).toEqual('');
+ expect(head.style.toString()).toBe('');
expect(head.style.toComponent).toBeDefined();
+
const styleComponent = head.style.toComponent();
+
expect(styleComponent).toEqual(isArray);
expect(styleComponent).toHaveLength(0);
+
+ expect(head.priority).toBeDefined();
+ expect(head.priority.toString).toBeDefined();
+ expect(head.priority.toString()).toBe('');
+ expect(head.priority.toComponent).toBeDefined();
});
it('does not render undefined attribute values', () => {
- const context = {};
- render(
+ const head = renderContext(
, context);
- const head = context.helmet;
+ const head = renderContext(
);
expect(head.meta).toBeDefined();
expect(head.meta.toString).toBeDefined();
- expect(head.meta.toString()).toEqual('');
+ expect(head.meta.toString()).toBe('');
});
it('rewind() provides a fallback object for empty Helmet state', () => {
- const context = {};
- render(
, context);
-
- const head = context.helmet;
+ const head = renderContext(
);
expect(head.htmlAttributes).toBeDefined();
expect(head.htmlAttributes.toString).toBeDefined();
- expect(head.htmlAttributes.toString()).toEqual('');
+ expect(head.htmlAttributes.toString()).toBe('');
expect(head.htmlAttributes.toComponent).toBeDefined();
expect(head.htmlAttributes.toComponent()).toEqual({});
@@ -150,64 +148,120 @@ describe('server', () => {
expect(head.base).toBeDefined();
expect(head.base.toString).toBeDefined();
- expect(head.base.toString()).toEqual('');
+ expect(head.base.toString()).toBe('');
expect(head.base.toComponent).toBeDefined();
+
const baseComponent = head.base.toComponent();
+
expect(baseComponent).toEqual(isArray);
expect(baseComponent).toHaveLength(0);
expect(head.meta).toBeDefined();
expect(head.meta.toString).toBeDefined();
- expect(head.meta.toString()).toEqual('');
+ expect(head.meta.toString()).toBe('');
expect(head.meta.toComponent).toBeDefined();
+
const metaComponent = head.meta.toComponent();
+
expect(metaComponent).toEqual(isArray);
expect(metaComponent).toHaveLength(0);
expect(head.link).toBeDefined();
expect(head.link.toString).toBeDefined();
- expect(head.link.toString()).toEqual('');
+ expect(head.link.toString()).toBe('');
expect(head.link.toComponent).toBeDefined();
+
const linkComponent = head.link.toComponent();
+
expect(linkComponent).toEqual(isArray);
expect(linkComponent).toHaveLength(0);
expect(head.script).toBeDefined();
expect(head.script.toString).toBeDefined();
- expect(head.script.toString()).toEqual('');
+ expect(head.script.toString()).toBe('');
expect(head.script.toComponent).toBeDefined();
+
const scriptComponent = head.script.toComponent();
+
expect(scriptComponent).toEqual(isArray);
expect(scriptComponent).toHaveLength(0);
expect(head.noscript).toBeDefined();
expect(head.noscript.toString).toBeDefined();
- expect(head.noscript.toString()).toEqual('');
+ expect(head.noscript.toString()).toBe('');
expect(head.noscript.toComponent).toBeDefined();
+
const noscriptComponent = head.noscript.toComponent();
+
expect(noscriptComponent).toEqual(isArray);
expect(noscriptComponent).toHaveLength(0);
expect(head.style).toBeDefined();
expect(head.style.toString).toBeDefined();
- expect(head.style.toString()).toEqual('');
+ expect(head.style.toString()).toBe('');
expect(head.style.toComponent).toBeDefined();
+
const styleComponent = head.style.toComponent();
+
expect(styleComponent).toEqual(isArray);
expect(styleComponent).toHaveLength(0);
+
+ expect(head.priority).toBeDefined();
+ expect(head.priority.toString).toBeDefined();
+ expect(head.priority.toString()).toBe('');
+ expect(head.priority.toComponent).toBeDefined();
});
it('does not render undefined attribute values', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
+ );
+
+ expect(head.script.toString()).toMatchSnapshot();
+ });
+
+ it('prioritizes SEO tags when asked to', () => {
+ const head = renderContext(
+
+
);
- const { script } = context.helmet;
- expect(script.toString()).toMatchSnapshot();
+ expect(head.priority.toString()).toContain('rel="canonical" href="https://www.tacobell.com/"');
+ expect(head.link.toString()).not.toContain('rel="canonical" href="https://www.tacobell.com/"');
+
+ expect(head.priority.toString()).toContain(
+ 'property="og:title" content="A very important title"'
+ );
+ expect(head.meta.toString()).not.toContain(
+ 'property="og:title" content="A very important title"'
+ );
+ });
+
+ it('does not prioritize SEO unless asked to', () => {
+ const head = renderContext(
+
+
+ );
+
+ expect(head.priority.toString()).not.toContain(
+ 'rel="canonical" href="https://www.tacobell.com/"'
+ );
+ expect(head.link.toString()).toContain('rel="canonical" href="https://www.tacobell.com/"');
+
+ expect(head.priority.toString()).not.toContain(
+ 'property="og:title" content="A very important title"'
+ );
+ expect(head.meta.toString()).toContain(
+ 'property="og:title" content="A very important title"'
+ );
});
});
});
diff --git a/__tests__/server/style.test.js b/__tests__/server/style.test.tsx
similarity index 77%
rename from __tests__/server/style.test.js
rename to __tests__/server/style.test.tsx
index 647d6b84..4a418a7c 100644
--- a/__tests__/server/style.test.js
+++ b/__tests__/server/style.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,15 +15,10 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('renders style tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
{
cssText: `p {font-size: 12px;}`,
},
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.style).toBeDefined();
expect(head.style.toComponent).toBeDefined();
@@ -55,12 +42,12 @@ describe('server', () => {
expect(styleComponent).toHaveLength(2);
const markup = ReactServer.renderToStaticMarkup(styleComponent);
+
expect(markup).toMatchSnapshot();
});
it('renders style tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
{
cssText: `p {font-size: 12px;}`,
},
]}
- />,
- context
+ />
);
- const head = context.helmet;
-
expect(head.style).toBeDefined();
expect(head.style.toString).toBeDefined();
expect(head.style.toString()).toMatchSnapshot();
@@ -86,17 +70,13 @@ describe('server', () => {
describe('Declarative API', () => {
it('renders style tags as React components', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.style).toBeDefined();
expect(head.style.toComponent).toBeDefined();
@@ -111,17 +91,13 @@ describe('server', () => {
});
it('renders style tags as string', () => {
- const context = {};
- render(
+ const head = renderContext(
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.style).toBeDefined();
expect(head.style.toString).toBeDefined();
expect(head.style.toString()).toMatchSnapshot();
diff --git a/__tests__/server/title.test.js b/__tests__/server/title.test.tsx
similarity index 72%
rename from __tests__/server/title.test.js
rename to __tests__/server/title.test.tsx
index 1e9dc9b3..e8e02595 100644
--- a/__tests__/server/title.test.js
+++ b/__tests__/server/title.test.tsx
@@ -1,17 +1,12 @@
import React from 'react';
-import ReactDOM from 'react-dom';
import ReactServer from 'react-dom/server';
-import Helmet from '../../src';
+
+import { Helmet } from '../../src';
import Provider from '../../src/Provider';
+import { renderContext, isArray } from '../utils';
Helmet.defaultProps.defer = false;
-const mount = document.getElementById('mount');
-
-const render = (node, context = {}) => {
- ReactDOM.render({node} , mount);
-};
-
beforeAll(() => {
Provider.canUseDOM = false;
});
@@ -20,27 +15,20 @@ afterAll(() => {
Provider.canUseDOM = true;
});
-const isArray = {
- asymmetricMatch: actual => Array.isArray(actual),
-};
-
describe('server', () => {
describe('API', () => {
it('provides initial values if no state is found', () => {
- const context = {};
const NullComponent = () => null;
- render( include'} />, context);
- const head = context.helmet;
+ const head = renderContext( include'} />, context);
-
- const head = context.helmet;
+ const head = renderContext(
,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
@@ -155,49 +125,36 @@ describe('server', () => {
describe('Declarative API', () => {
it('encodes special characters in title', () => {
- const context = {};
- render(
+ const head = renderContext(
{`Dangerous <script> include`}
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
});
it('opts out of string encoding', () => {
- const context = {};
- /* eslint-disable react/no-unescaped-entities */
- render(
+ const head = renderContext(
This is text and & and '.
- ,
- context
+
);
- /* eslint-enable react/no-unescaped-entities */
- const head = context.helmet;
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
});
it('renders title as React component', () => {
- const context = {};
- render(
+ const head = renderContext(
{`Dangerous <script> include`}
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toComponent).toBeDefined();
@@ -206,7 +163,7 @@ describe('server', () => {
expect(titleComponent).toEqual(isArray);
expect(titleComponent).toHaveLength(1);
- titleComponent.forEach(title => {
+ titleComponent.forEach((title: Element) => {
expect(title).toEqual(expect.objectContaining({ type: 'title' }));
});
@@ -216,16 +173,12 @@ describe('server', () => {
});
it('renders title with itemprop name as React component', () => {
- const context = {};
- render(
+ const head = renderContext(
Title with Itemprop
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toComponent).toBeDefined();
@@ -234,7 +187,7 @@ describe('server', () => {
expect(titleComponent).toEqual(isArray);
expect(titleComponent).toHaveLength(1);
- titleComponent.forEach(title => {
+ titleComponent.forEach((title: Element) => {
expect(title).toEqual(expect.objectContaining({ type: 'title' }));
});
@@ -244,72 +197,57 @@ describe('server', () => {
});
it('renders title tag as string', () => {
- const context = {};
- render(
+ const head = renderContext(
{'Dangerous <script> include'}
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
});
it('renders title and allows children containing expressions', () => {
- const context = {};
const someValue = 'Some Great Title';
- render(
+ const head = renderContext(
Title: {someValue}
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
});
it('renders title with itemprop name as string', () => {
- const context = {};
- render(
+ const head = renderContext(
Title with Itemprop
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
const titleString = head.title.toString();
+
expect(titleString).toMatchSnapshot();
});
it('does not encode all characters with HTML character entity equivalents', () => {
- const context = {};
const chineseTitle = '膣膗 鍆錌雔';
- render(
+ const head = renderContext(
{chineseTitle}
-
,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
@@ -318,32 +256,24 @@ describe('server', () => {
describe('renderStatic', () => {
it('does html encode title', () => {
- const context = {};
- render(
+ const head = renderContext(
{`Dangerous <script> include`}
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toString).toBeDefined();
expect(head.title.toString()).toMatchSnapshot();
});
it('renders title as React component', () => {
- const context = {};
- render(
+ const head = renderContext(
{`Dangerous <script> include`}
- ,
- context
+
);
- const head = context.helmet;
-
expect(head.title).toBeDefined();
expect(head.title.toComponent).toBeDefined();
@@ -352,7 +282,7 @@ describe('server', () => {
expect(titleComponent).toEqual(isArray);
expect(titleComponent).toHaveLength(1);
- titleComponent.forEach(title => {
+ titleComponent.forEach((title: Element) => {
expect(title).toEqual(expect.objectContaining({ type: 'title' }));
});
diff --git a/__tests__/setup-test-env.ts b/__tests__/setup-test-env.ts
new file mode 100644
index 00000000..81860577
--- /dev/null
+++ b/__tests__/setup-test-env.ts
@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+
+import { clearInstances } from '../src/HelmetData';
+
+import { unmount } from './utils';
+
+// @ts-ignore
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+let headElement: HTMLHeadElement;
+
+beforeEach(() => {
+ headElement ||= document.head || document.querySelector('head');
+
+ headElement.innerHTML = '';
+ document.body.innerHTML = '
';
+});
+
+afterEach(() => {
+ unmount();
+
+ clearInstances();
+});
diff --git a/__tests__/utils.tsx b/__tests__/utils.tsx
new file mode 100644
index 00000000..82a97546
--- /dev/null
+++ b/__tests__/utils.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+import Provider from '../src/Provider';
+
+let root: Root | null = null;
+
+export const unmount = () => {
+ act(() => {
+ root?.unmount();
+ root = null;
+ });
+};
+
+export const render = (node: ReactNode, context = {} as any) => {
+ if (!root) {
+ const elem = document.getElementById('mount') as HTMLElement;
+ root = createRoot(elem);
+ }
+
+ act(() => {
+ root?.render(
+
+ {node}
+
+ );
+ });
+};
+
+export const renderContext = (node: ReactNode) => {
+ const context = {} as any;
+ render(node, context);
+ return context.helmet;
+};
+
+export const isArray = {
+ asymmetricMatch: (actual: any) => Array.isArray(actual),
+};
diff --git a/__tests__/window.ts b/__tests__/window.ts
new file mode 100644
index 00000000..1ebc34a9
--- /dev/null
+++ b/__tests__/window.ts
@@ -0,0 +1,26 @@
+import { JSDOM } from 'jsdom';
+import type { DOMWindow } from 'jsdom';
+
+const jsdom = new JSDOM('
', {
+ url: 'https://nytimes.com/',
+});
+const { window } = jsdom;
+
+function copyProps(src: DOMWindow, target: typeof globalThis) {
+ const props = Object.getOwnPropertyNames(src)
+ // @ts-ignore
+ .filter(prop => typeof target[prop] === 'undefined')
+ .reduce(
+ (result, prop) => ({
+ ...result,
+ [prop]: Object.getOwnPropertyDescriptor(src, prop),
+ }),
+ {}
+ );
+ Object.defineProperties(target, props);
+}
+
+global.window = window as any;
+global.document = window.document;
+
+copyProps(window, global);
diff --git a/build.ts b/build.ts
new file mode 100644
index 00000000..0a3bba5f
--- /dev/null
+++ b/build.ts
@@ -0,0 +1,21 @@
+import { build } from 'esbuild';
+
+import { dependencies, peerDependencies } from './package.json';
+
+const shared = {
+ entryPoints: ['src/index.tsx'],
+ bundle: true,
+ external: Object.keys(dependencies).concat(Object.keys(peerDependencies)),
+};
+
+build({
+ ...shared,
+ format: 'cjs',
+ outfile: 'lib/index.js',
+});
+
+build({
+ ...shared,
+ outfile: 'lib/index.esm.js',
+ format: 'esm',
+});
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 00000000..84dcb122
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: ['@commitlint/config-conventional'],
+};
diff --git a/jest.setup.js b/jest.setup.js
deleted file mode 100644
index 63c717a9..00000000
--- a/jest.setup.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import ReactDOM from 'react-dom';
-
-configure({ adapter: new Adapter() });
-
-const { JSDOM } = require('jsdom');
-
-const jsdom = new JSDOM('
');
-const { window } = jsdom;
-
-function copyProps(src, target) {
- const props = Object.getOwnPropertyNames(src)
- .filter(prop => typeof target[prop] === 'undefined')
- .reduce(
- (result, prop) => ({
- ...result,
- [prop]: Object.getOwnPropertyDescriptor(src, prop),
- }),
- {}
- );
- Object.defineProperties(target, props);
-}
-
-global.window = window;
-global.document = window.document;
-global.navigator = {
- userAgent: 'node.js',
-};
-copyProps(window, global);
-
-const mount = document.getElementById('mount');
-
-beforeEach(() => {
- document.head.innerHTML = '';
-});
-
-afterEach(() => {
- ReactDOM.unmountComponentAtNode(mount);
-});
diff --git a/package.json b/package.json
index e25335d3..abdeb947 100644
--- a/package.json
+++ b/package.json
@@ -1,67 +1,62 @@
{
"name": "react-helmet-async",
- "version": "0.0.4",
+ "version": "2.0.4",
"description": "Thread-safe Helmet for React 16+ and friends",
- "main": "lib/index.js",
+ "sideEffects": false,
+ "main": "./lib/index.js",
+ "module": "./lib/index.esm.js",
+ "typings": "./lib/index.d.ts",
"repository": "http://github.com/staylor/react-helmet-async",
"author": "Scott Taylor ",
- "license": "MIT",
+ "license": "Apache-2.0",
+ "files": [
+ "lib/"
+ ],
"dependencies": {
- "deep-equal": "^1.0.1",
- "invariant": "^2.2.2",
- "prop-types": "^15.6.0",
- "shallowequal": "^1.0.2"
+ "invariant": "^2.2.4",
+ "react-fast-compare": "^3.2.2",
+ "shallowequal": "^1.1.0"
},
"devDependencies": {
- "babel-cli": "^6.26.0",
- "babel-core": "^6.26.0",
- "babel-eslint": "^8.1.2",
- "babel-jest": "^22.0.4",
- "babel-plugin-transform-class-properties": "^6.24.1",
- "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
- "babel-plugin-transform-object-rest-spread": "^6.26.0",
- "babel-preset-kyt-react": "^0.3.0",
- "enzyme": "^3.3.0",
- "enzyme-adapter-react-16": "^1.1.1",
- "eslint": "^4.14.0",
- "eslint-config-airbnb": "^16.1.0",
- "eslint-config-kyt": "^0.5.0",
- "eslint-config-prettier": "^2.9.0",
- "eslint-plugin-import": "^2.8.0",
- "eslint-plugin-jest": "^21.5.0",
- "eslint-plugin-json": "^1.2.0",
- "eslint-plugin-jsx-a11y": "^6.0.3",
- "eslint-plugin-prettier": "^2.4.0",
- "eslint-plugin-react": "^7.5.1",
- "jest-cli": "^22.0.4",
- "jsdom": "^11.5.1",
- "prettier": "^1.9.2",
- "prettier-eslint-cli": "^4.7.0",
- "react": "^16.2.0",
- "react-dom": "^16.2.0",
- "regenerator-runtime": "^0.11.1"
+ "@commitlint/cli": "18.4.3",
+ "@commitlint/config-conventional": "18.4.3",
+ "@remix-run/eslint-config": "2.3.1",
+ "@testing-library/jest-dom": "6.1.5",
+ "@testing-library/react": "14.1.2",
+ "@types/eslint": "8.44.8",
+ "@types/invariant": "2.2.37",
+ "@types/jsdom": "21.1.6",
+ "@types/react": "18.2.39",
+ "@types/shallowequal": "1.1.5",
+ "@vitejs/plugin-react": "4.2.0",
+ "esbuild": "0.19.8",
+ "eslint": "8.54.0",
+ "eslint-config-prettier": "9.0.0",
+ "eslint-plugin-prettier": "5.0.1",
+ "husky": "8.0.3",
+ "jsdom": "22.1.0",
+ "prettier": "3.1.0",
+ "raf": "3.4.1",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "rimraf": "5.0.5",
+ "tsx": "4.6.1",
+ "typescript": "5.2.2",
+ "vite": "4.5.0",
+ "vitest": "0.34.6"
},
"peerDependencies": {
- "react": "^16.2.0",
- "react-dom": "^16.2.0"
+ "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
},
"scripts": {
- "test": "jest",
- "compile": "npm run compile:commonjs && npm run compile:es",
- "compile:commonjs": "babel src --out-dir lib",
- "compile:es": "babel src --out-dir es",
- "prepublish": "npm run compile"
- },
- "jest": {
- "setupTestFrameworkScriptFile": "/jest.setup.js",
- "testEnvironment": "node",
- "testMatch": [
- "**/__tests__/**/*.test.js"
- ],
- "testPathIgnorePatterns": [
- "/node_modules/",
- "/src/",
- "/lib/"
- ]
+ "clean": "rimraf lib",
+ "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint --report-unused-disable-directives .",
+ "lint-fix": "yarn lint --fix",
+ "test": "vitest run",
+ "test-watch": "yarn test --watch",
+ "test-update": "yarn test -u",
+ "compile": "yarn run clean && NODE_ENV=production tsx build.ts && yarn types",
+ "prepare": "yarn compile && husky install",
+ "types": "tsc src/index.tsx --jsx react --declaration --esModuleInterop --allowJs --emitDeclarationOnly --outDir lib"
}
}
diff --git a/src/Dispatcher.js b/src/Dispatcher.js
deleted file mode 100644
index cf4cfb0d..00000000
--- a/src/Dispatcher.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Component } from 'react';
-import shallowEqual from 'shallowequal';
-import handleStateChangeOnClient from './client';
-import mapStateOnServer from './server';
-import { reducePropsToState } from './utils';
-import Provider, { providerShape } from './Provider';
-
-export default class Dispatcher extends Component {
- static contextTypes = providerShape;
-
- shouldComponentUpdate(nextProps) {
- return !shallowEqual(nextProps, this.props);
- }
-
- emitChange() {
- const { helmetInstances, setHelmet } = this.context;
- let serverState = null;
- const state = reducePropsToState(helmetInstances.get().map(instance => instance.props));
- if (Provider.canUseDOM) {
- handleStateChangeOnClient(state);
- } else if (mapStateOnServer) {
- serverState = mapStateOnServer(state);
- }
- setHelmet(serverState, state);
- }
-
- componentWillMount() {
- const { helmetInstances } = this.context;
- helmetInstances.add(this);
- this.emitChange();
- }
-
- componentDidUpdate() {
- this.emitChange();
- }
-
- componentWillUnmount() {
- const { helmetInstances } = this.context;
- helmetInstances.remove(this);
- this.emitChange();
- }
-
- render() {
- return null;
- }
-}
diff --git a/src/Dispatcher.tsx b/src/Dispatcher.tsx
new file mode 100644
index 00000000..1a248fa6
--- /dev/null
+++ b/src/Dispatcher.tsx
@@ -0,0 +1,80 @@
+import { Component } from 'react';
+import shallowEqual from 'shallowequal';
+
+import handleStateChangeOnClient from './client';
+import mapStateOnServer from './server';
+import { reducePropsToState } from './utils';
+import Provider from './Provider';
+import type { HelmetServerState } from './types';
+
+export interface DispatcherContextProp {
+ setHelmet: (newState: HelmetServerState) => void;
+ helmetInstances: {
+ get: () => HelmetDispatcher[];
+ add: (helmet: HelmetDispatcher) => void;
+ remove: (helmet: HelmetDispatcher) => void;
+ };
+}
+
+interface DispatcherProps {
+ context: DispatcherContextProp;
+}
+
+export default class HelmetDispatcher extends Component {
+ rendered = false;
+
+ shouldComponentUpdate(nextProps: DispatcherProps) {
+ return !shallowEqual(nextProps, this.props);
+ }
+
+ componentDidUpdate() {
+ this.emitChange();
+ }
+
+ componentWillUnmount() {
+ const { helmetInstances } = this.props.context;
+ helmetInstances.remove(this);
+ this.emitChange();
+ }
+
+ emitChange() {
+ const { helmetInstances, setHelmet } = this.props.context;
+ let serverState = null;
+ const state = reducePropsToState(
+ helmetInstances.get().map(instance => {
+ const props = { ...instance.props };
+ // @ts-ignore
+ delete props.context;
+ return props;
+ })
+ );
+ if (Provider.canUseDOM) {
+ handleStateChangeOnClient(state);
+ } else if (mapStateOnServer) {
+ serverState = mapStateOnServer(state);
+ }
+ // @ts-ignore
+ setHelmet(serverState);
+ }
+
+ // componentWillMount will be deprecated
+ // for SSR, initialize on first render
+ // constructor is also unsafe in StrictMode
+ init() {
+ if (this.rendered) {
+ return;
+ }
+
+ this.rendered = true;
+
+ const { helmetInstances } = this.props.context;
+ helmetInstances.add(this);
+ this.emitChange();
+ }
+
+ render() {
+ this.init();
+
+ return null;
+ }
+}
diff --git a/src/HelmetData.ts b/src/HelmetData.ts
new file mode 100644
index 00000000..6069e6b8
--- /dev/null
+++ b/src/HelmetData.ts
@@ -0,0 +1,67 @@
+import type HelmetDispatcher from './Dispatcher';
+import mapStateOnServer from './server';
+import type { HelmetServerState, MappedServerState } from './types';
+
+const instances: HelmetDispatcher[] = [];
+
+export function clearInstances() {
+ instances.length = 0;
+}
+
+export interface HelmetDataType {
+ instances: HelmetDispatcher[];
+ context: HelmetDataContext;
+}
+
+interface HelmetDataContext {
+ helmet: HelmetServerState;
+}
+
+export const isDocument = !!(
+ typeof window !== 'undefined' &&
+ window.document &&
+ window.document.createElement
+);
+
+export default class HelmetData implements HelmetDataType {
+ instances = [];
+ canUseDOM = isDocument;
+ context: HelmetDataContext;
+
+ value = {
+ setHelmet: (serverState: HelmetServerState) => {
+ this.context.helmet = serverState;
+ },
+ helmetInstances: {
+ get: () => (this.canUseDOM ? instances : this.instances),
+ add: (instance: HelmetDispatcher) => {
+ (this.canUseDOM ? instances : this.instances).push(instance);
+ },
+ remove: (instance: HelmetDispatcher) => {
+ const index = (this.canUseDOM ? instances : this.instances).indexOf(instance);
+ (this.canUseDOM ? instances : this.instances).splice(index, 1);
+ },
+ },
+ };
+
+ constructor(context: any, canUseDOM?: boolean) {
+ this.context = context;
+ this.canUseDOM = canUseDOM || false;
+
+ if (!canUseDOM) {
+ context.helmet = mapStateOnServer({
+ baseTag: [],
+ bodyAttributes: {},
+ encodeSpecialCharacters: true,
+ htmlAttributes: {},
+ linkTags: [],
+ metaTags: [],
+ noscriptTags: [],
+ scriptTags: [],
+ styleTags: [],
+ title: '',
+ titleAttributes: {},
+ } as MappedServerState);
+ }
+ }
+}
diff --git a/src/Provider.js b/src/Provider.js
deleted file mode 100644
index 562f4c24..00000000
--- a/src/Provider.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import mapStateOnServer from './server';
-
-/* eslint-disable react/prop-types */
-
-export const providerShape = {
- setHelmet: PropTypes.func,
- helmetInstances: PropTypes.shape({
- get: PropTypes.func,
- add: PropTypes.func,
- remove: PropTypes.func,
- }),
-};
-
-const canUseDOM = typeof document !== 'undefined';
-
-export default class Provider extends Component {
- static canUseDOM = canUseDOM;
-
- static propTypes = {
- context: PropTypes.shape({}),
- children: PropTypes.node.isRequired,
- };
-
- static defaultProps = {
- context: {},
- };
-
- static childContextTypes = providerShape;
-
- instances = [];
-
- getChildContext() {
- return {
- setHelmet: (serverState, state) => {
- this.props.context.helmet = serverState;
- this.props.context.state = state;
- },
- helmetInstances: {
- get: () => this.instances,
- add: instance => {
- this.instances.push(instance);
- },
- remove: instance => {
- const index = this.instances.indexOf(instance);
- this.instances.splice(index, 1);
- },
- },
- };
- }
-
- constructor(props) {
- super(props);
-
- if (!Provider.canUseDOM) {
- props.context.helmet = mapStateOnServer({
- baseTag: [],
- bodyAttributes: {},
- encodeSpecialCharacters: true,
- htmlAttributes: {},
- linkTags: [],
- metaTags: [],
- noscriptTags: [],
- scriptTags: [],
- styleTags: [],
- title: '',
- titleAttributes: {},
- });
- }
- }
-
- render() {
- return this.props.children;
- }
-}
diff --git a/src/Provider.tsx b/src/Provider.tsx
new file mode 100644
index 00000000..432a83f7
--- /dev/null
+++ b/src/Provider.tsx
@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from 'react';
+import React, { Component } from 'react';
+
+import HelmetData, { isDocument } from './HelmetData';
+import type { HelmetServerState } from './types';
+
+const defaultValue = {};
+
+export const Context = React.createContext(defaultValue);
+
+interface ProviderProps {
+ context?: {
+ helmet?: HelmetServerState;
+ };
+}
+
+export default class HelmetProvider extends Component> {
+ static canUseDOM = isDocument;
+
+ helmetData: HelmetData;
+
+ constructor(props: PropsWithChildren) {
+ super(props);
+
+ this.helmetData = new HelmetData(this.props.context || {}, HelmetProvider.canUseDOM);
+ }
+
+ render() {
+ return {this.props.children} ;
+ }
+}
diff --git a/src/client.js b/src/client.ts
similarity index 68%
rename from src/client.js
rename to src/client.ts
index 7cc084bb..7a698b8b 100644
--- a/src/client.js
+++ b/src/client.ts
@@ -1,48 +1,45 @@
import { HELMET_ATTRIBUTE, TAG_NAMES, TAG_PROPERTIES } from './constants';
+import type { Attributes, StateUpdate, TagList } from './types';
import { flattenArray } from './utils';
-const rafPolyfill = (() => {
- let clock = Date.now();
+interface TagUpdates {
+ oldTags: HTMLElement[];
+ newTags: HTMLElement[];
+}
- return (callback: Function) => {
- const currentTime = Date.now();
+interface TagUpdateList {
+ [key: string]: TagUpdates;
+}
- if (currentTime - clock > 16) {
- clock = currentTime;
- callback(currentTime);
- } else {
- setTimeout(() => {
- rafPolyfill(callback);
- }, 0);
- }
- };
-})();
-
-const updateTags = (type, tags) => {
+const updateTags = (type: string, tags: HTMLElement[]) => {
const headElement = document.head || document.querySelector(TAG_NAMES.HEAD);
const tagNodes = headElement.querySelectorAll(`${type}[${HELMET_ATTRIBUTE}]`);
- const oldTags = [].slice.call(tagNodes);
- const newTags = [];
- let indexToDelete;
+ const oldTags: HTMLElement[] = [].slice.call(tagNodes);
+ const newTags: HTMLElement[] = [];
+ let indexToDelete: number;
if (tags && tags.length) {
tags.forEach(tag => {
const newElement = document.createElement(type);
- // eslint-disable-next-line
for (const attribute in tag) {
if (Object.prototype.hasOwnProperty.call(tag, attribute)) {
if (attribute === TAG_PROPERTIES.INNER_HTML) {
newElement.innerHTML = tag.innerHTML;
} else if (attribute === TAG_PROPERTIES.CSS_TEXT) {
+ // This seems like a CSSImportRuleDeclaration?
+ // @ts-ignore
if (newElement.styleSheet) {
+ // @ts-ignore
newElement.styleSheet.cssText = tag.cssText;
} else {
+ // @ts-ignore
newElement.appendChild(document.createTextNode(tag.cssText));
}
} else {
- const value = typeof tag[attribute] === 'undefined' ? '' : tag[attribute];
- newElement.setAttribute(attribute, value);
+ const attr = attribute as keyof HTMLElement;
+ const value = typeof tag[attr] === 'undefined' ? '' : tag[attr];
+ newElement.setAttribute(attribute, value as string);
}
}
}
@@ -63,7 +60,7 @@ const updateTags = (type, tags) => {
});
}
- oldTags.forEach(tag => tag.parentNode.removeChild(tag));
+ oldTags.forEach((tag: Node) => tag.parentNode?.removeChild(tag));
newTags.forEach(tag => headElement.appendChild(tag));
return {
@@ -72,7 +69,7 @@ const updateTags = (type, tags) => {
};
};
-const updateAttributes = (tagName, attributes) => {
+const updateAttributes = (tagName: string, attributes: Attributes) => {
const elementTag = document.getElementsByTagName(tagName)[0];
if (!elementTag) {
@@ -81,11 +78,10 @@ const updateAttributes = (tagName, attributes) => {
const helmetAttributeString = elementTag.getAttribute(HELMET_ATTRIBUTE);
const helmetAttributes = helmetAttributeString ? helmetAttributeString.split(',') : [];
- const attributesToRemove = [].concat(helmetAttributes);
+ const attributesToRemove = [...helmetAttributes];
const attributeKeys = Object.keys(attributes);
- for (let i = 0; i < attributeKeys.length; i += 1) {
- const attribute = attributeKeys[i];
+ for (const attribute of attributeKeys) {
const value = attributes[attribute] || '';
if (elementTag.getAttribute(attribute) !== value) {
@@ -113,7 +109,7 @@ const updateAttributes = (tagName, attributes) => {
}
};
-const updateTitle = (title, attributes) => {
+const updateTitle = (title: string, attributes: Attributes) => {
if (typeof title !== 'undefined' && document.title !== title) {
document.title = flattenArray(title);
}
@@ -121,7 +117,9 @@ const updateTitle = (title, attributes) => {
updateAttributes(TAG_NAMES.TITLE, attributes);
};
-const commitTagChanges = (newState, cb) => {
+type Cb = () => number | null | void;
+
+const commitTagChanges = (newState: StateUpdate, cb?: Cb) => {
const {
baseTag,
bodyAttributes,
@@ -135,12 +133,12 @@ const commitTagChanges = (newState, cb) => {
title,
titleAttributes,
} = newState;
- updateAttributes(TAG_NAMES.BODY, bodyAttributes);
- updateAttributes(TAG_NAMES.HTML, htmlAttributes);
+ updateAttributes(TAG_NAMES.BODY, bodyAttributes as Attributes);
+ updateAttributes(TAG_NAMES.HTML, htmlAttributes as Attributes);
- updateTitle(title, titleAttributes);
+ updateTitle(title, titleAttributes as Attributes);
- const tagUpdates = {
+ const tagUpdates: TagUpdateList = {
baseTag: updateTags(TAG_NAMES.BASE, baseTag),
linkTags: updateTags(TAG_NAMES.LINK, linkTags),
metaTags: updateTags(TAG_NAMES.META, metaTags),
@@ -149,8 +147,8 @@ const commitTagChanges = (newState, cb) => {
styleTags: updateTags(TAG_NAMES.STYLE, styleTags),
};
- const addedTags = {};
- const removedTags = {};
+ const addedTags: TagList = {};
+ const removedTags: TagList = {};
Object.keys(tagUpdates).forEach(tagType => {
const { newTags, oldTags } = tagUpdates[tagType];
@@ -170,28 +168,9 @@ const commitTagChanges = (newState, cb) => {
onChangeClientState(newState, addedTags, removedTags);
};
-const cafPolyfill = (id: string | number) => clearTimeout(id);
-
-export const requestAnimationFrame =
- typeof window !== 'undefined'
- ? window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- rafPolyfill
- : global.requestAnimationFrame || rafPolyfill;
-
-const cancelAnimationFrame =
- typeof window !== 'undefined'
- ? window.cancelAnimationFrame ||
- window.webkitCancelAnimationFrame ||
- window.mozCancelAnimationFrame ||
- cafPolyfill
- : global.cancelAnimationFrame || cafPolyfill;
-
-// eslint-disable-next-line
-let _helmetCallback = null;
+let _helmetCallback: number | null = null;
-const handleStateChangeOnClient = newState => {
+const handleStateChangeOnClient = (newState: StateUpdate) => {
if (_helmetCallback) {
cancelAnimationFrame(_helmetCallback);
}
diff --git a/src/constants.js b/src/constants.js
deleted file mode 100644
index 63f89016..00000000
--- a/src/constants.js
+++ /dev/null
@@ -1,51 +0,0 @@
-export const TAG_PROPERTIES = {
- CHARSET: 'charset',
- CSS_TEXT: 'cssText',
- HREF: 'href',
- HTTPEQUIV: 'http-equiv',
- INNER_HTML: 'innerHTML',
- ITEM_PROP: 'itemprop',
- NAME: 'name',
- PROPERTY: 'property',
- REL: 'rel',
- SRC: 'src',
-};
-
-export const ATTRIBUTE_NAMES = {
- BODY: 'bodyAttributes',
- HTML: 'htmlAttributes',
- TITLE: 'titleAttributes',
-};
-
-export const TAG_NAMES = {
- BASE: 'base',
- BODY: 'body',
- HEAD: 'head',
- HTML: 'html',
- LINK: 'link',
- META: 'meta',
- NOSCRIPT: 'noscript',
- SCRIPT: 'script',
- STYLE: 'style',
- TITLE: 'title',
-};
-
-export const VALID_TAG_NAMES = Object.keys(TAG_NAMES).map(name => TAG_NAMES[name]);
-
-export const REACT_TAG_MAP = {
- accesskey: 'accessKey',
- charset: 'charSet',
- class: 'className',
- contenteditable: 'contentEditable',
- contextmenu: 'contextMenu',
- 'http-equiv': 'httpEquiv',
- itemprop: 'itemProp',
- tabindex: 'tabIndex',
-};
-
-export const HTML_TAG_MAP = Object.keys(REACT_TAG_MAP).reduce((obj, key) => {
- obj[REACT_TAG_MAP[key]] = key;
- return obj;
-}, {});
-
-export const HELMET_ATTRIBUTE = 'data-rh';
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..401f0ea7
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,79 @@
+export enum TAG_PROPERTIES {
+ CHARSET = 'charset',
+ CSS_TEXT = 'cssText',
+ HREF = 'href',
+ HTTPEQUIV = 'http-equiv',
+ INNER_HTML = 'innerHTML',
+ ITEM_PROP = 'itemprop',
+ NAME = 'name',
+ PROPERTY = 'property',
+ REL = 'rel',
+ SRC = 'src',
+}
+
+export enum ATTRIBUTE_NAMES {
+ BODY = 'bodyAttributes',
+ HTML = 'htmlAttributes',
+ TITLE = 'titleAttributes',
+}
+
+export enum TAG_NAMES {
+ BASE = 'base',
+ BODY = 'body',
+ HEAD = 'head',
+ HTML = 'html',
+ LINK = 'link',
+ META = 'meta',
+ NOSCRIPT = 'noscript',
+ SCRIPT = 'script',
+ STYLE = 'style',
+ TITLE = 'title',
+ FRAGMENT = 'Symbol(react.fragment)',
+}
+
+export const SEO_PRIORITY_TAGS = {
+ link: { rel: ['amphtml', 'canonical', 'alternate'] },
+ script: { type: ['application/ld+json'] },
+ meta: {
+ charset: '',
+ name: ['generator', 'robots', 'description'],
+ property: [
+ 'og:type',
+ 'og:title',
+ 'og:url',
+ 'og:image',
+ 'og:image:alt',
+ 'og:description',
+ 'twitter:url',
+ 'twitter:title',
+ 'twitter:description',
+ 'twitter:image',
+ 'twitter:image:alt',
+ 'twitter:card',
+ 'twitter:site',
+ ],
+ },
+};
+
+export const VALID_TAG_NAMES = Object.values(TAG_NAMES);
+
+export const REACT_TAG_MAP = {
+ accesskey: 'accessKey',
+ charset: 'charSet',
+ class: 'className',
+ contenteditable: 'contentEditable',
+ contextmenu: 'contextMenu',
+ 'http-equiv': 'httpEquiv',
+ itemprop: 'itemProp',
+ tabindex: 'tabIndex',
+};
+
+export const HTML_TAG_MAP = Object.entries(REACT_TAG_MAP).reduce(
+ (carry, [key, value]) => {
+ carry[value] = key;
+ return carry;
+ },
+ {} as { [key: string]: string }
+);
+
+export const HELMET_ATTRIBUTE = 'data-rh';
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 288ffb0f..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import deepEqual from 'deep-equal';
-import invariant from 'invariant';
-import Dispatcher from './Dispatcher';
-import { TAG_NAMES, VALID_TAG_NAMES, HTML_TAG_MAP } from './constants';
-
-export { default as HelmetProvider } from './Provider';
-
-/* eslint-disable class-methods-use-this */
-
-export default class Helmet extends Component {
- /**
- * @param {Object} base: {"target": "_blank", "href": "http://mysite.com/"}
- * @param {Object} bodyAttributes: {"className": "root"}
- * @param {String} defaultTitle: "Default Title"
- * @param {Boolean} defer: true
- * @param {Boolean} encodeSpecialCharacters: true
- * @param {Object} htmlAttributes: {"lang": "en", "amp": undefined}
- * @param {Array} link: [{"rel": "canonical", "href": "http://mysite.com/example"}]
- * @param {Array} meta: [{"name": "description", "content": "Test description"}]
- * @param {Array} noscript: [{"innerHTML": " components within each other, which is not allowed. Refer to our API for more information.`
- : `Only elements types ${VALID_TAG_NAMES.join(
- ', '
- )} are allowed. Helmet does not support rendering <${
- child.type
- }> elements. Refer to our API for more information.`
- );
-
- invariant(
- !nestedChildren ||
- typeof nestedChildren === 'string' ||
- (Array.isArray(nestedChildren) &&
- !nestedChildren.some(nestedChild => typeof nestedChild !== 'string')),
- `Helmet expects a string as a child of <${
- child.type
- }>. Did you forget to wrap your children in braces? ( <${child.type}>{\`\`} ) Refer to our API for more information.`
- );
-
- return true;
- }
-
- mapChildrenToProps(children, newProps) {
- let arrayTypeChildren = {};
-
- React.Children.forEach(children, child => {
- if (!child || !child.props) {
- return;
- }
-
- const { children: nestedChildren, ...childProps } = child.props;
- // convert React props to HTML attributes
- const newChildProps = Object.keys(childProps).reduce((obj, key) => {
- obj[HTML_TAG_MAP[key] || key] = childProps[key];
- return obj;
- }, {});
-
- this.warnOnInvalidChildren(child, nestedChildren);
-
- switch (child.type) {
- case TAG_NAMES.LINK:
- case TAG_NAMES.META:
- case TAG_NAMES.NOSCRIPT:
- case TAG_NAMES.SCRIPT:
- case TAG_NAMES.STYLE:
- arrayTypeChildren = this.flattenArrayTypeChildren({
- child,
- arrayTypeChildren,
- newChildProps,
- nestedChildren,
- });
- break;
-
- default:
- newProps = this.mapObjectTypeChildren({
- child,
- newProps,
- newChildProps,
- nestedChildren,
- });
- break;
- }
- });
-
- return this.mapArrayTypeChildrenToProps(arrayTypeChildren, newProps);
- }
-
- render() {
- const { children, ...props } = this.props;
- let newProps = { ...props };
-
- if (children) {
- newProps = this.mapChildrenToProps(children, newProps);
- }
-
- return > {
+ static defaultProps = {
+ defer: true,
+ encodeSpecialCharacters: true,
+ prioritizeSeoTags: false,
+ };
+
+ shouldComponentUpdate(nextProps: HelmetProps) {
+ return !fastCompare(without(this.props, 'helmetData'), without(nextProps, 'helmetData'));
+ }
+
+ mapNestedChildrenToProps(child: ReactElement, nestedChildren: ReactNode) {
+ if (!nestedChildren) {
+ return null;
+ }
+
+ switch (child.type) {
+ case TAG_NAMES.SCRIPT:
+ case TAG_NAMES.NOSCRIPT:
+ return {
+ innerHTML: nestedChildren,
+ };
+
+ case TAG_NAMES.STYLE:
+ return {
+ cssText: nestedChildren,
+ };
+ default:
+ throw new Error(
+ `<${child.type} /> elements are self-closing and can not contain children. Refer to our API for more information.`
+ );
+ }
+ }
+
+ flattenArrayTypeChildren(
+ child: JSX.Element,
+ arrayTypeChildren: { [key: string]: JSX.Element[] },
+ newChildProps: Props,
+ nestedChildren: ReactNode
+ ) {
+ return {
+ ...arrayTypeChildren,
+ [child.type]: [
+ ...(arrayTypeChildren[child.type] || []),
+ {
+ ...newChildProps,
+ ...this.mapNestedChildrenToProps(child, nestedChildren),
+ },
+ ],
+ };
+ }
+
+ mapObjectTypeChildren(
+ child: JSX.Element,
+ newProps: Props,
+ newChildProps: Props,
+ nestedChildren: ReactNode
+ ) {
+ switch (child.type) {
+ case TAG_NAMES.TITLE:
+ return {
+ ...newProps,
+ [child.type]: nestedChildren,
+ titleAttributes: { ...newChildProps },
+ };
+
+ case TAG_NAMES.BODY:
+ return {
+ ...newProps,
+ bodyAttributes: { ...newChildProps },
+ };
+
+ case TAG_NAMES.HTML:
+ return {
+ ...newProps,
+ htmlAttributes: { ...newChildProps },
+ };
+ default:
+ return {
+ ...newProps,
+ [child.type]: { ...newChildProps },
+ };
+ }
+ }
+
+ mapArrayTypeChildrenToProps(arrayTypeChildren: { [key: string]: JSX.Element }, newProps: Props) {
+ let newFlattenedProps = { ...newProps };
+
+ Object.keys(arrayTypeChildren).forEach(arrayChildName => {
+ newFlattenedProps = {
+ ...newFlattenedProps,
+ [arrayChildName]: arrayTypeChildren[arrayChildName],
+ };
+ });
+
+ return newFlattenedProps;
+ }
+
+ warnOnInvalidChildren(child: JSX.Element, nestedChildren: ReactNode) {
+ invariant(
+ VALID_TAG_NAMES.some(name => child.type === name),
+ typeof child.type === 'function'
+ ? `You may be attempting to nest components within each other, which is not allowed. Refer to our API for more information.`
+ : `Only elements types ${VALID_TAG_NAMES.join(
+ ', '
+ )} are allowed. Helmet does not support rendering <${
+ child.type
+ }> elements. Refer to our API for more information.`
+ );
+
+ invariant(
+ !nestedChildren ||
+ typeof nestedChildren === 'string' ||
+ (Array.isArray(nestedChildren) &&
+ !nestedChildren.some(nestedChild => typeof nestedChild !== 'string')),
+ `Helmet expects a string as a child of <${child.type}>. Did you forget to wrap your children in braces? ( <${child.type}>{\`\`} ) Refer to our API for more information.`
+ );
+
+ return true;
+ }
+
+ mapChildrenToProps(children: ReactNode, newProps: Props) {
+ let arrayTypeChildren = {};
+
+ React.Children.forEach(children as JSX.Element, (child: ReactElement) => {
+ if (!child || !child.props) {
+ return;
+ }
+
+ const { children: nestedChildren, ...childProps } = child.props;
+ // convert React props to HTML attributes
+ const newChildProps = Object.keys(childProps).reduce((obj: Props, key) => {
+ obj[HTML_TAG_MAP[key] || key] = childProps[key];
+ return obj;
+ }, {});
+
+ let { type } = child;
+ if (typeof type === 'symbol') {
+ type = (type as 'symbol').toString();
+ } else {
+ this.warnOnInvalidChildren(child, nestedChildren);
+ }
+
+ switch (type) {
+ case TAG_NAMES.FRAGMENT:
+ newProps = this.mapChildrenToProps(nestedChildren, newProps);
+ break;
+
+ case TAG_NAMES.LINK:
+ case TAG_NAMES.META:
+ case TAG_NAMES.NOSCRIPT:
+ case TAG_NAMES.SCRIPT:
+ case TAG_NAMES.STYLE:
+ arrayTypeChildren = this.flattenArrayTypeChildren(
+ child,
+ arrayTypeChildren,
+ newChildProps,
+ nestedChildren
+ );
+ break;
+
+ default:
+ newProps = this.mapObjectTypeChildren(child, newProps, newChildProps, nestedChildren);
+ break;
+ }
+ });
+
+ return this.mapArrayTypeChildrenToProps(arrayTypeChildren, newProps);
+ }
+
+ render() {
+ const { children, ...props } = this.props;
+ let newProps = { ...props };
+ let { helmetData } = props;
+
+ if (children) {
+ newProps = this.mapChildrenToProps(children, newProps);
+ }
+
+ if (helmetData && !(helmetData instanceof HelmetData)) {
+ const data = helmetData as HelmetDataType;
+ helmetData = new HelmetData(data.context, true);
+ delete newProps.helmetData;
+ }
+
+ return helmetData ? (
+
+ {context =>
+ );
+ }
+}
diff --git a/src/server.js b/src/server.js
deleted file mode 100644
index c9c736eb..00000000
--- a/src/server.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import React from 'react';
-import {
- HELMET_ATTRIBUTE,
- TAG_NAMES,
- REACT_TAG_MAP,
- TAG_PROPERTIES,
- ATTRIBUTE_NAMES,
-} from './constants';
-import { flattenArray } from './utils';
-
-const SELF_CLOSING_TAGS = [TAG_NAMES.NOSCRIPT, TAG_NAMES.SCRIPT, TAG_NAMES.STYLE];
-
-const encodeSpecialCharacters = (str, encode = true) => {
- if (encode === false) {
- return String(str);
- }
-
- return String(str)
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
-};
-
-const generateElementAttributesAsString = attributes =>
- Object.keys(attributes).reduce((str, key) => {
- const attr = typeof attributes[key] !== 'undefined' ? `${key}="${attributes[key]}"` : `${key}`;
- return str ? `${str} ${attr}` : attr;
- }, '');
-
-const generateTitleAsString = (type, title, attributes, encode) => {
- const attributeString = generateElementAttributesAsString(attributes);
- const flattenedTitle = flattenArray(title);
- return attributeString
- ? `<${type} ${HELMET_ATTRIBUTE}="true" ${attributeString}>${encodeSpecialCharacters(
- flattenedTitle,
- encode
- )}`
- : `<${type} ${HELMET_ATTRIBUTE}="true">${encodeSpecialCharacters(
- flattenedTitle,
- encode
- )}`;
-};
-
-const generateTagsAsString = (type, tags, encode) =>
- tags.reduce((str, tag) => {
- const attributeHtml = Object.keys(tag)
- .filter(
- attribute =>
- !(attribute === TAG_PROPERTIES.INNER_HTML || attribute === TAG_PROPERTIES.CSS_TEXT)
- )
- .reduce((string, attribute) => {
- const attr =
- typeof tag[attribute] === 'undefined'
- ? attribute
- : `${attribute}="${encodeSpecialCharacters(tag[attribute], encode)}"`;
- return string ? `${string} ${attr}` : attr;
- }, '');
-
- const tagContent = tag.innerHTML || tag.cssText || '';
-
- const isSelfClosing = SELF_CLOSING_TAGS.indexOf(type) === -1;
-
- return `${str}<${type} ${HELMET_ATTRIBUTE}="true" ${attributeHtml}${
- isSelfClosing ? `/>` : `>${tagContent}`
- }`;
- }, '');
-
-const convertElementAttributesToReactProps = (attributes, initProps = {}) =>
- Object.keys(attributes).reduce((obj, key) => {
- obj[REACT_TAG_MAP[key] || key] = attributes[key];
- return obj;
- }, initProps);
-
-const generateTitleAsReactComponent = (type, title, attributes) => {
- // assigning into an array to define toString function on it
- const initProps = {
- key: title,
- [HELMET_ATTRIBUTE]: true,
- };
- const props = convertElementAttributesToReactProps(attributes, initProps);
-
- return [React.createElement(TAG_NAMES.TITLE, props, title)];
-};
-
-const generateTagsAsReactComponent = (type, tags) =>
- tags.map((tag, i) => {
- const mappedTag = {
- key: i,
- [HELMET_ATTRIBUTE]: true,
- };
-
- Object.keys(tag).forEach(attribute => {
- const mappedAttribute = REACT_TAG_MAP[attribute] || attribute;
-
- if (
- mappedAttribute === TAG_PROPERTIES.INNER_HTML ||
- mappedAttribute === TAG_PROPERTIES.CSS_TEXT
- ) {
- const content = tag.innerHTML || tag.cssText;
- mappedTag.dangerouslySetInnerHTML = { __html: content };
- } else {
- mappedTag[mappedAttribute] = tag[attribute];
- }
- });
-
- return React.createElement(type, mappedTag);
- });
-
-const getMethodsForTag = (type, tags, encode) => {
- switch (type) {
- case TAG_NAMES.TITLE:
- return {
- toComponent: () =>
- generateTitleAsReactComponent(type, tags.title, tags.titleAttributes, encode),
- toString: () => generateTitleAsString(type, tags.title, tags.titleAttributes, encode),
- };
- case ATTRIBUTE_NAMES.BODY:
- case ATTRIBUTE_NAMES.HTML:
- return {
- toComponent: () => convertElementAttributesToReactProps(tags),
- toString: () => generateElementAttributesAsString(tags),
- };
- default:
- return {
- toComponent: () => generateTagsAsReactComponent(type, tags),
- toString: () => generateTagsAsString(type, tags, encode),
- };
- }
-};
-
-const mapStateOnServer = ({
- baseTag,
- bodyAttributes,
- encode,
- htmlAttributes,
- linkTags,
- metaTags,
- noscriptTags,
- scriptTags,
- styleTags,
- title = '',
- titleAttributes,
-}) => ({
- base: getMethodsForTag(TAG_NAMES.BASE, baseTag, encode),
- bodyAttributes: getMethodsForTag(ATTRIBUTE_NAMES.BODY, bodyAttributes, encode),
- htmlAttributes: getMethodsForTag(ATTRIBUTE_NAMES.HTML, htmlAttributes, encode),
- link: getMethodsForTag(TAG_NAMES.LINK, linkTags, encode),
- meta: getMethodsForTag(TAG_NAMES.META, metaTags, encode),
- noscript: getMethodsForTag(TAG_NAMES.NOSCRIPT, noscriptTags, encode),
- script: getMethodsForTag(TAG_NAMES.SCRIPT, scriptTags, encode),
- style: getMethodsForTag(TAG_NAMES.STYLE, styleTags, encode),
- title: getMethodsForTag(TAG_NAMES.TITLE, { title, titleAttributes }, encode),
-});
-
-export default mapStateOnServer;
diff --git a/src/server.ts b/src/server.ts
new file mode 100644
index 00000000..52106e88
--- /dev/null
+++ b/src/server.ts
@@ -0,0 +1,208 @@
+import React from 'react';
+
+import {
+ HELMET_ATTRIBUTE,
+ TAG_NAMES,
+ REACT_TAG_MAP,
+ TAG_PROPERTIES,
+ ATTRIBUTE_NAMES,
+ SEO_PRIORITY_TAGS,
+} from './constants';
+import { flattenArray, prioritizer } from './utils';
+import type { MappedServerState } from './types';
+
+const SELF_CLOSING_TAGS: string[] = [TAG_NAMES.NOSCRIPT, TAG_NAMES.SCRIPT, TAG_NAMES.STYLE];
+
+const encodeSpecialCharacters = (str: string, encode = true) => {
+ if (encode === false) {
+ return String(str);
+ }
+
+ return String(str)
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+};
+
+type Attributes = { [key: string]: string | number | boolean };
+
+const generateElementAttributesAsString = (attributes: Attributes) =>
+ Object.keys(attributes).reduce((str, key) => {
+ const attr = typeof attributes[key] !== 'undefined' ? `${key}="${attributes[key]}"` : `${key}`;
+ return str ? `${str} ${attr}` : attr;
+ }, '');
+
+const generateTitleAsString = (
+ type: string,
+ title: string,
+ attributes: Attributes,
+ encode: boolean
+) => {
+ const attributeString = generateElementAttributesAsString(attributes);
+ const flattenedTitle = flattenArray(title);
+ return attributeString
+ ? `<${type} ${HELMET_ATTRIBUTE}="true" ${attributeString}>${encodeSpecialCharacters(
+ flattenedTitle,
+ encode
+ )}`
+ : `<${type} ${HELMET_ATTRIBUTE}="true">${encodeSpecialCharacters(
+ flattenedTitle,
+ encode
+ )}`;
+};
+
+const generateTagsAsString = (type: string, tags: HTMLElement[], encode = true) =>
+ tags.reduce((str, t) => {
+ const tag = t as unknown as Attributes;
+ const attributeHtml = Object.keys(tag)
+ .filter(
+ attribute =>
+ !(attribute === TAG_PROPERTIES.INNER_HTML || attribute === TAG_PROPERTIES.CSS_TEXT)
+ )
+ .reduce((string, attribute) => {
+ const attr =
+ typeof tag[attribute] === 'undefined'
+ ? attribute
+ : `${attribute}="${encodeSpecialCharacters(tag[attribute] as string, encode)}"`;
+ return string ? `${string} ${attr}` : attr;
+ }, '');
+
+ const tagContent = tag.innerHTML || tag.cssText || '';
+
+ const isSelfClosing = SELF_CLOSING_TAGS.indexOf(type) === -1;
+
+ return `${str}<${type} ${HELMET_ATTRIBUTE}="true" ${attributeHtml}${
+ isSelfClosing ? `/>` : `>${tagContent}`
+ }`;
+ }, '');
+
+const convertElementAttributesToReactProps = (attributes: Attributes, initProps = {}) =>
+ Object.keys(attributes).reduce((obj: Attributes, key: string) => {
+ const mapped = (REACT_TAG_MAP as Attributes)[key] as string;
+ obj[mapped || key] = attributes[key];
+ return obj;
+ }, initProps);
+
+const generateTitleAsReactComponent = (_type: string, title: string, attributes: Attributes) => {
+ // assigning into an array to define toString function on it
+ const initProps = {
+ key: title,
+ [HELMET_ATTRIBUTE]: true,
+ };
+ const props = convertElementAttributesToReactProps(attributes, initProps);
+
+ return [React.createElement(TAG_NAMES.TITLE, props, title)];
+};
+
+const generateTagsAsReactComponent = (type: string, tags: any[]) =>
+ tags.map((tag, i) => {
+ const mappedTag: { [key: string]: any } = {
+ key: i,
+ [HELMET_ATTRIBUTE]: true,
+ };
+
+ Object.keys(tag).forEach(attribute => {
+ const mapped = (REACT_TAG_MAP as Attributes)[attribute] as string;
+ const mappedAttribute = mapped || attribute;
+
+ if (
+ mappedAttribute === TAG_PROPERTIES.INNER_HTML ||
+ mappedAttribute === TAG_PROPERTIES.CSS_TEXT
+ ) {
+ const content = tag.innerHTML || tag.cssText;
+ mappedTag.dangerouslySetInnerHTML = { __html: content };
+ } else {
+ mappedTag[mappedAttribute] = tag[attribute];
+ }
+ });
+
+ return React.createElement(type, mappedTag);
+ });
+
+const getMethodsForTag = (type: string, tags: any, encode = true) => {
+ switch (type) {
+ case TAG_NAMES.TITLE:
+ return {
+ toComponent: () => generateTitleAsReactComponent(type, tags.title, tags.titleAttributes),
+ toString: () => generateTitleAsString(type, tags.title, tags.titleAttributes, encode),
+ };
+ case ATTRIBUTE_NAMES.BODY:
+ case ATTRIBUTE_NAMES.HTML:
+ return {
+ toComponent: () => convertElementAttributesToReactProps(tags),
+ toString: () => generateElementAttributesAsString(tags),
+ };
+ default:
+ return {
+ toComponent: () => generateTagsAsReactComponent(type, tags),
+ toString: () => generateTagsAsString(type, tags, encode),
+ };
+ }
+};
+
+const getPriorityMethods = ({ metaTags, linkTags, scriptTags, encode }: MappedServerState) => {
+ const meta = prioritizer(metaTags, SEO_PRIORITY_TAGS.meta);
+ const link = prioritizer(linkTags, SEO_PRIORITY_TAGS.link);
+ const script = prioritizer(scriptTags, SEO_PRIORITY_TAGS.script);
+
+ // need to have toComponent() and toString()
+ const priorityMethods = {
+ toComponent: () => [
+ ...generateTagsAsReactComponent(TAG_NAMES.META, meta.priority),
+ ...generateTagsAsReactComponent(TAG_NAMES.LINK, link.priority),
+ ...generateTagsAsReactComponent(TAG_NAMES.SCRIPT, script.priority),
+ ],
+ toString: () =>
+ // generate all the tags as strings and concatenate them
+ `${getMethodsForTag(TAG_NAMES.META, meta.priority, encode)} ${getMethodsForTag(
+ TAG_NAMES.LINK,
+ link.priority,
+ encode
+ )} ${getMethodsForTag(TAG_NAMES.SCRIPT, script.priority, encode)}`,
+ };
+
+ return {
+ priorityMethods,
+ metaTags: meta.default as HTMLMetaElement[],
+ linkTags: link.default as HTMLLinkElement[],
+ scriptTags: script.default as HTMLScriptElement[],
+ };
+};
+
+const mapStateOnServer = (props: MappedServerState) => {
+ const {
+ baseTag,
+ bodyAttributes,
+ encode = true,
+ htmlAttributes,
+ noscriptTags,
+ styleTags,
+ title = '',
+ titleAttributes,
+ prioritizeSeoTags,
+ } = props;
+ let { linkTags, metaTags, scriptTags } = props;
+ let priorityMethods = {
+ toComponent: () => {},
+ toString: () => '',
+ };
+ if (prioritizeSeoTags) {
+ ({ priorityMethods, linkTags, metaTags, scriptTags } = getPriorityMethods(props));
+ }
+ return {
+ priority: priorityMethods,
+ base: getMethodsForTag(TAG_NAMES.BASE, baseTag, encode),
+ bodyAttributes: getMethodsForTag(ATTRIBUTE_NAMES.BODY, bodyAttributes as Attributes, encode),
+ htmlAttributes: getMethodsForTag(ATTRIBUTE_NAMES.HTML, htmlAttributes as Attributes, encode),
+ link: getMethodsForTag(TAG_NAMES.LINK, linkTags, encode),
+ meta: getMethodsForTag(TAG_NAMES.META, metaTags, encode),
+ noscript: getMethodsForTag(TAG_NAMES.NOSCRIPT, noscriptTags, encode),
+ script: getMethodsForTag(TAG_NAMES.SCRIPT, scriptTags, encode),
+ style: getMethodsForTag(TAG_NAMES.STYLE, styleTags, encode),
+ title: getMethodsForTag(TAG_NAMES.TITLE, { title, titleAttributes }, encode),
+ };
+};
+
+export default mapStateOnServer;
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..e1095628
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,102 @@
+import type { HTMLAttributes, JSX } from 'react';
+
+import type HelmetData from './HelmetData';
+
+export type Attributes = { [key: string]: string };
+
+interface OtherElementAttributes {
+ [key: string]: string | number | boolean | null | undefined;
+}
+
+export type HtmlProps = JSX.IntrinsicElements['html'] & OtherElementAttributes;
+
+export type BodyProps = JSX.IntrinsicElements['body'] & OtherElementAttributes;
+
+export type LinkProps = JSX.IntrinsicElements['link'];
+
+export type MetaProps = JSX.IntrinsicElements['meta'] & {
+ charset?: string | undefined;
+ 'http-equiv'?: string | undefined;
+ itemprop?: string | undefined;
+};
+
+export type TitleProps = HTMLAttributes;
+
+export interface HelmetTags {
+ baseTag: HTMLBaseElement[];
+ linkTags: HTMLLinkElement[];
+ metaTags: HTMLMetaElement[];
+ noscriptTags: HTMLElement[];
+ scriptTags: HTMLScriptElement[];
+ styleTags: HTMLStyleElement[];
+}
+
+export interface HelmetDatum {
+ toString(): string;
+ toComponent(): React.Component;
+}
+
+export interface HelmetHTMLBodyDatum {
+ toString(): string;
+ toComponent(): React.HTMLAttributes;
+}
+
+export interface HelmetHTMLElementDatum {
+ toString(): string;
+ toComponent(): React.HTMLAttributes;
+}
+
+export interface HelmetServerState {
+ base: HelmetDatum;
+ bodyAttributes: HelmetHTMLBodyDatum;
+ htmlAttributes: HelmetHTMLElementDatum;
+ link: HelmetDatum;
+ meta: HelmetDatum;
+ noscript: HelmetDatum;
+ script: HelmetDatum;
+ style: HelmetDatum;
+ title: HelmetDatum;
+ titleAttributes: HelmetDatum;
+ priority: HelmetDatum;
+}
+
+export type MappedServerState = HelmetProps & HelmetTags & { encode?: boolean };
+
+export interface TagList {
+ [key: string]: HTMLElement[];
+}
+
+export interface StateUpdate extends HelmetTags {
+ bodyAttributes: BodyProps;
+ defer: boolean;
+ htmlAttributes: HtmlProps;
+ onChangeClientState: (newState: StateUpdate, addedTags: TagList, removedTags: TagList) => void;
+ title: string;
+ titleAttributes: TitleProps;
+}
+
+export interface HelmetProps {
+ async?: boolean;
+ base?: Attributes; // {"target": "_blank", "href": "http://mysite.com/"}
+ bodyAttributes?: BodyProps; // {"className": "root"}
+ defaultTitle?: string; // "Default Title"
+ defer?: boolean; // Default: true
+ encodeSpecialCharacters?: boolean; // Default: true
+ helmetData?: HelmetData;
+ htmlAttributes?: HtmlProps; // {"lang": "en", "amp": undefined}
+ // "(newState) => console.log(newState)"
+ onChangeClientState?: (
+ newState: StateUpdate,
+ addedTags: HelmetTags,
+ removedTags: HelmetTags
+ ) => void;
+ link?: LinkProps[]; // [{"rel": "canonical", "href": "http://mysite.com/example"}]
+ meta?: MetaProps[]; // [{"name": "description", "content": "Test description"}]
+ noscript?: Attributes[]; // [{"innerHTML": "