fluxible - npm Package Compare versions

Comparing version 0.4.12 to 0.5.0-alpha.1

addons/connectToStores.js

@@ -1,74 +0,5 @@
-/**
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-'use strict';
-
-var React = require('react');
-var objectAssign = require('object-assign');
-var contextTypes = require('../lib/contextTypes');
-var hoistNonReactStatics = require('hoist-non-react-statics');
-
-/**
- * Registers change listeners and retrieves state from stores using `getStateFromStores`
- * method. Concept provided by Dan Abramov via
- * https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
- * @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}
- */
-module.exports = function connectToStores(Component, stores, getStateFromStores) {
-    var componentName = Component.displayName || Component.name;
-    var StoreConnector = React.createClass({
-        displayName: componentName + 'StoreConnector',
-        contextTypes: {
-            getStore: contextTypes.getStore
-        },
-        getInitialState: function getInitialState() {
-            return this.getStateFromStores(this.props);
-        },
-        componentDidMount: function componentDidMount() {
-            stores.forEach(function storesEach(Store) {
-                this.context.getStore(Store).addChangeListener(this._onStoreChange);
-            }, this);
-        },
-        componentWillUnmount: function componentWillUnmount() {
-            stores.forEach(function storesEach(Store) {
-                this.context.getStore(Store).removeChangeListener(this._onStoreChange);
-            }, this);
-        },
-        getStateFromStores: function () {
-            if ('function' === typeof getStateFromStores) {
-                var storeInstances = {};
-                stores.forEach(function (store) {
-                    var storeName = store.storeName || store.name || store;
-                    storeInstances[storeName] = this.context.getStore(store);
-                }, this);
-                return getStateFromStores(storeInstances, this.props);
-            }
-            var state = {};
-            //@TODO deprecate?
-            Object.keys(getStateFromStores).forEach(function (storeName) {
-                var stateGetter = getStateFromStores[storeName];
-                var store = this.context.getStore(storeName);
-                objectAssign(state, stateGetter(store, this.props));
-            }, this);
-            return state;
-        },
-        _onStoreChange: function onStoreChange() {
-            if (this.isMounted()) {
-                this.setState(this.getStateFromStores());
-            }
-        },
-        render: function render() {
-            return React.createElement(Component, objectAssign({}, this.props, this.state));
-        }
-    });
-
-    hoistNonReactStatics(StoreConnector, Component);
-
-    return StoreConnector;
-};
+if (process.env.NODE_ENV !== 'production') {
+    console.warn('`connectToStores` has moved to the ' +
+        '`fluxible-addons-react` package.');
+}
+module.exports = require('fluxible-addons-react/connectToStores');

addons/FluxibleComponent.js

@@ -1,36 +0,5 @@
-/**
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-'use strict';
-
-var React = require('react/addons');
-var contextTypes = require('../lib/contextTypes');
-
-var FluxibleComponent = React.createClass({
-    displayName: 'FluxibleComponent',
-    propTypes: {
-        context: React.PropTypes.object.isRequired
-    },
-
-    childContextTypes: contextTypes,
-
-    /**
-     * Provides the current context as a child context
-     * @method getChildContext
-     */
-    getChildContext: function () {
-        return {
-            getStore: this.props.context.getStore,
-            executeAction: this.props.context.executeAction
-        };
-    },
-
-    render: function () {
-        return React.addons.cloneWithProps(this.props.children, {
-            context: this.props.context
-        });
-    }
-});
-
-module.exports = FluxibleComponent;
+if (process.env.NODE_ENV !== 'production') {
+    console.warn('`FluxibleComponent` has moved to the ' +
+        '`fluxible-addons-react` package.');
+}
+module.exports = require('fluxible-addons-react/FluxibleComponent');

addons/FluxibleMixin.js

@@ -1,204 +0,5 @@
-/**
- * Copyright 2014, Yahoo! Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-'use strict';
-
-/**
- * React mixin for staticly declaring and add/remove-ing listeners for Store events.
- * @class FluxibleMixin
- * @example
- * // Register listener default handler function name
- * var Component = React.createClass({
- *     mixins: [FluxibleMixin],
- *     statics: {
- *         storeListeners: [FooStore]
- *     },
- *     onChange: function () {
- *         this.setState(this.context.getStore(FooStore).getState());
- *     },
- *     ...
- * });
- * @example
- * // Register listener with custom named handler
- * var Component = React.createClass({
- *     mixins: [FluxibleMixin],
- *     statics: {
- *         storeListeners: {
- *             'onChange2': [FooStore]
- *         }
- *     },
- *     onChange2: function () {
- *         this.setState(this.context.getStore(FooStore).getState());
- *     },
- *     ...
- * });
- */
-var DEFAULT_CHANGE_HANDLER = 'onChange';
-var React = require('react');
-
-var FluxibleMixin = {
-
-    contextTypes: {
-        getStore: React.PropTypes.func,
-        executeAction: React.PropTypes.func
-    },
-
-    /**
-     * Registers staticly declared listeners
-     * @method componentDidMount
-     */
-    componentDidMount: function componentDidMount() {
-        this.listeners = [];
-        var self = this;
-
-        // Register static listeners
-        this.getListeners().forEach(function(listener) {
-            self._attachStoreListener(listener);
-        });
-    },
-
-    /**
-     * Calls an action
-     * @method executeAction
-     */
-    executeAction: function executeAction() {
-        var context = this.props.context || this.context;
-        if (!context || !context.executeAction) {
-            throw new Error('executeAction was called but no context was provided. Pass the fluxible' +
-            'context via a `context` prop or via React\'s context.');
-        }
-        return context.executeAction.apply(context, arguments);
-    },
-
-    /**
-     * Gets a store instance from the context
-     * @param {Function|String} store The store to get
-     * @returns {Object}
-     * @method getStore
-     */
-    getStore: function (store) {
-        var storeInstance = store;
-        if ('object' !== typeof storeInstance) {
-            var context = this.props.context || this.context;
-            if (!context) {
-                throw new Error('storeListener mixin was called but no context was provided for getting the store.' +
-                'Pass the fluxible context via a `context` prop or via React\'s context.');
-            }
-            storeInstance = context.getStore(store);
-        }
-        return storeInstance;
-    },
-
-    /**
-     * Gets from the context all store instances required by this component
-     * @returns {Object}
-     * @method getStores
-     */
-    getStores: function() {
-        var storesByName = this.getListeners().reduce(function (accum, listener) {
-            accum[listener.store.constructor.storeName] = listener.store;
-            return accum;
-        }, {});
-        return Object.keys(storesByName).map(function(storeName) {
-            return storesByName[storeName];
-        });
-    },
-
-    /**
-     * Gets a store-change handler from the component
-     * @param {Function|String} handler The handler to get
-     * @returns {Function}
-     * @method getHandler
-     */
-    getHandler: function (handler) {
-        if ('string' === typeof handler) {
-            handler = this[handler];
-        }
-
-        if (!handler) {
-            throw new Error('storeListener attempted to add undefined handler. Make sure handlers are actually exist.');
-        }
-
-        return handler;
-    },
-
-    /**
-     * Gets a listener descriptor for a store and store-change handler
-     * @param {Function|String} store Store
-     * @param {Function|String} handler The handler function or method name
-     * @returns {Object}
-     * @method getListener
-     */
-    getListener: function(store, handler) {
-        handler = this.getHandler(handler);
-        var storeInstance = this.getStore(store);
-
-        return {
-            store: storeInstance,
-            handler: handler
-        };
-    },
-
-    /**
-     * Gets all store-change listener descriptors from the component
-     * @returns {Object}
-     * @method getListeners
-     */
-    getListeners: function() {
-        var self = this;
-        var storeListeners = self.constructor.storeListeners; // Static property on component
-
-        // get static listeners
-        if (storeListeners) {
-            if (Array.isArray(storeListeners)) {
-                return storeListeners.map(function(store) {
-                    return self.getListener(store, DEFAULT_CHANGE_HANDLER);
-                });
-            } else {
-                return Object.keys(storeListeners).reduce(function (accum, handlerName) {
-                    var stores = storeListeners[handlerName];
-                    if (!Array.isArray(stores)) {
-                        stores = [stores];
-                    }
-                    return accum.concat(stores.map(function (store) {
-                        return self.getListener(store, handlerName);
-                    }));
-                }, []);
-            }
-        }
-
-        return [];
-    },
-
-    /**
-     * If provided with events, will attach listeners to events on EventEmitter objects(i.e. Stores)
-     * If the component isn't mounted, events aren't attached.
-     * @param {Object} listener
-     * @param {Object} listener.store Store instance
-     * @param {Object} listener.handler Handler function or method name
-     * @method _attachStoreListener
-     * @private
-     */
-    _attachStoreListener: function _attachStoreListener(listener) {
-        if (this.isMounted && !this.isMounted()) {
-            throw new Error('storeListener mixin called listen when component wasn\'t mounted.');
-        }
-
-        listener.store.addChangeListener(listener.handler);
-        this.listeners.push(listener);
-    },
-
-    /**
-     * Removes all listeners
-     * @method componentWillUnmount
-     */
-    componentWillUnmount: function componentWillUnmount() {
-        this.listeners.forEach(function (listener) {
-            listener.store.removeChangeListener(listener.handler);
-        });
-        this.listeners = [];
-    }
-};
-
-module.exports = FluxibleMixin;
+if (process.env.NODE_ENV !== 'production') {
+    console.warn('`FluxibleMixin` has moved to the ' +
+        '`fluxible-addons-react` package.');
+}
+module.exports = require('fluxible-addons-react/FluxibleMixin');

addons/index.js

@@ -9,7 +9,30 @@ /**
     BaseStore: require('./BaseStore'),
-    connectToStores: require('./connectToStores'),
-    createStore: require('./createStore'),
-    FluxibleComponent: require('./FluxibleComponent'),
-    FluxibleMixin: require('./FluxibleMixin'),
-    provideContext: require('./provideContext')
+    createStore: require('./createStore')
 };
+
+// Deprecated support
+var objectAssign = require('object-assign');
+var movedMethods = {
+    connectToStores: require('fluxible-addons-react/connectToStores'),
+    createElementWithContext: require('fluxible-addons-react/createElementWithContext'),
+    FluxibleComponent: require('fluxible-addons-react/FluxibleComponent'),
+    FluxibleMixin: require('fluxible-addons-react/FluxibleMixin'),
+    provideContext: require('fluxible-addons-react/provideContext')
+};
+if (process.env.NODE_ENV === 'production') {
+    objectAssign(module.exports, movedMethods);
+} else {
+    Object.keys(movedMethods).forEach(function (methodName) {
+        var warnedOnce = false;
+        Object.defineProperty(module.exports, methodName, {
+            get: function () {
+                if (!warnedOnce) {
+                    console.warn('`' + methodName + '` has moved to the ' +
+                        '`fluxible-addons-react` package.');
+                    warnedOnce = true;
+                }
+                return movedMethods[methodName];
+            }
+        });
+    });
+}

addons/provideContext.js

@@ -1,52 +0,6 @@
-var React = require('react');
-/**
- * Copyright 2015, Yahoo Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-'use strict';
-
-var objectAssign = require('object-assign');
-var contextTypes = require('../lib/contextTypes');
-var hoistNonReactStatics = require('hoist-non-react-statics');
-
-/**
- * Provides context prop to all children as React context
- * @method provideContext
- * @param {React.Component} Component component to wrap
- * @param {object} customContextTypes Custom contextTypes to add
- * @returns {React.Component}
- */
-module.exports = function provideContext(Component, customContextTypes) {
-    var childContextTypes = objectAssign({}, contextTypes, customContextTypes || {});
-
-    var ContextProvider = React.createClass({
-        displayName: 'ContextProvider',
-
-        propTypes: {
-            context: React.PropTypes.object.isRequired
-        },
-
-        childContextTypes: childContextTypes,
-
-        getChildContext: function () {
-            var childContext = {
-                executeAction: this.props.context.executeAction,
-                getStore: this.props.context.getStore
-            };
-            if (customContextTypes) {
-                Object.keys(customContextTypes).forEach(function (key) {
-                    childContext[key] = this.props.context[key];
-                }, this);
-            }
-            return childContext;
-        },
-
-        render: function () {
-            return React.createElement(Component, this.props);
-        }
-    });
-
-    hoistNonReactStatics(ContextProvider, Component);
-
-    return ContextProvider;
-};
+if (process.env.NODE_ENV !== 'production') {
+    console.warn('`provideContext` has moved to the ' +
+        '`fluxible-addons-react` package.');
+    console.trace();
+}
+module.exports = require('fluxible-addons-react/provideContext');

index.js

@@ -9,7 +9,2 @@ /**
 
-// DEPRECATIONS
-// @TODO(next minor): remove all deprecations
-Fluxible.FluxibleComponent = require('./lib/FluxibleComponent');
-Fluxible.FluxibleMixin = require('./lib/FluxibleMixin');
-
 module.exports = Fluxible;

lib/Fluxible.js

@@ -51,4 +51,3 @@ /**
     options = options || {};
-    options.app = self;
-    var context = new FluxibleContext(options);
+    var context = new FluxibleContext(self);
 
@@ -129,3 +128,3 @@ // Plug context with app plugins that implement plugContext method
  * @method getComponent
- * @returns {Object}
+ * @returns {ReactComponent}
  */
@@ -211,5 +210,5 @@ Fluxible.prototype.getComponent = function getComponent() {
         rehydratePromise
-            .then(function(context) {
+            .then(function(contextValue) {
                 // Ensures that errors in callback are not swallowed by promise
-                setImmediate(callback, null, context);
+                setImmediate(callback, null, contextValue);
             }, function (err) {
@@ -216,0 +215,0 @@ // Ensures that errors in callback are not swallowed by promise

lib/FluxibleContext.js

@@ -12,3 +12,3 @@ /**
 var React = require('react');
-var FluxibleComponent = require('../addons/FluxibleComponent');
+var createElementWithContext = require('fluxible-addons-react/createElementWithContext');
 require('setimmediate');
@@ -19,12 +19,8 @@
  * @class FluxibleContext
- * @param {Object} options
- * @param {Fluxible} options.app The Fluxible instance used to create the context
+ * @param {Fluxible} app The Fluxible instance used to create the context
  * @constructor
  */
-function FluxContext(options) {
-    options = options || {};
+function FluxContext(app) {
+    this._app = app;
 
-    // Options
-    this._app = options.app;
-
     // To be created on demand
@@ -45,37 +41,31 @@ this._dispatcher = null;
 
+var warnedOnce = false;
 /**
  * Creates an instance of the app level component with given props and a proper component
  * context.
+ * @method createElement
  * @param {Object} props
+ * @deprecated
  * @return {ReactElement}
  */
 FluxContext.prototype.createElement = function createElement(props) {
-    var Component = this._app.getComponent();
-    if (!Component) {
-        throw new Error('A component was not specified.');
+    if (!warnedOnce && process.env.NODE_ENV !== 'production') {
+        console.warn('`context.createElement(props)` has been moved out of ' +
+            'Fluxible to fluxible-addons-react. This can be called using ' +
+            '`require(\'fluxible-addons-react\').createElement(context, props)`');
+        warnedOnce = true;
     }
-    if ('ContextProvider' === Component.displayName) {
-        return React.createElement(Component, objectAssign({}, {
-            context: this.getComponentContext()
-        }, props))
-    }
-    var componentInstance;
-    if (!Component.hasOwnProperty('prototype')) {
-        // TODO: remove factory support
-        if ('production' !== process.env.NODE_ENV) {
-            console.warn('When using context.createFactory(), it is no longer ' +
-                'necessary to wrap your component with `React.createFactory` when ' +
-                'instantiating Fluxible. Support for factories will be removed ' +
-                'in the next version of Fluxible.');
-        }
-        componentInstance = Component(props);
-    } else {
-        componentInstance = React.createElement(Component, props);
-    }
-    return React.createElement(FluxibleComponent, {
-        context: this.getComponentContext()
-    }, componentInstance);
+    return createElementWithContext(this, props);
 };
 
 /**
+ * Getter for the app's component. Pass through to the Fluxible instance.
+ * @method getComponent
+ * @returns {ReactComponent}
+ */
+FluxContext.prototype.getComponent = function getComponent() {
+    return this._app.getComponent();
+};
+
+/**
  * Getter for store from dispatcher
@@ -116,2 +106,28 @@ * @method getStore
 /**
+ * Executes an action, and calls either resolve or reject based on the callback result
+ * This is extracted from FluxContext.prototype.executeAction to prevent this method de-optimising
+ * due to the try/catch
+ * @param {Object} context FluxContext object
+ * @param {Function} action Action to call
+ * @param {Object} payload Payload for the action
+ * @param {Function} resolve function to call on success
+ * @param {Function} reject function to call on failure
+ * @private
+ */
+function executeActionInternal(context, action, payload, resolve, reject) {
+    var syncResult = action(context.getActionContext(), payload, function (err, result) {
+        if (err) {
+            reject(err);
+        } else {
+            resolve(result);
+        }
+    });
+    if (isPromise(syncResult)) {
+        syncResult.then(resolve, reject);
+    } else if (action.length < 3) {
+        resolve(syncResult);
+    }
+}
+
+/**
  * Executes an action passing an action interface to as the first parameter
@@ -171,29 +187,2 @@ * If a promise is returned by the action, it will wait for its resolution or rejection
 /**
- * Executes an action, and calls either resolve or reject based on the callback result
- * This is extracted from FluxContext.prototype.executeAction to prevent this method de-optimising
- * due to the try/catch
- * @param {Object} context FluxContext object
- * @param {Function} action Action to call
- * @param {Object} payload Payload for the action
- * @param {Function} resolve function to call on success
- * @param {Function} reject function to call on failure
- * @private
- */
-function executeActionInternal(context, action, payload, resolve, reject) {
-    var result = action(context.getActionContext(), payload, function (err, result) {
-        if (err) {
-            reject(err);
-        } else {
-            resolve(result);
-        }
-    });
-    if (isPromise(result)) {
-        result.then(resolve, reject);
-    } else if (action.length < 3) {
-        resolve(result);
-    }
-}
-
-
-/**
  * Sets up the dispatcher with access to the store context
@@ -257,3 +246,10 @@ * @method _initializeDispatcher
         // Prevents components from directly handling the callback for an action
-        executeAction: function componentExecuteAction(action, payload) {
+        executeAction: function componentExecuteAction(action, payload, done) {
+            if (done) {
+                if ('production' !== process.env.NODE_ENV) {
+                    console.warn('When calling executeAction from a component,' +
+                        'a callback isn\'t allowed. See our docs for more info:' +
+                        'http://fluxible.io/api/components.html#component-context');
+                }
+            }
             self.executeAction(action, payload)
@@ -260,0 +256,0 @@ ['catch'](function actionHandlerWrapper(err) {

package.json

 {
   "name": "fluxible",
-  "version": "0.4.12",
+  "version": "0.5.0-alpha.1",
   "description": "A pluggable container for isomorphic flux applications",
@@ -13,3 +13,3 @@ "main": "index.js",
     "cover": "istanbul cover --dir artifacts -- _mocha tests/unit/ --recursive --compilers js:babel/register --reporter spec",
-    "lint": "jshint"
+    "lint": "eslint lib/ addons/"
   },
@@ -20,10 +20,7 @@ "dependencies": {
     "es6-promise": "^2.0.1",
-    "hoist-non-react-statics": "^1.0.0",
+    "fluxible-addons-react": "*",
     "is-promise": "^2.0.0",
-    "object-assign": "^2.0.0",
+    "object-assign": "^3.0.0",
     "setimmediate": "^1.0.2"
   },
-  "peerDependencies": {
-    "react": "0.13.x"
-  },
   "devDependencies": {
@@ -33,9 +30,9 @@ "babel": "^5.0.2",
     "coveralls": "^2.11.1",
+    "eslint": "^0.21.2",
     "flux-router-component": "^0.6.0",
     "istanbul": "^0.3.2",
     "jsdom": "^3.1.2",
-    "jshint": "^2.5.5",
     "mocha": "^2.0.1",
     "mockery": "^1.4.0",
-    "precommit-hook": "1.0.x",
+    "pre-commit": "^1.0.7",
     "react": "0.13.x"
@@ -42,0 +39,0 @@ },

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

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

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

Dependency count

7

decreased by-12.5%

Worsened metrics

Total package byte prevSize

39985

decreased by-59.79%

Number of package files

26

decreased by-38.1%

Lines of code

725

decreased by-30.89%

Number of medium quality alerts

2

increased by100%

Number of low supply chain risk alerts

9

increased by125%

Dependency changes

• + Addedfluxible-addons-react@*

• + Added@babel/runtime@7.26.0(transitive)

• + Addeddispatchr@1.3.0(transitive)

• + Addedeventemitter3@4.0.7(transitive)

• + Addedfluxible@1.4.2(transitive)

• + Addedfluxible-addons-react@1.2.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@3.0.04.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.20.2(transitive)

• - Removedhoist-non-react-statics@^1.0.0

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedenvify@3.4.1(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedhoist-non-react-statics@1.2.0(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@0.13.3(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedobject-assign@^3.0.0