appsparkler/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>
  <!-- put markup and other contents here -->
  <div id="app">
    <button @click="handleIncrementA" style="border:2px red solid">{{count}}</button>
    <button @click="handleIncrementB">{{count}}</button>
    <button @click="handleIncrementC">{{count}}</button>
  </div>
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import Revue from 'revue'
import {createStore, combineReducers} from 'redux'
import Vue from 'vue'
import 'bootstrap'

// create a counter reducer
const counter = (state = 0, action) => {
  switch(action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}

// action creators
const actions = {
  increment() {
    return {type: 'increment'}
  },
  decrement() {
    return {type: 'decrement'}
  }
}

// combine reducers
// and create the redux store
const reduxStore = createStore(combineReducers({counter}))
// create a revue store by binding redux store to Vue
const store = new Revue(Vue, reduxStore, actions)

new Vue({
  el: '#app',
  data() {
    return {count: this.$select('counter as count')}
  },
  methods: {
    handleIncrementA() {
      // dispatch an action which is plain object
      store.dispatch({type: 'increment'})
    },
    handleIncrementB() {
      // dispatch an action creator which returns an object
      store.dispatch(actions.increment())
    },
    handleIncrementC() {
      // binded actions
      const {increment} = store.actions
      store.dispatch(increment())
    }
  }
})

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "redux": "3.2.1",
    "revue": "2.1.0",
    "bootstrap": "3.3.4",
    "vue": "1.0.16"
  }
}

## transpiled.js
'use strict';

var _revue = require('revue');

var _revue2 = _interopRequireDefault(_revue);

var _redux = require('redux');

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

require('bootstrap');

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

// create a counter reducer
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
var counter = function counter() {
  var state = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
  var action = arguments[1];

  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

// action creators
var actions = {
  increment: function increment() {
    return { type: 'increment' };
  },
  decrement: function decrement() {
    return { type: 'decrement' };
  }
};

// combine reducers
// and create the redux store
var reduxStore = (0, _redux.createStore)((0, _redux.combineReducers)({ counter: counter }));
// create a revue store by binding redux store to Vue
var store = new _revue2.default(_vue2.default, reduxStore, actions);

new _vue2.default({
  el: '#app',
  data: function data() {
    return { count: this.$select('counter as count') };
  },

  methods: {
    handleIncrementA: function handleIncrementA() {
      // dispatch an action which is plain object
      store.dispatch({ type: 'increment' });
    },
    handleIncrementB: function handleIncrementB() {
      // dispatch an action creator which returns an object
      store.dispatch(actions.increment());
    },
    handleIncrementC: function handleIncrementC() {
      // binded actions
      var increment = store.actions.increment;

      store.dispatch(increment());
    }
  }
});
	<!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">
	<button @click="handleIncrementA" style="border:2px red solid">{{count}}</button>
	<button @click="handleIncrementB">{{count}}</button>
	<button @click="handleIncrementC">{{count}}</button>
	</div>
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	import Revue from 'revue'
	import {createStore, combineReducers} from 'redux'
	import Vue from 'vue'
	import 'bootstrap'

	// create a counter reducer
	const counter = (state = 0, action) => {
	switch(action.type) {
	case 'increment':
	return state + 1
	case 'decrement':
	return state - 1
	default:
	return state
	}
	}

	// action creators
	const actions = {
	increment() {
	return {type: 'increment'}
	},
	decrement() {
	return {type: 'decrement'}
	}
	}

	// combine reducers
	// and create the redux store
	const reduxStore = createStore(combineReducers({counter}))
	// create a revue store by binding redux store to Vue
	const store = new Revue(Vue, reduxStore, actions)

	new Vue({
	el: '#app',
	data() {
	return {count: this.$select('counter as count')}
	},
	methods: {
	handleIncrementA() {
	// dispatch an action which is plain object
	store.dispatch({type: 'increment'})
	},
	handleIncrementB() {
	// dispatch an action creator which returns an object
	store.dispatch(actions.increment())
	},
	handleIncrementC() {
	// binded actions
	const {increment} = store.actions
	store.dispatch(increment())
	}
	}
	})
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"redux": "3.2.1",
	"revue": "2.1.0",
	"bootstrap": "3.3.4",
	"vue": "1.0.16"
	}
	}
	'use strict';

	var _revue = require('revue');

	var _revue2 = _interopRequireDefault(_revue);

	var _redux = require('redux');

	var _vue = require('vue');

	var _vue2 = _interopRequireDefault(_vue);

	require('bootstrap');

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

	// create a counter reducer
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program
	var counter = function counter() {
	var state = arguments.length <= 0 \|\| arguments[0] === undefined ? 0 : arguments[0];
	var action = arguments[1];

	switch (action.type) {
	case 'increment':
	return state + 1;
	case 'decrement':
	return state - 1;
	default:
	return state;
	}
	};

	// action creators
	var actions = {
	increment: function increment() {
	return { type: 'increment' };
	},
	decrement: function decrement() {
	return { type: 'decrement' };
	}
	};

	// combine reducers
	// and create the redux store
	var reduxStore = (0, _redux.createStore)((0, _redux.combineReducers)({ counter: counter }));
	// create a revue store by binding redux store to Vue
	var store = new _revue2.default(_vue2.default, reduxStore, actions);

	new _vue2.default({
	el: '#app',
	data: function data() {
	return { count: this.$select('counter as count') };
	},

	methods: {
	handleIncrementA: function handleIncrementA() {
	// dispatch an action which is plain object
	store.dispatch({ type: 'increment' });
	},
	handleIncrementB: function handleIncrementB() {
	// dispatch an action creator which returns an object
	store.dispatch(actions.increment());
	},
	handleIncrementC: function handleIncrementC() {
	// binded actions
	var increment = store.actions.increment;

	store.dispatch(increment());
	}
	}
	});