Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 26, 2016 20:02
Show Gist options
  • Save anonymous/20a16f0eb1f9aa4baf29d8fac9dd30e6 to your computer and use it in GitHub Desktop.
Save anonymous/20a16f0eb1f9aa4baf29d8fac9dd30e6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/manozo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script type="text/javascript" src="http://rawgit.com/cyclejs/cycle-core/v6.0.0/dist/cycle.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-dom/v9.0.1/dist/cycle-dom.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-http-driver/v7.0.0/dist/cycle-http-driver.min.js"></script>
</head>
<body>
<div id="app"></div>
<script id="jsbin-javascript">
'use strict';
var _CycleDOM = CycleDOM;
var h4 = _CycleDOM.h4;
var a = _CycleDOM.a;
var button = _CycleDOM.button;
var p = _CycleDOM.p;
var label = _CycleDOM.label;
var input = _CycleDOM.input;
var h1 = _CycleDOM.h1;
var hr = _CycleDOM.hr;
var div = _CycleDOM.div;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;
// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// dom write effect: data display
function main(sources) {
var clickEvent$ = sources.DOM.select('.get-first').events('click');
var request$ = clickEvent$.map(function () {
return {
url: 'https://jsonplaceholder.typicode.com/users/1',
method: 'GET'
};
});
var response$$ = sources.HTTP.filter(function (response$) {
return response$.request.url === 'https://jsonplaceholder.typicode.com/users/1';
});
var response$ = response$$['switch']();
var firstUser$ = response$.map(function (response) {
return response.body;
}).startWith(null);
return {
DOM: firstUser$.map(function (firstUser) {
return div([button('.get-first', 'Get first user'), firstUser === null ? null : div('.user-details', [h1('.user-name', firstUser.name), h4('.user-email', firstUser.email), a('.user-website', { href: firstUser.website }, firstUser.website)])]);
}),
HTTP: request$
};
}
// source: input (read) effects
// sink: output (write) effects
function consoleLogDriver(msg$) {
msg$.subscribe(function (msg) {
return console.log(msg);
});
}
var drivers = {
HTTP: makeHTTPDriver(),
DOM: makeDOMDriver('#app')
};
Cycle.run(main, drivers);
</script>
<script id="jsbin-source-javascript" type="text/javascript">const {h4, a, button, p, label, input, h1, hr, div, makeDOMDriver} = CycleDOM;
const {makeHTTPDriver} = CycleHTTPDriver;
// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// dom write effect: data display
function main(sources) {
const clickEvent$ = sources.DOM.select('.get-first').events('click');
const request$ = clickEvent$.map(() => {
return {
url: 'https://jsonplaceholder.typicode.com/users/1',
method: 'GET',
}
})
const response$$ = sources.HTTP
.filter(response$ => response$.request.url === 'https://jsonplaceholder.typicode.com/users/1');
const response$ = response$$.switch();
const firstUser$ = response$.map(response => response.body).startWith(null);
return {
DOM: firstUser$.map(firstUser =>
div([
button('.get-first', 'Get first user'),
firstUser === null ? null : div('.user-details', [
h1('.user-name', firstUser.name),
h4('.user-email', firstUser.email),
a('.user-website', {href: firstUser.website}, firstUser.website)
])
])
),
HTTP: request$
};
}
// source: input (read) effects
// sink: output (write) effects
function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
}
const drivers = {
HTTP: makeHTTPDriver(),
DOM: makeDOMDriver('#app')
}
Cycle.run(main, drivers);</script></body>
</html>
Raw
jsbin.manozo.js
'use strict';
var _CycleDOM = CycleDOM;
var h4 = _CycleDOM.h4;
var a = _CycleDOM.a;
var button = _CycleDOM.button;
var p = _CycleDOM.p;
var label = _CycleDOM.label;
var input = _CycleDOM.input;
var h1 = _CycleDOM.h1;
var hr = _CycleDOM.hr;
var div = _CycleDOM.div;
var makeDOMDriver = _CycleDOM.makeDOMDriver;
var _CycleHTTPDriver = CycleHTTPDriver;
var makeHTTPDriver = _CycleHTTPDriver.makeHTTPDriver;
// DOM read effect: button clicked
// HTTP write effect: request sent
// HTTP read effect: response received
// dom write effect: data display
function main(sources) {
var clickEvent$ = sources.DOM.select('.get-first').events('click');
var request$ = clickEvent$.map(function () {
return {
url: 'https://jsonplaceholder.typicode.com/users/1',
method: 'GET'
};
});
var response$$ = sources.HTTP.filter(function (response$) {
return response$.request.url === 'https://jsonplaceholder.typicode.com/users/1';
});
var response$ = response$$['switch']();
var firstUser$ = response$.map(function (response) {
return response.body;
}).startWith(null);
return {
DOM: firstUser$.map(function (firstUser) {
return div([button('.get-first', 'Get first user'), firstUser === null ? null : div('.user-details', [h1('.user-name', firstUser.name), h4('.user-email', firstUser.email), a('.user-website', { href: firstUser.website }, firstUser.website)])]);
}),
HTTP: request$
};
}
// source: input (read) effects
// sink: output (write) effects
function consoleLogDriver(msg$) {
msg$.subscribe(function (msg) {
return console.log(msg);
});
}
var drivers = {
HTTP: makeHTTPDriver(),
DOM: makeDOMDriver('#app')
};
Cycle.run(main, drivers);
@mihaisavezi
Copy link

lovely

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment