Merge pull request #2 from github/api

Add Flow definition

Author: muan

README.md

@@ -22,9 +22,13 @@ import '@github/remote-input-element'
 <ul id="results"></ul>
 ```
 
+A GET request will be sent to `/query?q=${input.value}`.
+
+The parameter name (`q`) is customizable with the `[param]` attribute:
+
 ```html
 <!-- Live preview of Markdown -->
-<remote-input src="/preview" aria-owns="md-preview">
+<remote-input src="/preview" aria-owns="md-preview" param="body">
   <textarea></textarea>
 </remote-input>
 <div id="md-preview"></div>

index.js

@@ -11,7 +11,7 @@ class RemoteInputElement extends HTMLElement {
 
   attributeChangedCallback(name: string, oldValue: string) {
     if (oldValue && name === 'src') {
-      this.fetchResults(false)
+      fetchResults(this, false)
     }
   }
 
@@ -22,8 +22,8 @@ class RemoteInputElement extends HTMLElement {
     input.setAttribute('autocomplete', 'off')
     input.setAttribute('spellcheck', 'false')
 
-    this.debounceInputChange = debounce(this.fetchResults.bind(this))
-    this.boundFetchResults = this.fetchResults.bind(this)
+    this.debounceInputChange = debounce(() => fetchResults(this))
+    this.boundFetchResults = () => fetchResults(this)
     input.addEventListener('focus', this.boundFetchResults)
     input.addEventListener('change', this.boundFetchResults)
     input.addEventListener('input', this.debounceInputChange)
@@ -43,53 +43,42 @@ class RemoteInputElement extends HTMLElement {
     return input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement ? input : null
   }
 
-  get resultsContainer(): ?HTMLElement {
-    return document.getElementById(this.getAttribute('aria-owns') || '')
-  }
-
   get src(): string {
     return this.getAttribute('src') || ''
   }
 
   set src(url: string) {
     this.setAttribute('src', url)
   }
+}
 
-  get name(): string {
-    return this.getAttribute('name') || 'q'
-  }
-
-  set name(name: string) {
-    this.setAttribute('name', name)
-  }
-
-  async fetchResults(checkCurrentQuery: boolean = true) {
-    if (!this.input) return
-    const query = this.input.value
-    if (checkCurrentQuery && this.currentQuery === query) return
-    this.currentQuery = query
-    const src = this.src
-    if (!src) return
-    const resultsContainer = this.resultsContainer
-    if (!resultsContainer) return
-
-    const url = new URL(src, window.location.origin)
-    const params = new URLSearchParams(url.search)
-    params.append(this.name, query)
-    url.search = params.toString()
-
-    this.dispatchEvent(new CustomEvent('loadstart'))
-    this.setAttribute('loading', '')
-    try {
-      const html = await fetch(url).then(data => data.text())
-      this.dispatchEvent(new CustomEvent('load'))
-      resultsContainer.innerHTML = html
-    } catch {
-      this.dispatchEvent(new CustomEvent('error'))
-    }
-    this.removeAttribute('loading')
-    this.dispatchEvent(new CustomEvent('loadend'))
+async function fetchResults(remoteInput: RemoteInputElement, checkCurrentQuery: boolean = true) {
+  const input = remoteInput.input
+  if (!input) return
+  const query = input.value
+  if (checkCurrentQuery && remoteInput.currentQuery === query) return
+  remoteInput.currentQuery = query
+  const src = remoteInput.src
+  if (!src) return
+  const resultsContainer = document.getElementById(remoteInput.getAttribute('aria-owns') || '')
+  if (!resultsContainer) return
+
+  const url = new URL(src, window.location.origin)
+  const params = new URLSearchParams(url.search)
+  params.append(remoteInput.getAttribute('param') || 'q', query)
+  url.search = params.toString()
+
+  remoteInput.dispatchEvent(new CustomEvent('loadstart'))
+  remoteInput.setAttribute('loading', '')
+  try {
+    const html = await fetch(url).then(data => data.text())
+    remoteInput.dispatchEvent(new CustomEvent('load'))
+    resultsContainer.innerHTML = html
+  } catch {
+    remoteInput.dispatchEvent(new CustomEvent('error'))
   }
+  remoteInput.removeAttribute('loading')
+  remoteInput.dispatchEvent(new CustomEvent('loadend'))
 }
 
 function debounce(callback) {

index.js.flow

@@ -0,0 +1,9 @@
+/* @flow strict */
+
+declare module '@github/remote-input-element' {
+  declare export default class RemoteInputElement extends HTMLElement {
+    get input(): ?HTMLInputElement;
+    get src(): string;
+    set src(url: string): void;
+  }
+}

package.json

@@ -13,8 +13,8 @@
     "clean": "rm -rf dist",
     "lint": "github-lint",
     "prebuild": "npm run clean && npm run lint && mkdir dist",
-    "build-umd": "BABEL_ENV=umd babel index.js -o dist/index.umd.js",
-    "build-esm": "BABEL_ENV=esm babel index.js -o dist/index.esm.js",
+    "build-umd": "BABEL_ENV=umd babel index.js -o dist/index.umd.js && cp index.js.flow dist/index.umd.js.flow",
+    "build-esm": "BABEL_ENV=esm babel index.js -o dist/index.esm.js && cp index.js.flow dist/index.esm.js.flow",
     "build": "npm run build-umd && npm run build-esm",
     "pretest": "npm run build",
     "test": "karma start test/karma.config.js",

test/test.js

@@ -38,6 +38,20 @@ describe('remote-input', function() {
       input.focus()
     })
 
+    it('repects param attribute', function(done) {
+      const remoteInput = document.querySelector('remote-input')
+      const input = document.querySelector('input')
+      const results = document.querySelector('#results')
+      remoteInput.setAttribute('param', 'robot')
+      assert.equal(results.innerHTML, '')
+      remoteInput.addEventListener('loadend', function() {
+        assert.equal(results.querySelector('ol').getAttribute('data-src'), '/results?robot=test')
+        done()
+      })
+      input.value = 'test'
+      input.focus()
+    })
+
     it('loads content again after src is changed', function(done) {
       const remoteInput = document.querySelector('remote-input')
       const input = document.querySelector('input')