Observable implementation v2

Very very naive implementation

by Julien Roche

HTML

<h1>Please enter your search terms</h1>
<p>
  <input type="text" name="terms" />
</p>
<br />
<hr />
<br />
<fieldset>
  <legend>Results</legend>
  <section></section>
</fieldset>

JavaScript 1.7

const inputElement = document.querySelector('input');
const resultsElement = document.querySelector('section');

function mapStringToArray(termsString) {
	return [...termsString];
}

function reverseTerms(terms) {
	return terms.reverse().join('');
}


class Observable {
	constructor(pipeline = []) {
  	this._pipeline = pipeline;
    this._child = [];
    this._success = null;
    this._error = null;
  }
  
  next(value) {
  	if (this._success) {
    	try {
      	let data = value;
        for (const step of this._pipeline) {
					data = step(data);
        }
        
        this._success(data);
      
      } catch (e) {
      	if (this._error) {
        	this._error(e);
        }
      }
    }
    
    for (const observable of this._child) {
    	return observable.next(value);
    }
  }
  
  pipe(...steps) {
  	Array.prototype.push.apply(this._pipeline, steps);
    const observable = new Observable([...this._pipeline]);
    this._child.push(observable);
    return observable;
  }
  
  subscribe(success, error) {
  	this._success = success;
    this._error = error;
  }

	static fromEvent(element, eventName) {
    const observable = new Observable();
    const handler = (event) => observable.next(element.value);

    element.addEventListener(eventName, handler, false);

    return observable;
  }
}

Observable
	.fromEvent(inputElement, 'input')
  .pipe(
  	mapStringToArray,
    reverseTerms
  )
  .subscribe(
  	(results) => resultsElement.textContent = results,
    console.error
  );