What's Changed

• Use chromium for karma tests by @theinterned in https://github.com/github/remote-input-element/pull/26
• Add a .devcontainer by @koddsson in https://github.com/github/remote-input-element/pull/27
• Add a release action by @koddsson in https://github.com/github/remote-input-element/pull/29
• move AOR to primer by @keithamus in https://github.com/github/remote-input-element/pull/30
• Add event detail - eventType to 'remote-input-success' customEvent by @kendallgassner in https://github.com/github/remote-input-element/pull/34

New Contributors

• @theinterned made their first contribution in https://github.com/github/remote-input-element/pull/26
• @kendallgassner made their first contribution in https://github.com/github/remote-input-element/pull/34

Full Changelog: https://github.com/github/remote-input-element/compare/v0.3.1...v0.4.0

What's Changed

• Use chromium for karma tests by @theinterned in https://github.com/github/remote-input-element/pull/26
• Add a .devcontainer by @koddsson in https://github.com/github/remote-input-element/pull/27
• Add a release action by @koddsson in https://github.com/github/remote-input-element/pull/29
• move AOR to primer by @keithamus in https://github.com/github/remote-input-element/pull/30
• Add event detail - eventType to 'remote-input-success' customEvent by @kendallgassner in https://github.com/github/remote-input-element/pull/34

New Contributors

• @theinterned made their first contribution in https://github.com/github/remote-input-element/pull/26
• @kendallgassner made their first contribution in https://github.com/github/remote-input-element/pull/34

Full Changelog: https://github.com/github/remote-input-element/compare/v0.3.1...v0.4.0

• fix: output umd build for main key #19

https://github.com/github/remote-input-element/compare/v0.3.0...v0.3.1

• Remove text/html; fragment from accept header (#22)

https://github.com/github/remote-input-element/compare/v0.2.1...v0.3.0

• Accept text/fragment+html as a content-type (#21)

https://github.com/github/auto-complete-element/compare/v0.2.0...v0.2.1

• Replace Flow + Babel toolchain with TypeScript https://github.com/github/remote-input-element/pull/15
• Remove private state from public API https://github.com/github/remote-input-element/pull/16
• Abort in-flight requests https://github.com/github/remote-input-element/pull/17

• Fixed parsing for relative URL in src https://github.com/github/remote-input-element/pull/13

• types(ts): add window declaration a89754c
• Fix example 6695790

https://github.com/github/remote-input-element/compare/v0.1.0...v0.1.1

• Fixed #10 via #11: Only append response text if the response was successful.
• Added new events:
  • remote-input-success: fired when response is successful and HTML is set.
  • remote-input-error: fired when response is not successful.

• Merge pull request #8 from github/publish-to-gpr-as-well b24d7b5
• publish to GPR as a postpublish step 7923480

https://github.com/github/remote-input-element/compare/v0.0.6...v0.0.7

<remote-input> element

An input element that sends its value to a server endpoint and renders the response body.

Installation

$ npm install @github/remote-input-element

Usage

import '@github/remote-input-element'

<!-- Filter a list of items from the server -->
<remote-input src="/query" aria-owns="results">
  <input>
</remote-input>
<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:

<!-- Live preview of Markdown -->
<remote-input src="/preview" aria-owns="md-preview" param="body">
  <textarea></textarea>
</remote-input>
<div id="md-preview"></div>

Styling loading state

A boolean [loading] attribute is added to <remote-input> when a network request begins and removed when it ends.

.loading-icon { display: none; }
remote-input[loading] .loading-icon { display: inline; }

Events

const remoteInput = document.querySelector('remote-input')

// Network request lifecycle events.
remoteInput.addEventListener('loadstart', function(event) {
  console.log('Network request started', event)
})
remoteInput.addEventListener('loadend', function(event) {
  console.log('Network request complete', event)
})
remoteInput.addEventListener('load', function(event) {
  console.log('Network request succeeded', event)
})
remoteInput.addEventListener('error', function(event) {
  console.log('Network request failed', event)
})

Browser support

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

• Merge pull request #7 from github/dependabot/npm_and_yarn/lodash-4.17.15 31dcc69
• Bump lodash from 4.17.11 to 4.17.15 7597d7f

https://github.com/github/remote-input-element/compare/v0.0.5...v0.0.6

• Merge pull request #6 from github/add-typescript-definition-file 987937b
• set HTMLTextAreaElement as a return value from input 60b6ed5
• add typescript definition file 9a5af7e

https://github.com/github/remote-input-element/compare/v0.0.4...v0.0.5

• Merge pull request #5 from github/update-deps da9f672
• update eslint, eslint-plugin-github and flow-bin manually to latest versions f3f8577
• run npm update 065da1a

https://github.com/github/remote-input-element/compare/v0.0.3...v0.0.4