Switch UMD build to WebPack (#2496)

clients/ts/FunctionalTests/package.json

@@ -33,10 +33,9 @@
   },
   "scripts": {
     "clean": "node ../node_modules/rimraf/bin.js ./wwwroot/dist ./obj/js",
-    "build": "npm run clean && npm run build:lint && npm run build:tsc && npm run build:rollup",
+    "build": "npm run clean && npm run build:lint && npm run build:webpack",
     "build:lint": "node ../node_modules/tslint/bin/tslint -c ../tslint.json -p ./tsconfig.json",
-    "build:tsc": "node ../node_modules/typescript/bin/tsc --project ./tsconfig.json",
+    "build:webpack": "node ../node_modules/webpack-cli/bin/cli.js",
-    "build:rollup": "node ../node_modules/rollup/bin/rollup -c",
     "build:parent": "cd .. && npm run build",
     "pretest": "npm run build:parent && npm run build && dotnet build",
     "test": "npm run test:local --",

clients/ts/FunctionalTests/rollup.config.js

@@ -1,32 +0,0 @@
-// Copyright (c) .NET Foundation. All rights reserved.
-// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
-
-import path from 'path';
-
-import sourceMaps from 'rollup-plugin-sourcemaps'
-import commonjs from 'rollup-plugin-commonjs'
-import resolve from 'rollup-plugin-node-resolve'
-
-export default {
-    input: path.join(__dirname, "obj", "js", "index.js"),
-    output: {
-        file: path.join(__dirname, "wwwroot", "dist", "signalr-functional-tests.js"),
-        format: "iife",
-        sourcemap: true,
-        banner: "/* @license\r\n" +
-            " * Copyright (c) .NET Foundation. All rights reserved.\r\n" +
-            " * Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.\r\n" +
-            "*/",
-        globals: {
-            "@aspnet/signalr": "signalR",
-            "@aspnet/signalr-protocol-msgpack": "signalR.protocols.msgpack",
-        },
-    },
-    context: "window",
-    external: [ "@aspnet/signalr", "@aspnet/signalr-protocol-msgpack" ],
-    plugins: [
-        commonjs(),
-        resolve(),
-        sourceMaps()
-    ]
-}

clients/ts/FunctionalTests/webpack.config.js

@@ -0,0 +1,38 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+    entry: path.resolve(__dirname, "ts", "index.ts"),
+    mode: "none",
+    devtool: "source-map",
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: [
+                    {
+                        loader: "ts-loader",
+                        options: {
+                            configFile: path.resolve(__dirname, "tsconfig.json"),
+                        },
+                    },
+                ],
+                exclude: /node_modules/,
+            }
+        ]
+    },
+    resolve: {
+        extensions: [".ts", ".js"]
+    },
+    output: {
+        filename: 'signalr-functional-tests.js',
+        path: path.resolve(__dirname, "wwwroot", "dist"),
+    },
+    externals: {
+        "@aspnet/signalr": "signalR",
+        "@aspnet/signalr-protocol-msgpack": "signalR.protocols.msgpack",
+    },
+};

clients/ts/package.json

@@ -14,16 +14,16 @@
   "devDependencies": {
     "@types/jest": "^22.2.3",
     "@types/node": "^8.5.2",
+    "@types/webpack": "^4.4.0",
     "jest": "^22.4.3",
     "rimraf": "^2.6.2",
-    "rollup": "^0.53.4",
-    "rollup-plugin-commonjs": "^8.2.6",
-    "rollup-plugin-node-resolve": "^3.0.2",
-    "rollup-plugin-sourcemaps": "^0.4.2",
     "ts-jest": "^22.4.6",
+    "ts-loader": "^4.4.1",
     "tslint": "^5.9.1",
     "typescript": "^2.7.1",
-    "uglify-js": "^3.3.5"
+    "uglify-js": "^3.3.5",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.3"
   },
   "jest": {
     "globals": {

clients/ts/signalr-protocol-msgpack/package.json

@@ -16,7 +16,7 @@
     "build:lint": "node ../node_modules/tslint/bin/tslint -c ../tslint.json -p ./tsconfig.json",
     "build:esm": "node ../node_modules/typescript/bin/tsc --project ./tsconfig.json --module es2015 --outDir ./dist/esm -d",
     "build:cjs": "node ../node_modules/typescript/bin/tsc --project ./tsconfig.json --module commonjs --outDir ./dist/cjs",
-    "build:browser": "node ../node_modules/rollup/bin/rollup -c",
+    "build:browser": "node ../node_modules/webpack-cli/bin/cli.js",
     "build:uglify": "node ../node_modules/uglify-js/bin/uglifyjs --source-map \"url='signalr-protocol-msgpack.min.js.map',content='./dist/browser/signalr-protocol-msgpack.js.map'\" --comments -o ./dist/browser/signalr-protocol-msgpack.min.js ./dist/browser/signalr-protocol-msgpack.js",
     "prepack": "node ../build/embed-version.js",
     "test": "echo \"Run 'npm test' in the 'clients\\ts' folder to test this package\" && exit 1"

clients/ts/signalr-protocol-msgpack/webpack.config.js

@@ -0,0 +1,14 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+const path = require("path");
+const baseConfig = require("../webpack.config.base");
+module.exports = baseConfig(__dirname, "signalr-protocol-msgpack", {
+    externals: {
+        msgpack5: "msgpack5",
+        "@aspnet/signalr": "signalR"
+    },
+    alias: {
+        buffer: path.resolve(__dirname, "node_modules", "buffer", "index.js"),
+    },
+});

clients/ts/signalr/package.json

@@ -16,7 +16,7 @@
     "build:lint": "node ../node_modules/tslint/bin/tslint -c ../tslint.json -p ./tsconfig.json",
     "build:esm": "node ../node_modules/typescript/bin/tsc --project ./tsconfig.json --module es2015 --outDir ./dist/esm -d && node ./build/process-dts.js",
     "build:cjs": "node ../node_modules/typescript/bin/tsc --project ./tsconfig.json --module commonjs --outDir ./dist/cjs",
-    "build:browser": "node ../node_modules/rollup/bin/rollup -c",
+    "build:browser": "node ../node_modules/webpack-cli/bin/cli.js",
     "build:uglify": "node ../node_modules/uglify-js/bin/uglifyjs --source-map \"url='signalr.min.js.map',content='./dist/browser/signalr.js.map'\" --comments -o ./dist/browser/signalr.min.js ./dist/browser/signalr.js",
     "prepack": "node ../build/embed-version.js",
     "test": "echo \"Run 'npm test' in the 'clients\\ts' folder to test this package\" && exit 1"

clients/ts/signalr/src/HubConnection.ts

@@ -30,11 +30,15 @@ export class HubConnection {
     private methods: { [name: string]: Array<(...args: any[]) => void> };
     private id: number;
     private closedCallbacks: Array<(error?: Error) => void>;
-    private timeoutHandle?: NodeJS.Timer;
-    private pingServerHandle?: NodeJS.Timer;
     private receivedHandshakeResponse: boolean;
     private connectionState: HubConnectionState;
 
+    // The type of these a) doesn't matter and b) varies when building in browser and node contexts
+    // Since we're building the WebPack bundle directly from the TypeScript, this matters (previously
+    // we built the bundle from the compiled JavaScript).
+    private timeoutHandle?: any;
+    private pingServerHandle?: any;
+
     /** The server timeout in milliseconds.
      *
      * If this timeout elapses without receiving any messages from the server, the connection will be terminated with an error.

clients/ts/signalr/webpack.config.js

@@ -0,0 +1,5 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+const baseConfig = require("../webpack.config.base");
+module.exports = baseConfig(__dirname, "signalr");

clients/ts/webpack.config.base.js

@@ -0,0 +1,74 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = function (modulePath, browserBaseName, options) {
+    const pkg = require(path.resolve(modulePath, "package.json"));
+
+    options = options || {};
+
+    return {
+        entry: path.resolve(modulePath, "src", "browser-index.ts"),
+        mode: "none",
+        node: {
+            global: true,
+            process: false,
+            Buffer: false,
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.ts$/,
+                    use: [
+                        {
+                            loader: "ts-loader",
+                            options: {
+                                configFile: path.resolve(modulePath, "tsconfig.json"),
+                            },
+                        },
+                    ],
+                    exclude: /node_modules/,
+                }
+            ]
+        },
+        resolve: {
+            extensions: [".ts", ".js"],
+            alias: options.alias,
+        },
+        output: {
+            filename: `${browserBaseName}.js`,
+            path: path.resolve(modulePath, "dist", "browser"),
+            library: {
+                root: pkg.umd_name.split("."),
+                amd: pkg.umd_name,
+            },
+            libraryTarget: "umd",
+        },
+        plugins: [
+            new webpack.SourceMapDevToolPlugin({
+                filename: `${browserBaseName}.js.map`,
+                moduleFilenameTemplate(info) {
+                    let resourcePath = info.resourcePath;
+
+                    // Clean up the source map urls.
+                    while (resourcePath.startsWith("./") || resourcePath.startsWith("../")) {
+                        if (resourcePath.startsWith("./")) {
+                            resourcePath = resourcePath.substring(2);
+                        } else {
+                            resourcePath = resourcePath.substring(3);
+                        }
+                    }
+
+                    // We embed the sources so we can falsify the URLs a little, they just
+                    // need to be identifiers that can be viewed in the browser.
+                    return `webpack://${pkg.umd_name}/${resourcePath}`;
+                }
+            }),
+            // ES6 Promise uses this module in certain circumstances but we don't need it.
+            new webpack.IgnorePlugin(/vertx/),
+        ],
+        externals: options.externals,
+    };
+}