fix for issue 6409

Please note, I've no idea what i'm doing with typescript. So I expect I'll be told some things.

addons/actions/src/preview/action.ts

@@ -12,11 +12,16 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
   const handler = function action(...args: any[]) {
     const channel = addons.getChannel();
     const id = uuid();
+    const minDepth = 5; // anything less is really just storybook internals
+
     const actionDisplayToEmit: ActionDisplay = {
       id,
       count: 0,
       data: { name, args },
-      options: actionOptions,
+      options: {
+        ...actionOptions,
+        depth: minDepth + actionOptions.depth,
+      },
     };
     channel.emit(EVENT_ID, actionDisplayToEmit);
   };

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -24,7 +24,7 @@ const InfoButton = () => (
 );
 
 storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>, {
+  .add('with text', () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>, {
     options: { selectedPanel: 'storybook/actions/panel' },
   })
   .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>, {

lib/channel-postmessage/src/index.ts

@@ -48,15 +48,19 @@ export class PostmsgTransport {
    * the event will be stored in a buffer and sent when the window exists.
    * @param event
    */
-  send(event: ChannelEvent): Promise<any> {
+  send(event: ChannelEvent, options?: any): Promise<any> {
     const iframeWindow = this.getWindow();
     if (!iframeWindow) {
       return new Promise((resolve, reject) => {
         this.buffer.push({ event, resolve, reject });
       });
     }
+    let depth = 15;
+    if (options && Number.isInteger(options.depth)) {
+      depth = options.depth;
+    }
 
-    const data = stringify({ key: KEY, event }, { maxDepth: 15 });
+    const data = stringify({ key: KEY, event }, { maxDepth: depth });
 
     // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
     // might replace '*' with document.location ?
@@ -88,6 +92,7 @@ export class PostmsgTransport {
   }
 
   private handleEvent(rawEvent: RawEvent): void {
+    console.log(rawEvent);
     try {
       const { data } = rawEvent;
       const { key, event } = typeof data === 'string' && isJSON(data) ? parse(data) : data;

lib/channels/src/index.test.ts

@@ -82,6 +82,22 @@ describe('Channel', () => {
       expect(listenerOutputData).toEqual(listenerInputData);
     });
 
+    it('should be callable with options on the event', () => {
+      const eventName = 'event1';
+      const listenerInputData = [{ event: {}, options: { depth: 1 } }];
+      let listenerOutputData: any = null;
+
+      channel.addListener(eventName, (...data) => {
+        listenerOutputData = data;
+      });
+      const sendSpy = jest.fn();
+      // @ts-ignore
+      channel.transport.send = sendSpy;
+      channel.emit(eventName, ...listenerInputData);
+      expect(listenerOutputData).toEqual(listenerInputData);
+      expect(sendSpy.mock.calls[0][1]).toEqual({ depth: 1 });
+    });
+
     it('should use setImmediate if async is true', () => {
       channel = new Channel({ async: true, transport });
       channel.addListener('event1', jest.fn());

lib/channels/src/index.ts

@@ -1,7 +1,7 @@
 export type ChannelHandler = (event: ChannelEvent) => void;
 
 export interface ChannelTransport {
-  send(event: ChannelEvent): void;
+  send(event: ChannelEvent, options?: any): void;
   setHandler(handler: ChannelHandler): void;
 }
 
@@ -63,12 +63,16 @@ export class Channel {
     this.addListener(eventName, peerListener);
   }
 
-  emit(eventName: string, ...args: any[]) {
+  emit(eventName: string, ...args: any) {
     const event: ChannelEvent = { type: eventName, args, from: this.sender };
+    let options = {};
+    if (args.length >= 1 && args[0].options) {
+      options = args[0].options;
+    }
 
     const handler = () => {
       if (this.transport) {
-        this.transport.send(event);
+        this.transport.send(event, options);
       }
       this.handleEvent(event, true);
     };