FIX addon-actions performance issue (#7256)

FIX addon-actions performance issue
storybookjs · Jul 31, 2019 · 2046e90 · 2046e90
1 parent 8a3edb7
commit 2046e90
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 1 deletion.
diff --git a/addons/actions/src/models/ActionOptions.ts b/addons/actions/src/models/ActionOptions.ts
@@ -2,4 +2,5 @@ export interface ActionOptions {
   depth?: number;
   clearOnStoryChange?: boolean;
   limit?: number;
+  allowFunction?: boolean;
 }
diff --git a/addons/actions/src/preview/__tests__/action.test.js b/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),
+        },
+      },
+    });
+  });
+});
diff --git a/addons/actions/src/preview/action.ts b/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);

diff --git a/lib/channel-postmessage/src/index.ts b/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 ?