diff --git a/README.md b/README.md index 7773621..683e28d 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Beret is a library for building HTML templates with React. It contains components for encapsulating the stuff that your page needs to work. Things like Google Tag Manager, web fonts, etc., are required, but are distractions from actually building your content. Componentizing them with beret helps you to get back to what matters and prevent plugins and assets from falling through the cracks. -Beret is intended to be used with server-side rendering since many resources are required to be on the page before it is loaded. We use [React Helmet](https://github.com/nfl/react-helmet) to manage head elements. +Beret is intended to be used with server-side rendering since many resources are required to be on the page before it is loaded. ## Example diff --git a/examples/App.js b/examples/App.js index ae3e75e..e8b3e6f 100644 --- a/examples/App.js +++ b/examples/App.js @@ -1,29 +1,32 @@ import React from 'react'; +import Helmet from 'react-helmet'; import { Ads, Favicons, Gtm, WebFont } from '../src/components'; const App = () => (
- - - - Inspect this page to see beret's rendered elements. + + + + + +
); diff --git a/package.json b/package.json index e17dda7..69a50c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-beret", - "version": "0.1.3", + "version": "0.1.4", "description": "React components for your web page's tracking, assets, and more", "author": "Jim Skerritt ", "license": "MIT", @@ -42,8 +42,7 @@ "peerDependencies": { "prop-types": ">=15.0.0", "react": ">=16.0.0", - "react-dom": ">=16.0.0", - "react-helmet": ">=4.0.0" + "react-dom": ">=16.0.0" }, "devDependencies": { "@babel/core": "7.1.6", @@ -62,6 +61,7 @@ "jest": "23.6.0", "json-format": "1.0.1", "webpack": "4.26.0", - "webpack-cli": "^3.1.2" + "webpack-cli": "^3.1.2", + "react-helmet": ">=4.0.0" } } \ No newline at end of file diff --git a/src/__tests__/Ads-test.js b/src/__tests__/Ads-test.js index d118ac0..4e2f823 100644 --- a/src/__tests__/Ads-test.js +++ b/src/__tests__/Ads-test.js @@ -1,6 +1,5 @@ import React from 'react'; import { mount } from 'enzyme'; -import Helmet from 'react-helmet'; import Ads from '../components/Ads'; describe('Ads', () => { @@ -20,10 +19,10 @@ describe('Ads', () => { elementId: 'testAd' } ]; - mount(); - const helmet = Helmet.peek(); - expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf( + const ads = mount(
); + + expect(ads.html().indexOf( `googletag.defineSlot('/123456/Test_100x100', [100, 100], 'testAd').addService(googletag.pubads());` - ) > -1)).toBe(true); + ) > -1).toBe(true); }); }); diff --git a/src/__tests__/Gtm-test.js b/src/__tests__/Gtm-test.js index 067ba7c..f23aa15 100644 --- a/src/__tests__/Gtm-test.js +++ b/src/__tests__/Gtm-test.js @@ -1,6 +1,5 @@ import React from 'react'; import { mount } from 'enzyme'; -import Helmet from 'react-helmet'; import Gtm from '../components/Gtm'; describe('Gtm', () => { @@ -11,8 +10,7 @@ describe('Gtm', () => { }); test('contains containerId', () => { - mount(); - const helmet = Helmet.peek(); - expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf(`test12345`) > -1)).toBe(true); + const gtm = mount(); + expect(gtm.html().indexOf(`test12345`) > -1).toBe(true); }); }); diff --git a/src/__tests__/Vwo-test.js b/src/__tests__/Vwo-test.js index 7e8fbaf..5f12564 100644 --- a/src/__tests__/Vwo-test.js +++ b/src/__tests__/Vwo-test.js @@ -1,6 +1,5 @@ import React from 'react'; import { mount } from 'enzyme'; -import Helmet from 'react-helmet'; import Vwo from '../components/Vwo'; describe('Vwo', () => { @@ -11,8 +10,7 @@ describe('Vwo', () => { }); test('contains accountId', () => { - mount(); - const helmet = Helmet.peek(); - expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf(`test12345`) > -1)).toBe(true); + const vwo = mount(); + expect(vwo.html().indexOf(`test12345`) > -1).toBe(true); }); }); diff --git a/src/__tests__/WebFont-test.js b/src/__tests__/WebFont-test.js index 0c53f72..5bbe48b 100644 --- a/src/__tests__/WebFont-test.js +++ b/src/__tests__/WebFont-test.js @@ -1,6 +1,5 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; -import Helmet from 'react-helmet'; import WebFont from '../components/WebFont'; describe('WebFont', () => { @@ -10,7 +9,7 @@ describe('WebFont', () => { }); test('contains font family strings', () => { - mount( + const webfont = mount( { ]} /> ); - const helmet = Helmet.peek(); - expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf(`["Roboto:300,500,700"]`) > -1)).toBe(true); + expect(webfont.html().indexOf(`["Roboto:300,500,700"]`) > -1).toBe(true); }); }); diff --git a/src/components/Ads.js b/src/components/Ads.js index 5ea6932..c681b8a 100644 --- a/src/components/Ads.js +++ b/src/components/Ads.js @@ -1,5 +1,4 @@ import React from 'react'; -import Helmet from 'react-helmet'; import PropTypes from 'prop-types'; // Google Ads Marketing (DoubleClick) @@ -12,7 +11,7 @@ const Ads = ({ slots }) => { ); return ( - + - + ); }; diff --git a/src/components/Favicons.js b/src/components/Favicons.js index 4db7dc8..610aa71 100644 --- a/src/components/Favicons.js +++ b/src/components/Favicons.js @@ -1,5 +1,4 @@ import React from 'react'; -import Helmet from 'react-helmet'; import PropTypes from 'prop-types'; const Favicons = ({ favicons }) => { @@ -8,7 +7,7 @@ const Favicons = ({ favicons }) => { } return ( - + {favicons.map(favicon => ( { type={favicon.type} />) )} - + ); }; diff --git a/src/components/Gtm.js b/src/components/Gtm.js index 3ad27ad..56f4fb8 100644 --- a/src/components/Gtm.js +++ b/src/components/Gtm.js @@ -1,18 +1,15 @@ import React from 'react'; -import Helmet from 'react-helmet'; import PropTypes from 'prop-types'; // Google Tag Manager const Gtm = ({ containerId }) => ( - - - + ); Gtm.propTypes = { diff --git a/src/components/Vwo.js b/src/components/Vwo.js index 116c55d..f951270 100644 --- a/src/components/Vwo.js +++ b/src/components/Vwo.js @@ -1,24 +1,21 @@ import React from 'react'; -import Helmet from 'react-helmet'; import PropTypes from 'prop-types'; // Visual Web Optimizer (VWO) (A/B testing) const Vwo = ({ accountId, init }) => { window.__vwo_init = init ? init : Vwo.defaultProps.init; return ( - - - + ); }; diff --git a/src/components/WebFont.js b/src/components/WebFont.js index 1c18dff..cd0f2f2 100644 --- a/src/components/WebFont.js +++ b/src/components/WebFont.js @@ -1,5 +1,4 @@ import React from 'react'; -import Helmet from 'react-helmet'; import PropTypes from 'prop-types'; const WebFont = ({ families }) => { @@ -10,22 +9,20 @@ const WebFont = ({ families }) => { const familyStrings = families.map(family => `${family.fontName}:${family.weights.join(',')}`); return ( - - - + ); }; diff --git a/webpack.config.js b/webpack.config.js index 6527df5..166e9b0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -41,10 +41,6 @@ module.exports = { commonjs2: 'react-dom', amd: 'ReactDOM', root: 'ReactDOM' - }, - 'react-helmet': { - commonjs: 'react-helmet', - commonjs2: 'react-helmet' } } }; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d170908..8a6c3d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1698,6 +1698,10 @@ decode-uri-component@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545" +deep-equal@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" + deep-extend@^0.6.0: version "0.6.0" resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac" @@ -2144,6 +2148,10 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" +exenv@^1.2.1: + version "1.2.2" + resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + exit@^0.1.2: version "0.1.2" resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -4445,7 +4453,7 @@ prompts@^0.1.9: kleur "^2.0.1" sisteransi "^0.1.1" -prop-types@^15.6.2: +prop-types@^15.5.4, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" dependencies: @@ -4568,10 +4576,26 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-helmet@>=4.0.0: + version "5.2.0" + resolved "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7" + dependencies: + deep-equal "^1.0.1" + object-assign "^4.1.1" + prop-types "^15.5.4" + react-side-effect "^1.1.0" + react-is@^16.6.1, react-is@^16.7.0: version "16.7.0" resolved "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa" +react-side-effect@^1.1.0: + version "1.1.5" + resolved "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d" + dependencies: + exenv "^1.2.1" + shallowequal "^1.0.1" + react-test-renderer@^16.0.0-0: version "16.7.0" resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c" @@ -4944,6 +4968,10 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallowequal@^1.0.1: + version "1.1.0" + resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"