chenxeed/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 -->
  <div id="app-container"></div>
</body>
</html>

## index.js
import {run} from '@cycle/run'
import {div, label, input, button, hr, h1, makeDOMDriver} from '@cycle/dom'
import xs from 'xstream';
import sampleCombine from 'xstream/extra/sampleCombine';

/**
 In this gist, I want to create an an input button that can be used
 to submit name, and also can be used to reset.

 My question is on reset, how can I reset the value in input$ as well?
**/

function main(sources) {
  const input$ = sources.DOM.select('.field').events('change')
  const submit$ = sources.DOM.select('button.submit').events('click')
  const reset$ = sources.DOM.select('button.reset').events('click')


  const name$ = submit$
    .compose( sampleCombine(input$.map(ev => ev.target.value) ) )
    .map( ([submit, input]) => input )
    .startWith('')

  const resetValue$ = reset$.mapTo('');

  const vdom$ = xs.merge(name$, resetValue$).map(name =>
    div([
      label('Name:'),
      input('.field', {attrs: {type: 'text', value: name}}),
      button('.submit', 'Submit'),
      button('.reset', 'Reset'),
      hr(),
      h1('Hello ' + name),
    ])
  )

  return {
    DOM: vdom$
  }
}

run(main, { DOM: makeDOMDriver('#app-container') })

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "@cycle/run": "3.0.0",
    "@cycle/dom": "16.0.0",
    "xstream": "10.2.0",
    "babel-runtime": "6.23.0"
  }
}

## transpiled.js
'use strict';

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _run = require('@cycle/run');

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

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _sampleCombine = require('xstream/extra/sampleCombine');

var _sampleCombine2 = _interopRequireDefault(_sampleCombine);

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

/**
 In this gist, I want to create an an input button that can be used
 to submit name, and also can be used to reset.

 My question is on reset, how can I reset the value in input$ as well?
**/

function main(sources) {
  var input$ = sources.DOM.select('.field').events('change');
  var submit$ = sources.DOM.select('button.submit').events('click');
  var reset$ = sources.DOM.select('button.reset').events('click');

  var name$ = submit$.compose((0, _sampleCombine2.default)(input$.map(function (ev) {
    return ev.target.value;
  }))).map(function (_ref) {
    var _ref2 = (0, _slicedToArray3.default)(_ref, 2);

    var submit = _ref2[0];
    var input = _ref2[1];
    return input;
  }).startWith('');

  var resetValue$ = reset$.mapTo('');

  var vdom$ = _xstream2.default.merge(name$, resetValue$).map(function (name) {
    return (0, _dom.div)([(0, _dom.label)('Name:'), (0, _dom.input)('.field', { attrs: { type: 'text', value: name } }), (0, _dom.button)('.submit', 'Submit'), (0, _dom.button)('.reset', 'Reset'), (0, _dom.hr)(), (0, _dom.h1)('Hello ' + name)]);
  });

  return {
    DOM: vdom$
  };
}

(0, _run.run)(main, { DOM: (0, _dom.makeDOMDriver)('#app-container') });
	<!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 -->
	<div id="app-container"></div>
	</body>
	</html>
	import {run} from '@cycle/run'
	import {div, label, input, button, hr, h1, makeDOMDriver} from '@cycle/dom'
	import xs from 'xstream';
	import sampleCombine from 'xstream/extra/sampleCombine';

	/**
	In this gist, I want to create an an input button that can be used
	to submit name, and also can be used to reset.

	My question is on reset, how can I reset the value in input$ as well?
	**/

	function main(sources) {
	const input$ = sources.DOM.select('.field').events('change')
	const submit$ = sources.DOM.select('button.submit').events('click')
	const reset$ = sources.DOM.select('button.reset').events('click')


	const name$ = submit$
	.compose( sampleCombine(input$.map(ev => ev.target.value) ) )
	.map( ([submit, input]) => input )
	.startWith('')

	const resetValue$ = reset$.mapTo('');

	const vdom$ = xs.merge(name$, resetValue$).map(name =>
	div([
	label('Name:'),
	input('.field', {attrs: {type: 'text', value: name}}),
	button('.submit', 'Submit'),
	button('.reset', 'Reset'),
	hr(),
	h1('Hello ' + name),
	])
	)

	return {
	DOM: vdom$
	}
	}

	run(main, { DOM: makeDOMDriver('#app-container') })
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"@cycle/run": "3.0.0",
	"@cycle/dom": "16.0.0",
	"xstream": "10.2.0",
	"babel-runtime": "6.23.0"
	}
	}
	'use strict';

	var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

	var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

	var _run = require('@cycle/run');

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

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _sampleCombine = require('xstream/extra/sampleCombine');

	var _sampleCombine2 = _interopRequireDefault(_sampleCombine);

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

	/**
	In this gist, I want to create an an input button that can be used
	to submit name, and also can be used to reset.

	My question is on reset, how can I reset the value in input$ as well?
	**/

	function main(sources) {
	var input$ = sources.DOM.select('.field').events('change');
	var submit$ = sources.DOM.select('button.submit').events('click');
	var reset$ = sources.DOM.select('button.reset').events('click');

	var name$ = submit$.compose((0, _sampleCombine2.default)(input$.map(function (ev) {
	return ev.target.value;
	}))).map(function (_ref) {
	var _ref2 = (0, _slicedToArray3.default)(_ref, 2);

	var submit = _ref2[0];
	var input = _ref2[1];
	return input;
	}).startWith('');

	var resetValue$ = reset$.mapTo('');

	var vdom$ = _xstream2.default.merge(name$, resetValue$).map(function (name) {
	return (0, _dom.div)([(0, _dom.label)('Name:'), (0, _dom.input)('.field', { attrs: { type: 'text', value: name } }), (0, _dom.button)('.submit', 'Submit'), (0, _dom.button)('.reset', 'Reset'), (0, _dom.hr)(), (0, _dom.h1)('Hello ' + name)]);
	});

	return {
	DOM: vdom$
	};
	}

	(0, _run.run)(main, { DOM: (0, _dom.makeDOMDriver)('#app-container') });