Fixed issues with JSX.createElement definitions

src/assets/javascripts/application.js

@@ -27,7 +27,11 @@ import Material from "./components/Material"
  * Application
  * ------------------------------------------------------------------------- */
 
-// TODO ./node_modules/.bin/gulp assets:javascripts:flow:annotate && ./node_modules/.bin/flow check
+/**
+ * [initialize description]
+ *
+ * @param {Object} config - TODO // TODO: define via type declaration!?
+ */
 export const initialize = config => {
 
   /* Initialize Modernizr and FastClick */
@@ -38,6 +42,9 @@ export const initialize = config => {
       return !!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)
     })
 
+    if (!(document.body instanceof HTMLElement))
+      throw new ReferenceError
+
     /* Attach FastClick to mitigate 300ms delay on touch devices */
     FastClick.attach(document.body)
 
@@ -197,7 +204,10 @@ export const initialize = config => {
   /* Retrieve facts for the given repository type */
   ;(() => {
     const el = document.querySelector("[data-md-source]")
-    if (!el) return Promise.resolve([])
+    if (!el)
+      return Promise.resolve([])
+    else if (!(el instanceof HTMLAnchorElement))
+      throw new ReferenceError
     switch (el.dataset.mdSource) {
       case "github": return new Material.Source.Adapter.GitHub(el).fetch()
       default: return Promise.resolve([])

src/assets/javascripts/components/Material/Nav/Collapse.js

@@ -83,7 +83,7 @@ export default class Collapse {
     const end = ev => {
       const target = ev.target
       if (!(target instanceof HTMLElement))
-        return
+        throw new ReferenceError
 
       /* Reset height and state */
       target.removeAttribute("data-md-state")

src/assets/javascripts/components/Material/Search/Lock.js

@@ -32,6 +32,7 @@ export default class Lock {
    * @constructor
    *
    * @property {HTMLInputElement} el_ - TODO
+   * @property {HTMLElement} lock_ - Element to lock
    * @property {number} offset_ - TODO
    *
    * @param {(string|HTMLElement)} el - Selector or HTML element
@@ -43,6 +44,11 @@ export default class Lock {
     if (!(ref instanceof HTMLInputElement))
       throw new ReferenceError
     this.el_ = ref
+
+    /* Retrieve element to lock (= body) */
+    if (!document.body)
+      throw new ReferenceError
+    this.lock_ = document.body
   }
 
   /**
@@ -67,13 +73,13 @@ export default class Lock {
 
         /* Lock body after finishing transition */
         if (this.el_.checked) {
-          document.body.dataset.mdState = "lock"
+          this.lock_.dataset.mdState = "lock"
         }
       }, 400)
 
     /* Exiting search mode */
     } else {
-      document.body.dataset.mdState = ""
+      this.lock_.dataset.mdState = ""
 
       /* Scroll to former position, but wait for 100ms to prevent flashes on
          iOS. A short timeout seems to do the trick */
@@ -88,8 +94,8 @@ export default class Lock {
    * Reset locked state and page y-offset
    */
   reset() {
-    if (document.body.dataset.mdState === "lock")
+    if (this.lock_.dataset.mdState === "lock")
       window.scrollTo(0, this.offset_)
-    document.body.dataset.mdState = ""
+    this.lock_.dataset.mdState = ""
   }
 }

src/assets/javascripts/components/Material/Search/Result.jsx

@@ -35,16 +35,20 @@ export default class Result {
    *
    * @property {HTMLElement} el_ - TODO
    * @property {(Object|Array<Object>|Function)} data_ - TODO (very dirty)
-   * @property {*} meta_ - TODO (must be done like this, as React$Component does not return the correct thing)
-   * @property {*} list_ - TODO (must be done like this, as React$Component does not return the correct thing)
+   * @property {*} meta_ - // TODO (must be done like this, as React$Component does not return the correct thing) (React$Element<*>|Element)
+   * @property {*} list_ - // TODO (must be done like this, as React$Component does not return the correct thing)
+   * @property {Object} index_ - TODO
    *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    * @param {(Array<Object>|Function)} data - Promise or array providing data     // TODO ????
    */
   constructor(el, data) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
 
     /* Set data and create metadata and list elements */
     this.data_ = data
@@ -60,19 +64,26 @@ export default class Result {
     /* Inject created elements */
     this.el_.appendChild(this.meta_)
     this.el_.appendChild(this.list_)
+  }
 
-    /* Truncate a string after the given number of characters - this is not
-       a reasonable approach, since the summaries kind of suck. It would be
-       better to create something more intelligent, highlighting the search
-       occurrences and making a better summary out of it */
-    this.truncate_ = function(string, n) {
-      let i = n
-      if (string.length > i) {
-        while (string[i] !== " " && --i > 0);
-        return `${string.substring(0, i)}...`
-      }
-      return string
+  /**
+   * Truncate a string after the given number of character
+   *
+   * This is not a reasonable approach, since the summaries kind of suck. It
+   * would be better to create something more intelligent, highlighting the
+   * search occurrences and making a better summary out of it
+   *
+   * @param {string} string - TODO
+   * @param {number} n - TODO
+   * @return {string} TODO
+   */
+  truncate_(string, n) {
+    let i = n
+    if (string.length > i) {
+      while (string[i] !== " " && --i > 0);
+      return `${string.substring(0, i)}...`
     }
+    return string
   }
 
   /**
@@ -110,13 +121,19 @@ export default class Result {
           : init(this.data_)
       }, 250)
 
-    /* Execute search on new input event after clearing current list */
+    /* Execute search on new input event */
     } else if (ev.type === "keyup") {
+      const target = ev.target
+      if (!(target instanceof HTMLInputElement))
+        throw new ReferenceError
+
+      /* Clear current list */
       while (this.list_.firstChild)
         this.list_.removeChild(this.list_.firstChild)
 
       /* Perform search on index and render documents */
-      const result = this.index_.search(ev.target.value)
+      let result = this.index_.search(target.value)
+      result += 3
       result.forEach(item => {
         const doc = this.data_[item.ref]
 
@@ -149,7 +166,7 @@ export default class Result {
       Array.prototype.forEach.call(anchors, anchor => {
         anchor.addEventListener("click", ev2 => {
           const toggle = document.querySelector("[data-md-toggle=search]")
-          if (toggle.checked) {
+          if (toggle instanceof HTMLInputElement && toggle.checked) {
             toggle.checked = false
             toggle.dispatchEvent(new CustomEvent("change"))
           }

src/assets/javascripts/components/Material/Sidebar/Position.js

@@ -30,15 +30,25 @@ export default class Position {
    * Set sidebars to locked state and limit height to parent node
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - TODO
+   * @property {HTMLElement} parent_ - TODO
+   * @property {number} height_ - TODO
+   * @property {number} offset_ - TODO
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement) ||
+        !(ref.parentNode instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
 
     /* Initialize parent container and current height */
-    this.parent_ = this.el_.parentNode
+    this.parent_ = ref.parentNode
     this.height_ = 0
   }
 
@@ -65,15 +75,15 @@ export default class Position {
     const visible = window.innerHeight
 
     /* Calculate bounds of sidebar container  */
-    this.bounds_ = {
+    const bounds = {
       top: this.parent_.offsetTop,
       bottom: this.parent_.offsetTop + this.parent_.offsetHeight
     }
 
     /* Calculate new offset and height */
-    const height = visible - this.bounds_.top
+    const height = visible - bounds.top
                  - Math.max(0, this.offset_ - offset)
-                 - Math.max(0, offset + visible - this.bounds_.bottom)
+                 - Math.max(0, offset + visible - bounds.bottom)
 
     /* If height changed, update element */
     if (height !== this.height_)

src/assets/javascripts/components/Material/Source/Adapter/Abstract.js

@@ -32,13 +32,22 @@ export default class Abstract {
    * Retrieve source information
    *
    * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
+   *
+   * @property {HTMLAnchorElement} el_ - TODO
+   * @property {string} base_ - TODO
+   * @property {number} salt_ - TODO
+   *
+   * @param {(string|HTMLAnchorElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
 
+    if (!(ref instanceof HTMLAnchorElement))
+      throw new ReferenceError
+    this.el_ = ref
+
     /* Retrieve base URL */
     this.base_ = this.el_.href
     this.salt_ = this.hash_(this.base_)
@@ -47,7 +56,7 @@ export default class Abstract {
   /**
    * Retrieve data from Cookie or fetch from respective API
    *
-   * @return {Promise} Promise that returns an array of facts
+   * @return {Promise<*>} Promise that returns an array of facts                  // TODO: @returns {Promise.<string, Error>}
    */
   fetch() {
     return new Promise(resolve => {
@@ -70,7 +79,6 @@ export default class Abstract {
    * Abstract private function that fetches relevant repository information
    *
    * @abstract
-   * @return {Promise} Promise that provides the facts in an array
    */
   fetch_() {
     throw new Error("fetch_(): Not implemented")
@@ -79,15 +87,15 @@ export default class Abstract {
   /**
    * Format a number with suffix
    *
-   * @param {Number} number - Number to format
-   * @return {Number} Formatted number
+   * @param {number} number - Number to format
+   * @return {string} Formatted number
    */
   format_(number) {
     if (number > 10000)
       return `${(number / 1000).toFixed(0)}k`
     else if (number > 1000)
       return `${(number / 1000).toFixed(1)}k`
-    return number
+    return `${number}`
   }
 
   /**
@@ -96,7 +104,7 @@ export default class Abstract {
    * Taken from http://stackoverflow.com/a/7616484/1065584
    *
    * @param {string} str - Input string
-   * @return {string} Hashed string
+   * @return {number} Hashed string
    */
   hash_(str) {
     let hash = 0

src/assets/javascripts/components/Material/Source/Adapter/GitHub.js

@@ -32,7 +32,7 @@ export default class GitHub extends Abstract {
    * Retrieve source information from GitHub
    *
    * @constructor
-   * @param {(string|HTMLElement)} el - Selector or HTML element
+   * @param {(string|HTMLAnchorElement)} el - Selector or HTML element
    */
   constructor(el) {
     super(el)
@@ -44,7 +44,7 @@ export default class GitHub extends Abstract {
   /**
    * Fetch relevant source information from GitHub
    *
-   * @return {function} Promise returning an array of facts
+   * @return {Promise<*>} Promise returning an array of facts
    */
   fetch_() {
     return fetch(this.base_)

src/assets/javascripts/components/Material/Source/Repository.jsx

@@ -30,18 +30,24 @@ export default class Repository {
    * Render repository information
    *
    * @constructor
+   *
+   * @property {HTMLElement} el_ - TODO
+   *
    * @param {(string|HTMLElement)} el - Selector or HTML element
    */
   constructor(el) {
-    this.el_ = (typeof el === "string")
+    const ref = (typeof el === "string")
       ? document.querySelector(el)
       : el
+    if (!(ref instanceof HTMLElement))
+      throw new ReferenceError
+    this.el_ = ref
   }
 
   /**
    * Initialize the source repository
    *
-   * @param {Array.<string>} facts - Facts to be rendered
+   * @param {Array<string>} facts - Facts to be rendered
    */
   initialize(facts) {
     if (facts.length)