TypeScript migration: @storybook/channels

lib/channels/src/index.test.js → lib/channels/src/index.test.ts

@@ -1,11 +1,10 @@
-/* eslint no-underscore-dangle: 0 */
-import Channel from '.';
+import { Channel, ChannelEvent, ChannelTransport } from '.';
 
 jest.useFakeTimers();
 
 describe('Channel', () => {
-  let transport = null;
-  let channel = null;
+  let transport: ChannelTransport;
+  let channel: Channel;
 
   beforeEach(() => {
     transport = { setHandler: jest.fn(), send: jest.fn() };
@@ -18,18 +17,22 @@ describe('Channel', () => {
       expect(transport.setHandler).toHaveBeenCalled();
     });
 
+    // todo this needs to be tested differently; _transport is a private property
     it('should not try to set handler if handler is missing', () => {
       channel = new Channel();
-      expect(channel._transport).not.toBeDefined();
+      // expect(channel._transport).not.toBeDefined();
+      expect(true).toBe(false); // let it fail, until this is rewritten
     });
   });
 
+  // todo before, addListener was called with numbers; is this still the correct test?
   describe('method:addListener', () => {
     it('should call channel.on with args', () => {
+      const testFn = jest.fn();
       channel.on = jest.fn();
-      channel.addListener(1, 2);
+      channel.addListener('A', testFn);
       expect(channel.on).toHaveBeenCalled();
-      expect(channel.on).toHaveBeenCalledWith(1, 2);
+      expect(channel.on).toHaveBeenCalledWith('A', testFn);
     });
   });
 
@@ -43,13 +46,23 @@ describe('Channel', () => {
       channel.emit(type, ...args);
       expect(transport.send).toHaveBeenCalled();
 
-      const event = transport.send.mock.calls[0][0];
+      const event: ChannelEvent = transport.send.mock.calls[0][0];
       expect(typeof event.from).toEqual('string');
 
       delete event.from;
       expect(event).toEqual(expected);
     });
 
+    it('should be type safe', () => {
+      transport.send = jest.fn();
+      const type = 'test-type';
+      const args = [1, 2, 3];
+      const expected = { type, args };
+
+      // todo check if generic argument typing works
+      expect(true).toBe(false);
+    });
+
     it('should call handle async option', () => {
       transport.send = jest.fn();
       const type = 'test-type';

lib/channels/src/index.js → lib/channels/src/index.ts

@@ -1,27 +1,60 @@
-/* eslint no-underscore-dangle: 0 */
+export interface ChannelTransport {
+  send: any; // todo Check actual type
+  setHandler<TEventArgs = any>(handler: (event: ChannelEvent<TEventArgs>) => void): void;
+}
+
+export interface ChannelEvent<TEventArgs = any> {
+  type: string;
+  from: string;
+  args: TEventArgs[];
+}
+
+export interface Listener<TEventArgs = any> {
+  (...args: TEventArgs[]): void;
+  ignorePeer?: boolean;
+}
+
+interface ListenersKeyValue {
+  [key: string]: Listener[];
+}
 
-export default class Channel {
-  constructor({ transport, async } = {}) {
-    this._sender = this._randomId();
+interface ChannelArgs {
+  transport?: ChannelTransport;
+  async?: boolean;
+}
+
+const generateRandomId = () => {
+  // generates a random 13 character string
+  return Math.random()
+    .toString(16)
+    .slice(2);
+};
+
+export class Channel {
+  private _sender = generateRandomId();
+  private _listeners: ListenersKeyValue = {};
+  private readonly _async: boolean = false;
+  private readonly _transport: ChannelTransport;
+
+  constructor({ transport, async }: ChannelArgs = {}) {
     this._async = async;
     if (transport) {
       this._transport = transport;
       this._transport.setHandler(event => this._handleEvent(event));
     }
-    this._listeners = {};
   }
 
-  addListener(type, listener) {
+  addListener(type: string, listener: Listener) {
     this.on(type, listener);
   }
 
-  addPeerListener(type, listener) {
+  addPeerListener(type: string, listener: Listener) {
     const peerListener = listener;
     peerListener.ignorePeer = true;
     this.on(type, peerListener);
   }
 
-  emit(type, ...args) {
+  emit<TEventArgs = any>(type: string, ...args: TEventArgs[]) {
     const event = { type, args, from: this._sender };
 
     const handler = () => {
@@ -42,69 +75,64 @@ export default class Channel {
     return Object.keys(this._listeners);
   }
 
-  listenerCount(type) {
+  listenerCount(type: string) {
     const listeners = this._listeners[type];
     return listeners ? listeners.length : 0;
   }
 
-  listeners(type) {
+  listeners(type: string) {
     return this._listeners[type];
   }
 
-  on(type, listener) {
+  on(type: string, listener: Listener) {
     this._listeners[type] = this._listeners[type] || [];
     this._listeners[type].push(listener);
   }
 
-  once(type, listener) {
+  once(type: string, listener: Listener) {
     const onceListener = this._onceListener(type, listener);
     this.on(type, onceListener);
   }
 
-  prependListener(type, listener) {
+  prependListener(type: string, listener: Listener) {
     this._listeners[type] = this._listeners[type] || [];
     this._listeners[type].unshift(listener);
   }
 
-  prependOnceListener(type, listener) {
+  prependOnceListener(type: string, listener: Listener) {
     const onceListener = this._onceListener(type, listener);
     this.prependListener(type, onceListener);
   }
 
-  removeAllListeners(type) {
+  removeAllListeners(type: string) {
     if (!type) {
       this._listeners = {};
     } else if (this._listeners[type]) {
       delete this._listeners[type];
     }
   }
 
-  removeListener(type, listener) {
+  removeListener(type: string, listener: Listener) {
     const listeners = this._listeners[type];
     if (listeners) {
       this._listeners[type] = listeners.filter(l => l !== listener);
     }
   }
 
-  _randomId() {
-    // generates a random 13 character string
-    return Math.random()
-      .toString(16)
-      .slice(2);
-  }
-
-  _handleEvent(event, isPeer) {
+  private _handleEvent(event: ChannelEvent, isPeer = false) {
     const listeners = this._listeners[event.type];
     if (listeners && (isPeer || event.from !== this._sender)) {
       listeners.forEach(fn => !(isPeer && fn.ignorePeer) && fn(...event.args));
     }
   }
 
-  _onceListener(type, listener) {
-    const onceListener = (...args) => {
+  private _onceListener(type: string, listener: Listener) {
+    const onceListener = (...args: any[]) => {
       this.removeListener(type, onceListener);
       return listener(...args);
     };
     return onceListener;
   }
 }
+
+export default Channel;

lib/channels/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "src/index.test.ts"
+  ]
+}