Fix detection issues and clean default options names

bbenoist · Aug 15, 2019 · e4f1e08 · e4f1e08
1 parent 0d01bf6
commit e4f1e08
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 68 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "name": "vscode-jest-tests",
+            "request": "launch",
+            "args": [
+                "--runInBand"
+            ],
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "disableOptimisticBPs": true,
+            "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+        }
+    ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -0,0 +1,14 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "build",
+            "problemMatcher": [
+                "$tsc"
+            ]
+        }
+    ]
+}
diff --git a/README.md b/README.md
@@ -38,18 +38,38 @@ const icons = faUserAgent(userAgent);
 // }
 ```
 
+Simplified content of [`doc/demo.html`](https://github.com/bbenoist/fontawesome-user-agent/blob/master/doc/demo.html):
+
+```html
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
+    </head>
+    <body>
+        <p id="demo"></p>
+        <script>
+            var icons = FaUserAgent.faUserAgent(navigator.userAgent);
+            html = "<i class=\"" + icons.browser.style + " " + icons.browser.name + "\" />"
+                 + "<i class=\"" + icons.os.style + " " + icons.os.name + "\" />"
+                 + "<i class=\"" + icons.platform.style + " " + icons.platform.name + "\" />";
+            document.getElementById("demo").innerHTML = html;
+        </script>
+    </body>
+</html>
+```
+
 ## Options
 
 If you need to customize some options, you can use the optional `options` argument:
 
 ```js
 const icons = faUserAgent(userAgent, options => {
     options.prefix = "";
-    options.icons.browser["Custom Browser"] = {
+    options.icons.browser.customBrowser = {
         name: "icon-name-without-prefix",
         style: "fas-or-fab"
     }
-    options.icons.os.MacOS = {
+    options.icons.os.macOS = {
         name: "money-bill",
         style: "fas"
     }

diff --git a/doc/default-options.md b/doc/default-options.md
@@ -1,29 +1,29 @@
 # Default Options
 
 <link rel="stylesheet" type="text/css" media="all" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css />
-<link rel="stylesheet" type="text/css" media="all" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/brands.min.css />
 
 Name | Value | Icon
 --- | --- | ---
 `prefix` | `fa-` |
-`icons.browser.Android Browser` | `{"name":"fa-android","style":"fab"}` | <i class="fab fa-android" />
-`icons.browser.Internet Explorer` | `{"name":"fa-internet-explorer","style":"fab"}` | <i class="fab fa-internet-explorer" />
-`icons.browser.Opera Coast` | `{"name":"fa-opera","style":"fab"}` | <i class="fab fa-opera" />
-`icons.browser.BlackBerry` | `{"name":"fa-blackberry","style":"fab"}` | <i class="fab fa-blackberry" />
-`icons.browser.Chrome` | `{"name":"fa-chrome","style":"fab"}` | <i class="fab fa-chrome" />
-`icons.browser.Chromium` | `{"name":"fa-chrome","style":"fab"}` | <i class="fab fa-chrome" />
-`icons.browser.Edge` | `{"name":"fa-edge","style":"fab"}` | <i class="fab fa-edge" />
-`icons.browser.Googlebot` | `{"name":"fa-google","style":"fab"}` | <i class="fab fa-google" />
-`icons.browser.Opera` | `{"name":"fa-opera","style":"fab"}` | <i class="fab fa-opera" />
-`icons.browser.PhantomJS` | `{"name":"fa-ghost","style":"fas"}` | <i class="fas fa-ghost" />
-`icons.browser.Safari` | `{"name":"fa-safari","style":"fab"}` | <i class="fab fa-safari" />
-`icons.os.Android` | `{"name":"fa-android","style":"fab"}` | <i class="fab fa-android" />
-`icons.os.BlackBerry` | `{"name":"fa-blackberry","style":"fab"}` | <i class="fab fa-blackberry" />
+`icons.browser.androidBrowser` | `{"name":"fa-android","style":"fab"}` | <i class="fab fa-android" />
+`icons.browser.internetExplorer` | `{"name":"fa-internet-explorer","style":"fab"}` | <i class="fab fa-internet-explorer" />
+`icons.browser.operaCoast` | `{"name":"fa-opera","style":"fab"}` | <i class="fab fa-opera" />
+`icons.browser.blackBerry` | `{"name":"fa-blackberry","style":"fab"}` | <i class="fab fa-blackberry" />
+`icons.browser.chrome` | `{"name":"fa-chrome","style":"fab"}` | <i class="fab fa-chrome" />
+`icons.browser.chromium` | `{"name":"fa-chrome","style":"fab"}` | <i class="fab fa-chrome" />
+`icons.browser.edge` | `{"name":"fa-edge","style":"fab"}` | <i class="fab fa-edge" />
+`icons.browser.firefox` | `{"name":"fa-firefox","style":"fab"}` | <i class="fab fa-firefox" />
+`icons.browser.googlebot` | `{"name":"fa-google","style":"fab"}` | <i class="fab fa-google" />
+`icons.browser.opera` | `{"name":"fa-opera","style":"fab"}` | <i class="fab fa-opera" />
+`icons.browser.phantomJS` | `{"name":"fa-ghost","style":"fas"}` | <i class="fas fa-ghost" />
+`icons.browser.safari` | `{"name":"fa-safari","style":"fab"}` | <i class="fab fa-safari" />
+`icons.os.android` | `{"name":"fa-android","style":"fab"}` | <i class="fab fa-android" />
+`icons.os.blackBerry` | `{"name":"fa-blackberry","style":"fab"}` | <i class="fab fa-blackberry" />
 `icons.os.iOS` | `{"name":"fa-apple","style":"fab"}` | <i class="fab fa-apple" />
-`icons.os.Linux` | `{"name":"fa-linux","style":"fab"}` | <i class="fab fa-linux" />
-`icons.os.MacOS` | `{"name":"fa-apple","style":"fab"}` | <i class="fab fa-apple" />
-`icons.os.PlayStation4` | `{"name":"fa-playstation","style":"fab"}` | <i class="fab fa-playstation" />
-`icons.os.Windows` | `{"name":"fa-windows","style":"fab"}` | <i class="fab fa-windows" />
+`icons.os.linux` | `{"name":"fa-linux","style":"fab"}` | <i class="fab fa-linux" />
+`icons.os.macOS` | `{"name":"fa-apple","style":"fab"}` | <i class="fab fa-apple" />
+`icons.os.playStation4` | `{"name":"fa-playstation","style":"fab"}` | <i class="fab fa-playstation" />
+`icons.os.windows` | `{"name":"fa-windows","style":"fab"}` | <i class="fab fa-windows" />
 `icons.platform.desktop` | `{"name":"fa-desktop","style":"fas"}` | <i class="fas fa-desktop" />
 `icons.platform.mobile` | `{"name":"fa-mobile-alt","style":"fas"}` | <i class="fas fa-mobile-alt" />
 `icons.platform.tablet` | `{"name":"fa-tablet-alt","style":"fas"}` | <i class="fas fa-tablet-alt" />

diff --git a/doc/demo.html b/doc/demo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Demo</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="../dist/index.min.js"></script>
+        <link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
+        <style type="text/css">
+            #demo {
+                text-align: center;
+                font-size: 50px;
+            }
+            i {
+                margin-left: 10px;
+                margin-right: 10px;
+            }
+        </style>
+    </head>
+    <body>
+        <p id="demo"></p>
+        <script>
+            var icons = FaUserAgent.faUserAgent(navigator.userAgent);
+            html = "<i class=\"" + icons.browser.style + " " + icons.browser.name + "\" />"
+                 + "<i class=\"" + icons.os.style + " " + icons.os.name + "\" />"
+                 + "<i class=\"" + icons.platform.style + " " + icons.platform.name + "\" />";
+            document.getElementById("demo").innerHTML = html;
+        </script>
+    </body>
+</html>
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -6,11 +6,12 @@
   "types": "lib/cjs/index.d.ts",
   "scripts": {
     "prebuild": "rm -fr lib; rm -fr dist; mkdir lib; mkdir dist",
-    "build": "npm run build:cjs; npm run build:es6; npm run build:browser; npm run build:browser:min",
+    "build": "npm run build:cjs; npm run build:es6; npm run build:browser; npm run build:browser:min; npm run build:doc",
     "build:cjs": "tsc --module commonjs --outDir lib/cjs",
     "build:es6": "tsc --module es6 --outDir lib/es6",
-    "build:browser": "browserify lib/cjs/index.js --standalone MyLib -o dist/index.js",
-    "build:browser:min": "browserify lib/cjs/index.js -g uglifyify --standalone MyLib -o dist/index.min.js",
+    "build:browser": "browserify lib/cjs/index.js --standalone FaUserAgent -o dist/index.js",
+    "build:browser:min": "browserify lib/cjs/index.js -g uglifyify --standalone FaUserAgent -o dist/index.min.js",
+    "build:doc": "ts-node script/write-default-options-md.ts",
     "test": "jest",
     "coverage": "jest --coverage",
     "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls"
@@ -31,14 +32,13 @@
   },
   "jest": {
     "transform": {
-      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+      ".(ts|tsx)": "ts-jest"
     },
     "testRegex": "src/.*(/__tests__/.*|\\.(test|spec))\\.(tsx?)$",
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}"
     ],
     "coverageDirectory": "coverage",
-    "mapCoverage": true,
     "moduleFileExtensions": [
       "ts",
       "tsx",

diff --git a/script/write-default-options-md.ts b/script/write-default-options-md.ts
@@ -35,12 +35,7 @@ function css(url: string) {
 
 const md = `# Default Options
 
-${[
-  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css",
-  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/brands.min.css"
-]
-  .map(css)
-  .join("\n")}
+${css("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css")}
 
 Name | Value | Icon
 --- | --- | ---

diff --git a/src/default-options.ts b/src/default-options.ts
@@ -12,26 +12,27 @@ export const DefaultOptions: FaUserAgentOptions = {
   prefix: "fa-",
   icons: {
     browser: {
-      "Android Browser": fab("android"),
-      "Internet Explorer": fab("internet-explorer"),
-      "Opera Coast": fab("opera"),
-      BlackBerry: fab("blackberry"),
-      Chrome: fab("chrome"),
-      Chromium: fab("chrome"),
-      Edge: fab("edge"),
-      Googlebot: fab("google"),
-      Opera: fab("opera"),
-      PhantomJS: fas("ghost"),
-      Safari: fab("safari"),
+      androidBrowser: fab("android"),
+      internetExplorer: fab("internet-explorer"),
+      operaCoast: fab("opera"),
+      blackBerry: fab("blackberry"),
+      chrome: fab("chrome"),
+      chromium: fab("chrome"),
+      edge: fab("edge"),
+      firefox: fab("firefox"),
+      googlebot: fab("google"),
+      opera: fab("opera"),
+      phantomJS: fas("ghost"),
+      safari: fab("safari"),
     },
     os: {
-      Android: fab("android"),
-      BlackBerry: fab("blackberry"),
+      android: fab("android"),
+      blackBerry: fab("blackberry"),
       iOS: fab("apple"),
-      Linux: fab("linux"),
-      MacOS: fab("apple"),
-      PlayStation4: fab("playstation"),
-      Windows: fab("windows"),
+      linux: fab("linux"),
+      macOS: fab("apple"),
+      playStation4: fab("playstation"),
+      windows: fab("windows"),
     },
     platform: {
       desktop: fas("desktop"),

diff --git a/src/lib.spec.ts b/src/lib.spec.ts
@@ -5,19 +5,19 @@ test("faUserAgent", () => {
     "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36";
   const expected = {
     browser: { name: "fa-chrome", style: "fab" },
-    os: { name: "fa-question", style: "fas" },
+    os: { name: "fa-apple", style: "fab" },
     platform: { name: "fa-desktop", style: "fas" }
   };
   expect(faUserAgent(userAgent)).toEqual(expected);
   const userAgent2 =
     "Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0";
   const expected2 = {
-    browser: { name: "fa-question", style: "fas" },
+    browser: { name: "fa-firefox", style: "fab" },
     os: { name: "fa-android-custom", style: "fab" },
     platform: { name: "fa-mobile-alt", style: "fas" }
   };
   const result = faUserAgent(userAgent2, options => {
-      options.icons.os.Android.name = "android-custom"
+      options.icons.os.android.name = "android-custom"
       return options;
   });
   expect(result).toEqual(expected2);

diff --git a/src/lib.ts b/src/lib.ts
@@ -9,8 +9,10 @@ function getBaseIcon(
   options: FaUserAgentOptions
 ): FaUserAgentIcon {
   const cat = options.icons[category];
-  if (!!name && Object.keys(cat).some(k => k === name)) {
-    return cat[name];
+  const found =
+    name && Object.keys(cat).find(k => k.replace(" ", "").toLowerCase() === name.toLowerCase());
+  if (found) {
+    return cat[found];
   }
   return options.default[category];
 }