trxcllnt/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
import { Observable, ReplaySubject } from 'rxjs';

const startTime = Date.now();
const expireTime = 5 /*seconds*/;
const expireError = 'expire-cache';

const root = getRootDiv();
const info = root.appendChild(document.createElement('ul'));
const btns = root.appendChild(document.createElement('div'));
const span = root.appendChild(document.createElement('p'));
const paul = btns.appendChild(getButton('paul'));
const john = btns.appendChild(getButton('john'));

info.style.height = '100%';
info.style.float = 'right';
info.style.margin = '0px';
info.style.padding = '0px';
info.style.overflow = 'overlay';
info.style.listStyleType = 'none';

const peopleCache = {};
const loadPersonByName = loadPerson(peopleCache);
const expirePeopleAfterTimeout = expirePeople(peopleCache);

Observable.merge(
    Observable.fromEvent(paul, 'click'),
    Observable.fromEvent(john, 'click')
  )
  .map(({ target }) => target.textContent)
  .let(expirePeopleAfterTimeout)
  .distinctUntilChanged()
  .switchMap(loadPersonByName)
  .subscribe((person) => {
    span.textContent = `you clicked on ${person}`;
  });

function expirePeople(cache) {
  return function expirePeopleAfterTimeout(people) {
    return people.groupBy((person) => person,
                          (person) => person,
                          (person) => person
      .timeoutWith(expireTime * 1000, Observable.defer(() => {
        delete cache[person.key];
        log(`expired ${person.key}`);
        return Observable.empty();
      }))
      .do(() => log(`reset ${person.key} timeout`))
      .ignoreElements()
    )
    .mergeAll();
  };
}

function loadPerson (cache) {
  return function loadPersonByName (person) {
    // Do it this way if you want to allow `switchMap` to
    // cancel the pending ajax call if the user clicks a
    // different name.
    return cache[person] != null ?
      cache[person] : (
      cache[person] = Observable
        // .ajax.get(`people/${person}`)
        .defer(() => {
          log(`loading ${person}`);
          return Observable.of(person).delay(1000);
        })
        .do(() => log(`loaded ${person}`))
        .multicast(new ReplaySubject(1))
        .refCount()
      );

    /*
    // You can do it this way if you want the ajax call to
    // stay pending once its made. Normally connecting a
    // ConnectableObservable would leak memory, but it
    // doesn't in this case since we remove each person
    // from the cache on timeout
    if (cache[person] != null) {
      return cache[person];
    }

    const loadPerson = Observable
        // .ajax.get(`people/${person}`)
        .defer(() => {
          log(`loading ${person}`);
          return Observable.of(person).delay(1000);
        })
        .do(() => log(`loaded ${person}`))
        .multicast(new ReplaySubject(1));

    loadPerson.connect();

    return cache[person] = loadPerson;
    */
  };
}

function log (message) {
  info.appendChild(document.createElement('li'))
      .textContent = `@${Math.round((Date.now() - startTime) / 1000)}s: ${message}`;
}

function getRootDiv(root) {
  root = (
    document.getElementById('app') ||
    document.body.appendChild((
      root = document.createElement('div')) && (
      root.id = 'app') && (
      root)
    )
  );
  root.style.top = 0;
  root.style.left = 0;
  root.style.right = 0;
  root.style.bottom = 0;
  root.style.padding = '10px';
  root.style.overflow = 'hidden';
  root.style.position = 'absolute';
  root.style['transform-style'] = 'preserve-3d';
  return root;
}

function getButton(name) {
  const button = document.createElement('button');
  button.textContent = name;
  button.style.margin = `5px 5px`;
  button.style.padding = `5px`;
  return button;
}

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "rxjs": "5.0.0-beta.9"
  }
}

## transpiled.js
'use strict';

var _rxjs = require('rxjs');

var startTime = Date.now();
var expireTime = 5 /*seconds*/;
var expireError = 'expire-cache';

var root = getRootDiv();
var info = root.appendChild(document.createElement('ul'));
var btns = root.appendChild(document.createElement('div'));
var span = root.appendChild(document.createElement('p'));
var paul = btns.appendChild(getButton('paul'));
var john = btns.appendChild(getButton('john'));

info.style.height = '100%';
info.style.float = 'right';
info.style.margin = '0px';
info.style.padding = '0px';
info.style.overflow = 'overlay';
info.style.listStyleType = 'none';

var peopleCache = {};
var loadPersonByName = loadPerson(peopleCache);
var expirePeopleAfterTimeout = expirePeople(peopleCache);

_rxjs.Observable
// .ajax.get(`people/${person}`)
.merge(_rxjs.Observable.fromEvent(paul, 'click'), _rxjs.Observable.fromEvent(john, 'click')).map(function (_ref) {
  var target = _ref.target;
  return target.textContent;
}).let(expirePeopleAfterTimeout).distinctUntilChanged().switchMap(loadPersonByName).subscribe(function (person) {
  span.textContent = 'you clicked on ' + person;
});

function expirePeople(cache) {
  return function expirePeopleAfterTimeout(people) {
    return people.groupBy(function (person) {
      return person;
    }, function (person) {
      return person;
    }, function (person) {
      return person.timeoutWith(expireTime * 1000, _rxjs.Observable.defer(function () {
        delete cache[person.key];
        log('expired ' + person.key);
        return _rxjs.Observable.empty();
      })).do(function () {
        return log('reset ' + person.key + ' timeout');
      }).ignoreElements();
    }).mergeAll();
  };
}

function loadPerson(cache) {
  return function loadPersonByName(person) {
    // Do it this way if you want to allow `switchMap` to
    // cancel the pending ajax call if the user clicks a
    // different name.
    return cache[person] != null ? cache[person] : cache[person] = _rxjs.Observable.defer(function () {
      log('loading ' + person);
      return _rxjs.Observable.of(person).delay(1000);
    }).do(function () {
      return log('loaded ' + person);
    }).multicast(new _rxjs.ReplaySubject(1)).refCount();

    /*
    // You can do it this way if you want the ajax call to
    // stay pending once its made. Normally connecting a
    // ConnectableObservable would leak memory, but it
    // doesn't in this case since we remove each person
    // from the cache on timeout
    if (cache[person] != null) {
      return cache[person];
    }
     const loadPerson = Observable
        // .ajax.get(`people/${person}`)
        .defer(() => {
          log(`loading ${person}`);
          return Observable.of(person).delay(1000);
        })
        .do(() => log(`loaded ${person}`))
        .multicast(new ReplaySubject(1));
     loadPerson.connect();
     return cache[person] = loadPerson;
    */
  };
}

function log(message) {
  info.appendChild(document.createElement('li')).textContent = '@' + Math.round((Date.now() - startTime) / 1000) + 's: ' + message;
}

function getRootDiv(root) {
  root = document.getElementById('app') || document.body.appendChild((root = document.createElement('div')) && (root.id = 'app') && root);
  root.style.top = 0;
  root.style.left = 0;
  root.style.right = 0;
  root.style.bottom = 0;
  root.style.padding = '10px';
  root.style.overflow = 'hidden';
  root.style.position = 'absolute';
  root.style['transform-style'] = 'preserve-3d';
  return root;
}

function getButton(name) {
  var button = document.createElement('button');
  button.textContent = name;
  button.style.margin = '5px 5px';
  button.style.padding = '5px';
  return button;
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	</body>
	</html>
	import { Observable, ReplaySubject } from 'rxjs';

	const startTime = Date.now();
	const expireTime = 5 /seconds/;
	const expireError = 'expire-cache';

	const root = getRootDiv();
	const info = root.appendChild(document.createElement('ul'));
	const btns = root.appendChild(document.createElement('div'));
	const span = root.appendChild(document.createElement('p'));
	const paul = btns.appendChild(getButton('paul'));
	const john = btns.appendChild(getButton('john'));

	info.style.height = '100%';
	info.style.float = 'right';
	info.style.margin = '0px';
	info.style.padding = '0px';
	info.style.overflow = 'overlay';
	info.style.listStyleType = 'none';

	const peopleCache = {};
	const loadPersonByName = loadPerson(peopleCache);
	const expirePeopleAfterTimeout = expirePeople(peopleCache);

	Observable.merge(
	Observable.fromEvent(paul, 'click'),
	Observable.fromEvent(john, 'click')
	)
	.map(({ target }) => target.textContent)
	.let(expirePeopleAfterTimeout)
	.distinctUntilChanged()
	.switchMap(loadPersonByName)
	.subscribe((person) => {
	span.textContent = `you clicked on ${person}`;
	});

	function expirePeople(cache) {
	return function expirePeopleAfterTimeout(people) {
	return people.groupBy((person) => person,
	(person) => person,
	(person) => person
	.timeoutWith(expireTime * 1000, Observable.defer(() => {
	delete cache[person.key];
	log(`expired ${person.key}`);
	return Observable.empty();
	}))
	.do(() => log(`reset ${person.key} timeout`))
	.ignoreElements()
	)
	.mergeAll();
	};
	}

	function loadPerson (cache) {
	return function loadPersonByName (person) {
	// Do it this way if you want to allow `switchMap` to
	// cancel the pending ajax call if the user clicks a
	// different name.
	return cache[person] != null ?
	cache[person] : (
	cache[person] = Observable
	// .ajax.get(`people/${person}`)
	.defer(() => {
	log(`loading ${person}`);
	return Observable.of(person).delay(1000);
	})
	.do(() => log(`loaded ${person}`))
	.multicast(new ReplaySubject(1))
	.refCount()
	);

	/*
	// You can do it this way if you want the ajax call to
	// stay pending once its made. Normally connecting a
	// ConnectableObservable would leak memory, but it
	// doesn't in this case since we remove each person
	// from the cache on timeout
	if (cache[person] != null) {
	return cache[person];
	}

	const loadPerson = Observable
	// .ajax.get(`people/${person}`)
	.defer(() => {
	log(`loading ${person}`);
	return Observable.of(person).delay(1000);
	})
	.do(() => log(`loaded ${person}`))
	.multicast(new ReplaySubject(1));

	loadPerson.connect();

	return cache[person] = loadPerson;
	*/
	};
	}

	function log (message) {
	info.appendChild(document.createElement('li'))
	.textContent = `@${Math.round((Date.now() - startTime) / 1000)}s: ${message}`;
	}

	function getRootDiv(root) {
	root = (
	document.getElementById('app') \|\|
	document.body.appendChild((
	root = document.createElement('div')) && (
	root.id = 'app') && (
	root)
	)
	);
	root.style.top = 0;
	root.style.left = 0;
	root.style.right = 0;
	root.style.bottom = 0;
	root.style.padding = '10px';
	root.style.overflow = 'hidden';
	root.style.position = 'absolute';
	root.style['transform-style'] = 'preserve-3d';
	return root;
	}

	function getButton(name) {
	const button = document.createElement('button');
	button.textContent = name;
	button.style.margin = `5px 5px`;
	button.style.padding = `5px`;
	return button;
	}
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"rxjs": "5.0.0-beta.9"
	}
	}
	'use strict';

	var _rxjs = require('rxjs');

	var startTime = Date.now();
	var expireTime = 5 /seconds/;
	var expireError = 'expire-cache';

	var root = getRootDiv();
	var info = root.appendChild(document.createElement('ul'));
	var btns = root.appendChild(document.createElement('div'));
	var span = root.appendChild(document.createElement('p'));
	var paul = btns.appendChild(getButton('paul'));
	var john = btns.appendChild(getButton('john'));

	info.style.height = '100%';
	info.style.float = 'right';
	info.style.margin = '0px';
	info.style.padding = '0px';
	info.style.overflow = 'overlay';
	info.style.listStyleType = 'none';

	var peopleCache = {};
	var loadPersonByName = loadPerson(peopleCache);
	var expirePeopleAfterTimeout = expirePeople(peopleCache);

	_rxjs.Observable
	// .ajax.get(`people/${person}`)
	.merge(_rxjs.Observable.fromEvent(paul, 'click'), _rxjs.Observable.fromEvent(john, 'click')).map(function (_ref) {
	var target = _ref.target;
	return target.textContent;
	}).let(expirePeopleAfterTimeout).distinctUntilChanged().switchMap(loadPersonByName).subscribe(function (person) {
	span.textContent = 'you clicked on ' + person;
	});

	function expirePeople(cache) {
	return function expirePeopleAfterTimeout(people) {
	return people.groupBy(function (person) {
	return person;
	}, function (person) {
	return person;
	}, function (person) {
	return person.timeoutWith(expireTime * 1000, _rxjs.Observable.defer(function () {
	delete cache[person.key];
	log('expired ' + person.key);
	return _rxjs.Observable.empty();
	})).do(function () {
	return log('reset ' + person.key + ' timeout');
	}).ignoreElements();
	}).mergeAll();
	};
	}

	function loadPerson(cache) {
	return function loadPersonByName(person) {
	// Do it this way if you want to allow `switchMap` to
	// cancel the pending ajax call if the user clicks a
	// different name.
	return cache[person] != null ? cache[person] : cache[person] = _rxjs.Observable.defer(function () {
	log('loading ' + person);
	return _rxjs.Observable.of(person).delay(1000);
	}).do(function () {
	return log('loaded ' + person);
	}).multicast(new _rxjs.ReplaySubject(1)).refCount();

	/*
	// You can do it this way if you want the ajax call to
	// stay pending once its made. Normally connecting a
	// ConnectableObservable would leak memory, but it
	// doesn't in this case since we remove each person
	// from the cache on timeout
	if (cache[person] != null) {
	return cache[person];
	}
	const loadPerson = Observable
	// .ajax.get(`people/${person}`)
	.defer(() => {
	log(`loading ${person}`);
	return Observable.of(person).delay(1000);
	})
	.do(() => log(`loaded ${person}`))
	.multicast(new ReplaySubject(1));
	loadPerson.connect();
	return cache[person] = loadPerson;
	*/
	};
	}

	function log(message) {
	info.appendChild(document.createElement('li')).textContent = '@' + Math.round((Date.now() - startTime) / 1000) + 's: ' + message;
	}

	function getRootDiv(root) {
	root = document.getElementById('app') \|\| document.body.appendChild((root = document.createElement('div')) && (root.id = 'app') && root);
	root.style.top = 0;
	root.style.left = 0;
	root.style.right = 0;
	root.style.bottom = 0;
	root.style.padding = '10px';
	root.style.overflow = 'hidden';
	root.style.position = 'absolute';
	root.style['transform-style'] = 'preserve-3d';
	return root;
	}

	function getButton(name) {
	var button = document.createElement('button');
	button.textContent = name;
	button.style.margin = '5px 5px';
	button.style.padding = '5px';
	return button;
	}