feat: support client hints #33 (#34)

* feat: support client hints #33

* chore: fix editorconfig

* fix: travis node version

* chore: add demo type in commit.template

* demo: add majorVersion

* skip: apply review

.editorconfig

@@ -1,14 +1,18 @@
 # http://editorconfig.org
 root = true
 
-[*.js]
+[{*.js,*.ts}]
 charset = utf-8
 end_of_line = lf
-indent_style = tab
+indent_style = space
+indent_size = 4
 insert_final_newline = true
 max_line_length = 80
 trim_trailing_whitespace = true
 
 [{package.json,.travis.yml}]
 indent_style = space
-indent_size = 2
+indent_size = 4
+
+[*]
+insert_final_newline = true

.eslintignore

@@ -1 +1,3 @@
-src/Array.js
+node_modules
+dist
+*.js

.eslintrc

@@ -1,13 +1,26 @@
 {
-	// Naver https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md
-	"extends": "naver",
-	"rules": {
-		"comma-dangle": ["error", {
-			"arrays": "always-multiline",
-			"objects": "always-multiline",
-			"imports": "always-multiline",
-			"exports": "always-multiline",
-			"functions": "never"
-		}]
-	}
-}
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "no-empty-interface": "off",
+        "comma-dangle": [
+            "error",
+            "always-multiline"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

.gitignore

@@ -163,7 +163,7 @@ demo/dist
 demo/doc
 .sass-cache/
 .jekyll-metadata
-
+.jekyll-cache
 
 ### SublimeText ###
 # cache files for sublime text
@@ -209,3 +209,5 @@ doc/
 demo/_data/version.yml
 demo/release
 dist/
+declaration/
+

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "6"
+  - "12"
 dist: trusty
 sudo: required
 install:

README.md

@@ -1,6 +1,10 @@
-# egjs-agent [![npm version](https://badge.fury.io/js/%40egjs%2Fagent.svg)](https://badge.fury.io/js/%40egjs%2Fagent) [![Build Status](https://travis-ci.org/naver/egjs-agent.svg?branch=master)](https://travis-ci.org/naver/egjs-agent) [![Coverage Status](https://coveralls.io/repos/github/naver/egjs-agent/badge.svg?branch=master)](https://coveralls.io/github/naver/egjs-agent?branch=master)
 
-Extracts browser and operating system information from the user agent string.
+
+# egjs-agent
+[![npm version](https://img.shields.io/npm/v/@egjs/agent.svg?style=flat-square&color=007acc&label=version)](https://www.npmjs.com/package/@egjs/agent) [![Build Status](https://img.shields.io/travis/naver/egjs-agent.svg?style=flat-square&label=build)](https://travis-ci.org/naver/egjs-agent) [![Coverage Status](https://img.shields.io/coveralls/github/naver/egjs-agent.svg?style=flat-square&label=coverage)](https://coveralls.io/github/naver/egjs-agent?branch=master)
+![Support TypeScript](https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript)
+
+Extracts browser and operating system information from the user agent string or user agent object(userAgentData).
 
 ## Documents
 - [Get Started and Demos](https://naver.github.io/egjs-agent/)
@@ -10,27 +14,171 @@ Extracts browser and operating system information from the user agent string.
 
 Download dist files from repo directly or install it via npm. 
 
-### For development (Uncompressed)
+### Installation with npm
 
-You can download the uncompressed files for development
+The following command shows how to install egjs-agent using npm.
 
-- Latest : https://naver.github.io/egjs-agent/release/latest/dist/agent.js
-- Specific version : https://naver.github.io/egjs-agent/release/[VERSION]/dist/agent.js
+```bash
+$ npm install @egjs/agent
+```
 
-### For production (Compressed)
+### For development
 
-You can download the compressed files for production
+You can download the files for development
 
-- Latest : https://naver.github.io/egjs-agent/release/latest/dist/agent.min.js
-- Specific version : https://naver.github.io/egjs-agent/release/[VERSION]/dist/agent.min.js
+* Latest : https://naver.github.io/egjs-agent/release/latest/dist/agent.js
+* Latest(min): https://naver.github.io/egjs-agent/release/latest/dist/agent.min.js
+* Specific version : https://naver.github.io/egjs-agent/release/[VERSION]/dist/agent.js
+* Specific version(min):  https://naver.github.io/egjs-agent/release/[VERSION]/dist/agent.min.js
 
 
-### Installation with npm
+## Prepare for Client Hints!
 
-The following command shows how to install egjs-agent using npm.
+Chrome was planned to freeze userAgent to improve user privacy, and it is being applied as an experimental feature in 84+.
+
+Not only Chrome, but other browsers will come someday.
+
+> It is still an experimental feature until Chrome(Chromium) 86.
+>
+> If you want to test, enable the flag below.
+>
+> **chrome://flags/#enable-experimental-web-platform-features**
+>
+> **chrome://flags/#freeze-user-agent**
+
+
+### In Chrome (Chrome 87, Mac, Freeze User-Agent)
+* Before
+```
+Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4243.0 Safari/537.36
+```
+* After
+```
+Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.0.0 Safari/537.36
+```
+### In the future
+1. the following attribute values will not appear correctly.
+    * navigator.userAgent
+    * navigator.appVersion
+    * navigator.platform
+    * navigator.productSub
+    * navigator.vendor
+2. You should use `navigator.userAgentData` instead of `navigator.userAgent`.
+    * Browser version only shows major.
+    * OS name, OS version, Browser full version should be fetched asynchronously.
+    * The only OS name that you can check synchronously are iOS and Android.
+
+### Possible (You can know exactly)
+* Check browser name, major version
+* Check mobile
+* Check iOS, Android
+* Check Webkit, Chromium
+* Check old OS, OS Version (Chrome 84 support range or less)
+    * **< Android 5.0**
+    * **< Mac OS X 10.10**
+    * **< Windows 7**
+    * **< iOS Unknown**
+
+```js
+import getAgent from "@egjs/agent";
+
+const agent = getAgent();
+
+// Check iOS
+agent.os.name === "ios"
+agent.os.majorVersion === 9
+// Check Android
+agent.os.name === "android"
+agent.os.majorVersion === 4
+parseFloat(agent.os.version) <= 4.4
+// Check browser name
+agent.browser.name === "safari"
+// Check webkit
+agent.browser.webkit
+// Check chromium
+agent.browser.chromium
+```
+### Not Possible (If synchronous)
+* Check OS (Mac with browsers except Safari, Windows, Linux), OS version
+* Check Browser full version.
+
+```js
+import getAgent from "@egjs/agent";
+const agent = getAgent();
+
+// If the full version is 10.5, it is displayed as 10.
+agent.browser.version
+// "unknown"
+agent.os.name
+// -1
+agent.os.majorVersion
+```
+
+### Possible (If asynchronous)
+* You can get accurate agent information.
+* Check OS(Mac, Windows, Linux), OS version
+* Check Browser full version.
+```js
+import { getAccurateAgent } from "@egjs/agent";
+
+// Use Promise
+getAccurateAgent().then(agent => {
+    // Check OS, OS version
+    agent.os.name
+    agent.os.version
+
+    // Check Browser full verion
+    agent.browser.version
+});
+
+// Use Callback
+getAccurateAgent(agent => {});
+```
+
+### If you dare to use synchrous, you have to choose.
+* You cannot get the OS name and version other than iOS, Android.
+* You can only get the major version of the browser. However, unless there is a serious bug, you will mainly check the major version.
+* Instead, infer to browser, Webkit, or Chromium.
+
+#### Examples
+* Check Mac Safari, iOS all browsers
+
+Mac Safari, iOS all browsers are webkit.
+```js
+import getAgent from "@egjs/agent";
+
+const agent = getAgent();
+
+if ((agent.os.name === "mac" || agent.os.name === "ios") && agent.browser.webkit) {
+    console.log("is mac, ios webkit");
+}
+```
+* Check Android version >= 5
+```js
+import getAgent from "@egjs/agent";
+
+const agent = getAgent();
+
+if (
+    agent.os.name === "android"
+    && (agent.os.majorVersion >= 5 || agent.os.majorVersion === -1)) {
+    console.log("is Android >= 5");
+}
+```
+* Check iOS version >= 10
+```js
+import getAgent from "@egjs/agent";
+
+const agent = getAgent();
+
+
+if (
+    agent.os.name === "ios"
+    && (agent.os.majorVersion >= 10 || agent.os.majorVersion === -1)
+) {
+    console.log("is iOS");
+}
 
-```bash
-$ npm install @egjs/agent
 ```
 
 
@@ -41,6 +189,12 @@ The following are the supported browsers.
 |---|---|---|---|---|---|
 |7+|latest|latest|latest|3+|2.1+|
 
+### Client Hints Support
+
+Chromium (Chrome, Edge, Whale)|Gecko (Firefox)|Webkit (Safari)|
+|---|---|---|
+|84+ (Experimental)|Unknown|Unknown|
+
 
 
 
@@ -72,7 +226,7 @@ $ npm install
 Use npm script to build eg.agent
 
 ```bash
-# Run webpack-dev-server for development
+# Run rollup
 $ npm start
 
 # Build
@@ -89,7 +243,7 @@ Two folders will be created after complete build is completed.
 
 ### Linting
 
-To keep the same code style, we adopted [ESLint](http://eslint.org/) to maintain our code quality. The [rules](https://github.com/naver/eslint-config-naver/tree/master/rules) are modified version based on [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript).
+To keep the same code style, we adopted [ESLint](http://eslint.org/) to maintain our code quality. 
 Setup your editor for check or run below command for linting.
 
 ```bash
@@ -103,7 +257,7 @@ Once you created a branch and done with development, you must perform a test run
 ```bash
 $ npm run test
 ```
-Running a `npm run test` command will start [Mocha](https://mochajs.org/) tests via [Karma-runner](https://karma-runner.github.io/).
+Running a `npm run test` command will start [Jest](https://jestjs.io/).
 
 
 ## Bug Report

config/commit.template

@@ -19,6 +19,7 @@ Ref #30
  - style: Changes that do not affect the meaning of the code. Such as white-space, formatting, missing semi-colons, etc... It also possible to change JSHint, JSCS rules of the code.
  - refactor: A code change that neither fixes a bug nor adds a feature
  - test: Adding missing tests. Changing tests.
+ - demo: Adding demo. Changing demos.
  - chore: Changes to the build process or tools and libraries such as documentation generation
 
 ============ See More =============