From 6ac20ffcdc972341bee723a0de610d2ca4450af0 Mon Sep 17 00:00:00 2001
From: Igor Hlina <srigi@srigi.sk>
Date: Tue, 17 Jan 2017 15:12:08 +0100
Subject: [PATCH 1/3] Add module support for AMD & Webpack

---
 .eslintrc.js                    |   1 +
 README.md                       |  65 ++++++--
 index.js => browser-report.js   |  41 +++--
 package.json                    |   2 +-
 test-amd.html                   | 283 ++++++++++++++++++++++++++++++++
 sample.html => test-global.html |   2 +-
 test/index.html                 |   2 +-
 7 files changed, 363 insertions(+), 33 deletions(-)
 rename index.js => browser-report.js (94%)
 create mode 100644 test-amd.html
 rename sample.html => test-global.html (99%)

diff --git a/.eslintrc.js b/.eslintrc.js
index c01127c..66f750e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,6 @@
 module.exports = {
     "env": {
+        "amd": true,
         "browser": true,
         "node": true
     },
diff --git a/README.md b/README.md
index e9d1d93..8ec71f9 100644
--- a/README.md
+++ b/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
 
diff --git a/index.js b/browser-report.js
similarity index 94%
rename from index.js
rename to browser-report.js
index 3326cc5..d4e3e33 100644
--- a/index.js
+++ b/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,12 +486,11 @@
         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();
@@ -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;
+}));
diff --git a/package.json b/package.json
index 058be79..1b60d14 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
         "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"
     },
diff --git a/test-amd.html b/test-amd.html
new file mode 100644
index 0000000..bbd6bf9
--- /dev/null
+++ b/test-amd.html
@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Example Usage of browser-report</title>
+    <style>
+    body {
+        font: message-box;
+    }
+    h1 {
+        font-size: 1em;
+    }
+    table {
+        border-collapse: collapse;
+    }
+    td {
+        border-bottom: 1pt solid gray;
+        padding: calc(1.25em - 0.5pt) 0;
+        padding-left: 1ex;
+    }
+    td:first-child {
+        padding-left: 0;
+    }
+    </style>
+</head>
+<body>
+    <h1>
+        Example Usage of browser-report
+    </h1>
+    <h2>
+        You are using {{browser.name}} {{browser.majorVersion}}.
+    </h2>
+    <h3>
+        Browser Details
+    </h3>
+    <p>
+        We’ve detected the following details about your browser.
+    </p>
+    <table>
+        <tr>
+            <td>
+                Operating System
+            </td>
+            <td>
+                {{os.name}} {{os.version}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                IP Address
+            </td>
+            <td>
+                {{ip}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                JavaScript Enabled
+            </td>
+            <td>
+                {{scripts}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Cookies Enabled
+            </td>
+            <td>
+                {{cookies}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Flash Version
+            </td>
+            <td>
+                {{flash.version}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Java Version
+            </td>
+            <td>
+                {{java.version}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                WebSockets Supported
+            </td>
+            <td>
+                {{websockets}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Browser Size
+            </td>
+            <td>
+                {{viewport.width}} x {{viewport.height}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Screen Size
+            </td>
+            <td>
+                {{screen.width}} x {{screen.height}} @ {{screen.dppx}}x
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Color Depth
+            </td>
+            <td>
+                {{screen.colors}}
+            </td>
+        </tr>
+    </table>
+    <p class="user-agent">
+        Your full user agent string is:<br>
+        {{userAgent}}
+    </p>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
+    <script>
+    /*
+     * pure JS implementation of forEach
+     * because I hate not having it
+     */
+    // Production steps of ECMA-262, Edition 5, 15.4.4.18
+    // Reference: http://es5.github.io/#x15.4.4.18
+    if (!Array.prototype.forEach) {
+
+        Array.prototype.forEach = function(callback, thisArg) {
+
+            var T, k;
+
+            if (this == null) {
+                throw new TypeError(' this is null or not defined');
+            }
+
+            // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+            var O = Object(this);
+
+            // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+            // 3. Let len be ToUint32(lenValue).
+            var len = O.length >>> 0;
+
+            // 4. If IsCallable(callback) is false, throw a TypeError exception.
+            // See: http://es5.github.com/#x9.11
+            if (typeof callback !== "function") {
+                throw new TypeError(callback + ' is not a function');
+            }
+
+            // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+            if (arguments.length > 1) {
+                T = thisArg;
+            }
+
+            // 6. Let k be 0
+            k = 0;
+
+            // 7. Repeat, while k less than len
+            while (k < len) {
+
+                var kValue;
+
+                // a. Let Pk be ToString(k).
+                //     This is implicit for LHS operands of the in operator
+                // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+                //     This step can be combined with c
+                // c. If kPresent is true, then
+                if (k in O) {
+
+                    // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+                    kValue = O[k];
+
+                    // ii. Call the Call internal method of callback with T as the this value and
+                    // argument list containing kValue, k, and O.
+                    callback.call(T, kValue, k, O);
+                }
+                // d. Increase k by 1.
+                k++;
+            }
+            // 8. return undefined
+        };
+    }
+    </script>
+    <script>
+        var sampleReport;
+
+        requirejs.config({
+          bundles: {
+              "browser-report": ["browserReport", "browserReportSync"],  // indicate that `browserReport` and `browserReportSync` are both in browser-report.js
+          }
+        });
+        requirejs(["browserReport", "browserReportSync"], function(browserReport, browserReportSync) {
+            browserReport(function (err, report) {
+                "use strict";
+
+                var h2, text, tds, p;
+
+                if (err) {
+                    throw err;
+                }
+
+                // save to global variable for inspection by developers
+                sampleReport = report;
+
+                // add some custom data to the report
+                if (report.browser.version) {
+                    report.browser.majorVersion = report.browser.version.split(".")[0];
+                }
+
+                // update h2 with browser name and major version
+                if (document.querySelector) {
+                    h2 = document.querySelector("h2");
+                } else {
+                    h2 = document.getElementsByTagName("h2")[0];
+                }
+                text = h2.innerHTML;
+                text = text.replace("{{browser.name}}", report.browser.name);
+                text = text.replace("{{browser.majorVersion}}", report.browser.majorVersion);
+                h2.innerHTML = text;
+
+                // update table cells with browser details
+                if (document.querySelectorAll) {
+                    tds = document.querySelectorAll("td");
+                } else {
+                    tds = document.getElementsByTagName("td");
+                }
+                Array.prototype.forEach.call(tds, function (td) {
+                    var t, matches;
+
+                    t = td.innerHTML;
+                    matches = t.match(/\{\{[\w.]+?\}\}/g);
+
+                    if (matches) {
+                        matches.forEach(function (match) {
+                            var key, k1, k2, v;
+
+                            key = match.slice(2, -2);
+                            k1 = key.split(".")[0];
+                            k2 = key.split(".")[1];
+
+                            if (k1 && k2) {
+                                v = report[k1][k2] || "n/a";
+                            } else {
+                                v = report[k1] || "n/a";
+                            }
+
+                            if (v === true) {
+                                v = "Yes";
+                            }
+                            if (v === false) {
+                                v = "No";
+                            }
+
+                            t = t.replace(match, v);
+                        });
+                    }
+                    td.innerHTML = t;
+                });
+
+                // update user-agent element with full user agent string
+                if (document.querySelector) {
+                    p = document.querySelector("p.user-agent");
+                } else {
+                    var elements = document.getElementsByTagName("p");
+                    Array.prototype.forEach.call(elements, function (element) {
+                        if (element.className.match("user-agent")) {
+                            p = element;
+                        }
+                    });
+                }
+                p.innerHTML = p.innerHTML.replace("{{userAgent}}", report.userAgent);
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/sample.html b/test-global.html
similarity index 99%
rename from sample.html
rename to test-global.html
index 306bd54..693270e 100644
--- a/sample.html
+++ b/test-global.html
@@ -123,7 +123,7 @@ <h3>
         Your full user agent string is:<br>
         {{userAgent}}
     </p>
-    <script src="index.js"></script>
+    <script src="browser-report.js"></script>
     <script>
     /*
      * pure JS implementation of forEach
diff --git a/test/index.html b/test/index.html
index 64f4fb2..4cf77e2 100644
--- a/test/index.html
+++ b/test/index.html
@@ -12,7 +12,7 @@
     <script src="https://cdn.rawgit.com/shouldjs/should.js/8.2.1/should.js"></script>
     <script src="https://cdn.rawgit.com/mochajs/mocha/2.3.4/mocha.js"></script>
 
-    <script src="../index.js"></script>
+    <script src="../browser-report.js"></script>
     <script src="data/known-user-agent-results.js"></script>
 
     <script>mocha.setup('bdd')</script>

From ce3f68964bc396e568a3f2930cfb0c9cdd8785fc Mon Sep 17 00:00:00 2001
From: Igor Hlina <srigi@srigi.sk>
Date: Wed, 8 Feb 2017 14:38:26 +0100
Subject: [PATCH 2/3] Don't ask cached identifier

It breaks multiple calls to `browserReport(callback)`
Only callback from 1st call to `browserReport()` is executed.
---
 browser-report.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser-report.js b/browser-report.js
index d4e3e33..86970a0 100644
--- a/browser-report.js
+++ b/browser-report.js
@@ -497,7 +497,7 @@
 
         // 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);
         };

From fa1ace5079099f55ab3716105524e71eed0b4c9d Mon Sep 17 00:00:00 2001
From: Igor Hlina <srigi@srigi.sk>
Date: Thu, 9 Feb 2017 12:09:28 +0100
Subject: [PATCH 3/3] Fix package entry point

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1b60d14..7eb4b98 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "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'`",