Skip to content

Instantly share code, notes, and snippets.

@tijhaart

tijhaart/esnextbin.md

Last active March 25, 2017 13:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tijhaart/7c141cea3afeafb97842680b44f6c8b0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tijhaart/7c141cea3afeafb97842680b44f6c8b0 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
<style>
#app {
margin: 1rem;
}
</style>
</head>
<body>
<div id="app">
<strong class="counter__value">0</strong>
<button class="counter__increment">+</button>
<button class="counter__decrement">-</button>
</div>
</body>
</html>
Raw
index.js
console.clear();
import { throttle, flow, set, get, curry } from 'lodash';
// import Rx from 'rxjs';
function Store(state = {}) {
const middlewares = [];
let applyUpdates = ((newState) => {
state = newState;
console.info(newState);
return state;
});
// let applyUpdatesWithMiddleware = (state) => applyUpdates(state);
function setState(update) {
// applyUpdatesWithMiddleware(update(state));
return this;
}
return {
use(middleware) {
// applyUpdates = middleware(this)(applyUpdates);
middlewares.push(middleware);
// applyUpdatesWithMiddleware = flow(...middlewares)(this)(applyUpdatesWithMiddleware);
},
setState,
getState: () => state,
observe() {}
};
}
const store = Store({
counter: 0,
selectedUser: 1,
entities: {
users: {
1: { name: 'Jane' },
2: { name: 'John' },
}
},
});
const promised = curry((store, next, update) => {
const result = next(update);
if (typeof result.then === 'function') {
result.then(store.setState);
return store.getState();
} else {
return result;
}
});
store.use(promised);
store.use(selectiveLog({
prefix: '%s: %d',
path: ['counter'],
type: 'debug'
}));
store.use(selectiveLog({
path: ['entities', 'users', s => get(s, 'selectedUser'), 'name']
}));
store.setState(state => set(state, 'counter', 100));
store.setState((state) => {
return new Promise(resolve => {
setTimeout(() => {
resolve(
state => {
state = set(state, ['entities', 'users', '3'], { name: 'Bob' });
state = set(state, 'selectedUser', 3);
return state;
}
);
}, 300);
});
});
function selectiveLog ({path = [], type = 'info', prefix = '%s: %o'}) {
// next is actually an alias for setState similar to redux.dispatch
return (store) => {
return (next) => {
return (update) => {
const result = next(update);
const nextPath = path.map(x => typeof x === 'function' ? x(result) : x);
console[type](prefix, nextPath.join('.'), get(result, nextPath));
return result;
}
}
}
}
document
.querySelector('.counter__increment')
.addEventListener('click', () => {
// console.count('click');
store.setState(state => set(state, 'counter', state.counter + 1));
})
;
document
.querySelector('.counter__decrement')
.addEventListener('click', () => {
// console.count('click');
store.setState(state => set(state, 'counter', state.counter - 1));
})
;
const view = document.querySelector('.counter__value');
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"lodash": "4.17.4",
"babel-runtime": "6.22.0"
}
}
Raw
transpiled.js
'use strict';
var _promise = require('babel-runtime/core-js/promise');
var _promise2 = _interopRequireDefault(_promise);
var _lodash = require('lodash');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
console.clear();
// import Rx from 'rxjs';
function Store() {
var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var middlewares = [];
var applyUpdates = function applyUpdates(newState) {
state = newState;
console.info(newState);
return state;
};
// let applyUpdatesWithMiddleware = (state) => applyUpdates(state);
function setState(update) {
// applyUpdatesWithMiddleware(update(state));
return this;
}
return {
use: function use(middleware) {
// applyUpdates = middleware(this)(applyUpdates);
middlewares.push(middleware);
// applyUpdatesWithMiddleware = flow(...middlewares)(this)(applyUpdatesWithMiddleware);
},
setState: setState,
getState: function getState() {
return state;
},
observe: function observe() {}
};
}
var store = Store({
counter: 0,
selectedUser: 1,
entities: {
users: {
1: { name: 'Jane' },
2: { name: 'John' }
}
}
});
var promised = (0, _lodash.curry)(function (store, next, update) {
var result = next(update);
if (typeof result.then === 'function') {
result.then(store.setState);
return store.getState();
} else {
return result;
}
});
store.use(promised);
store.use(selectiveLog({
prefix: '%s: %d',
path: ['counter'],
type: 'debug'
}));
store.use(selectiveLog({
path: ['entities', 'users', function (s) {
return (0, _lodash.get)(s, 'selectedUser');
}, 'name']
}));
store.setState(function (state) {
return (0, _lodash.set)(state, 'counter', 100);
});
store.setState(function (state) {
return new _promise2.default(function (resolve) {
setTimeout(function () {
resolve(function (state) {
state = (0, _lodash.set)(state, ['entities', 'users', '3'], { name: 'Bob' });
state = (0, _lodash.set)(state, 'selectedUser', 3);
return state;
});
}, 300);
});
});
function selectiveLog(_ref) {
var _ref$path = _ref.path;
var path = _ref$path === undefined ? [] : _ref$path;
var _ref$type = _ref.type;
var type = _ref$type === undefined ? 'info' : _ref$type;
var _ref$prefix = _ref.prefix;
var prefix = _ref$prefix === undefined ? '%s: %o' : _ref$prefix;
// next is actually an alias for setState similar to redux.dispatch
return function (store) {
return function (next) {
return function (update) {
var result = next(update);
var nextPath = path.map(function (x) {
return typeof x === 'function' ? x(result) : x;
});
console[type](prefix, nextPath.join('.'), (0, _lodash.get)(result, nextPath));
return result;
};
};
};
}
document.querySelector('.counter__increment').addEventListener('click', function () {
// console.count('click');
store.setState(function (state) {
return (0, _lodash.set)(state, 'counter', state.counter + 1);
});
});
document.querySelector('.counter__decrement').addEventListener('click', function () {
// console.count('click');
store.setState(function (state) {
return (0, _lodash.set)(state, 'counter', state.counter - 1);
});
});
var view = document.querySelector('.counter__value');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment