react-helmet-async - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0-beta.0

es/Dispatcher.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -42,8 +44,35 @@
   function Dispatcher() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Dispatcher);
 
-    return _possibleConstructorReturn(this, (Dispatcher.__proto__ || Object.getPrototypeOf(Dispatcher)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dispatcher.__proto__ || Object.getPrototypeOf(Dispatcher)).call.apply(_ref, [this].concat(args))), _this), _this.rendered = false, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Dispatcher, [{
+    key: 'init',
+
+
+    // componentWillMount will be deprecated
+    // for SSR, initialize on first render
+    // constructor is also unsafe in StrictMode
+    value: function init() {
+      if (this.rendered) {
+        return;
+      }
+
+      this.rendered = true;
+
+      var helmetInstances = this.props.context.helmetInstances;
+
+      helmetInstances.add(this);
+      this.emitChange();
+    }
+  }, {
     key: 'shouldComponentUpdate',
@@ -56,9 +85,11 @@ value: function shouldComponentUpdate(nextProps) {
     value: function emitChange() {
-      var _context = this.context,
-          helmetInstances = _context.helmetInstances,
-          setHelmet = _context.setHelmet;
+      var _props$context = this.props.context,
+          helmetInstances = _props$context.helmetInstances,
+          setHelmet = _props$context.setHelmet;
 
       var serverState = null;
       var state = (0, _utils.reducePropsToState)(helmetInstances.get().map(function (instance) {
-        return instance.props;
+        var props = _extends({}, instance.props);
+        delete props.context;
+        return props;
       }));
@@ -70,13 +101,5 @@ if (_Provider2.default.canUseDOM) {
       }
-      setHelmet(serverState, state);
+      setHelmet(serverState);
     }
   }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      var helmetInstances = this.context.helmetInstances;
-
-      helmetInstances.add(this);
-      this.emitChange();
-    }
-  }, {
     key: 'componentDidUpdate',
@@ -89,3 +112,3 @@ value: function componentDidUpdate() {
     value: function componentWillUnmount() {
-      var helmetInstances = this.context.helmetInstances;
+      var helmetInstances = this.props.context.helmetInstances;
 
@@ -98,2 +121,4 @@ helmetInstances.remove(this);
     value: function render() {
+      this.init();
+
       return null;
@@ -106,3 +131,5 @@ }
 
-Dispatcher.contextTypes = _Provider.providerShape;
+Dispatcher.propTypes = {
+  context: _Provider.providerShape.isRequired
+};
 exports.default = Dispatcher;

es/index.js

@@ -29,5 +29,5 @@ 'use strict';
 
-var _deepEqual = require('deep-equal');
+var _reactFastCompare = require('react-fast-compare');
 
-var _deepEqual2 = _interopRequireDefault(_deepEqual);
+var _reactFastCompare2 = _interopRequireDefault(_reactFastCompare);
 
@@ -38,2 +38,6 @@ var _invariant = require('invariant');
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _Dispatcher = require('./Dispatcher');
@@ -92,3 +96,3 @@
     value: function shouldComponentUpdate(nextProps) {
-      return !(0, _deepEqual2.default)(this.props, nextProps);
+      return !(0, _reactFastCompare2.default)(this.props, nextProps);
     }
@@ -245,3 +249,9 @@ /* eslint-enable react/prop-types, react/forbid-prop-types, react/require-default-props */
 
-      return _react2.default.createElement(_Dispatcher2.default, newProps);
+      return _react2.default.createElement(
+        _Context2.default.Consumer,
+        null,
+        function (context) {
+          return _react2.default.createElement(_Dispatcher2.default, _extends({}, newProps, { context: context }));
+        }
+      );
     }
@@ -248,0 +258,0 @@ }]);

es/Provider.js

@@ -12,2 +12,4 @@ 'use strict';
 
+var _react2 = _interopRequireDefault(_react);
+
 var _propTypes = require('prop-types');
@@ -17,2 +19,6 @@
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _server = require('./server');
@@ -32,3 +38,3 @@
 
-var providerShape = exports.providerShape = {
+var providerShape = exports.providerShape = _propTypes2.default.shape({
   setHelmet: _propTypes2.default.func,
@@ -40,3 +46,3 @@ helmetInstances: _propTypes2.default.shape({
   })
-};
+});
 
@@ -48,28 +54,2 @@ var canUseDOM = typeof document !== 'undefined';
 
-  _createClass(Provider, [{
-    key: 'getChildContext',
-    value: function getChildContext() {
-      var _this2 = this;
-
-      return {
-        setHelmet: function setHelmet(serverState, state) {
-          _this2.props.context.helmet = serverState;
-          _this2.props.context.state = state;
-        },
-        helmetInstances: {
-          get: function get() {
-            return _this2.instances;
-          },
-          add: function add(instance) {
-            _this2.instances.push(instance);
-          },
-          remove: function remove(instance) {
-            var index = _this2.instances.indexOf(instance);
-            _this2.instances.splice(index, 1);
-          }
-        }
-      };
-    }
-  }]);
-
   function Provider(props) {
@@ -81,2 +61,19 @@ _classCallCheck(this, Provider);
     _this.instances = [];
+    _this.value = {
+      setHelmet: function setHelmet(serverState) {
+        _this.props.context.helmet = serverState;
+      },
+      helmetInstances: {
+        get: function get() {
+          return _this.instances;
+        },
+        add: function add(instance) {
+          _this.instances.push(instance);
+        },
+        remove: function remove(instance) {
+          var index = _this.instances.indexOf(instance);
+          _this.instances.splice(index, 1);
+        }
+      }
+    };
 
@@ -105,3 +102,7 @@
     value: function render() {
-      return this.props.children;
+      return _react2.default.createElement(
+        _Context2.default.Provider,
+        { value: this.value },
+        this.props.children
+      );
     }
@@ -121,3 +122,2 @@ }]);
 };
-Provider.childContextTypes = providerShape;
 exports.default = Provider;

es/utils.js

@@ -156,3 +156,3 @@ 'use strict';
       var attributeKey = keys[i];
-      var tagUnion = Object.assign({}, approvedSeenTags[attributeKey], instanceSeenTags[attributeKey]);
+      var tagUnion = _extends({}, approvedSeenTags[attributeKey], instanceSeenTags[attributeKey]);
 
@@ -159,0 +159,0 @@ approvedSeenTags[attributeKey] = tagUnion;

lib/Dispatcher.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -42,8 +44,35 @@
   function Dispatcher() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Dispatcher);
 
-    return _possibleConstructorReturn(this, (Dispatcher.__proto__ || Object.getPrototypeOf(Dispatcher)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dispatcher.__proto__ || Object.getPrototypeOf(Dispatcher)).call.apply(_ref, [this].concat(args))), _this), _this.rendered = false, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Dispatcher, [{
+    key: 'init',
+
+
+    // componentWillMount will be deprecated
+    // for SSR, initialize on first render
+    // constructor is also unsafe in StrictMode
+    value: function init() {
+      if (this.rendered) {
+        return;
+      }
+
+      this.rendered = true;
+
+      var helmetInstances = this.props.context.helmetInstances;
+
+      helmetInstances.add(this);
+      this.emitChange();
+    }
+  }, {
     key: 'shouldComponentUpdate',
@@ -56,9 +85,11 @@ value: function shouldComponentUpdate(nextProps) {
     value: function emitChange() {
-      var _context = this.context,
-          helmetInstances = _context.helmetInstances,
-          setHelmet = _context.setHelmet;
+      var _props$context = this.props.context,
+          helmetInstances = _props$context.helmetInstances,
+          setHelmet = _props$context.setHelmet;
 
       var serverState = null;
       var state = (0, _utils.reducePropsToState)(helmetInstances.get().map(function (instance) {
-        return instance.props;
+        var props = _extends({}, instance.props);
+        delete props.context;
+        return props;
       }));
@@ -70,13 +101,5 @@ if (_Provider2.default.canUseDOM) {
       }
-      setHelmet(serverState, state);
+      setHelmet(serverState);
     }
   }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      var helmetInstances = this.context.helmetInstances;
-
-      helmetInstances.add(this);
-      this.emitChange();
-    }
-  }, {
     key: 'componentDidUpdate',
@@ -89,3 +112,3 @@ value: function componentDidUpdate() {
     value: function componentWillUnmount() {
-      var helmetInstances = this.context.helmetInstances;
+      var helmetInstances = this.props.context.helmetInstances;
 
@@ -98,2 +121,4 @@ helmetInstances.remove(this);
     value: function render() {
+      this.init();
+
       return null;
@@ -106,3 +131,5 @@ }
 
-Dispatcher.contextTypes = _Provider.providerShape;
+Dispatcher.propTypes = {
+  context: _Provider.providerShape.isRequired
+};
 exports.default = Dispatcher;

lib/index.js

@@ -29,5 +29,5 @@ 'use strict';
 
-var _deepEqual = require('deep-equal');
+var _reactFastCompare = require('react-fast-compare');
 
-var _deepEqual2 = _interopRequireDefault(_deepEqual);
+var _reactFastCompare2 = _interopRequireDefault(_reactFastCompare);
 
@@ -38,2 +38,6 @@ var _invariant = require('invariant');
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _Dispatcher = require('./Dispatcher');
@@ -92,3 +96,3 @@
     value: function shouldComponentUpdate(nextProps) {
-      return !(0, _deepEqual2.default)(this.props, nextProps);
+      return !(0, _reactFastCompare2.default)(this.props, nextProps);
     }
@@ -245,3 +249,9 @@ /* eslint-enable react/prop-types, react/forbid-prop-types, react/require-default-props */
 
-      return _react2.default.createElement(_Dispatcher2.default, newProps);
+      return _react2.default.createElement(
+        _Context2.default.Consumer,
+        null,
+        function (context) {
+          return _react2.default.createElement(_Dispatcher2.default, _extends({}, newProps, { context: context }));
+        }
+      );
     }
@@ -248,0 +258,0 @@ }]);

lib/Provider.js

@@ -12,2 +12,4 @@ 'use strict';
 
+var _react2 = _interopRequireDefault(_react);
+
 var _propTypes = require('prop-types');
@@ -17,2 +19,6 @@
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _server = require('./server');
@@ -32,3 +38,3 @@
 
-var providerShape = exports.providerShape = {
+var providerShape = exports.providerShape = _propTypes2.default.shape({
   setHelmet: _propTypes2.default.func,
@@ -40,3 +46,3 @@ helmetInstances: _propTypes2.default.shape({
   })
-};
+});
 
@@ -48,28 +54,2 @@ var canUseDOM = typeof document !== 'undefined';
 
-  _createClass(Provider, [{
-    key: 'getChildContext',
-    value: function getChildContext() {
-      var _this2 = this;
-
-      return {
-        setHelmet: function setHelmet(serverState, state) {
-          _this2.props.context.helmet = serverState;
-          _this2.props.context.state = state;
-        },
-        helmetInstances: {
-          get: function get() {
-            return _this2.instances;
-          },
-          add: function add(instance) {
-            _this2.instances.push(instance);
-          },
-          remove: function remove(instance) {
-            var index = _this2.instances.indexOf(instance);
-            _this2.instances.splice(index, 1);
-          }
-        }
-      };
-    }
-  }]);
-
   function Provider(props) {
@@ -81,2 +61,19 @@ _classCallCheck(this, Provider);
     _this.instances = [];
+    _this.value = {
+      setHelmet: function setHelmet(serverState) {
+        _this.props.context.helmet = serverState;
+      },
+      helmetInstances: {
+        get: function get() {
+          return _this.instances;
+        },
+        add: function add(instance) {
+          _this.instances.push(instance);
+        },
+        remove: function remove(instance) {
+          var index = _this.instances.indexOf(instance);
+          _this.instances.splice(index, 1);
+        }
+      }
+    };
 
@@ -105,3 +102,7 @@
     value: function render() {
-      return this.props.children;
+      return _react2.default.createElement(
+        _Context2.default.Provider,
+        { value: this.value },
+        this.props.children
+      );
     }
@@ -121,3 +122,2 @@ }]);
 };
-Provider.childContextTypes = providerShape;
 exports.default = Provider;

lib/utils.js

@@ -156,3 +156,3 @@ 'use strict';
       var attributeKey = keys[i];
-      var tagUnion = Object.assign({}, approvedSeenTags[attributeKey], instanceSeenTags[attributeKey]);
+      var tagUnion = _extends({}, approvedSeenTags[attributeKey], instanceSeenTags[attributeKey]);
 
@@ -159,0 +159,0 @@ approvedSeenTags[attributeKey] = tagUnion;

package.json

 {
   "name": "react-helmet-async",
-  "version": "0.1.0",
+  "version": "0.2.0-beta.0",
   "description": "Thread-safe Helmet for React 16+ and friends",
   "main": "lib/index.js",
   "repository": "http://github.com/NYTimes/react-helmet-async",
-  "author": "Scott Taylor",
+  "author": "Scott Taylor <[e-mail]>",
   "license": "Apache-2.0",
   "typings": "index.d.ts",
   "dependencies": {
-    "deep-equal": "^1.0.1",
     "invariant": "^2.2.4",
     "prop-types": "^15.6.1",
+    "react-fast-compare": "^2.0.2",
     "shallowequal": "^1.0.2"
@@ -18,7 +18,7 @@ },
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.3",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-jest": "^22.4.4",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -32,19 +32,19 @@ "babel-preset-kyt-react": "^0.3.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.10.0",
-    "eslint-plugin-jest": "^21.15.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-json": "^1.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react": "^7.7.0",
-    "jest-cli": "^22.4.3",
-    "jsdom": "^11.7.0",
-    "prettier": "^1.11.1",
+    "eslint-plugin-react": "^7.9.1",
+    "jest-cli": "^22.4.4",
+    "jsdom": "^11.11.0",
+    "prettier": "^1.13.5",
     "prettier-eslint-cli": "^4.7.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
     "regenerator-runtime": "^0.11.1"
   },
   "peerDependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   },
@@ -51,0 +51,0 @@ "scripts": {

README.md

 # react-helmet-async
 
+[![CircleCI](https://circleci.com/gh/staylor/react-helmet-async.svg?style=svg)](https://circleci.com/gh/staylor/react-helmet-async)
+
 This package is a fork of [React Helmet](https://github.com/nfl/react-helmet).
 `<Helmet>` usage is synonymous, but server and client now requires `<HelmetProvider>` 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.
 
@@ -8,0 +10,0 @@ ## Usage

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

21

increased by16.67%

Lines of code

1861

increased by3.68%

Number of lines in readme file

119

increased by1.71%

Worsened metrics

Total package byte prevSize

104779

decreased by-59.44%

Dependency changes

• + Addedreact-fast-compare@^2.0.2

• + Addedreact-fast-compare@2.0.4(transitive)

• - Removeddeep-equal@^1.0.1

• - Removedcall-bind@1.0.8(transitive)

• - Removedcall-bind-apply-helpers@1.0.1(transitive)

• - Removedcall-bound@1.0.3(transitive)

• - Removeddeep-equal@1.1.2(transitive)

• - Removeddefine-data-property@1.1.4(transitive)

• - Removeddefine-properties@1.2.1(transitive)

• - Removeddunder-proto@1.0.1(transitive)

• - Removedes-define-property@1.0.1(transitive)

• - Removedes-errors@1.3.0(transitive)

• - Removedes-object-atoms@1.0.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedfunctions-have-names@1.2.3(transitive)

• - Removedget-intrinsic@1.2.6(transitive)

• - Removedgopd@1.2.0(transitive)

• - Removedhas-property-descriptors@1.0.2(transitive)

• - Removedhas-symbols@1.1.0(transitive)

• - Removedhas-tostringtag@1.0.2(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedis-arguments@1.2.0(transitive)

• - Removedis-date-object@1.1.0(transitive)

• - Removedis-regex@1.2.1(transitive)

• - Removedmath-intrinsics@1.1.0(transitive)

• - Removedobject-is@1.1.6(transitive)

• - Removedobject-keys@1.1.1(transitive)

• - Removedregexp.prototype.flags@1.5.3(transitive)

• - Removedset-function-length@1.2.2(transitive)

• - Removedset-function-name@2.0.2(transitive)