Merge pull request #5 from payscale/remove_react_helmet

take out dependency on react-helmet

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
 

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 = () => (
   <div className="example-app" style={{ fontFamily: 'Roboto, sans-serif', fontSize: '32px' }}>
-    <Ads
-      slots={[{
-        networkCode: '123456',
-        name: 'Test_100x100',
-        width: 100,
-        height: 100,
-        elementId: 'testAd'
-      }]}
-    />
-    <Favicons
-      favicons={[{
-        href: 'favicon-96x96.png',
-        sizes: '96x96',
-        type: 'image/png'
-      }]}
-    />
-    <Gtm containerId="abc123" />
-    <WebFont
-      families={[{ fontName: 'Roboto', weights: [300, 400, 700, 900] }]}
-    />
     Inspect this page to see beret's rendered elements.
+    <Helmet>
+      <Ads
+        slots={[{
+          networkCode: '123456',
+          name: 'Test_100x100',
+          width: 100,
+          height: 100,
+          elementId: 'testAd'
+        }]}
+      />
+      <Favicons
+        favicons={[{
+          href: 'favicon-96x96.png',
+          sizes: '96x96',
+          type: 'image/png'
+        }]}
+      />
+      <Gtm containerId="abc123" />
+      <WebFont
+        families={[{ fontName: 'Roboto', weights: [300, 400, 700, 900] }]}
+      />
+    </Helmet>
   </div>
 );
 

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 <[email protected]>",
   "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"
   }
 }

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(<Ads slots={slots} />);
-    const helmet = Helmet.peek();
-    expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf(
+    const ads = mount(<div><Ads slots={slots} /></div>);
+
+    expect(ads.html().indexOf(
       `googletag.defineSlot('/123456/Test_100x100', [100, 100], 'testAd').addService(googletag.pubads());`
-    ) > -1)).toBe(true);
+    ) > -1).toBe(true);
   });
 });

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(<Gtm containerId="test12345" />);
-    const helmet = Helmet.peek();
-    expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf(`test12345`) > -1)).toBe(true);
+    const gtm = mount(<Gtm containerId="test12345" />);
+    expect(gtm.html().indexOf(`test12345`) > -1).toBe(true);
   });
 });

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(<Vwo accountId="test12345" />);
-    const helmet = Helmet.peek();
-    expect(helmet.scriptTags.some(tag => tag.innerHTML.indexOf(`test12345`) > -1)).toBe(true);
+    const vwo = mount(<Vwo accountId="test12345" />);
+    expect(vwo.html().indexOf(`test12345`) > -1).toBe(true);
   });
 });

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(
       <WebFont
         families={[
           {
@@ -20,7 +19,6 @@ describe('WebFont', () => {
         ]}
       />
     );
-    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);
   });
 });

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 (
-    <Helmet>
+    <React.Fragment>
       <script>
         {`var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
@@ -36,7 +35,7 @@ googletag.cmd = googletag.cmd || [];
   googletag.enableServices();
 });`}
       </script>
-    </Helmet>
+    </React.Fragment>
   );
 };
 

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 (
-    <Helmet>
+    <React.Fragment>
       {favicons.map(favicon => (
         <link
           key={favicon.href}
@@ -18,7 +17,7 @@ const Favicons = ({ favicons }) => {
           type={favicon.type}
         />)
       )}
-    </Helmet>
+    </React.Fragment>
   );
 };
 

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 }) => (
-  <Helmet>
-    <script>
-      {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  <script>
+    {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','${containerId}');`}
-    </script>
-  </Helmet>
+  </script>
 );
 
 Gtm.propTypes = {

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 (
-    <Helmet>
-      <script>
-        {`var _vwo_settings_timer;
+    <script>
+      {`var _vwo_settings_timer;
 var _vwo_code = (function () {
-  var account_id = '${accountId}',
-  settings_tolerance = 2000,
-  library_tolerance = 2500,
-  use_existing_jquery = false,
-  f = false, d = document; return { use_existing_jquery: function () { return use_existing_jquery; }, library_tolerance: function () { return library_tolerance; }, finish: function () { if (!f) { f = true; var a = d.getElementById('_vis_opt_path_hides'); if (a) a.parentNode.removeChild(a); } }, finished: function () { return f; }, load: function (a) { var b = d.createElement('script'); b.src = a; b.type = 'text/javascript'; b.innerText; b.onerror = function () { _vwo_code.finish(); }; d.getElementsByTagName('head')[0].appendChild(b); }, init: function () { settings_timer = setTimeout('_vwo_code.finish()', settings_tolerance); var a = d.createElement('style'), b = 'body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}', h = d.getElementsByTagName('head')[0]; a.setAttribute('id', '_vis_opt_path_hides'); a.setAttribute('type', 'text/css'); if (a.styleSheet) a.styleSheet.cssText = b; else a.appendChild(d.createTextNode(b)); h.appendChild(a); this.load('//dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(d.URL) + '&r=' + Math.random()); return settings_timer; } };
+var account_id = '${accountId}',
+settings_tolerance = 2000,
+library_tolerance = 2500,
+use_existing_jquery = false,
+f = false, d = document; return { use_existing_jquery: function () { return use_existing_jquery; }, library_tolerance: function () { return library_tolerance; }, finish: function () { if (!f) { f = true; var a = d.getElementById('_vis_opt_path_hides'); if (a) a.parentNode.removeChild(a); } }, finished: function () { return f; }, load: function (a) { var b = d.createElement('script'); b.src = a; b.type = 'text/javascript'; b.innerText; b.onerror = function () { _vwo_code.finish(); }; d.getElementsByTagName('head')[0].appendChild(b); }, init: function () { settings_timer = setTimeout('_vwo_code.finish()', settings_tolerance); var a = d.createElement('style'), b = 'body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}', h = d.getElementsByTagName('head')[0]; a.setAttribute('id', '_vis_opt_path_hides'); a.setAttribute('type', 'text/css'); if (a.styleSheet) a.styleSheet.cssText = b; else a.appendChild(d.createTextNode(b)); h.appendChild(a); this.load('//dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(d.URL) + '&r=' + Math.random()); return settings_timer; } };
 }());
 __vwo_init(_vwo_code);`}
-      </script>
-    </Helmet>
+    </script>
   );
 };
 

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 (
-    <Helmet>
-      <script>
-        {`WebFontConfig = {
-  google: { families: ${JSON.stringify(familyStrings)} }
+    <script>
+      {`WebFontConfig = {
+google: { families: ${JSON.stringify(familyStrings)} }
 };
 (function() {
-  var wf = document.createElement('script');
-  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-  '://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
-  wf.type = 'text/javascript';
-  wf.async = 'true';
-  var s = document.getElementsByTagName('script')[0];
-  s.parentNode.insertBefore(wf, s);
+var wf = document.createElement('script');
+wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+'://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
+wf.type = 'text/javascript';
+wf.async = 'true';
+var s = document.getElementsByTagName('script')[0];
+s.parentNode.insertBefore(wf, s);
 })();`}
-      </script>
-    </Helmet>
+    </script>
   );
 };
 

webpack.config.js

@@ -41,10 +41,6 @@ module.exports = {
       commonjs2: 'react-dom',
       amd: 'ReactDOM',
       root: 'ReactDOM'
-    },
-    'react-helmet': {
-      commonjs: 'react-helmet',
-      commonjs2: 'react-helmet'
     }
   }
 };

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"