chenxeed · May 2, 2017 04:17
diff --git a/esnextbin.md b/esnextbin.md
diff --git a/index.html b/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>
diff --git a/index.js b/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') })
diff --git a/package.json b/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"
  }
 }
diff --git a/transpiled.js b/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') });