FeliciousX/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin
toying with cyclejs and cycle/dom

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

## index.js
import xs from 'xstream'
import {run} from '@cycle/xstream-run'
import {makeDOMDriver, div, h1} from '@cycle/dom'

function main (sources) {
  const move$ = sources.DOM.select('body').events('mousemove')

  const state$ = move$
    .map( e => ({ x: e.clientX, y: e.clientY }))
    .map(({x, y}) => ({ x: x - 40, y: y - 40 }))
    .startWith({x: 0, y: 0})
    .remember()

  const worldElem = ({x, y}) => div({
    style: {
      fontSize: `3em`,
      position: 'absolute',
      left: `${x}px`,
      top: `${y}px`,
      color: `#${(x+y).toString(16)}`,
      cursor: `default`
    }
  }, 'Hello')

  const vTree$ = state$
    .map( worldElem )

  return {
    DOM: vTree$,
    debug: state$
  }
}

requestAnimationFrame( x => {
    run(main, {
    DOM: makeDOMDriver('#container'),
    debug: stream => stream.addListener({next: console.log})
  })
})

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "xstream": "9.3.0",
    "@cycle/xstream-run": "4.2.0",
    "@cycle/dom": "14.3.0"
  }
}

## transpiled.js
'use strict';

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _xstreamRun = require('@cycle/xstream-run');

var _dom = require('@cycle/dom');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function main(sources) {
  var move$ = sources.DOM.select('body').events('mousemove');

  var state$ = move$.map(function (e) {
    return { x: e.clientX, y: e.clientY };
  }).map(function (_ref) {
    var x = _ref.x;
    var y = _ref.y;
    return { x: x - 40, y: y - 40 };
  }).startWith({ x: 0, y: 0 }).remember();

  var worldElem = function worldElem(_ref2) {
    var x = _ref2.x;
    var y = _ref2.y;
    return (0, _dom.div)({
      style: {
        fontSize: '3em',
        position: 'absolute',
        left: x + 'px',
        top: y + 'px',
        color: '#' + (x + y).toString(16),
        cursor: 'default'
      }
    }, 'Hello');
  };

  var vTree$ = state$.map(worldElem);

  return {
    DOM: vTree$,
    debug: state$
  };
}

requestAnimationFrame(function (x) {
  (0, _xstreamRun.run)(main, {
    DOM: (0, _dom.makeDOMDriver)('#container'),
    debug: function debug(stream) {
      return stream.addListener({ next: console.log });
    }
  });
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	</head>
	<body>
	<div id="container"></div>
	</body>
	</html>
	import xs from 'xstream'
	import {run} from '@cycle/xstream-run'
	import {makeDOMDriver, div, h1} from '@cycle/dom'

	function main (sources) {
	const move$ = sources.DOM.select('body').events('mousemove')

	const state$ = move$
	.map( e => ({ x: e.clientX, y: e.clientY }))
	.map(({x, y}) => ({ x: x - 40, y: y - 40 }))
	.startWith({x: 0, y: 0})
	.remember()

	const worldElem = ({x, y}) => div({
	style: {
	fontSize: `3em`,
	position: 'absolute',
	left: `${x}px`,
	top: `${y}px`,
	color: `#${(x+y).toString(16)}`,
	cursor: `default`
	}
	}, 'Hello')

	const vTree$ = state$
	.map( worldElem )

	return {
	DOM: vTree$,
	debug: state$
	}
	}

	requestAnimationFrame( x => {
	run(main, {
	DOM: makeDOMDriver('#container'),
	debug: stream => stream.addListener({next: console.log})
	})
	})
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"xstream": "9.3.0",
	"@cycle/xstream-run": "4.2.0",
	"@cycle/dom": "14.3.0"
	}
	}
	'use strict';

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _xstreamRun = require('@cycle/xstream-run');

	var _dom = require('@cycle/dom');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	function main(sources) {
	var move$ = sources.DOM.select('body').events('mousemove');

	var state$ = move$.map(function (e) {
	return { x: e.clientX, y: e.clientY };
	}).map(function (_ref) {
	var x = _ref.x;
	var y = _ref.y;
	return { x: x - 40, y: y - 40 };
	}).startWith({ x: 0, y: 0 }).remember();

	var worldElem = function worldElem(_ref2) {
	var x = _ref2.x;
	var y = _ref2.y;
	return (0, _dom.div)({
	style: {
	fontSize: '3em',
	position: 'absolute',
	left: x + 'px',
	top: y + 'px',
	color: '#' + (x + y).toString(16),
	cursor: 'default'
	}
	}, 'Hello');
	};

	var vTree$ = state$.map(worldElem);

	return {
	DOM: vTree$,
	debug: state$
	};
	}

	requestAnimationFrame(function (x) {
	(0, _xstreamRun.run)(main, {
	DOM: (0, _dom.makeDOMDriver)('#container'),
	debug: function debug(stream) {
	return stream.addListener({ next: console.log });
	}
	});
	});