A toy observables library inspired by RxJS, with pipeable operators.

- toy-observables-library.md

Toy observables library

A toy observables library inspired by RxJS, with pipeable operators.

Tutorial

https://steveholgado.com/understanding-observables

Example usage

<input id="textbox" type="text" />

const textbox = document.querySelector('#textbox')

const obs$ = fromEvent(textbox, 'keyup')
  .pipe(
    filter(e => e.keyCode === 13), // "Enter" key
    map(e => e.target.value)
  )

const subscription = obs$.subscribe(v => console.log(v))

setTimeout(() => {
  subscription.unsubscribe()
}, 5000)

index.js

class Observable {
  constructor(producer) {
    this._producer = producer
  }

  subscribe(observer) {
    return this._producer(observer)
  }

  pipe(...operators) {
    return operators.reduce(
      (src, operator) => operator(src),
      this
    )
  }
}


/* CREATION
************************************************** */
function fromArray(values) {
  return new Observable(observer => {
    values.forEach(v => observer(v))

    return {
      unsubscribe() {} // No-op
    }
  })
}

function fromEvent(element, eventName) {
  return new Observable(observer => {
    element.addEventListener(eventName, observer)

    return {
      unsubscribe() {
        element.removeEventListener(eventName, observer)
      }
    }
  })
}


/* OPERATORS
************************************************** */
function filter(predicateFn) {
  return function operator(srcObservable) {
    return new Observable(observer => {

      const subscription = srcObservable.subscribe(v => {
        if (predicateFn(v)) {
          observer(v)
        }
      })

      return subscription
    })
  }
}

function map(transformFn) {
  return function operator(srcObservable) {
    return new Observable(observer => {
      
      const subscription = srcObservable.subscribe(v => {
        observer(transformFn(v))
      })

      return subscription
    })
  }
}