From 7c72d40c89880c65086d1d67f035f4b01bfeaee3 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Thu, 16 Nov 2017 02:12:59 +0300
Subject: [PATCH] Addon actions: replace eval with function name assignment

---
 addons/actions/src/preview.js                         | 11 ++---------
 .../src/__snapshots__/storyshots.test.js.snap         |  9 +++++++++
 .../cra-kitchen-sink/src/stories/index.stories.js     |  6 ++++++
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/addons/actions/src/preview.js b/addons/actions/src/preview.js
index fa722f3effe6..f4ed7a3e8b3d 100644
--- a/addons/actions/src/preview.js
+++ b/addons/actions/src/preview.js
@@ -24,16 +24,9 @@ export function action(name) {
     });
   };
 
-  // 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 && typeof name === 'string' ? name.replace(/\W+/g, '_') : 'action';
-  // eslint-disable-next-line no-eval
-  const named = eval(`(function ${fnName}() { return handler.apply(this, arguments) })`);
-  return named;
+  Object.defineProperty(handler, 'name', { value: fnName });
+  return handler;
 }
 
 export function decorateAction(decorators) {
diff --git a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
index 3ad0629b9cbc..4b9d5dd48368 100644
--- a/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
+++ b/examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
@@ -5563,6 +5563,15 @@ exports[`Storyshots Button addons composition 1`] = `
 </div>
 `;
 
+exports[`Storyshots Button delete 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Delete
+</button>
+`;
+
 exports[`Storyshots Button with new info 1`] = `
 <div>
   <div
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 9819fca76307..47ae4f3a7124 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -55,6 +55,12 @@ storiesOf('Button', module)
       😀 😎 👍 💯
     </Button>
   ))
+  .add('delete', () => (
+    <Button onClick={action('delete')}>
+      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+      Delete
+    </Button>
+  ))
   .add('with notes', () => (
     // deprecated usage
     <WithNotes notes="A very simple button">