stent - npm Package Compare versions

Comparing version 8.0.3 to 8.0.4

lib/react/__tests__/connect.spec.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _server = require('react-dom/server');
+
+var _server2 = _interopRequireDefault(_server);
+
 var _ = require('../../');
@@ -271,2 +275,33 @@
   });
+
+  describe('when we connect a server-rendered component', function () {
+    it('should use the machine states in the first render', function () {
+      function Component(props) {
+        return _react2.default.createElement(
+          'section',
+          null,
+          _react2.default.createElement(
+            'h1',
+            null,
+            props.a
+          ),
+          _react2.default.createElement(
+            'h2',
+            null,
+            props.b
+          )
+        );
+      }
+
+      var Connected = (0, _connect2.default)(Component).with('A', 'B').map(function (mA, mB) {
+        return {
+          a: mA.state.name,
+          b: mB.state.name
+        };
+      });
+
+      expect(_server2.default.renderToStaticMarkup(_react2.default.createElement(Connected, null))).to.equal('<section><h1>idle</h1><h2>waiting</h2></section>');
+    });
+  });
+
   describe('when we use mapSilent', function () {
@@ -273,0 +308,0 @@ it('should only call the mapping function when the machine changes its state', function () {

lib/react/connect.js

@@ -15,34 +15,46 @@ 'use strict';
       var mapping = once ? "mapOnce" : silent ? "mapSilent" : "map";
-      var initialState = mapping === "mapSilent" ? {} : null;
 
-      return function StentConnect(props) {
-        var _useState = (0, _react.useState)(initialState),
-            state = _useState[0],
-            setState = _useState[1];
+      return function (_React$Component) {
+        _inherits(StentConnect, _React$Component);
 
-        (0, _react.useEffect)(function () {
+        function StentConnect(props) {
           var _connect;
 
-          var disconnect = (_connect = (0, _connect3.default)({
+          _classCallCheck(this, StentConnect);
+
+          var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+
+          _this.initialStateHasBeenSet = false;
+          _this.state = {};
+
+          _this.disconnect = (_connect = (0, _connect3.default)({
             meta: { component: Component.name }
           })).with.apply(_connect, names)[mapping](function () {
-            if (done) {
-              setState(done.apply(undefined, arguments));
-            } else {
-              setState({});
+            var nextState = done ? done.apply(undefined, arguments) : {};
+
+            if (_this.initialStateHasBeenSet === false && mapping !== 'mapSilent') {
+              _this.state = nextState;
+              _this.initialStateHasBeenSet = true;
+              return;
             }
+
+            _this.setState(function () {
+              return nextState;
+            });
           });
+          return _this;
+        }
 
-          return function () {
-            disconnect();
-          };
-        }, []);
+        StentConnect.prototype.componentWillUnmount = function componentWillUnmount() {
+          if (this.disconnect) {
+            this.disconnect();
+          }
+        };
 
-        // Avoid rendering component until connected
-        if (state == null) {
-          return null;
-        }
+        StentConnect.prototype.render = function render() {
+          return _react2.default.createElement(Component, _extends({}, this.state, this.props));
+        };
 
-        return _react2.default.createElement(Component, _extends({}, state, props));
-      };
+        return StentConnect;
+      }(_react2.default.Component);
     };
@@ -74,2 +86,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 module.exports = exports['default'];

package.json

 {
   "name": "stent",
-  "version": "8.0.3",
+  "version": "8.0.4",
   "description": "Stent is combining the ideas of redux with the concept of state machines",
@@ -5,0 +5,0 @@ "main": "lib",

src/react/__tests__/connect.spec.js

 import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 import { Machine } from '../../';
@@ -210,2 +211,29 @@ import connect from '../connect';
   });
+
+  describe('when we connect a server-rendered component', function () {
+    it('should use the machine states in the first render', function () {
+      function Component(props) {
+        return (
+          <section>
+            <h1>{props.a}</h1>
+            <h2>{props.b}</h2>
+          </section>
+        );
+      }
+
+      const Connected = connect(Component)
+        .with('A', 'B')
+        .map(function (mA, mB) {
+          return {
+            a: mA.state.name,
+            b: mB.state.name
+          };
+        });
+
+      expect(ReactDOMServer.renderToStaticMarkup(<Connected />)).to.equal(
+        '<section><h1>idle</h1><h2>waiting</h2></section>'
+      );
+    });
+  });
+
   describe('when we use mapSilent', function () {
@@ -313,2 +341,2 @@ it('should only call the mapping function when the machine changes its state', function () {
   });
-});
+});

src/react/connect.js

@@ -1,2 +0,2 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import connect from '../helpers/connect';
@@ -8,9 +8,11 @@
       const mapping = once ? "mapOnce" : silent ? "mapSilent" : "map";
-      const initialState = mapping === "mapSilent" ? {} : null;
 
-      return function StentConnect(props) {
-        const [ state, setState ] = useState(initialState);
+      return class StentConnect extends React.Component {
+        constructor(props) {
+          super(props);
 
-        useEffect(() => {
-          const disconnect = connect({
+          this.initialStateHasBeenSet = false;
+          this.state = {};
+
+          this.disconnect = connect({
             meta: { component: Component.name }
@@ -20,20 +22,28 @@ })
             [mapping]((...deps) => {
-              if (done) {
-                setState(done(...deps));
-              } else {
-                setState({});
+              const nextState = done ? done(...deps) : {};
+
+              if (
+                this.initialStateHasBeenSet === false &&
+                mapping !== 'mapSilent'
+              ) {
+                this.state = nextState;
+                this.initialStateHasBeenSet = true;
+                return;
               }
+
+              this.setState(function () {
+                return nextState;
+              });
             });
+        }
 
-          return () => {
-            disconnect();
+        componentWillUnmount() {
+          if (this.disconnect) {
+            this.disconnect();
           }
-        }, []);
+        }
 
-        // Avoid rendering component until connected
-        if (state == null) {
-          return null;
+        render() {
+          return <Component {...this.state} {...this.props} />;
         }
-
-        return <Component {...state} {...props} />;
       }
@@ -40,0 +50,0 @@ }

No alert changes

Improved metrics

Lines of code

5767

increased by1.28%

Worsened metrics

Total package byte prevSize

281643

decreased by-1.01%

Number of package files

90

decreased by-1.1%

No dependency changes