Higher Order Components

Undoable.js

function Undoable( Component ) {
	return function( sources ) {
		const component = Component( sources );

		const add$ = component.state$ // component exposes the state$. Each new state$ is considered as an add action
		.map( state => function( history ) {
			const newHistory = history.clone(); // shallow clone. Should use immutable.js or something
			newHistory.states.push( state );
			newHistory.index = newHistory.states.length - 1;

			return newHistory;
		});

		const undo$ = component.undo$ // component exposes the undo action$
		.map( () => function( history ) {
			const newHistory = history.clone();
			newHistory.index -= 1;

			return newHistory;
		});

		const redo$ = component.redo$ // component exposes the redo action$
		.map( () => function( history ) {
			const newHistory = history.clone();

			if ( history.states.length - 1 >= history.index ) {
				return history;
			} else {
				newHistory.index += 1;
				return newHistory;
			}
		});

		const initHistory = {
			states: [],
			index: -1
		};

		const history$ = xs.merge( add$, undo$, redo$ )
		.fold( (history, reducer) => reducer( history ), initHistory )
		.map( history => history.states[ history.index ] );

		// now how do i use this history$ to update the component?
		// I thought of passing a proxyHistory$ above but then how would the Component handle that
		// and not cause an infinite loop of state$ in component changing. Propogating back to the history$ etc.

		return {
			...component,
		};
	}
}

toy happy with me / git,git,git /hub-hub-hub