		@@ -30,3 +30,3 @@ const path = require('path');
		rollup.rollup({
		input: 'src/subscribe.js',
		input: 'src/index.js',
		external: externals,
		@@ -44,3 +44,3 @@ plugins: plugins
		}
		}
		};

		@@ -47,0 +47,0 @@ return bundle.write(options);

package.json

		{
		"name": "strudel-redux",
		"version": "2.0.0",
		"version": "3.0.0-beta",
		"description": "Redux bindings for Strudel",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -23,31 +23,34 @@ # Strudel-redux
		import { Component, Evt } from 'strudel';
		import { Subscribe, dispatch } from 'strudel-redux';
		import { Subscribe, AttachStore } from 'strudel-redux';
		import { toggleStockStatus } from '../../actions/';

		@Subscribe({
		observed: state => ({
		price: state.productDetails.price,
		}),
		statics: state => ({
		stockStatus: state.productDetails.stockStatus,
		})
		})
		@AttachStore(store)
		@Component('.example')
		class Example {
		init() {
		this.dispatch(toggleStockStatus());
		store.dispatch(toggleStockStatus());
		}

		onStateChange({ price, stockStatus }) {

		@Subscribe({
		observed: state => ({
		price: state.productDetails.price,
		}),
		passive: state => ({
		stockStatus: state.productDetails.stockStatus,
		})
		})
		onPriceChange({ price, stockStatus }) {
		// put down your logic here
		}
		}
		})
		```

		### API
		* `@AttachStore(store)` - required decorator to bind store to component.
		* `@Subscribe: { observed: () => {}, passive: () => {}` - decorator that makes subscription to the store. Decorated method is invoked with values returned from both `observed` and `passive` methods.
		* `observed` method that maps state to variables. Any change on one of these properties invokes decorated method.
		* (optional) `passive` method that maps state to variables. Any change to one of these properties doesn't invoke decorated method.

		* `@Subscribe(store, callbackFunction)` - required decorator to bind strudel-redux to component
		* `onStateChange(properties)` - added method called on change of properties declared as observed
		* `callbackFunction: { observed: () => {}, statics: () => {}` - functions that will return mapped state properties
		* `observed` method is called on store change, and will trigger `onStateChange` if returned value differs from previous
		* `statics` method is called whenever `observed` function will detect change, and provides additional props that does not trigger onStateChange call
		## License

		[MIT](https://opensource.org/licenses/MIT)

src/subscribe.js

		@@ -1,45 +0,25 @@
		export const subscribedStateChanged = (observedState, stateMemory) => Object
		.entries(observedState)
		.some(([key, value]) => stateMemory[key] !== value);
		function Subscribe({
		observed,
		passive = () => {},
		} = {}) {
		return function addSubscriptionToQueue(target, name, descriptor) {
		if (typeof observed !== 'function') {
		// eslint-disable-next-line no-console
		console.error('Observed must be a function that maps state to variables');
		}
		const queueElement = {
		observed,
		passive,
		method: descriptor.value,
		};
		if (!target.subscriptionQueue) {
		// eslint-disable-next-line no-param-reassign
		target.subscriptionQueue = [];
		}
		target.subscriptionQueue.push(queueElement);

		/* eslint-disable no-param-reassign, func-names */
		export const Subscribe = (store, { observed, statics = () => {} }) => function (target) {
		let stateMemory = observed(store.getState());

		Object.defineProperty(target.prototype, 'dispatch', {
		value(action) {
		return store.dispatch(action);
		},
		enumerable: true,
		});

		const orgInit = target.prototype.init;
		const orgTeardown = target.prototype.$teardown;
		let unsubscribe;

		target.prototype.init = function () {
		orgInit.call(this);

		unsubscribe = store.subscribe(() => {
		const storeState = store.getState();
		const observedState = observed(storeState);
		const stateChanged = subscribedStateChanged(observedState, stateMemory);

		if (stateChanged) {
		const staticState = statics(storeState);
		this.onStateChange({ ...observedState, ...staticState });

		stateMemory = observedState;
		}
		});
		return descriptor;
		};
		}

		target.prototype.$teardown = function () {
		unsubscribe();
		orgTeardown.call(this);
		};

		return target;
		};

		// eslint-enable no-param-reassign, func-names
		export default Subscribe;

src/subscribe.spec.js

strudel-redux - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics