thorish
Version:
This is a library of useful JS concepts and data structures for Node and the browser. It it, unashamedly, a dumping ground for code needed by [@samthor](https://twitter.com/samthor)'s projects.
63 lines (62 loc) • 2.6 kB
TypeScript
/**
* Simple CSS tagged literal interpolator.
*
* This actually does NO escaping or tracking of state, so user beware.
*/
export declare function css(arr: TemplateStringsArray, ...rest: (string | number)[]): CSSStyleSheet;
/**
* Naïvely builds a {@link DocumentFragment} with interpolated HTML-safe strings/etc.
*
* This has basic support for interpolating tag values and within comments etc.
* This may throw if values are placed in the wrong location, e.g., a `Node` within a tag.
* It probably would not survive untrusted user input.
*/
export declare function html(arr: TemplateStringsArray, ...rest: (string | number | Node)[]): DocumentFragment;
/**
* Builds a tool which clones the given fragment/styles onto the target {@link HTMLElement} as a {@link ShadowRoot}.
*
* Basically for CE constructors.
*/
export declare function buildShadow(src: DocumentFragment, ...styles: CSSStyleSheet[]): (target: Element) => ShadowRoot;
/**
* Builds a tool which clones the given fragment/styles onto the target {@link HTMLElement} as a {@link ShadowRoot}.
*
* Basically for CE constructors.
* Allows basic configuration.
*/
export declare function buildShadowOptions(options: {
delegatesFocus?: boolean;
}, src: DocumentFragment, ...styles: CSSStyleSheet[]): (target: Element) => ShadowRoot;
/**
* Simple HTML superclass which provides an abstract {@link SignalHTMLElement#refresh} method which is called when the element is mounted.
*
* Call the protected method {@link SignalHTMLElement#invalidate} to trigger a refresh manually (e.g., some important value has changed).
*/
export declare abstract class SignalHTMLElement extends HTMLElement {
private abort;
private signal;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* Call to cause a refresh, e.g., some value has changed.
*/
protected invalidate(): void;
/**
* Return `true` if this should cause a refresh/signal to be aborted.
*/
protected reparentShouldInvalidate(): boolean;
private maybeRefresh;
protected abstract refresh(signal: AbortSignal): void;
}
/**
* Non-abstract class which sizes its 'position' as best it can.
* It is best placed inside something _else_ with `display: contents`, as we only inherit "supported" values.
*
* Slotted children are put into a flexbox which sets `flex-grow` on them.
* That is, if you add multiple children, they'll be stacked in a column.
*
* Must be registered before use, not defined "for free" by this library.
*/
export declare class SizingElement extends HTMLElement {
constructor();
}