Webpack Hot Reload Notification with Toastr

hot-reload-notifier.ts

/// <reference path="../types/webpack-hot-middleware.ts" />

import { Message } from "webpack-hot-middleware/client";
import * as Toastr from "toastr";

declare global {
    
    interface MessageEventHandler {
        (event: MessageEvent): void;
    }

    interface EventSourceWrapper {
        addMessageListener(handler: MessageEventHandler): void;
    }

    interface WebpackHotMiddlewareEventSourceMap {
        [key: string]: EventSourceWrapper;
    }

    interface Window {
        __whmEventSourceWrapper?: WebpackHotMiddlewareEventSourceMap;
    }
}

if (window.__whmEventSourceWrapper) {
    for (let key of Object.keys(window.__whmEventSourceWrapper)) {
        window.__whmEventSourceWrapper[key].addMessageListener(msg => {
            if (typeof msg.data === "string" && msg.data.startsWith("{")) {
                const data: Message = JSON.parse(msg.data);

                if (data && data.action) {
                    switch (data.action) {
                        case "building":
                            Toastr.clear();
                            Toastr.info("Webpack is building...");
                        case "built":
                            Toastr.clear();
                            Toastr.info("Webpack built and reloading...");
                    }
                }
            }
        });
    }
}

export = null;

index.ts

import "./hot-reload-notifier";

webpack-hot-middleware.ts

// Will not be needed once typings are available
declare module "webpack-hot-middleware/client" {
    
    export interface Message {
        action: string;
        name?: string;
        hash?: string;
    }

    export interface MessageHandler {
        (obj: Message): void;
    }

    export interface Subscriber {
        (handler: MessageHandler): void;
    }

    export var subscribeAll: Subscriber;
    export var subscribe: Subscriber;
}