NetanelBasal/share-31.html

## share-31.html
<!DOCTYPE html>
<html lang="en">
  <head></head>
  <script>
    function log(msg) {
      console.log(`%c${msg}`, `color: #2196F3; font-weight: 600;`);
    }
    function noop() {}
  </script>
  <body></body>

  <script>
    class Observable {
      constructor(subscriptionFn) {
        this.subscriptionFn = subscriptionFn;
      }

      subscribe(observer) {
        return this.subscriptionFn(observer);
      }

      pipe(...operators) {
        return operators.reduce((source, next) => next(source), this);
      }
    }

    class Subject extends Observable {
      constructor() {
        super();
        this.observers = [];
      }

      subscribe(observer) {
        this.observers.push(observer);
      }

      next(value) {
        this.observers.forEach(observer => observer.next(value));
      }

      error(error) {
        this.observers.forEach(observer => observer.error(error));
      }

      complete() {
        this.observers.forEach(observer => observer.complete());
      }
    }

    function http(url) {
      return new Observable(observer => {
        log('Observable execution: http');
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('load', function(e) {
          if (xhr.readyState === 4 && xhr.status === 200) {
            observer.next(JSON.parse(xhr.responseText));
          }
        });
        xhr.open('GET', url);
        xhr.send();
      });
    }

    function map(fn) {
      return source => {
        return new Observable(observer => {
          log('Observable execution: map');
          return source.subscribe({
            next(value) {
              observer.next(fn(value));
            }
          });
        });
      };
    }

    const observer = tag => ({
      next(value) {
        console.log(`${tag}:`, value);
      }
    });

    function of(...values) {
      return new Observable(observer => {
        log('Observable execution: of');
        values.forEach(value => observer.next(value));
      });
    }

    class ReplaySubject extends Subject {
      constructor(bufferSize) {
        super();
        this.observers = [];
        this.bufferSize = bufferSize;
        this.buffer = [];
      }

      subscribe(observer) {
        this.buffer.forEach(val => observer.next(val));
        this.observers.push(observer);
      }

      next(value) {
        if (this.buffer.length === this.bufferSize) {
          this.buffer.shift();
        }

        this.buffer.push(value);
        this.observers.forEach(observer => observer.next(value));
      }
    }

    const subject = new ReplaySubject(3);
    of(1, 2, 3).subscribe(subject);

    subject.subscribe(observer('subscriber1'));
    subject.subscribe(observer('subscriber2'));

    // BehaviorSubject
    // class BehaviorSubject extends Subject {
    //   constructor(initialValue) {
    //     super();
    //     this.observers = [];

    //     if (typeof initialValue === 'undefined') {
    //       throw new Error('You need to provide initial value');
    //     }

    //     this.lastValue = initialValue;
    //   }

    //   subscribe(observer) {
    //     this.observers.push(observer);
    //     observer.next(this.lastValue);
    //   }

    //   next(value) {
    //     this.lastValue = value;
    //     this.observers.forEach(observer => observer.next(value));
    //   }

    //   getValue() {
    //     return this.lastValue;
    //   }
    // }
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head></head>
	<script>
	function log(msg) {
	console.log(`%c${msg}`, `color: #2196F3; font-weight: 600;`);
	}
	function noop() {}
	</script>
	<body></body>

	<script>
	class Observable {
	constructor(subscriptionFn) {
	this.subscriptionFn = subscriptionFn;
	}

	subscribe(observer) {
	return this.subscriptionFn(observer);
	}

	pipe(...operators) {
	return operators.reduce((source, next) => next(source), this);
	}
	}

	class Subject extends Observable {
	constructor() {
	super();
	this.observers = [];
	}

	subscribe(observer) {
	this.observers.push(observer);
	}

	next(value) {
	this.observers.forEach(observer => observer.next(value));
	}

	error(error) {
	this.observers.forEach(observer => observer.error(error));
	}

	complete() {
	this.observers.forEach(observer => observer.complete());
	}
	}

	function http(url) {
	return new Observable(observer => {
	log('Observable execution: http');
	const xhr = new XMLHttpRequest();
	xhr.addEventListener('load', function(e) {
	if (xhr.readyState === 4 && xhr.status === 200) {
	observer.next(JSON.parse(xhr.responseText));
	}
	});
	xhr.open('GET', url);
	xhr.send();
	});
	}

	function map(fn) {
	return source => {
	return new Observable(observer => {
	log('Observable execution: map');
	return source.subscribe({
	next(value) {
	observer.next(fn(value));
	}
	});
	});
	};
	}

	const observer = tag => ({
	next(value) {
	console.log(`${tag}:`, value);
	}
	});

	function of(...values) {
	return new Observable(observer => {
	log('Observable execution: of');
	values.forEach(value => observer.next(value));
	});
	}

	class ReplaySubject extends Subject {
	constructor(bufferSize) {
	super();
	this.observers = [];
	this.bufferSize = bufferSize;
	this.buffer = [];
	}

	subscribe(observer) {
	this.buffer.forEach(val => observer.next(val));
	this.observers.push(observer);
	}

	next(value) {
	if (this.buffer.length === this.bufferSize) {
	this.buffer.shift();
	}

	this.buffer.push(value);
	this.observers.forEach(observer => observer.next(value));
	}
	}

	const subject = new ReplaySubject(3);
	of(1, 2, 3).subscribe(subject);

	subject.subscribe(observer('subscriber1'));
	subject.subscribe(observer('subscriber2'));

	// BehaviorSubject
	// class BehaviorSubject extends Subject {
	// constructor(initialValue) {
	// super();
	// this.observers = [];

	// if (typeof initialValue === 'undefined') {
	// throw new Error('You need to provide initial value');
	// }

	// this.lastValue = initialValue;
	// }

	// subscribe(observer) {
	// this.observers.push(observer);
	// observer.next(this.lastValue);
	// }

	// next(value) {
	// this.lastValue = value;
	// this.observers.forEach(observer => observer.next(value));
	// }

	// getValue() {
	// return this.lastValue;
	// }
	// }
	</script>
	</html>