Skip to content

Instantly share code, notes, and snippets.

@FeliciousX
Created May 2, 2017 07:18
Show Gist options
  • Save FeliciousX/bbf6ce194a433c1381dcf3c4c43e27f5 to your computer and use it in GitHub Desktop.
Save FeliciousX/bbf6ce194a433c1381dcf3c4c43e27f5 to your computer and use it in GitHub Desktop.
esnextbin sketch
<!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, makeDOMDriver} from '@cycle/dom'
import xs from 'xstream';
function main(sources) {
const input$ = sources.DOM.select('.field').events('change')
const name$ = input$
.mapTo('') // clear input on change
const vdom$ = name$
.startWith( '' )
.map(name =>
div([
label('Name:'),
input('.field', {
props: {type: 'text', value: name},
hook: {
// if you comment the prepatch hook, it can never reset
prepatch: (old) => (console.log(old.data.props), old.data.props.value = old.elm.value)
}
})
])
)
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"
}
}
'use strict';
var _run = require('@cycle/run');
var _dom = require('@cycle/dom');
var _xstream = require('xstream');
var _xstream2 = _interopRequireDefault(_xstream);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function main(sources) {
var input$ = sources.DOM.select('.field').events('change');
var name$ = input$.mapTo(''); // clear input on change
var vdom$ = name$.startWith('').map(function (name) {
return (0, _dom.div)([(0, _dom.label)('Name:'), (0, _dom.input)('.field', {
props: { type: 'text', value: name },
hook: {
// if you comment the prepatch hook, it can never reset
prepatch: function prepatch(old) {
return console.log(old.data.props), old.data.props.value = old.elm.value;
}
}
})]);
});
return {
DOM: vdom$
};
}
(0, _run.run)(main, { DOM: (0, _dom.makeDOMDriver)('#app-container') });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment