made with esnextbin
Created
February 5, 2016 12:53
-
-
Save TylorS/5b841ef982b0ec819595 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNextbin Sketch</title> | |
| <!-- put additional styles and scripts here --> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // write ES2015 code and import modules from npm | |
| // and then press "Execute" to run your program | |
| const Rx = require('rx') | |
| const Cycle = require('@cycle/core') | |
| const {makeDOMDriver, h} = require('cycle-snabbdom') | |
| const {style, keyframe} = require('easy-style') | |
| /* hh as a ES2015 Proxy */ | |
| const isValidString = | |
| param => | |
| typeof param === 'string' && param.length > 0; | |
| const startsWith = | |
| (string, start) => | |
| string[0] === start; | |
| const isSelector = | |
| param => | |
| isValidString(param) && | |
| startsWith(param, '.') || | |
| startsWith(param, '#'); | |
| const hh = | |
| h => | |
| new Proxy(h, { | |
| get(target, property) { | |
| return (first, ...rest) => { | |
| if (isSelector(first)) { | |
| return h(property + first, ...rest); | |
| } else { | |
| return h(property, first, ...rest); | |
| } | |
| } | |
| } | |
| }); | |
| /* Using hh */ | |
| const {div, h1, svg, rect} = hh(h) | |
| const basicKeyframe = keyframe({ | |
| '0%': { | |
| transform: "translate3d(0, 0, 0)" | |
| }, | |
| "50%": { | |
| transform: "translate3d(0, 25em, 0)" | |
| }, | |
| "100%": { | |
| transfrom: "translate3d(0, 0, 0)" | |
| } | |
| }) | |
| const basicStyle = { | |
| animation: `${basicKeyframe} 2s infinite`, | |
| } | |
| function main(sources) { | |
| return { | |
| DOM: Rx.Observable.of(div({ | |
| style: { | |
| position: 'fixed', | |
| top: '0', | |
| bottom: '0', | |
| left: '0', | |
| right: '0', | |
| height: '100%', | |
| width: '100%', | |
| backgroundColor: '#2e2e2e', | |
| color: '#eeeeee' | |
| } | |
| }, [ | |
| svg({attrs: {height: '100%', width: '100%'}},[ | |
| rect({style: basicStyle, attrs: { | |
| x: '10', | |
| y: '10', | |
| width: '5em', | |
| height: '5em', | |
| fill: "transparent", | |
| stroke: "white" | |
| }}) | |
| ]) | |
| ])) | |
| } | |
| } | |
| Cycle.run(main, { | |
| DOM: makeDOMDriver('#app') | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "rx": "4.0.7", | |
| "@cycle/core": "6.0.2", | |
| "cycle-snabbdom": "1.0.3", | |
| "easy-style": "1.0.0" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| // write ES2015 code and import modules from npm | |
| // and then press "Execute" to run your program | |
| var Rx = require('rx'); | |
| var Cycle = require('@cycle/core'); | |
| var _require = require('cycle-snabbdom'); | |
| var makeDOMDriver = _require.makeDOMDriver; | |
| var h = _require.h; | |
| var _require2 = require('easy-style'); | |
| var style = _require2.style; | |
| var keyframe = _require2.keyframe; | |
| /* hh as a ES2015 Proxy */ | |
| var isValidString = function isValidString(param) { | |
| return typeof param === 'string' && param.length > 0; | |
| }; | |
| var startsWith = function startsWith(string, start) { | |
| return string[0] === start; | |
| }; | |
| var isSelector = function isSelector(param) { | |
| return isValidString(param) && startsWith(param, '.') || startsWith(param, '#'); | |
| }; | |
| var hh = function hh(h) { | |
| return new Proxy(h, { | |
| get: function get(target, property) { | |
| return function (first) { | |
| for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | |
| rest[_key - 1] = arguments[_key]; | |
| } | |
| if (isSelector(first)) { | |
| return h.apply(undefined, [property + first].concat(rest)); | |
| } else { | |
| return h.apply(undefined, [property, first].concat(rest)); | |
| } | |
| }; | |
| } | |
| }); | |
| }; | |
| /* Using hh */ | |
| var _hh = hh(h); | |
| var div = _hh.div; | |
| var h1 = _hh.h1; | |
| var svg = _hh.svg; | |
| var rect = _hh.rect; | |
| var basicKeyframe = keyframe({ | |
| '0%': { | |
| transform: "translate3d(0, 0, 0)" | |
| }, | |
| "50%": { | |
| transform: "translate3d(0, 25em, 0)" | |
| }, | |
| "100%": { | |
| transfrom: "translate3d(0, 0, 0)" | |
| } | |
| }); | |
| var basicStyle = { | |
| animation: basicKeyframe + ' 2s infinite' | |
| }; | |
| function main(sources) { | |
| return { | |
| DOM: Rx.Observable.of(div({ | |
| style: { | |
| position: 'fixed', | |
| top: '0', | |
| bottom: '0', | |
| left: '0', | |
| right: '0', | |
| height: '100%', | |
| width: '100%', | |
| backgroundColor: '#2e2e2e', | |
| color: '#eeeeee' | |
| } | |
| }, [svg({ attrs: { height: '100%', width: '100%' } }, [rect({ style: basicStyle, attrs: { | |
| x: '10', | |
| y: '10', | |
| width: '5em', | |
| height: '5em', | |
| fill: "transparent", | |
| stroke: "white" | |
| } })])])) | |
| }; | |
| } | |
| Cycle.run(main, { | |
| DOM: makeDOMDriver('#app') | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment