Merge pull request #22364 from EDuToit/etoit/strict-ts-channel-websocket

Build: Migrate @storybook/channel-websocket to strict TS

code/lib/channel-websocket/package.json

@@ -46,7 +46,8 @@
     "@storybook/channels": "7.1.0-alpha.12",
     "@storybook/client-logger": "7.1.0-alpha.12",
     "@storybook/global": "^5.0.0",
-    "telejson": "^7.0.3"
+    "telejson": "^7.0.3",
+    "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
     "typescript": "~4.9.3"

code/lib/channel-websocket/src/index.ts

@@ -3,6 +3,7 @@ import { Channel } from '@storybook/channels';
 import type { ChannelHandler } from '@storybook/channels';
 import { logger } from '@storybook/client-logger';
 import { isJSON, parse, stringify } from 'telejson';
+import invariant from 'tiny-invariant';
 
 const { WebSocket } = global;
 
@@ -22,14 +23,28 @@ interface CreateChannelArgs {
 export class WebsocketTransport {
   private socket: WebSocket;
 
-  private handler: ChannelHandler;
+  private handler?: ChannelHandler;
 
   private buffer: string[] = [];
 
   private isReady = false;
 
   constructor({ url, onError }: WebsocketTransportArgs) {
-    this.connect(url, onError);
+    this.socket = new WebSocket(url);
+    this.socket.onopen = () => {
+      this.isReady = true;
+      this.flush();
+    };
+    this.socket.onmessage = ({ data }) => {
+      const event = typeof data === 'string' && isJSON(data) ? parse(data) : data;
+      invariant(this.handler, 'WebsocketTransport handler should be set');
+      this.handler(event);
+    };
+    this.socket.onerror = (e) => {
+      if (onError) {
+        onError(e);
+      }
+    };
   }
 
   setHandler(handler: ChannelHandler) {
@@ -58,23 +73,6 @@ export class WebsocketTransport {
     this.buffer = [];
     buffer.forEach((event) => this.send(event));
   }
-
-  private connect(url: string, onError: OnError) {
-    this.socket = new WebSocket(url);
-    this.socket.onopen = () => {
-      this.isReady = true;
-      this.flush();
-    };
-    this.socket.onmessage = ({ data }) => {
-      const event = typeof data === 'string' && isJSON(data) ? parse(data) : data;
-      this.handler(event);
-    };
-    this.socket.onerror = (e) => {
-      if (onError) {
-        onError(e);
-      }
-    };
-  }
 }
 
 export function createChannel({

code/lib/channel-websocket/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
-    "strict": false
+    "strict": true
   }
 }

code/yarn.lock

@@ -5684,6 +5684,7 @@ __metadata:
     "@storybook/client-logger": 7.1.0-alpha.12
     "@storybook/global": ^5.0.0
     telejson: ^7.0.3
+    tiny-invariant: ^1.3.1
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft