wyze/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!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>

## index.js
import 'whatwg-fetch'
import { applyMiddleware, createStore } from 'redux'
import { debounce, mapValues } from 'lodash'
import { isFSA } from 'flux-standard-action'
import React from 'react'
import ReactDOM from 'react-dom'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

// Action
const action = () => {
  const thunk = dispatch =>
    fetch('http://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(
        json => {
          dispatch({
            payload: json,
            type: 'LOAD_SUCCESS'
          })
        }
      )

  thunk.meta = { debounce: 'load', notFSA: true }

  return thunk
}


// Reducer
const users = ( state = [], action = {} ) => {
  switch ( action.type ) {
    case 'LOAD_SUCCESS':
      return action.payload
    default:
      return state
  }
}


// Debounce middleware
const debounceMiddleware = ( config = {} ) => () => next => {
  const debouncers = mapValues(config, option => {
    if ( typeof option === 'number' ) {
      return debounce(next, option)
    }

    const { wait = 0, ...options } = option

    return debounce(next, wait, options)
  })

  return action => {
    const { meta = {} } = action

    if ( !meta.notFSA && !isFSA(action) ) {
      return next(action)
    }

    const debouncer = debouncers[meta.debounce]

    if ( debouncer ) {
      return debouncer(action)
    }

    return next(action)
  }
}


// Middlewares
const middleware = [
  debounceMiddleware({
    load: 2000
  }),
  thunk,
  logger({ collapsed: true })
]


// App
const store = createStore(users, applyMiddleware(...middleware))
const rootEl = document.getElementById('app')

function render() {
  ReactDOM.render((
    <pre>
      {JSON.stringify(store.getState(), null, 2)}
    </pre>
  ), rootEl)
}

render()
store.subscribe(render)
store.dispatch(action())

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "whatwg-fetch": "0.11.0",
    "redux": "3.3.1",
    "lodash": "4.3.0",
    "flux-standard-action": "0.6.1",
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "redux-logger": "2.6.1",
    "redux-thunk": "2.0.1",
    "babel-runtime": "6.6.1"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-1"
    ]
  }
}

## transpiled.js
'use strict';

var _stringify = require('babel-runtime/core-js/json/stringify');

var _stringify2 = _interopRequireDefault(_stringify);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

require('whatwg-fetch');

var _redux = require('redux');

var _lodash = require('lodash');

var _fluxStandardAction = require('flux-standard-action');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reduxLogger = require('redux-logger');

var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

var _reduxThunk = require('redux-thunk');

var _reduxThunk2 = _interopRequireDefault(_reduxThunk);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// Action
var action = function action() {
  var thunk = function thunk(dispatch) {
    return fetch('http://jsonplaceholder.typicode.com/users').then(function (response) {
      return response.json();
    }).then(function (json) {
      dispatch({
        payload: json,
        type: 'LOAD_SUCCESS'
      });
    });
  };

  thunk.meta = { debounce: 'load', notFSA: true };

  return thunk;
};

// Reducer
var users = function users() {
  var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
  var action = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];

  switch (action.type) {
    case 'LOAD_SUCCESS':
      return action.payload;
    default:
      return state;
  }
};

// Debounce middleware
var debounceMiddleware = function debounceMiddleware() {
  var config = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
  return function () {
    return function (next) {
      var debouncers = (0, _lodash.mapValues)(config, function (option) {
        if (typeof option === 'number') {
          return (0, _lodash.debounce)(next, option);
        }

        var _option$wait = option.wait;
        var wait = _option$wait === undefined ? 0 : _option$wait;
        var options = (0, _objectWithoutProperties3.default)(option, ['wait']);

        return (0, _lodash.debounce)(next, wait, options);
      });

      return function (action) {
        var _action$meta = action.meta;
        var meta = _action$meta === undefined ? {} : _action$meta;

        if (!meta.notFSA && !(0, _fluxStandardAction.isFSA)(action)) {
          return next(action);
        }

        var debouncer = debouncers[meta.debounce];

        if (debouncer) {
          return debouncer(action);
        }

        return next(action);
      };
    };
  };
};

// Middlewares
var middleware = [debounceMiddleware({
  load: 2000
}), _reduxThunk2.default, (0, _reduxLogger2.default)({ collapsed: true })];

// App
var store = (0, _redux.createStore)(users, _redux.applyMiddleware.apply(undefined, middleware));
var rootEl = document.getElementById('app');

function render() {
  _reactDom2.default.render(_react2.default.createElement(
    'pre',
    null,
    (0, _stringify2.default)(store.getState(), null, 2)
  ), rootEl);
}

render();
store.subscribe(render);
store.dispatch(action());
	<!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>
	import 'whatwg-fetch'
	import { applyMiddleware, createStore } from 'redux'
	import { debounce, mapValues } from 'lodash'
	import { isFSA } from 'flux-standard-action'
	import React from 'react'
	import ReactDOM from 'react-dom'
	import logger from 'redux-logger'
	import thunk from 'redux-thunk'

	// Action
	const action = () => {
	const thunk = dispatch =>
	fetch('http://jsonplaceholder.typicode.com/users')
	.then(response => response.json())
	.then(
	json => {
	dispatch({
	payload: json,
	type: 'LOAD_SUCCESS'
	})
	}
	)

	thunk.meta = { debounce: 'load', notFSA: true }

	return thunk
	}


	// Reducer
	const users = ( state = [], action = {} ) => {
	switch ( action.type ) {
	case 'LOAD_SUCCESS':
	return action.payload
	default:
	return state
	}
	}


	// Debounce middleware
	const debounceMiddleware = ( config = {} ) => () => next => {
	const debouncers = mapValues(config, option => {
	if ( typeof option === 'number' ) {
	return debounce(next, option)
	}

	const { wait = 0, ...options } = option

	return debounce(next, wait, options)
	})

	return action => {
	const { meta = {} } = action

	if ( !meta.notFSA && !isFSA(action) ) {
	return next(action)
	}

	const debouncer = debouncers[meta.debounce]

	if ( debouncer ) {
	return debouncer(action)
	}

	return next(action)
	}
	}


	// Middlewares
	const middleware = [
	debounceMiddleware({
	load: 2000
	}),
	thunk,
	logger({ collapsed: true })
	]


	// App
	const store = createStore(users, applyMiddleware(...middleware))
	const rootEl = document.getElementById('app')

	function render() {
	ReactDOM.render((
	<pre>
	{JSON.stringify(store.getState(), null, 2)}
	</pre>
	), rootEl)
	}

	render()
	store.subscribe(render)
	store.dispatch(action())
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"whatwg-fetch": "0.11.0",
	"redux": "3.3.1",
	"lodash": "4.3.0",
	"flux-standard-action": "0.6.1",
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"redux-logger": "2.6.1",
	"redux-thunk": "2.0.1",
	"babel-runtime": "6.6.1"
	},
	"babel": {
	"presets": [
	"es2015",
	"react",
	"stage-1"
	]
	}
	}
	'use strict';

	var _stringify = require('babel-runtime/core-js/json/stringify');

	var _stringify2 = _interopRequireDefault(_stringify);

	var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

	var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

	require('whatwg-fetch');

	var _redux = require('redux');

	var _lodash = require('lodash');

	var _fluxStandardAction = require('flux-standard-action');

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = require('react-dom');

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reduxLogger = require('redux-logger');

	var _reduxLogger2 = _interopRequireDefault(_reduxLogger);

	var _reduxThunk = require('redux-thunk');

	var _reduxThunk2 = _interopRequireDefault(_reduxThunk);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	// Action
	var action = function action() {
	var thunk = function thunk(dispatch) {
	return fetch('http://jsonplaceholder.typicode.com/users').then(function (response) {
	return response.json();
	}).then(function (json) {
	dispatch({
	payload: json,
	type: 'LOAD_SUCCESS'
	});
	});
	};

	thunk.meta = { debounce: 'load', notFSA: true };

	return thunk;
	};

	// Reducer
	var users = function users() {
	var state = arguments.length <= 0 \|\| arguments[0] === undefined ? [] : arguments[0];
	var action = arguments.length <= 1 \|\| arguments[1] === undefined ? {} : arguments[1];

	switch (action.type) {
	case 'LOAD_SUCCESS':
	return action.payload;
	default:
	return state;
	}
	};

	// Debounce middleware
	var debounceMiddleware = function debounceMiddleware() {
	var config = arguments.length <= 0 \|\| arguments[0] === undefined ? {} : arguments[0];
	return function () {
	return function (next) {
	var debouncers = (0, _lodash.mapValues)(config, function (option) {
	if (typeof option === 'number') {
	return (0, _lodash.debounce)(next, option);
	}

	var _option$wait = option.wait;
	var wait = _option$wait === undefined ? 0 : _option$wait;
	var options = (0, _objectWithoutProperties3.default)(option, ['wait']);

	return (0, _lodash.debounce)(next, wait, options);
	});

	return function (action) {
	var _action$meta = action.meta;
	var meta = _action$meta === undefined ? {} : _action$meta;

	if (!meta.notFSA && !(0, _fluxStandardAction.isFSA)(action)) {
	return next(action);
	}

	var debouncer = debouncers[meta.debounce];

	if (debouncer) {
	return debouncer(action);
	}

	return next(action);
	};
	};
	};
	};

	// Middlewares
	var middleware = [debounceMiddleware({
	load: 2000
	}), _reduxThunk2.default, (0, _reduxLogger2.default)({ collapsed: true })];

	// App
	var store = (0, _redux.createStore)(users, _redux.applyMiddleware.apply(undefined, middleware));
	var rootEl = document.getElementById('app');

	function render() {
	_reactDom2.default.render(_react2.default.createElement(
	'pre',
	null,
	(0, _stringify2.default)(store.getState(), null, 2)
	), rootEl);
	}

	render();
	store.subscribe(render);
	store.dispatch(action());