Merge pull request #100 from github/flow

Type check with Flow

.eslintrc.json

@@ -1,15 +1,27 @@
 {
   "extends": [
     "plugin:github/browser",
-    "plugin:github/es6"
+    "plugin:github/es6",
+    "plugin:github/flow"
   ],
   "parser": "babel-eslint",
   "overrides": [
     {
       "files": "test/**/*.js",
       "rules": {
+        "flowtype/require-valid-file-annotation": "off",
         "github/unescaped-html-literal": "off"
       }
+    },
+    {
+      "files": "test/**/*.js",
+      "excludedFiles": "test/karma.config.js",
+      "env": {
+        "mocha": true
+      },
+      "globals": {
+        "assert": true
+      }
     }
   ]
 }

.flowconfig

@@ -0,0 +1,9 @@
+[ignore]
+
+[include]
+
+[libs]
+
+[options]
+
+[lints]

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules",
-    "lint": "eslint .",
+    "lint": "github-lint",
     "build": "rollup -c",
     "prepublishOnly": "npm run pretest",
     "pretest": "npm run lint && npm run build",
@@ -15,11 +15,11 @@
   "repository": "github/time-elements",
   "devDependencies": {
     "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-export-default-from": "^7.2.0",
-    "babel-preset-github": "^2.1.1",
+    "babel-preset-github": "^2.1.2",
     "chai": "^4.2.0",
     "eslint": "^5.12.0",
     "eslint-plugin-github": "^1.9.0",
+    "flow-bin": "^0.93.0",
     "karma": "^3.1.4",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -30,5 +30,7 @@
     "rollup-plugin-babel": "^4.2.0",
     "webcomponents.js": "^0.7.23"
   },
-  "eslintIgnore": ["dist/"]
+  "eslintIgnore": [
+    "dist/"
+  ]
 }

prettier.config.js

@@ -1 +1,3 @@
+/* @flow strict */
+
 module.exports = require('eslint-plugin-github/prettier.config')

rollup.config.js

@@ -1,3 +1,5 @@
+/* @flow strict */
+
 import babel from 'rollup-plugin-babel'
 
 const pkg = require('./package.json')
@@ -7,8 +9,7 @@ export default [
     input: 'src/index.js',
     plugins: [
       babel({
-        presets: ['github'],
-        plugins: ['@babel/plugin-proposal-export-default-from']
+        presets: ['github']
       })
     ],
     output: {
@@ -21,8 +22,7 @@ export default [
     input: 'src/index.js',
     plugins: [
       babel({
-        presets: ['github'],
-        plugins: ['@babel/plugin-proposal-export-default-from']
+        presets: ['github']
       })
     ],
     output: {

src/extended-time-element.js

@@ -1,14 +1,18 @@
+/* @flow strict */
+
 import {makeFormatter} from './utils'
 
 export default class ExtendedTimeElement extends HTMLElement {
+  _date: ?Date
+
   static get observedAttributes() {
     return ['datetime', 'day', 'format', 'hour', 'minute', 'month', 'second', 'title', 'weekday', 'year']
   }
 
   // Internal: Refresh the time element's formatted date when an attribute changes.
   //
   // Returns nothing.
-  attributeChangedCallback(attrName, oldValue, newValue) {
+  attributeChangedCallback(attrName: string, oldValue: string, newValue: string) {
     if (attrName === 'datetime') {
       const millis = Date.parse(newValue)
       this._date = isNaN(millis) ? null : new Date(millis)
@@ -30,26 +34,27 @@ export default class ExtendedTimeElement extends HTMLElement {
   // value takes precedence over this custom format.
   //
   // Returns a formatted time String.
-  getFormattedTitle() {
-    if (!this._date) {
-      return
-    }
+  getFormattedTitle(): ?string {
+    const date = this._date
+    if (!date) return
 
     const formatter = titleFormatter()
     if (formatter) {
-      return formatter.format(this._date)
+      return formatter.format(date)
     } else {
       try {
-        return this._date.toLocaleString()
+        return date.toLocaleString()
       } catch (e) {
         if (e instanceof RangeError) {
-          return this._date.toString()
+          return date.toString()
         } else {
           throw e
         }
       }
     }
   }
+
+  getFormattedDate(): ?string {}
 }
 
 const titleFormatter = makeFormatter({

src/index.js

@@ -1,4 +1,8 @@
-export LocalTimeElement from './local-time-element'
-export RelativeTimeElement from './relative-time-element'
-export TimeAgoElement from './time-ago-element'
-export TimeUntilElement from './time-until-element'
+/* @flow strict */
+
+import LocalTimeElement from './local-time-element'
+import RelativeTimeElement from './relative-time-element'
+import TimeAgoElement from './time-ago-element'
+import TimeUntilElement from './time-until-element'
+
+export {LocalTimeElement, RelativeTimeElement, TimeAgoElement, TimeUntilElement}

src/local-time-element.js

@@ -1,10 +1,12 @@
+/* @flow strict */
+
 import {strftime, makeFormatter, isDayFirst} from './utils'
 import ExtendedTimeElement from './extended-time-element'
 
 const formatters = new WeakMap()
 
 export default class LocalTimeElement extends ExtendedTimeElement {
-  attributeChangedCallback(attrName, oldValue, newValue) {
+  attributeChangedCallback(attrName: string, oldValue: string, newValue: string) {
     if (attrName === 'hour' || attrName === 'minute' || attrName === 'second' || attrName === 'time-zone-name') {
       formatters.delete(this)
     }
@@ -27,13 +29,12 @@ export default class LocalTimeElement extends ExtendedTimeElement {
   //   second  - "numeric", "2-digit"
   //
   // Returns a formatted time String.
-  getFormattedDate() {
-    if (!this._date) {
-      return
-    }
+  getFormattedDate(): ?string {
+    const d = this._date
+    if (!d) return
 
-    const date = formatDate(this) || ''
-    const time = formatTime(this) || ''
+    const date = formatDate(this, d) || ''
+    const time = formatTime(this, d) || ''
     return `${date} ${time}`.trim()
   }
 }
@@ -48,7 +49,7 @@ export default class LocalTimeElement extends ExtendedTimeElement {
 // el - The local-time element to format.
 //
 // Returns a date String or null if no date formats are provided.
-function formatDate(el) {
+function formatDate(el: Element, date: Date) {
   // map attribute values to strftime
   const props = {
     weekday: {
@@ -80,7 +81,7 @@ function formatDate(el) {
   format = format.replace(/(\s,)|(,\s$)/, '')
 
   // squeeze spaces from final string
-  return strftime(el._date, format)
+  return strftime(date, format)
     .replace(/\s+/, ' ')
     .trim()
 }
@@ -91,21 +92,18 @@ function formatDate(el) {
 // el - The local-time element to format.
 //
 // Returns a time String or null if no time formats are provided.
-function formatTime(el) {
-  // retrieve format settings from attributes
-  const options = {
-    hour: el.getAttribute('hour'),
-    minute: el.getAttribute('minute'),
-    second: el.getAttribute('second'),
-    timeZoneName: el.getAttribute('time-zone-name')
-  }
+function formatTime(el: Element, date: Date) {
+  const options: Intl$DateTimeFormatOptions = {}
 
-  // Remove unset format attributes.
-  for (const opt in options) {
-    if (!options[opt]) {
-      delete options[opt]
-    }
-  }
+  // retrieve format settings from attributes
+  const hour = el.getAttribute('hour')
+  if (hour === 'numeric' || hour === '2-digit') options.hour = hour
+  const minute = el.getAttribute('minute')
+  if (minute === 'numeric' || minute === '2-digit') options.minute = minute
+  const second = el.getAttribute('second')
+  if (second === 'numeric' || second === '2-digit') options.second = second
+  const tz = el.getAttribute('time-zone-name')
+  if (tz === 'short' || tz === 'long') options.timeZoneName = tz
 
   // No time format attributes provided.
   if (Object.keys(options).length === 0) {
@@ -121,11 +119,11 @@ function formatTime(el) {
   const formatter = factory()
   if (formatter) {
     // locale-aware formatting of 24 or 12 hour times
-    return formatter.format(el._date)
+    return formatter.format(date)
   } else {
     // fall back to strftime for non-Intl browsers
     const timef = options.second ? '%H:%M:%S' : '%H:%M'
-    return strftime(el._date, timef)
+    return strftime(date, timef)
   }
 }
 

src/relative-time-element.js

@@ -1,3 +1,5 @@
+/* @flow strict */
+
 import RelativeTime from './relative-time'
 import ExtendedTimeElement from './extended-time-element'
 
@@ -45,7 +47,7 @@ function updateNowElements() {
   let time, i, len
   for (i = 0, len = nowElements.length; i < len; i++) {
     time = nowElements[i]
-    time.textContent = time.getFormattedDate()
+    time.textContent = time.getFormattedDate() || ''
   }
 }
 

src/relative-time.js

@@ -1,7 +1,11 @@
+/* @flow strict */
+
 import {strftime, makeFormatter, isDayFirst, isThisYear, isYearSeparator} from './utils'
 
 export default class RelativeTime {
-  constructor(date) {
+  date: Date
+
+  constructor(date: Date) {
     this.date = date
   }
 
@@ -50,7 +54,7 @@ export default class RelativeTime {
     return this.timeAgoFromMs(ms)
   }
 
-  timeAgoFromMs(ms) {
+  timeAgoFromMs(ms: number) {
     const sec = Math.round(ms / 1000)
     const min = Math.round(sec / 60)
     const hr = Math.round(min / 60)
@@ -112,7 +116,7 @@ export default class RelativeTime {
     return this.timeUntilFromMs(ms)
   }
 
-  timeUntilFromMs(ms) {
+  timeUntilFromMs(ms: number) {
     const sec = Math.round(ms / 1000)
     const min = Math.round(sec / 60)
     const hr = Math.round(min / 60)

src/time-ago-element.js

@@ -1,15 +1,16 @@
+/* @flow strict */
+
 import RelativeTime from './relative-time'
 import RelativeTimeElement from './relative-time-element'
 
 export default class TimeAgoElement extends RelativeTimeElement {
   getFormattedDate() {
-    if (this._date) {
-      const format = this.getAttribute('format')
-      if (format === 'micro') {
-        return new RelativeTime(this._date).microTimeAgo()
-      } else {
-        return new RelativeTime(this._date).timeAgo()
-      }
+    const format = this.getAttribute('format')
+    if (!this._date) return
+    if (format === 'micro') {
+      return new RelativeTime(this._date).microTimeAgo()
+    } else {
+      return new RelativeTime(this._date).timeAgo()
     }
   }
 }

src/time-until-element.js

@@ -1,15 +1,16 @@
+/* @flow strict */
+
 import RelativeTime from './relative-time'
 import RelativeTimeElement from './relative-time-element'
 
 export default class TimeUntilElement extends RelativeTimeElement {
   getFormattedDate() {
-    if (this._date) {
-      const format = this.getAttribute('format')
-      if (format === 'micro') {
-        return new RelativeTime(this._date).microTimeUntil()
-      } else {
-        return new RelativeTime(this._date).timeUntil()
-      }
+    const format = this.getAttribute('format')
+    if (!this._date) return
+    if (format === 'micro') {
+      return new RelativeTime(this._date).microTimeUntil()
+    } else {
+      return new RelativeTime(this._date).timeUntil()
     }
   }
 }