abortable-element
AbortController ownership for Neutron elements — cancel in-flight work cleanly when a newer request supersedes it.
Features
- Owned controller Fresh
AbortControllerper in-flight cycle - doAbort() Abort current work and rotate a new controller
- Fetch-ready Pass
abortController.signalintofetch/ template loads
Installation
This package is available in the
<script src="https://unpkg.com/@excom/kit-utils@0.3.0/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/@excom/neutron@0.2.0/dist/index.umd.min.js"></script>
<script src="https://unpkg.com/@excom/abortable-element@0.1.4/dist/index.umd.min.js"></script>npm install @excom/abortable-elementimport { /* … */ } from "@excom/abortable-element";Peer dependencies (0)
Packages a consumer must install alongside this one. Workspace deps are bundled.
| Package | Version |
|---|---|
|
Usage
Compose AbortableElement and pass abortController.signal into
async work. Call doAbort() when that work should be cancelled (e.g.
template-ref changed). RenderableElement already does this for
template fetches.
import { Neutron } from "@excom/neutron";
import { AbortableElement } from "@excom/abortable-element";
export const FetchOnce = Neutron.compose([
AbortableElement,
Neutron({
tag: "fetch-once",
props: { src: String },
}),
])
.onPropChanged("src", async (el) => {
el.doAbort();
if (!el.src) return;
const res = await fetch(el.src, {
signal: el.abortController.signal,
});
// …
});
FetchOnce.define();import { Neutron } from "@excom/neutron";
import { AbortableElement } from "@excom/abortable-element";
export const FetchOnce = Neutron.compose([
AbortableElement,
Neutron({
tag: "fetch-once",
props: { src: String },
}),
])
.onPropChanged("src", async (el) => {
el.doAbort();
if (!el.src) return;
const res = await fetch(el.src, {
signal: el.abortController.signal,
});
// …
});
FetchOnce.define();There are no public attributes — the controller is internal. See
API Reference
Attributes
Role —option is configurable, state
is managed by the element (read-only), or hybrid which is both.
Provision
Thisprovision property lives on the DOM node.
Read / watch it with Quark’s prop("provision"), or listen
for the neutron-provision event from app JS.
Events
Type
command event (HTML Command API): from a
<button command commandfor>, an <event-handler
command-name>, or a CommandEvent.
Recognized Elements
Child or descendant elements are recognized by and relevant to its functionality.Styles
@custom-selector synonyms so custom elements can share
semantic styles. Element aliases match the host tag / .tag-* class; state
aliases match attributes (nested under the element alias).
Attributes (0)
Role —option is configurable, state
is managed by the element (read-only), or hybrid which is both.
Provision (0)
Thisprovision property lives on the DOM node.
Read / watch it with Quark’s prop("provision"), or listen
for the neutron-provision event from app JS.
Events (0)
A "default action" is subsequent logic executed by the element if
e.preventDefault() is not
synchronously called on the event.
Type
command event (HTML Command API): from a
<button command commandfor>, an <event-handler
command-name>, or a CommandEvent.
Recognized Elements (0)
Child or descendant elements are recognized by and relevant to its functionality.Styles (0)
If you wish to opt-out of these styles on a case-to-case basis, use property
all: revert-layer.
Valence.css ships this as .unstyled and .unstyled-all for the entire tree.
@custom-selector synonyms so custom elements can share
semantic styles. Element aliases match the host tag / .tag-* class; state
aliases match attributes (nested under the element alias).
Release notes (1)
0.1.1
- Ship only dist (and declared extras) in the npm tarball; drop build logs, tests and sources
Release notes
A "default action" is subsequent logic executed by the element if
e.preventDefault() is not
synchronously called on the event.
If you wish to opt-out of these styles on a case-to-case basis, use property
all: revert-layer.
Valence.css ships this as .unstyled and .unstyled-all for the entire tree.