JSFiddle - React, Tailwind, and code Playground

by joplomacedo

JavaScript

function Jp_CreateObservable( engine ) {
    const subscriptions = [];
    const onDestroyCbs = [];
    let isComplete = false;

    engine({
        next: ( val ) => {
            if ( isComplete ) return;

            subscriptions.forEach( subscription => {
                if ( subscription.filter(val) ) subscription.next(val);
            })
        },
        error: ( val ) => {
            if ( isComplete ) return;

            subscriptions.forEach( subscription => {
                if ( subscription.filter(val) ) subscription.error(val);
            })
        },
        complete: () => {
            isComplete = true;
        },
    });

    return {
        subscribe( cbs, filter ) {
            const subscriptionIdx = subscriptions.length;

            let subscription = {}

            if ( typeof cbs === 'function' ) {
                subscription.next = cbs;
                subscription.error = () => {};
            } else {
                subscription.next = cbs.next || (() => {});
                subscription.error = cbs.error || (() => {});
            }

            subscription.filter = typeof filter === 'function' ? filter : (() => true);

            subscriptions.push(subscription)

            return {
                unsubscribe() {
                    delete subscriptions[subscriptionIdx];
                }
            }
        },

        onDestroy( cb ) {
            if ( typeof cb === 'function' ) {
                onDestroyCbs.push(cb);
            }
        },

        destroy() {
            onDestroyCbs.forEach(  cb => {
                cb();
            })
        }
    }
}


const observable = Jp_CreateObservable( observer => {
let i = 0;
	setInterval( () => {

    if ( i++ === 20) {
      	observer.complete()
    	return;
    }
    
    observer.next(i)
  }, 200)
})


observable.subscribe( (val) => {
	console.log('2', val);
}, val => val%2-1)