fluxible-addons-react - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

dist/es/connectToStores.js

@@ -12,28 +12,32 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
  */
-import { Component as ReactComponent, createRef, createElement } from 'react';
+import { Component as ReactComponent, createElement, forwardRef } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { FluxibleContext } from './FluxibleContext';
 /**
- * Registers change listeners and retrieves state from stores using the `getStateFromStores`
- * method. Concept provided by Dan Abramov via
- * https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
+ * @callback getStateFromStores
+ * @param {FluxibleContext} context - Fluxible component context.
+ * @param {Object} ownProps - The props that the component received.
+ * @returns {Object} props - The props that should be passed to the component.
+ */
+
+/**
+ * HOC that registers change listeners and retrieves state from stores
+ * using the `getStateFromStores` method.
  *
  * Example:
- *   connectToStores(Component, [FooStore], {
- *       FooStore: function (store, props) {
- *           return {
- *               foo: store.getFoo()
- *           }
- *       }
+ *   connectToStores(Component, [FooStore], (context, props) => ({
+ *       foo: context.getStore(FooStore).getFoo(),
+ *       onClick: () => context.executeAction(fooAction, props)
  *   })
  *
- * @method connectToStores
- * @param {React.Component} [Component] component to pass state as props to.
- * @param {array} stores List of stores to listen for changes
- * @param {function} getStateFromStores function that receives all stores and should return
- *      the full state object. Receives `stores` hash and component `props` as arguments
- * @returns {React.Component} or {Function} if using decorator pattern
+ * @function connectToStores
+ * @param {React.Component} Component - The component to pass state as props to.
+ * @param {array} stores - List of stores to listen for changes.
+ * @param {getStateFromStores} getStateFromStores - The main function that must map the context into props.
+ * @param {Object} [options] - options to tweak the HOC.
+ * @param {boolean} options.forwardRef - If true, forwards a ref to the wrapped component.
+ * @returns {React.Component} ConnectedComponent - A component connected to the stores.
  */
 
-function connectToStores(Component, stores, _getStateFromStores) {
+function connectToStores(Component, stores, _getStateFromStores, options) {
   var StoreConnector = /*#__PURE__*/function (_ReactComponent) {
@@ -54,3 +58,2 @@ _inherits(StoreConnector, _ReactComponent);
       _this.state = _this.getStateFromStores();
-      _this.wrappedElementRef = /*#__PURE__*/createRef();
       return _this;
@@ -100,6 +103,5 @@ }
       value: function render() {
-        var props = Component.prototype && Component.prototype.isReactComponent ? {
-          ref: this.wrappedElementRef
-        } : null;
-        return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread(_objectSpread({}, this.props), this.state), props));
+        return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({
+          ref: this.props.fluxibleRef
+        }, this.props), this.state));
       }
@@ -111,9 +113,13 @@ }]);
 
-  StoreConnector.displayName = "storeConnector(".concat(Component.displayName || Component.name || 'Component', ")");
   StoreConnector.contextType = FluxibleContext;
-  StoreConnector.WrappedComponent = Component;
-  hoistNonReactStatics(StoreConnector, Component);
-  return StoreConnector;
+  var forwarded = /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/createElement(StoreConnector, _objectSpread(_objectSpread({}, props), {}, {
+      fluxibleRef: (options === null || options === void 0 ? void 0 : options.forwardRef) ? ref : null
+    }));
+  });
+  forwarded.displayName = "storeConnector(".concat(Component.displayName || Component.name || 'Component', ")");
+  forwarded.WrappedComponent = Component;
+  return hoistNonReactStatics(forwarded, Component);
 }
 
 export default connectToStores;

dist/es/provideContext.js

@@ -1,2 +0,1 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -11,3 +10,3 @@ import _createClass from "@babel/runtime/helpers/createClass";
  */
-import { Component as ReactComponent, createRef, createElement } from 'react';
+import { Component as ReactComponent, createElement } from 'react';
 import { object } from 'prop-types';
@@ -36,9 +35,5 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
     function ContextProvider(props) {
-      var _this;
-
       _classCallCheck(this, ContextProvider);
 
-      _this = _super.call(this, props);
-      _this.wrappedElementRef = /*#__PURE__*/createRef();
-      return _this;
+      return _super.call(this, props);
     }
@@ -49,7 +44,4 @@
       value: function render() {
-        var props = Component.prototype && Component.prototype.isReactComponent ? {
-          ref: this.wrappedElementRef
-        } : null;
         var context = this.props.context;
-        var children = /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({}, this.props), props));
+        var children = /*#__PURE__*/createElement(Component, this.props);
         return /*#__PURE__*/createElement(FluxibleProvider, {
@@ -56,0 +48,0 @@ context: context

dist/lib/connectToStores.js

@@ -34,23 +34,27 @@ "use strict";
 /**
- * Registers change listeners and retrieves state from stores using the `getStateFromStores`
- * method. Concept provided by Dan Abramov via
- * https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
+ * @callback getStateFromStores
+ * @param {FluxibleContext} context - Fluxible component context.
+ * @param {Object} ownProps - The props that the component received.
+ * @returns {Object} props - The props that should be passed to the component.
+ */
+
+/**
+ * HOC that registers change listeners and retrieves state from stores
+ * using the `getStateFromStores` method.
  *
  * Example:
- *   connectToStores(Component, [FooStore], {
- *       FooStore: function (store, props) {
- *           return {
- *               foo: store.getFoo()
- *           }
- *       }
+ *   connectToStores(Component, [FooStore], (context, props) => ({
+ *       foo: context.getStore(FooStore).getFoo(),
+ *       onClick: () => context.executeAction(fooAction, props)
  *   })
  *
- * @method connectToStores
- * @param {React.Component} [Component] component to pass state as props to.
- * @param {array} stores List of stores to listen for changes
- * @param {function} getStateFromStores function that receives all stores and should return
- *      the full state object. Receives `stores` hash and component `props` as arguments
- * @returns {React.Component} or {Function} if using decorator pattern
+ * @function connectToStores
+ * @param {React.Component} Component - The component to pass state as props to.
+ * @param {array} stores - List of stores to listen for changes.
+ * @param {getStateFromStores} getStateFromStores - The main function that must map the context into props.
+ * @param {Object} [options] - options to tweak the HOC.
+ * @param {boolean} options.forwardRef - If true, forwards a ref to the wrapped component.
+ * @returns {React.Component} ConnectedComponent - A component connected to the stores.
  */
-function connectToStores(Component, stores, _getStateFromStores) {
+function connectToStores(Component, stores, _getStateFromStores, options) {
   var StoreConnector = /*#__PURE__*/function (_ReactComponent) {
@@ -70,3 +74,2 @@ (0, _inherits2["default"])(StoreConnector, _ReactComponent);
       _this.state = _this.getStateFromStores();
-      _this.wrappedElementRef = /*#__PURE__*/(0, _react.createRef)();
       return _this;
@@ -116,6 +119,5 @@ }
       value: function render() {
-        var props = Component.prototype && Component.prototype.isReactComponent ? {
-          ref: this.wrappedElementRef
-        } : null;
-        return /*#__PURE__*/(0, _react.createElement)(Component, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.props), this.state), props));
+        return /*#__PURE__*/(0, _react.createElement)(Component, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          ref: this.props.fluxibleRef
+        }, this.props), this.state));
       }
@@ -126,7 +128,11 @@ }]);
 
-  StoreConnector.displayName = "storeConnector(".concat(Component.displayName || Component.name || 'Component', ")");
   StoreConnector.contextType = _FluxibleContext.FluxibleContext;
-  StoreConnector.WrappedComponent = Component;
-  (0, _hoistNonReactStatics["default"])(StoreConnector, Component);
-  return StoreConnector;
+  var forwarded = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    return /*#__PURE__*/(0, _react.createElement)(StoreConnector, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+      fluxibleRef: (options === null || options === void 0 ? void 0 : options.forwardRef) ? ref : null
+    }));
+  });
+  forwarded.displayName = "storeConnector(".concat(Component.displayName || Component.name || 'Component', ")");
+  forwarded.WrappedComponent = Component;
+  return (0, _hoistNonReactStatics["default"])(forwarded, Component);
 }
@@ -133,0 +139,0 @@

dist/lib/provideContext.js

@@ -10,4 +10,2 @@ "use strict";
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -53,8 +51,4 @@
     function ContextProvider(props) {
-      var _this;
-
       (0, _classCallCheck2["default"])(this, ContextProvider);
-      _this = _super.call(this, props);
-      _this.wrappedElementRef = /*#__PURE__*/(0, _react.createRef)();
-      return _this;
+      return _super.call(this, props);
     }
@@ -65,7 +59,4 @@
       value: function render() {
-        var props = Component.prototype && Component.prototype.isReactComponent ? {
-          ref: this.wrappedElementRef
-        } : null;
         var context = this.props.context;
-        var children = /*#__PURE__*/(0, _react.createElement)(Component, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, this.props), props));
+        var children = /*#__PURE__*/(0, _react.createElement)(Component, this.props);
         return /*#__PURE__*/(0, _react.createElement)(_FluxibleContext.FluxibleProvider, {
@@ -72,0 +63,0 @@ context: context

package.json

 {
   "name": "fluxible-addons-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Fluxible addons for use with React",
@@ -5,0 +5,0 @@ "main": "dist/lib/index.js",

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

Worsened metrics

Total package byte prevSize

31264

decreased by-0.31%

Lines of code

609

decreased by-0.65%

No dependency changes