TylorS/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

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

</body>
</html>

## index.js
const Cycle = require('@cycle/core');
const CycleDOM = require('@cycle/dom');
const {makeDOMDriver, h} = CycleDOM;

const {makeHTTPDriver} = require('@cycle/http');
const Rx = require('rx');
const {restartable} = require('cycle-restart');

function main (sources) {
  const ITEMS_URL ='http://jsonplaceholder.typicode.com/comments'; //'http://localhost:3000/items';
  const getItems$ = Rx.Observable
    .of({
        url: ITEMS_URL,
        method: 'GET'
      });

  const item$ = sources.HTTP
    .filter(res$ => res$.request.url.indexOf(ITEMS_URL) === 0)
    .switch()
    .map(res => JSON.parse(res.text))

  const vtree$ = item$.map(allItems =>
    div(allItems.map(oneItem => div(oneItem.body))),
    ).startWith('Loading...');

  const sinks = {
    DOM: vtree$,
    HTTP: getItems$
  };
  return sinks;
}

const sources = {
  DOM: restartable(makeDOMDriver('#app'), {pauseSinksWhileReplaying: false}),
  HTTP: restartable(makeHTTPDriver()),
}

Cycle.run(main, sources);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "@cycle/core": "6.0.3",
    "@cycle/dom": "9.1.0",
    "@cycle/http": "8.2.0",
    "rx": "4.0.8",
    "cycle-restart": "0.0.7"
  }
}

## transpiled.js
'use strict';

var Cycle = require('@cycle/core');
var CycleDOM = require('@cycle/dom');
var makeDOMDriver = CycleDOM.makeDOMDriver;
var h = CycleDOM.h;

var _require = require('@cycle/http');

var makeHTTPDriver = _require.makeHTTPDriver;

var Rx = require('rx');

var _require2 = require('cycle-restart');

var restartable = _require2.restartable;

function main(sources) {
  var ITEMS_URL = 'http://jsonplaceholder.typicode.com/comments'; //'http://localhost:3000/items';
  var getItems$ = Rx.Observable.of({
    url: ITEMS_URL,
    method: 'GET'
  });

  var item$ = sources.HTTP.filter(function (res$) {
    return res$.request.url.indexOf(ITEMS_URL) === 0;
  }).switch().map(function (res) {
    return JSON.parse(res.text);
  });

  var vtree$ = item$.map(function (allItems) {
    return div(allItems.map(function (oneItem) {
      return div(oneItem.body);
    }));
  }).startWith('Loading...');

  var sinks = {
    DOM: vtree$,
    HTTP: getItems$
  };
  return sinks;
}

var sources = {
  DOM: restartable(makeDOMDriver('#app'), { pauseSinksWhileReplaying: false }),
  HTTP: restartable(makeHTTPDriver())
};

Cycle.run(main, sources);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNext Bin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="app"></div>

	</body>
	</html>
	const Cycle = require('@cycle/core');
	const CycleDOM = require('@cycle/dom');
	const {makeDOMDriver, h} = CycleDOM;

	const {makeHTTPDriver} = require('@cycle/http');
	const Rx = require('rx');
	const {restartable} = require('cycle-restart');

	function main (sources) {
	const ITEMS_URL ='http://jsonplaceholder.typicode.com/comments'; //'http://localhost:3000/items';
	const getItems$ = Rx.Observable
	.of({
	url: ITEMS_URL,
	method: 'GET'
	});

	const item$ = sources.HTTP
	.filter(res$ => res$.request.url.indexOf(ITEMS_URL) === 0)
	.switch()
	.map(res => JSON.parse(res.text))

	const vtree$ = item$.map(allItems =>
	div(allItems.map(oneItem => div(oneItem.body))),
	).startWith('Loading...');

	const sinks = {
	DOM: vtree$,
	HTTP: getItems$
	};
	return sinks;
	}

	const sources = {
	DOM: restartable(makeDOMDriver('#app'), {pauseSinksWhileReplaying: false}),
	HTTP: restartable(makeHTTPDriver()),
	}

	Cycle.run(main, sources);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"@cycle/core": "6.0.3",
	"@cycle/dom": "9.1.0",
	"@cycle/http": "8.2.0",
	"rx": "4.0.8",
	"cycle-restart": "0.0.7"
	}
	}
	'use strict';

	var Cycle = require('@cycle/core');
	var CycleDOM = require('@cycle/dom');
	var makeDOMDriver = CycleDOM.makeDOMDriver;
	var h = CycleDOM.h;

	var _require = require('@cycle/http');

	var makeHTTPDriver = _require.makeHTTPDriver;

	var Rx = require('rx');

	var _require2 = require('cycle-restart');

	var restartable = _require2.restartable;

	function main(sources) {
	var ITEMS_URL = 'http://jsonplaceholder.typicode.com/comments'; //'http://localhost:3000/items';
	var getItems$ = Rx.Observable.of({
	url: ITEMS_URL,
	method: 'GET'
	});

	var item$ = sources.HTTP.filter(function (res$) {
	return res$.request.url.indexOf(ITEMS_URL) === 0;
	}).switch().map(function (res) {
	return JSON.parse(res.text);
	});

	var vtree$ = item$.map(function (allItems) {
	return div(allItems.map(function (oneItem) {
	return div(oneItem.body);
	}));
	}).startWith('Loading...');

	var sinks = {
	DOM: vtree$,
	HTTP: getItems$
	};
	return sinks;
	}

	var sources = {
	DOM: restartable(makeDOMDriver('#app'), { pauseSinksWhileReplaying: false }),
	HTTP: restartable(makeHTTPDriver())
	};

	Cycle.run(main, sources);