manuelxaguilar/observable_es6.html

## observable_es6.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="input" />
  <script src="observable.js"></script>
</body>
</html>

## observable_es6.js
// Creating an observable ES2015 class to better understand
// how reactive programming works.
// This is a WIP

class Observable {
  constructor(subscribe) {
    this._subscribe = subscribe
  }

  subscribe(onNext, onError = () => {}, onCompleted = () => {}) {
    if (typeof onNext === 'function') {
      return this._subscribe({
        onNext,
        onError,
        onCompleted
      })
    }
    return this._subscribe(onNext)
  }

  map(projectionFunction) {
    return new Observable(observer =>
      this.subscribe(e =>
        observer.onNext(projectionFunction(e))
      )
    )
  }

  filter(predicateFunction) {
    return new Observable(observer => {
      this.subscribe(e => {
        if (predicateFunction(e)) observer.onNext(e)
      })
    })
  }

  take(num) {
    return new Observable(observer => {
      let counter = 0;
      const subscription = this.subscribe(e => {
        observer.onNext(e)
        counter++
        if (counter === num) {
          observer.onCompleted()
          subscription.dispose()
        }
      })
    })
  }
}

Observable.fromEvent = (dom, event) => {
  return new Observable(observer => {
    const handler = e => observer.onNext(e)
    dom.addEventListener(event, handler)

    return () => {
      console.log('disposed')
      dom.removeEventListener(event, handler)
    }
  })
}

Observable.fromObservations = (obj) => {
  return new Observable(observer => {
    const handler = e => observer.onNext(e)
    Object.observe(obj, handler)

    return () => {
      console.log('disposed')
      Object.unobserve(obj, handler)
    }
  })
}

const keyPresses = Observable
.fromEvent(document.getElementById('input'), 'keypress')
.map(eventPassedOver => eventPassedOver.key)

keyPresses.subscribe(x => console.log(x))
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<input id="input" />
	<script src="observable.js"></script>
	</body>
	</html>
	// Creating an observable ES2015 class to better understand
	// how reactive programming works.
	// This is a WIP

	class Observable {
	constructor(subscribe) {
	this._subscribe = subscribe
	}

	subscribe(onNext, onError = () => {}, onCompleted = () => {}) {
	if (typeof onNext === 'function') {
	return this._subscribe({
	onNext,
	onError,
	onCompleted
	})
	}
	return this._subscribe(onNext)
	}

	map(projectionFunction) {
	return new Observable(observer =>
	this.subscribe(e =>
	observer.onNext(projectionFunction(e))
	)
	)
	}

	filter(predicateFunction) {
	return new Observable(observer => {
	this.subscribe(e => {
	if (predicateFunction(e)) observer.onNext(e)
	})
	})
	}

	take(num) {
	return new Observable(observer => {
	let counter = 0;
	const subscription = this.subscribe(e => {
	observer.onNext(e)
	counter++
	if (counter === num) {
	observer.onCompleted()
	subscription.dispose()
	}
	})
	})
	}
	}

	Observable.fromEvent = (dom, event) => {
	return new Observable(observer => {
	const handler = e => observer.onNext(e)
	dom.addEventListener(event, handler)

	return () => {
	console.log('disposed')
	dom.removeEventListener(event, handler)
	}
	})
	}

	Observable.fromObservations = (obj) => {
	return new Observable(observer => {
	const handler = e => observer.onNext(e)
	Object.observe(obj, handler)

	return () => {
	console.log('disposed')
	Object.unobserve(obj, handler)
	}
	})
	}

	const keyPresses = Observable
	.fromEvent(document.getElementById('input'), 'keypress')
	.map(eventPassedOver => eventPassedOver.key)

	keyPresses.subscribe(x => console.log(x))