Merge pull request #5046 from storybooks/ts-migration/channel-websocket

TypeScript migration: @storybook/channel-websocket

lib/channel-websocket/package.json

@@ -15,7 +15,7 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },

lib/channel-websocket/src/index.ts

@@ -0,0 +1,78 @@
+import { WebSocket } from 'global';
+import { Channel, ChannelHandler } from '@storybook/channels';
+
+type OnError = (message: Event) => void;
+
+interface WebsocketTransportArgs {
+  url: string;
+  onError: OnError;
+}
+
+interface CreateChannelArgs {
+  url: string;
+  async: boolean;
+  onError: OnError;
+}
+
+export class WebsocketTransport {
+  private socket: WebSocket;
+  private handler: ChannelHandler;
+  private buffer: string[] = [];
+  private isReady = false;
+
+  constructor({ url, onError }: WebsocketTransportArgs) {
+    this.connect(
+      url,
+      onError
+    );
+  }
+
+  setHandler(handler: ChannelHandler) {
+    this.handler = handler;
+  }
+
+  send(event: any) {
+    if (!this.isReady) {
+      this.sendLater(event);
+    } else {
+      this.sendNow(event);
+    }
+  }
+
+  private sendLater(event: any) {
+    this.buffer.push(event);
+  }
+
+  private sendNow(event: any) {
+    const data = JSON.stringify(event);
+    this.socket.send(data);
+  }
+
+  private flush() {
+    const buffer = this.buffer;
+    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 = e => {
+      const event = JSON.parse(e.data);
+      this.handler(event);
+    };
+    this.socket.onerror = e => {
+      if (onError) {
+        onError(e);
+      }
+    };
+  }
+}
+
+export default function createChannel({ url, async, onError }: CreateChannelArgs) {
+  const transport = new WebsocketTransport({ url, onError });
+  return new Channel({ transport, async });
+}

lib/channel-websocket/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'global';

lib/channel-websocket/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src"
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

scripts/build-pack.sh

@@ -5,7 +5,4 @@
 PACK_DIR=$1
 FILE=$(npm pack | tail -n 1)
 
-echo $PACK_DIR
-echo $FILE
-
 mv "$FILE" "$PACK_DIR/${FILE%-[0-9]*\.[0-9]*\.[0-9]*\.tgz}.tgz"