Merge pull request #2321 from storybooks/remove-actions-eval

Addon actions: replace eval with function name assignment

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) {

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

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">