first commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": "airbnb-base",
+  "env": {
+    "jest": true
+  },
+  "globals": {
+    "window": true
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+coverage
+dist
+*.log

.npmignore

@@ -0,0 +1,6 @@
+src
+test
+coverage
+.babelrc
+.eslintrc
+.gitignore

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-present Daewoong Moon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,65 @@
+# browser-lang
+
+Detect user's most preferred language within the given language list.
+
+## Why?
+
+ - To determine an initial display language on your application with fallback options.
+
+## Inspiration
+
+ - I made `en` and `ko` router to support i18n. How do I detect user's preferred language on browser?
+ - My app only support `en` and `ko`. How do I handle if `de` users visit us?
+ - I added `fr` router. How do I make it possible to detect `fr_FR` and `fr_CA` users as well?
+
+## Installation
+
+```bash
+npm install browser-lang
+```
+or
+```bash
+yarn add browser-lang
+```
+
+## Options
+
+* **languages:**
+language code list that is available on your application.
+
+* **fallback:**
+default language when user's preferred language is not on the list.
+
+## Example
+
+in javascript project
+
+```js
+// const browserLang = require('browser-lang');
+import browserLang from 'browser-lang';
+
+const myLanguage = browserLang();
+// return the preferred language on browser: e.g. "ko-KR" or "ko".
+
+const myLanguage = browserLang({
+  languages: ['ko', 'de', 'zh', 'zh_TW', 'en'], 
+  fallback: 'en',
+});
+
+// return "ko" if the preferred language on browser is set to "ko-KR" or "ko".
+// return "en" as a fallback if the preferred language on browser is "fr".
+// return 'zh' if the preferred language on browser is set to "zh_HK".
+```
+
+## Browser support
+
+- Chrome
+- Firefox
+- Safari
+- IE
+- Edge
+- Opera
+
+## License
+
+MIT © [Daewoong Moon](https://github.com/wiziple)

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "browser-lang",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "",
+  "repository": "github:wiziple/browser-lang",
+  "bugs": "https://github.com/wiziple/browser-lang/issues",
+  "homepage": "https://github.com/wiziple/browser-lang",
+  "keywords": [
+    "browser language",
+    "language detect",
+    "accepted language",
+    "default language",
+    "i18n"
+  ],
+  "author": "Daewoong Moon <[email protected]>",
+  "main": "./dist/index.js",
+  "scripts": {
+    "clean": "rimraf dist",
+    "lint": "eslint src test",
+    "test": "jest test --watch",
+    "build": "babel src --out-dir dist"
+  },
+  "devDependencies": {
+    "babel-cli": "6.26.0",
+    "babel-preset-es2015": "6.24.1",
+    "eslint": "^5.0.1",
+    "eslint-config-airbnb-base": "13.0.0",
+    "eslint-plugin-import": "^2.13.0",
+    "jest": "^23.3.0"
+  },
+  "dependencies": {
+    "lodash": "^4.17.10"
+  }
+}

src/index.js

@@ -0,0 +1,50 @@
+import startsWith from 'lodash/startsWith';
+
+function getBrowserLang() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const lang = (window.navigator.languages && window.navigator.languages[0])
+    || window.navigator.language
+    || window.navigator.browserLanguage
+    || window.navigator.userLanguage
+    || window.navigator.systemLanguage
+    || null;
+
+  return lang;
+}
+
+function normalizeCode(code) {
+  return code.toLowerCase().replace(/-/, '_');
+}
+
+function getPreferredLanguage(options) {
+  if (!options) {
+    return getBrowserLang();
+  }
+
+  const { languages, fallback } = options;
+  if (!options.languages) {
+    return fallback;
+  }
+
+  // some browsers report language as en-US instead of en_US
+  const browserLanguage = normalizeCode(getBrowserLang());
+
+  if (!browserLanguage) {
+    return fallback;
+  }
+
+  const match = languages.filter(lang => normalizeCode(lang) === browserLanguage);
+
+  if (match.length > 0) {
+    return match[0] || fallback;
+  }
+
+  // en == en_US
+  const matchCodeOnly = languages.filter(lang => startsWith(browserLanguage, lang));
+  return matchCodeOnly[0] || fallback;
+}
+
+export default getPreferredLanguage;

test/index.test.js

@@ -0,0 +1,84 @@
+import browserLang from '../src';
+
+const mockNavigator = (obj) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      Object.defineProperty(window.navigator, key, {
+        value: obj[key],
+        configurable: true,
+      });
+    }
+  }
+};
+
+const initNavigator = () => {
+  mockNavigator({
+    languages: undefined,
+    language: undefined,
+    browserLanguage: undefined,
+    userLanguage: undefined,
+  });
+};
+
+describe('browserLang', () => {
+  initNavigator();
+
+  it('should return null when navigator.languages is undefined.', () => {
+    expect(browserLang()).toBe(null);
+  });
+
+  it('should return "ko_KR" when navigator.languages is defined as ["ko_KR", "ko"]', () => {
+    mockNavigator({
+      languages: ['ko_KR', 'ko'],
+    });
+    expect(browserLang()).toBe('ko_KR');
+  });
+
+  it('should return "ko_KR" when navigator.browserLanguage is defined as "ko_KR"', () => {
+    mockNavigator({
+      browserLanguage: 'ko_KR',
+    });
+    expect(browserLang()).toBe('ko_KR');
+  });
+
+  it('should return fallback when navigator.languages is undefined.', () => {
+    const fallback = 'ko_KR';
+    const options = {
+      fallback,
+    };
+    expect(browserLang(options)).toBe(fallback);
+  });
+
+  it('should return fallback when there is no available language on the list.', () => {
+    const fallback = 'ko_KR';
+    mockNavigator({
+      languages: ['de'],
+    });
+    const options = {
+      languages: ['fr', 'ko', 'en'],
+      fallback,
+    };
+    expect(browserLang(options)).toBe(fallback);
+  });
+
+  it('should return "zh_TW" when navigator.languages is ["zh_TW"] and "zh_TW" is on the list.', () => {
+    mockNavigator({
+      languages: ['zh_TW'],
+    });
+    const options = {
+      languages: ['zh', 'zh_TW', 'en'],
+    };
+    expect(browserLang(options)).toBe('zh_TW');
+  });
+
+  it('should return "zh" when navigator.languages is ["zh_TW"] and only "zh" is on the list.', () => {
+    mockNavigator({
+      languages: ['zh_TW'],
+    });
+    const options = {
+      languages: ['zh', 'en'],
+    };
+    expect(browserLang(options)).toBe('zh');
+  });
+});