Add internationalization using i18next

package.json

@@ -4,7 +4,8 @@
   "main": "dist/time-elements-legacy.js",
   "jsnext:main": "dist/time-elements.js",
   "scripts": {
-    "test": "make test"
+    "test": "make test",
+    "bundle-dependencies": "bundle-dependencies"
   },
   "devDependencies": {
     "babel-plugin-transform-custom-element-classes": "^0.1.0",
@@ -19,5 +20,11 @@
     "rollup": "^0.36.4",
     "rollup-plugin-babel": "^2.6.1",
     "webcomponents.js": "^0.7.23"
-  }
-}
+  },
+  "dependencies": {
+    "i18next": "^7.1.1"
+  },
+  "bundledDependencies": [
+    "i18next"
+  ]
+}

src/internationalization.js

@@ -0,0 +1,46 @@
+import i18next from 'i18next'
+
+export default class {
+  constructor() {
+    i18next.init({
+      lng: 'en',
+      resources: this.translations()
+    })
+  }
+
+  t(key, options) {
+    return i18next.t(key, options)
+  }
+
+  translations() {
+    return {
+      en: {
+        translation: {
+          "just_now":                "just now",
+          "second_ago_plural":       "{{count}} seconds ago",
+          "minute_ago":              "a minute ago",
+          "minute_ago_plural":       "{{count}} minutes ago",
+          "hour_ago":                "an hour ago",
+          "hour_ago_plural":         "{{count}} hours ago",
+          "day_ago":                 "a day ago",
+          "day_ago_plural":          "{{count}} days ago",
+          "month_ago":               "a month ago",
+          "month_ago_plural":        "{{count}} months ago",
+          "year_ago":                "a year ago",
+          "year_ago_plural":         "{{count}} years ago",
+          "year_from_now":           "a year from now",
+          "year_from_now_plural":    "{{count}} years from now",
+          "month_from_now":          "a month from now",
+          "month_from_now_plural":   "{{count}} months from now",
+          "day_from_now":            "a day from now",
+          "day_from_now_plural":     "{{count}} days from now",
+          "hour_from_now":           "a hour from now",
+          "hour_from_now_plural":    "{{count}} hours from now",
+          "minute_from_now":         "a minute from now",
+          "minute_from_now_plural":  "{{count}} minutes from now",
+          "seconds_from_now_plural": "{{count}} seconds from now"
+        }
+      }
+    }
+  }
+}

src/relative-time.js

@@ -1,8 +1,10 @@
 import {strftime, makeFormatter, isDayFirst, isThisYear, isYearSeparator} from './utils'
+import Internationalization from './internationalization'
 
 export default class RelativeTime {
   constructor(date) {
     this.date = date
+    this.translator = new Internationalization()
   }
 
   toString() {
@@ -58,31 +60,31 @@ export default class RelativeTime {
     const month = Math.round(day / 30)
     const year = Math.round(month / 12)
     if (ms < 0) {
-      return 'just now'
+      return this.translator.t('just_now')
     } else if (sec < 10) {
-      return 'just now'
+      return this.translator.t('just_now')
     } else if (sec < 45) {
-      return sec + ' seconds ago'
+      return this.translator.t('seconds_ago', {count: sec})
     } else if (sec < 90) {
-      return 'a minute ago'
+      return this.translator.t('minute_ago')
     } else if (min < 45) {
-      return min + ' minutes ago'
+      return this.translator.t('minute_ago', {count: min})
     } else if (min < 90) {
-      return 'an hour ago'
+      return this.translator.t('hour_ago')
     } else if (hr < 24) {
-      return hr + ' hours ago'
+      return this.translator.t('hour_ago', {count: hr})
     } else if (hr < 36) {
-      return 'a day ago'
+      return this.translator.t('day_ago')
     } else if (day < 30) {
-      return day + ' days ago'
+      return this.translator.t('day_ago', {count: day})
     } else if (day < 45) {
-      return 'a month ago'
+      return this.translator.t('month_ago')
     } else if (month < 12) {
-      return month + ' months ago'
+      return this.translator.t('month_ago', {count: month})
     } else if (month < 18) {
-      return 'a year ago'
+      return this.translator.t('year_ago')
     } else {
-      return year + ' years ago'
+      return this.translator.t('year_ago', {count: year})
     }
   }
 
@@ -120,29 +122,29 @@ export default class RelativeTime {
     const month = Math.round(day / 30)
     const year = Math.round(month / 12)
     if (month >= 18) {
-      return year + ' years from now'
+      return this.translator.t('year_from_now', {count: year})
     } else if (month >= 12) {
-      return 'a year from now'
+      return this.translator.t('year_from_now')
     } else if (day >= 45) {
-      return month + ' months from now'
+      return this.translator.t('month_from_now', {count: year})
     } else if (day >= 30) {
-      return 'a month from now'
+      return this.translator.t('month_from_now')
     } else if (hr >= 36) {
-      return day + ' days from now'
+      return this.translator.t('day_from_now', {count: day})
     } else if (hr >= 24) {
-      return 'a day from now'
+      return this.translator.t('day_from_now')
     } else if (min >= 90) {
-      return hr + ' hours from now'
+      return this.translator.t('hour_from_now', {count: hr})
     } else if (min >= 45) {
-      return 'an hour from now'
+      return this.translator.t('hour_from_now')
     } else if (sec >= 90) {
-      return min + ' minutes from now'
+      return this.translator.t('minute_from_now', {count: min})
     } else if (sec >= 45) {
-      return 'a minute from now'
+      return this.translator.t('minute_from_now')
     } else if (sec >= 10) {
-      return sec + ' seconds from now'
+      return this.translator.t('second_from_now', {count: sec})
     } else {
-      return 'just now'
+      return this.translator.t('just_now')
     }
   }
 

test/test.html

@@ -9,6 +9,7 @@
   <div id="mocha"></div>
 
   <script src="../node_modules/webcomponents.js/webcomponents.js"></script>
+  <script src="../node_modules/i18next/i18next.js"></script>
   <script src="../dist/time-elements-legacy.js"></script>
   <script src="../node_modules/chai/chai.js"></script>
   <script src="../node_modules/mocha/mocha.js"></script>