Enable rollup for browser with sample (#3206)

* Enable rollup for browser with sample

sdk/eventhub/event-hubs/package.json

@@ -97,10 +97,12 @@
     "rimraf": "^2.6.2",
     "rollup": "^1.0.0",
     "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-inject": "^2.2.0",
     "rollup-plugin-json": "^3.1.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^4.2.0",
     "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-shim": "^1.0.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-uglify": "^6.0.0",
     "ts-node": "^7.0.1",

sdk/eventhub/event-hubs/rollup.base.config.js

@@ -8,6 +8,8 @@ import json from "rollup-plugin-json";
 import replace from "rollup-plugin-replace";
 import { uglify } from "rollup-plugin-uglify";
 import sourcemaps from "rollup-plugin-sourcemaps";
+import shim from "rollup-plugin-shim";
+import inject from "rollup-plugin-inject";
 
 import path from "path";
 
@@ -17,7 +19,7 @@ const input = "dist-esm/src/index.js";
 const production = process.env.NODE_ENV === "production";
 
 export function nodeConfig(test = false) {
-  const externalNodeBuiltins = ["events", "util"];
+  const externalNodeBuiltins = ["events", "util", "os"];
   const baseConfig = {
     input: input,
     external: depNames.concat(externalNodeBuiltins),
@@ -75,9 +77,9 @@ export function browserConfig(test = false) {
     input: input,
     external: ["ms-rest-js"],
     output: {
-      file: "browser/index.js",
+      file: "browser/event-hubs.js",
       format: "umd",
-      name: "ExampleClient",
+      name: "Azure.Messaging.EventHubs",
       sourcemap: true,
       globals: { "ms-rest-js": "msRest" }
     },
@@ -96,13 +98,42 @@ export function browserConfig(test = false) {
           }
         }
       ),
+
+      // fs, net, and tls are used by rhea and need to be shimmed
+      // dotenv doesn't work in the browser, so replace it with a no-op function
+      shim({
+        fs: `export default {}`,
+        net: `export default {}`,
+        tls: `export default {}`,
+        dotenv: `export function config() { }`,
+        os: `
+          export function arch() { return "javascript" }
+          export function type() { return "Browser" }
+          export function release() { typeof navigator === 'undefined' ? '' : navigator.appVersion }
+        `,
+        path: `export default {}`,
+        dns: `export function resolve() { }`
+      }),
+
       nodeResolve({
-        mainFields: ['module', 'browser'],
+        mainFields: ["module", "browser"],
         preferBuiltins: false
       }),
+
       cjs({
         namedExports: { events: ["EventEmitter"] }
       }),
+
+      // rhea and rhea-promise use the Buffer global which requires
+      // injection to shim properly
+      inject({
+        modules: {
+          Buffer: ["buffer", "Buffer"],
+          process: "process"
+        },
+        exclude: ["./**/package.json"]
+      }),
+
       json()
     ]
   };

sdk/eventhub/event-hubs/rollup.config.js

@@ -9,9 +9,8 @@ if (!process.env.ONLY_BROWSER) {
   inputs.push(base.nodeConfig());
 }
 
-// Disable this until we are ready to run rollup for the browser.
-// if (!process.env.ONLY_NODE) {
-//   inputs.push(base.browserConfig());
-// }
+if (!process.env.ONLY_NODE) {
+  inputs.push(base.browserConfig());
+}
 
 export default inputs;

sdk/eventhub/event-hubs/samples/browserSample.html

@@ -0,0 +1,37 @@
+<!-- 
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the MIT Licence.
+  
+This sample demonstrates a simple send event operation.  
+Refer to other samples and replace code in main() to try them out -->
+
+<!-- Line that imports the SDK source script for use in browser -->
+<script src="../browser/event-hubs.js"></script>
+
+<script>
+  // EventHubClient holds reference to the EventHubClient global object exposed by the imported script
+  const EventHubClient = Azure.Messaging.EventHubs.EventHubClient;
+
+  const connectionString = "";
+  const eventHubName = "";
+
+  async function main() {
+    // Creates the instance of EventHubClient using input connection string
+    // Refer to SDK documentation and other samples for more usage related information
+    const client = EventHubClient.createFromConnectionString(connectionString, eventHubName);
+
+    const partitionIds = await client.getPartitionIds();
+
+    // NOTE: For receiving events from Azure Stream Analytics, please send Events to an EventHub
+    // where the body is a JSON object/array.
+    const eventData = { body: { message: `Hello World! ...` } };
+    console.log(`Sending event: ${eventData.body.message}`);
+    await client.send(eventData, partitionIds[0]);
+
+    await client.close();
+  }
+
+  main().catch(err => {
+    console.log("Error occurred: ", err);
+  });
+</script>

sdk/eventhub/event-hubs/src/connectionContext.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import * as log from "./log";
-import os from "os";
+import * as os from "os";
 import { packageJsonInfo } from "./util/constants";
 import { EventHubReceiver } from "./eventHubReceiver";
 import { EventHubSender } from "./eventHubSender";