FIX addon-actions performance issue (#7256)

FIX addon-actions performance issue

addons/actions/src/models/ActionOptions.ts

@@ -2,4 +2,5 @@ export interface ActionOptions {
   depth?: number;
   clearOnStoryChange?: boolean;
   limit?: number;
+  allowFunction?: boolean;
 }

addons/actions/src/preview/__tests__/action.test.js

@@ -91,3 +91,62 @@ describe('Depth config', () => {
     });
   });
 });
+
+describe('allowFunction config', () => {
+  it('with global allowFunction false', () => {
+    const channel = createChannel();
+
+    const allowFunction = false;
+
+    configureActions({
+      allowFunction,
+    });
+
+    action('test-action')({
+      root: {
+        one: {
+          a: 1,
+          b: () => 'foo',
+        },
+      },
+    });
+
+    expect(getChannelData(channel)[0]).toEqual({
+      root: {
+        one: {
+          a: 1,
+          b: expect.any(Function),
+        },
+      },
+    });
+  });
+
+  // TODO: this test is pretty pointless, as the real channel isn't used, nothing is changed
+  it('with global allowFunction true', () => {
+    const channel = createChannel();
+
+    const allowFunction = true;
+
+    configureActions({
+      allowFunction,
+    });
+
+    action('test-action')({
+      root: {
+        one: {
+          a: 1,
+          b: () => 'foo',
+        },
+      },
+    });
+
+    expect(getChannelData(channel)[0]).toEqual({
+      root: {
+        one: {
+          a: 1,
+          b: expect.any(Function),
+        },
+      },
+    });
+  });
+});

addons/actions/src/preview/action.ts

@@ -22,6 +22,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
       options: {
         ...actionOptions,
         depth: minDepth + (actionOptions.depth || 3),
+        allowFunction: actionOptions.allowFunction || false,
       },
     };
     channel.emit(EVENT_ID, actionDisplayToEmit);

examples/official-storybook/stories/addon-actions.stories.js

@@ -139,8 +139,10 @@ export const allTypes = () => {
       <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
       <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
       <Button onClick={() => action('File')(file)}>File</Button>
-      <Button onClick={() => action('Function')(A)}>Function A</Button>
-      <Button onClick={() => action('Function (bound)')(bound)}>Bound Function B</Button>
+      <Button onClick={() => action('Function', { allowFunction: true })(A)}>Function A</Button>
+      <Button onClick={() => action('Function (bound)', { allowFunction: true })(bound)}>
+        Bound Function B
+      </Button>
       <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
       <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
       <Button onClick={() => action('NaN')(NaN)}>NaN</Button>

lib/channel-postmessage/src/index.ts

@@ -67,12 +67,18 @@ export class PostmsgTransport {
       });
     }
     let depth = 15;
+    let allowFunction = true;
+
+    if (options && typeof options.allowFunction === 'boolean') {
+      // eslint-disable-next-line prefer-destructuring
+      allowFunction = options.allowFunction;
+    }
     if (options && Number.isInteger(options.depth)) {
       // eslint-disable-next-line prefer-destructuring
       depth = options.depth;
     }
 
-    const data = stringify({ key: KEY, event }, { maxDepth: depth });
+    const data = stringify({ key: KEY, event }, { maxDepth: depth, allowFunction });
 
     // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
     // might replace '*' with document.location ?