Module support

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
     "env": {
+        "amd": true,
         "browser": true,
         "node": true
     },

README.md

@@ -8,29 +8,62 @@ Lately, in this situation, I ask my visitors to send me the report from whatsmyb
 Note, this is meant for reporting and not for application logic; your application should use feature detection, not browser detection. Therefore, only the most common browser names and OS names are reported, see the [Coverage](#coverage) section below for more details. The full user agent string is always provided and it can help you identify any browser. If you need to report on every browser and OS or other information in the user agent string, then take a look at [platform.js][2] and/or [UAParser.js][7].
 
 # Usage
-Package manager support is planned, but for now load this script into a browser and call `browserReport()` with a callback. Note, some values maybe `null` if the information is not available.
+You can load `browser-report` via plain script tag, AMD loader or module bundler (Webpack). In every environment you're provided with two functions
 
-## Asynchronous Usage
+  1. `browserReport()`
+  2. `browserReportSync()`
 
-    <script src="browser-report.js"></script>
-    <script>
-        browserReport(function (err, report) {
-            if (err) {
-                throw err;
-            }
-            console.log(report);
-        });
-    </script>
+Note, some values maybe `null` if the information is not available.
+
+## Asynchronous Usage (via script tag)
+
+```html
+	<script src="browser-report.js"></script>
+	<script>
+		browserReport(function (err, report) {
+			if (err) {
+				throw err;
+			}
+			console.log(report);
+		});
+	</script>
+```
 
 ## Synchronous Usage
 
 Note, the remote client IP address is not available in the synchronous function call.
 
-    <script src="browser-report.js"></script>
-    <script>
-        var report = browserReportSync();
-        console.log(report);
-    </script>
+```html
+	<script src="browser-report.js"></script>
+	<script>
+		var report = browserReportSync();
+		console.log(report);
+	</script>
+```
+
+## AMD
+```html
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
+	<script>
+		requirejs.config({
+		  bundles: {
+		    'browser-report': ['browserReport', 'browserReportSync'],  // indicate that browser-report.js is hosting both functions
+		  }
+		});
+		requirejs(['browserReport', 'browserReportSync'], function(browserReport, browserReportSync) {
+			// your functions are now available
+		});
+```
+
+## Module bundler
+
+Install module via `NPM` or `Yarn`. Then just import your functions (ES6+ code):
+
+```js
+import browserReport, { browserReportSync } from 'browser-report';
+
+// your functions are now available
+```
 
 ## Report Object Format
 

index.js → browser-report.js

@@ -3,13 +3,29 @@
  * Inspired by
  * http://stackoverflow.com/questions/9514179/how-to-find-the-operating-system-version-using-javascript
  */
-(function () {
+(function (root, factory) {
     "use strict";
 
-    var extractDataFromClient, definePropertySupported;
+    if (typeof define === "function" && define.amd) {
+        // AMD. Register as an anonymous module.
+        define("browserReportSync", [], factory().browserReportSync);
+        define([], factory);
 
-    extractDataFromClient = function (userAgent) {
-        var report, match, uuid;
+    } else if (typeof module === "object" && module.exports) {
+        // CommonJS-like environments that support module.exports, like Node.
+        module.exports = factory();
+
+    } else {
+        // Browser globals (root is window)
+        root.browserReport = factory();
+        root.browserReportSync = root.browserReport.sync;
+    }
+
+}(this, function () {
+    "use strict";
+
+    var extractDataFromClient = function (userAgent) {
+        var definePropertySupported, report, match, uuid;
 
         userAgent = userAgent || navigator.userAgent;
 
@@ -470,19 +486,18 @@
         return report;
     };
 
-
     /*
      * asynchronous version includes the remote client IP address
      * uses ipify.org API
      */
-    window.browserReport = window.browserReport || function (callback) {
+    var browserReport = function (callback) {
         var report, newScriptTag, existingScriptTag;
 
         report = extractDataFromClient();
 
         // use ipify.org to get the remote client ip address
         // define function to handle data from ipify.org
-        window.getip = window.getip || function (data) {
+        window.getip = function (data) {
             report.ip = data.ip;
             callback(null, report);
         };
@@ -495,15 +510,13 @@
 
         // report on errors
         newScriptTag.onerror = callback;
-
     };
 
-
-    /*
-     * synchronous version returns report immediately
-     * but does not include the remote client IP address
-     */
-    window.browserReportSync = window.browserReportSync || function (userAgent) {
+    var browserReportSync = function (userAgent) {
         return extractDataFromClient(userAgent);
     };
-}());
+
+    browserReport.sync = browserReport.browserReportSync = browserReportSync;
+
+    return browserReport;
+}));

package.json

@@ -3,12 +3,12 @@
     "version": "2.2.8",
     "description": "Report browser settings like whatsmybrowser.org.",
     "keywords": "browser user-agent useragent viewport screen layout plugins report detect",
-    "main": "./dist/browser-report.js",
+    "main": "./browser-report.js",
     "scripts": {
         "pretest": "eslint \"**/*.js\"",
         "test": "open file://`find $PWD/test -type f -name '*.html'`",
         "prepublish": "npm run cp && npm run uglify",
-        "cp": "cp index.js dist/browser-report.js",
+        "cp": "cp browser-report.js dist/browser-report.js",
         "uglify": "uglifyjs dist/browser-report.js -o dist/browser-report.min.js --compress --mangle",
         "gzip": "gzip --keep --force dist/browser-report.js dist/browser-report.min.js"
     },