open-index/open-npm huggingface dataset:
npm package: @github/remote-form
Description: Decorator that will submit a form over AJAX
Latest version: 0.4.3

# remote-form

A function that will enable submitting forms over AJAX.

The function will make a request based on the form using `window.fetch` with the payload encoded as URL parameters if the form method is a `GET` and `FormData` for all the other methods.

The request object is available in the callback function, allowing the headers and body to be modified before the request is sent.

## Installation

```
$ npm install --save @github/remote-form
```

## Usage

```js
import {remoteForm} from '@github/remote-form'

// Make all forms that have the `data-remote` attribute a remote form.
remoteForm('form[data-remote]', async function(form, wants, request) {
  // Before we start the request
  form.classList.remove('has-error')
  form.classList.add('is-loading')

  let response
  try {
    response = await wants.html()
  } catch (error) {
    // If the request errored, we'll set the error state and return.
    form.classList.remove('is-loading')
    form.classList.add('has-error')
    return
  }

  // If the request succeeded we can do something with the results.
  form.classList.remove('is-loading')
  form.querySelector('.results').innerHTML = response.html
})
```

```html
<form action="/signup" method="post" data-remote>
  <label for="username">Username</label>
  <input id="username" type="text">

  <label for="password">Username</label>
  <input id="password" type="password">

  <button type="submit">Log in</button>
  <div class="results"></div>
</form>
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/remote-input-element
Description: An input element that sends its value to a server endpoint and renders the response body.
Latest version: 0.4.0

# &lt;remote-input&gt; 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

```js
import '@github/remote-input-element'
```

```html
<!-- 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:

```html
<!-- 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.

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

### Events

- `loadstart` - The server fetch has started.
- `load` - The network request completed successfully.
- `error` - The network request failed.
- `loadend` - The network request has completed.
- `remote-input-success` – Received a successful response (status code 200-299), and response HTML has been set. Bubbles.
- `remote-input-error` – Received a not successful response. Bubbles.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/session-resume
Description: Annotate fields to be persisted on navigation away from the current page.
Latest version: 0.5.2

# Session Resume

Annotate fields to be persisted on navigation away from the current page.
Fields will be automatically restored when the user revisits the page
again in their current browser session (excludes separate tabs).

Not designed for persisted crash recovery.

## Installation

```
$ npm install @github/session-resume
```

## Usage

### HTML

``` html
<form>
  <input id="new-comment" class="js-session-resumable"/>
</form>
```

### JS

```js
import {persistResumableFields, restoreResumableFields, setForm} from '@github/session-resume'

function getPageID() {
  return window.location.pathname
}

// Listen for all form submit events and to see if their default submission
// behavior is invoked.
window.addEventListener('submit', setForm, {capture: true})

// Resume field content on regular page loads.
window.addEventListener('pageshow', function() {
  restoreResumableFields(getPageID())
})

// Persist resumable fields when page is unloaded
window.addEventListener('pagehide', function() {
  persistResumableFields(getPageID())
})
```

#### `restoreResumableFields(id: string, options)`

The `restoreResumableFields(id: string, options)` function supports optional configurations:

* `storage:` - [`Storage`][] instance (defaults to [`window.sessionStorage`][])
* `keyPrefix:` - `string` prepended onto the storage key (defaults to `"session-resume"`)

[`Storage`]: https://developer.mozilla.org/en-US/docs/Web/API/Storage
[`window.sessionStorage`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

#### `persistResumableFields(id: string, options)`

The `persistResumableFields(id: string, options)` function supports optional configurations:

* `storage:` - [`Storage`][] instance (defaults to [`window.sessionStorage`][])
* `storageFilter:` - `(field: HTMLInputElement | HTMLTextAreaElement) => boolean` predicate to determine whether or not to store a field (defaults to `(field) => field.checked !== field.defaultChecked)` for checkbox and radio buttons, `(field) => field.value !== field.defaultValue` otherwise)
* `keyPrefix:` - `string` prepended onto the storage key (defaults to `"session-resume"`)
* `scope:` - `ParentNode` used to query field elements (defaults to `document`)
* `selector:` - `string` used to query field elements (defaults to `".js-session-resumable"`)
* `fields:` - `NodeList | Node[]` provide field elements as an alternative to querying (defaults to `options.scope.querySelectorAll(options.selector)`)

**Note:** When `fields` is specified, `scope` and `selectors` will be ignored.

[`Storage`]: https://developer.mozilla.org/en-US/docs/Web/API/Storage
[`window.sessionStorage`]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/stable-socket
Description: A web socket that reconnects.
Latest version: 1.1.1

# StableSocket

A web socket that reconnects.

## Installation

```
$ npm install @github/stable-socket
```

## Usage

```ts
import {StableSocket} from '@github/stable-socket'

const delegate = {
  socketDidOpen(socket: Socket) {
    // Socket is ready to write.
    socket.send('Hello')
  },
  socketDidClose(socket: Socket, code?: number, reason?: string) {
    // Socket closed and will retry the connection.
  },
  socketDidFinish(socket: Socket) {
    // Socket closed for good and will not retry.
  },
  socketDidReceiveMessage(socket: Socket, message: string) {
    // Socket read data from the connection.
  },
  socketShouldRetry(socket: Socket, code: number): boolean {
    // Socket reconnects unless server returns the policy violation code.
    return code !== 1008
  }
}

const policy = {
  timeout: 4000,
  attempts: Infinity,
  maxDelay: 60000
}

const url = 'wss://live.example.com'
const socket = new StableSocket(url , delegate, policy)
socket.open()
```

### BufferedSocket

Writing to a StableSocket while it is in the opening or closed states
discards the message data. Use a BufferedSocket to buffer writes to be
sent when it opens.

```ts
import {BufferedSocket, StableSocket} from '@github/stable-socket'
const socket = new BufferedSocket(new StableSocket(url, delegate, policy))
socket.open()
socket.send('hello') // Will be sent when the socket is open.
```

### Asynchronous connections

StableSocket and BufferedSocket are abstractions over a WebSocket that
maintain an internal state machine, managing reconnects and preventing writes
to closed sockets. However, sometimes we need direct access to an open WebSocket
in async functions.

#### connect

Asynchronously connects to a web socket port or fails after a timeout. The
socket is open, and writable with `send`, when its promise is fulfilled.
Returns a Promise fulfilled with an open WebSocket or rejected with a
connection failure.

```ts
import {connect} from '@github/stable-socket'

try {
  const socket = await connect('wss://live.example.com', 100)
  socket.send('hi')
} catch (e) {
  console.log('Socket connection failed', e)
}
```

#### connectWithRetry

Asynchronously connects to a web socket port, retrying failed connections
with exponential backoff. Returns a Promise fulfilled with an open WebSocket
or rejected with a connection failure.

```ts
import {connectWithRetry} from '@github/stable-socket'

try {
  const policy = {timeout: 100, attempts: Infinity, maxDelay: 60000}
  const socket = await connectWithRetry('wss://live.example.com', policy)
  socket.send('hi')
} catch (e) {
  console.log('Socket connection failed', e)
}
```

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/task-lists-element
Description: Drag and drop task list items.
Latest version: 2.0.5

# &lt;task-lists&gt; element

Drag and drop task list items.

## Installation

```
$ npm install --save @github/task-lists-element
```

## Usage

### Script

Import as a module:

```js
import '@github/task-lists-element'
```

With a script tag:

```html
<script type="module" src="./node_modules/@github/task-lists-element/dist/task-lists-element.js">
```

### Markup

```html
<task-lists sortable>
  <ul class="contains-task-list">
    <li class="task-list-item">
      <input type="checkbox" class="task-list-item-checkbox">
      Hubot
    </li>
    <li class="task-list-item">
      <input type="checkbox" class="task-list-item-checkbox">
      Bender
    </li>
  </ul>

  <ul class="contains-task-list">
    <li class="task-list-item">
      <input type="checkbox" class="task-list-item-checkbox">
      BB-8
    </li>
    <li class="task-list-item">
      <input type="checkbox" class="task-list-item-checkbox">
      WALL-E
    </li>
  </ul>
</task-lists>
```

## Events

```js
const list = document.querySelector('task-lists')

list.addEventListener('task-lists-check', function(event) {
  const {position, checked} = event.detail
  console.log(position, checked)
})

list.addEventListener('task-lists-move', function(event) {
  const {src, dst} = event.detail
  console.log(src, dst)
})
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/template-parts
Description: An implementation of the TemplateInstance proposal (https://github.com/w3c/webcomponents/blob/159b1600bab02fe9cd794825440a98537d53b389/proposals/Template-Instantiation.md)
Author: GitHub Inc.
Latest version: 0.7.1

# Template Parts

This library is designed as a "ponyfill" library that implements the design in the [TemplateInstance proposed whatwg spec][spec] that has been proposed in order to address [whatwg/html#2254](https://github.com/whatwg/html/issues/2254).

[spec]: https://github.com/w3c/webcomponents/blob/159b1600bab02fe9cd794825440a98537d53b389/proposals/Template-Instantiation.md

This implements the minimally viable parts of the proposal, to provide something that works, but should be easy to drop if the Template Parts Proposal lands.

To reiterate the example in the above proposal, given a template such as:

```
<template id="foo">
  <div class="foo {{y}}">{{x}} world</div>
</template>
```

We'd like `{{x}}` and `{{y}}` to be **template parts**, exposed as JavaScript objects which can be manipulated.

With this library, and that given template, one could implement the following:

```js
import {TemplateInstance} from '@github/template-parts'

const tpl = new TemplateInstance(document.getElementById('some-template'), { x: 'Hello', y: 'bar'})

document.appendChild(tpl)
```

A `TemplateInstance` instance is a subclass of `DocumentFragment` - containing the cloned contents of the template. It also has an `update(params: unknown): void` method - which when called will run the given "processor", with the new `params`.

This library has a default "processor": `propertyIdentity` which implements basic functionality of applying the params object values to the Template Parts (it is effectively `part.value = params[part.expression]`)

In addition, there is a `propertyIdentityOrBooleanAttribute` export which adds the capability of toggling `boolean` style attributes like `hidden` or `input.required`.

To use the `propertyIdentityOrBooleanAttribute`, import it and pass it as a third argument to the `TemplateInstance` constructor:


```js
import {TemplateInstance, propertyIdentityOrBooleanAttribute} from '@github/template-parts'

// This will simply replace `{{x}}` with `"Hello"` and `{{y}}` with `"bar"`
const tpl = new TemplateInstance(document.getElementById('foo'), { x: 'Hello', y: 'bar'})

// The `propertyIdentityOrBooleanAttribute` processor will check for `false`/`true` values which map to Template Part values that are assigned to attributes, and add/remove the attribute.
const tpl = new TemplateInstance(document.getElementById('foo'), { x: 'Hello', hidden: false}, propertyIdentityOrBooleanAttribute)
```
npm package: @github/textarea-autosize
Description: Autosizes textarea to size of it's contents.
Latest version: 0.3.3

# Textarea Autosize

Autosizes textarea to size of its contents.

## Installation

```
$ npm install @github/textarea-autosize
```

## Usage

The autosizing behavior must be explicitly activated on the `<textarea>`.

```js
import autosize from '@github/textarea-autosize'
autosize(document.querySelector('textarea.foo'))
```

Using a library like [selector-observer](https://github.com/josh/selector-observer), the behavior can automatically be applied to any textareas matching a class name.

```js
import {observe} from 'selector-observer'
import autosize from '@github/textarea-autosize'

observe('textarea.autosize', { subscribe: autosize })
```

## Browser support

- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @github/typing-effect-element
Description: A custom element that shows text as if it were being typed.
Latest version: 0.1.0

# &lt;typing-effect&gt; element

A custom element that shows text as if it were being typed

## Installation

```
$ npm install @github/typing-effect-element
```

## Usage

```js
import '@github/typing-effect-element'
```

```html
<typing-effect data-lines='["Welcome to GitHub!", "Let’s begin the adventure"]'>
  <span data-target="typing-effect.content"></span>
  <span data-target="typing-effect.cursor">|</span>
</typing-effect>
```

## Accessibility

This component detects whether `prefers-reduced-motion` is set on the window:

```js
window.matchMedia('(prefers-reduced-motion)').matches === true
```

If this evaluates to true, any content lines provided will be appended immediately rather than being typed out with a delay.

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.