Add function name support for actions

.storybook/stories.js

@@ -20,4 +20,8 @@ storiesOf('Button', module)
       onClick={() => action('circular')(circular)}>
       Circular Payload
     </button>;
+  })
+  .add('Function Name', () => {
+    const fn = action('fnName');
+    return <button onClick={fn}>Action.name: {fn.name}</button>
   });

dist/components/ActionLogger/index.js

@@ -32,7 +32,7 @@ var ActionLogger = function (_Component) {
   function ActionLogger() {
     _classCallCheck(this, ActionLogger);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ActionLogger).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ActionLogger.__proto__ || Object.getPrototypeOf(ActionLogger)).apply(this, arguments));
   }
 
   _createClass(ActionLogger, [{

dist/containers/ActionLogger/index.js

@@ -34,15 +34,15 @@ var ActionLogger = function (_React$Component) {
   _inherits(ActionLogger, _React$Component);
 
   function ActionLogger(props) {
-    var _Object$getPrototypeO;
+    var _ref;
 
     _classCallCheck(this, ActionLogger);
 
     for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
 
-    var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActionLogger)).call.apply(_Object$getPrototypeO, [this, props].concat(args)));
+    var _this = _possibleConstructorReturn(this, (_ref = ActionLogger.__proto__ || Object.getPrototypeOf(ActionLogger)).call.apply(_ref, [this, props].concat(args)));
 
     _this.state = { actions: [] };
     _this._actionListener = function (action) {

dist/preview.js

@@ -28,7 +28,8 @@ function _format(arg) {
 }
 
 function action(name) {
-  return function () {
+
+  var handler = function handler() {
     for (var _len = arguments.length, _args = Array(_len), _key = 0; _key < _len; _key++) {
       _args[_key] = arguments[_key];
     }
@@ -41,6 +42,16 @@ function action(name) {
       data: { name: name, args: args }
     });
   };
+
+  // some day when {[name]: function() {}} syntax is not transpiled by babel
+  // we can get rid of this eval as by ES2015 spec the above function gets the
+  // name `name`, but babel transpiles to Object.defineProperty which doesn't do
+  // the same.
+  //
+  // Ref: https://bocoup.com/weblog/whats-in-a-function-name
+  var fnName = name.replace(/\W+/g, '_');
+  var named = eval('(function ' + fnName + '() { return handler.apply(this, arguments) })');
+  return named;
 }
 
 function decorateAction(decorators) {

src/preview.js

@@ -10,7 +10,8 @@ function _format(arg) {
 }
 
 export function action(name) {
-  return function (..._args) {
+
+  const handler = function (..._args) {
     const args = Array.from(_args).map(_format);
     const channel = addons.getChannel();
     const randomId = Math.random().toString(16).slice(2);
@@ -19,6 +20,16 @@ export function action(name) {
       data: { name, args },
     });
   };
+
+  // some day when {[name]: function() {}} syntax is not transpiled by babel
+  // we can get rid of this eval as by ES2015 spec the above function gets the
+  // name `name`, but babel transpiles to Object.defineProperty which doesn't do
+  // the same.
+  //
+  // Ref: https://bocoup.com/weblog/whats-in-a-function-name
+  const fnName = name.replace(/\W+/g,'_');
+  const named = eval(`(function ${fnName}() { return handler.apply(this, arguments) })`)
+  return named
 }
 
 export function decorateAction(decorators) {