react-helmet-async - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0-alpha

es/Dispatcher.js

@@ -41,8 +41,35 @@ 'use strict';
   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',
@@ -55,9 +82,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 = Object.assign({}, instance.props);
+        delete props.context;
+        return props;
       }));
@@ -69,13 +98,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',
@@ -88,3 +109,3 @@ value: function componentDidUpdate() {
     value: function componentWillUnmount() {
-      var helmetInstances = this.context.helmetInstances;
+      var helmetInstances = this.props.context.helmetInstances;
 
@@ -97,2 +118,4 @@ helmetInstances.remove(this);
     value: function render() {
+      this.init();
+
       return null;
@@ -105,3 +128,5 @@ }
 
-Dispatcher.contextTypes = _Provider.providerShape;
+Dispatcher.propTypes = {
+  context: _Provider.providerShape.isRequired
+};
 exports.default = Dispatcher;

es/index.js

@@ -37,2 +37,6 @@ 'use strict';
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _Dispatcher = require('./Dispatcher');
@@ -243,3 +247,9 @@
 
-      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 }));
+        }
+      );
     }
@@ -246,0 +256,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;

lib/Dispatcher.js

@@ -41,8 +41,35 @@ 'use strict';
   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',
@@ -55,9 +82,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 = Object.assign({}, instance.props);
+        delete props.context;
+        return props;
       }));
@@ -69,13 +98,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',
@@ -88,3 +109,3 @@ value: function componentDidUpdate() {
     value: function componentWillUnmount() {
-      var helmetInstances = this.context.helmetInstances;
+      var helmetInstances = this.props.context.helmetInstances;
 
@@ -97,2 +118,4 @@ helmetInstances.remove(this);
     value: function render() {
+      this.init();
+
       return null;
@@ -105,3 +128,5 @@ }
 
-Dispatcher.contextTypes = _Provider.providerShape;
+Dispatcher.propTypes = {
+  context: _Provider.providerShape.isRequired
+};
 exports.default = Dispatcher;

lib/index.js

@@ -37,2 +37,6 @@ 'use strict';
 
+var _Context = require('./Context');
+
+var _Context2 = _interopRequireDefault(_Context);
+
 var _Dispatcher = require('./Dispatcher');
@@ -243,3 +247,9 @@
 
-      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 }));
+        }
+      );
     }
@@ -246,0 +256,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;

package.json

 {
   "name": "react-helmet-async",
-  "version": "0.0.5",
+  "version": "0.1.0-alpha",
   "description": "Thread-safe Helmet for React 16+ and friends",
   "main": "lib/index.js",
-  "repository": "http://github.com/staylor/react-helmet-async",
+  "repository": "http://github.com/NYTimes/react-helmet-async",
   "author": "Scott Taylor <[e-mail]>",
-  "license": "MIT",
+  "license": "Apache-2.0",
+  "typings": "index.d.ts",
   "dependencies": {
     "deep-equal": "^1.0.1",
-    "invariant": "^2.2.2",
-    "prop-types": "^15.6.0",
+    "invariant": "^2.2.4",
+    "prop-types": "^15.6.1",
     "shallowequal": "^1.0.2"
@@ -17,7 +18,7 @@ },
     "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.1.2",
-    "babel-jest": "^22.0.4",
+    "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",
@@ -27,23 +28,23 @@ "babel-preset-kyt-react": "^0.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.14.0",
+    "eslint": "^4.19.1",
     "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-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.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",
+    "eslint-plugin-prettier": "^2.6.0",
+    "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.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"
   },
@@ -50,0 +51,0 @@ "scripts": {

README.md

 # react-helmet-async
 
 This package is a fork of [React Helmet](https://github.com/nfl/react-helmet).
-`<Helmet>` usage is synonymous, but SSR is radically different.
+`<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 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:
+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 React from 'react';
+import ReactDOM from 'react-dom';
 import Helmet, { HelmetProvider } from 'react-helmet-async';
@@ -28,2 +28,7 @@
 );
+
+ReactDOM.hydrate(
+  app,
+  document.getElementById(‘app’)
+);
 ```
@@ -36,3 +41,5 @@
 ```javascript
-import { HelmetProvider } from 'react-helmet-async';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import Helmet, { HelmetProvider } from 'react-helmet-async';
 
@@ -53,5 +60,7 @@ const helmetContext = {};
 
+const html = renderToString(app);
+
 const { helmet } = helmetContext;
 
-// helmet.title.toString() etc...
+// helmet.title.toString() etc…
 ```
@@ -110,2 +119,2 @@
 
-Licensed under the MIT License, Copyright © 2018 Scott Taylor
+Licensed under the Apache 2.0 License, Copyright © 2018 Scott Taylor

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

20

increased by17.65%

Lines of code

1859

increased by4.2%

Number of lines in readme file

117

increased by8.33%

Worsened metrics

Total package byte prevSize

103717

decreased by-58.6%

Dependency changes

• Updatedinvariant@^2.2.4

• Updatedprop-types@^15.6.1