@davidsouther/jiffies 2026.4.1 → 2026.24.1

package/lib/esm/components/virtual_scroll.js

@@ -0,0 +1,94 @@
+import { debounce } from "../debounce.js";
+import { FC, State } from "../dom/fc.js";
+import { div } from "../dom/html.js";
+export function arrayAdapter(data) {
+    return (offset, limit) => data.slice(offset, offset + limit);
+}
+export function fillVirtualScrollSettings(settings) {
+    const { minIndex = 0, maxIndex = Number.MAX_SAFE_INTEGER, startIndex = 0, itemHeight = 20, count = maxIndex - minIndex + 1, tolerance = count, } = settings;
+    return { minIndex, maxIndex, startIndex, itemHeight, count, tolerance };
+}
+export function initialState(settings) {
+    // From Denis Hilt, https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/
+    const { minIndex, maxIndex, startIndex, itemHeight, count, tolerance } = settings;
+    const bufferedItems = count + 2 * tolerance;
+    const itemsAbove = Math.max(0, startIndex - tolerance - minIndex);
+    const viewportHeight = count * itemHeight;
+    const totalHeight = (maxIndex - minIndex + 1) * itemHeight;
+    const toleranceHeight = tolerance * itemHeight;
+    const bufferHeight = viewportHeight + 2 * toleranceHeight;
+    const topPaddingHeight = itemsAbove * itemHeight;
+    const bottomPaddingHeight = totalHeight - (topPaddingHeight + bufferHeight);
+    return {
+        scrollTop: 0,
+        settings,
+        viewportHeight,
+        totalHeight,
+        toleranceHeight,
+        bufferedItems,
+        topPaddingHeight,
+        bottomPaddingHeight,
+        data: [],
+        rows: [],
+    };
+}
+export function getData(minIndex, maxIndex, offset, limit, get) {
+    const start = Math.max(0, minIndex, offset);
+    const end = Math.min(maxIndex, offset + limit - 1);
+    const data = get(start, end - start);
+    return [...data];
+}
+export function doScroll(scrollTop, state, get) {
+    const { totalHeight, toleranceHeight, bufferedItems, settings: { itemHeight, minIndex, maxIndex }, } = state;
+    const index = minIndex + Math.floor((scrollTop - toleranceHeight) / itemHeight);
+    const data = getData(minIndex, maxIndex, index, bufferedItems, get);
+    const topPaddingHeight = Math.max((index - minIndex) * itemHeight, 0);
+    const bottomPaddingHeight = Math.max(totalHeight - (topPaddingHeight + data.length * itemHeight), 0);
+    return { scrollTop, topPaddingHeight, bottomPaddingHeight, data };
+}
+export const VirtualScroll = FC("virtual-scroll", (element, props) => {
+    const settings = fillVirtualScrollSettings(props.settings);
+    const state = {
+        ...initialState(settings),
+        ...element[State],
+    };
+    element[State] = state;
+    const scrollTo = ({ target } = { target: state }) => {
+        const scrollTop = target?.scrollTop ?? state.topPaddingHeight;
+        const updatedSate = {
+            ...state,
+            ...doScroll(scrollTop, state, props.get),
+        };
+        setState(updatedSate);
+    };
+    const viewportElement = div({
+        style: { height: `${state.viewportHeight}px`, overflowY: "scroll" },
+        events: {
+            // @ts-expect-error
+            scroll: debounce(scrollTo, 0),
+        },
+    });
+    setTimeout(() => {
+        viewportElement.scroll?.({ top: state.scrollTop });
+    });
+    const setState = (newState) => {
+        state.scrollTop = newState.scrollTop;
+        state.topPaddingHeight = newState.topPaddingHeight;
+        state.bottomPaddingHeight = newState.bottomPaddingHeight;
+        state.data = newState.data;
+        state.rows = state.data.map(props.row);
+        viewportElement.update(div({
+            class: "VirtualScroll__topPadding",
+            style: { height: `${state.topPaddingHeight}px` },
+        }), ...(state.rows ?? []).map((row, i) => div({
+            class: `VirtualScroll__item_${i}`,
+            style: { height: `${settings.itemHeight}px` },
+        }, row)), div({
+            class: "VirtualScroll__bottomPadding",
+            style: { height: `${state.bottomPaddingHeight}px` },
+        }));
+    };
+    scrollTo();
+    return viewportElement;
+});
+export default VirtualScroll;

package/lib/esm/debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<T extends unknown[]>(fn: (...args: T) => void, ms?: number): (...args: T) => void;

package/lib/esm/debounce.js

@@ -0,0 +1,11 @@
+export function debounce(fn, ms = 32) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            clearTimeout(timer);
+            return fn(...args);
+        }, ms);
+        return timer;
+    };
+}

package/lib/esm/diff.d.ts

@@ -0,0 +1,15 @@
+export declare const DiffA: unique symbol;
+export declare const DiffB: unique symbol;
+export type DiffIndex = string | number;
+export type DiffPrimitive = string | number | boolean | null | undefined;
+interface DiffEntry {
+    key: DiffIndex;
+    left: DiffPrimitive;
+    right: DiffPrimitive;
+}
+interface DiffList {
+    key: DiffIndex;
+    children: (DiffEntry | DiffList)[];
+}
+export declare function diff<T>(a: Partial<T>, b: Partial<T>): (DiffEntry | DiffList)[];
+export {};

package/lib/esm/diff.js

@@ -0,0 +1,50 @@
+import { range } from "./range.js";
+import { isSome, None, Some } from "./result.js";
+export const DiffA = Symbol("A");
+export const DiffB = Symbol("B");
+function doDiff(va, vb, k) {
+    if (Array.isArray(va)) {
+        // @ts-expect-error
+        return diffArray(va, vb, k);
+    }
+    if (typeof va === "object") {
+        const d = diffObject(va ?? {}, vb ?? {}, k);
+        if (d.children.length === 0) {
+            return None();
+        }
+        return Some(d);
+    }
+    if (Object.is(va, vb)) {
+        return None();
+    }
+    // @ts-expect-error
+    return { key: k, left: va, right: vb };
+}
+function diffArray(a, b, key) {
+    const indexes = Math.max(a.length, b.length);
+    const children = range(0, indexes)
+        .map((i) => doDiff(a[i], b[i], i))
+        .filter(isSome);
+    return children.length > 0 ? { key, children } : None();
+}
+function diffObject(a, b, key = "") {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    const children = [...keys]
+        // @ts-expect-error
+        .map((k) => doDiff(a[k], b[k], k))
+        .filter(isSome);
+    return {
+        key,
+        children,
+    };
+}
+export function diff(a, b) {
+    if (typeof a !== "object" && !Object.is(a, b)) {
+        // @ts-expect-error
+        return [{ key: "", left: a, right: b }];
+    }
+    return (Array.isArray(a)
+        ? // @ts-ignore
+            (diffArray(a, b, "") ?? { children: [] })
+        : diffObject(a, b, "")).children;
+}

package/lib/esm/display.d.ts

@@ -0,0 +1,5 @@
+export type Display = string | {
+    toString(): string;
+};
+export declare const isDisplay: (a: unknown) => a is Display;
+export declare const display: (a: unknown | Display) => string;

package/lib/esm/display.js

@@ -0,0 +1,11 @@
+export const isDisplay = (a) => typeof a?.toString === "function" ||
+    typeof a === "string";
+export const display = (a) => {
+    if (isDisplay(a)) {
+        const str = a.toString();
+        if (str === "[object Object]")
+            return JSON.stringify(a);
+        return str;
+    }
+    return JSON.stringify(a);
+};

package/lib/esm/dom/css/border.d.ts

@@ -0,0 +1,11 @@
+import type { Properties } from "../types/css.ts";
+import type { Side, Size } from "./constants.ts";
+export declare function rounded(size?: Size, side?: Side): Properties<0 | (string & {}), string & {}>;
+export declare function border({ side: _side, style: _style, radius: _radius, width: _width, color: _color, }: {
+    side?: Side;
+    style?: "solid" | "dotted" | "dashed" | "double" | "none";
+    radius?: Size;
+    width?: 0 | 1 | 2 | 4 | 8;
+    color?: string;
+}): {};
+export declare function inset(width: 0 | 1 | 2 | 4 | 8, color1?: string, color2?: string): {};

package/lib/esm/dom/css/border.js

@@ -0,0 +1,27 @@
+import { getSide, getSize, isSide } from "./core.js";
+export function rounded(size = "", side = "") {
+    if (isSide(size)) {
+        side = size;
+        size = "";
+    }
+    const sized = getSize(size);
+    return getSide(side).reduce((prev, curr) => {
+        if (curr === "") {
+            prev.borderRadius = sized;
+        }
+        else {
+            // @ts-expect-error
+            prev[`border${curr}Radius`] = sized;
+        }
+        return prev;
+    }, {});
+}
+export function border({ side: _side = "", style: _style = "solid", radius: _radius = "", width: _width = 1, color: _color = "black", }) {
+    return {};
+}
+export function inset(width, color1 = "gray", color2 = "lightgray") {
+    return {
+        ...border({ side: "tl", width, color: color1, radius: "none" }),
+        ...border({ side: "br", width, color: color2, radius: "none" }),
+    };
+}

package/lib/esm/dom/css/constants.d.ts

@@ -0,0 +1,31 @@
+export declare const Sizes: {
+    none: string;
+    sm: string;
+    "": string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    full: string;
+};
+export declare const Sides: {
+    "": string;
+    t: string;
+    r: string;
+    l: string;
+    b: string;
+    tl: string;
+    tr: string;
+    bl: string;
+    br: string;
+};
+export declare const Widths: {
+    "1/4": string;
+    "1/2": string;
+    "3/4": string;
+    full: string;
+};
+export type Size = keyof typeof Sizes;
+export type Side = keyof typeof Sides;
+export type Width = keyof typeof Widths;

package/lib/esm/dom/css/constants.js

@@ -0,0 +1,28 @@
+export const Sizes = {
+    none: "0px",
+    sm: "0.125rem",
+    "": "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+export const Sides = {
+    "": "",
+    t: "Top",
+    r: "Right",
+    l: "Left",
+    b: "Bottom",
+    tl: "TopLeft",
+    tr: "TopRight",
+    bl: "BottomLeft",
+    br: "BottomRight",
+};
+export const Widths = {
+    "1/4": "25%",
+    "1/2": "50%",
+    "3/4": "75%",
+    full: "100%",
+};

package/lib/esm/dom/css/core.d.ts

@@ -0,0 +1,5 @@
+import { type Side, type Size, Sizes } from "./constants.ts";
+export declare function isSide(v: string): v is Side;
+export declare function isSize(v: string): v is Size;
+export declare function getSize(size: keyof typeof Sizes): string;
+export declare function getSide(side: Side): string[];

package/lib/esm/dom/css/core.js

@@ -0,0 +1,24 @@
+import { Sides, Sizes } from "./constants.js";
+export function isSide(v) {
+    return Sides[v] !== undefined;
+}
+export function isSize(v) {
+    return Sizes[v] !== undefined;
+}
+export function getSize(size) {
+    return Sizes[size];
+}
+export function getSide(side) {
+    switch (side) {
+        case "t":
+            return [...getSide("tl"), ...getSide("tr")];
+        case "r":
+            return [...getSide("tr"), ...getSide("br")];
+        case "b":
+            return [...getSide("br"), ...getSide("bl")];
+        case "l":
+            return [...getSide("tl"), ...getSide("bl")];
+        default:
+            return [Sides[side]];
+    }
+}

package/lib/esm/dom/css/fstyle.d.ts

@@ -0,0 +1,5 @@
+import type { Properties } from "../types/css.ts";
+export type FStyle = Properties | {
+    [k: string]: FStyle;
+};
+export declare function compileFStyle(fstyle: FStyle, prefix?: string): string;

package/lib/esm/dom/css/fstyle.js

@@ -0,0 +1,32 @@
+import { dashCase } from "../../case.js";
+export function compileFStyle(fstyle, prefix = "") {
+    const properties = [];
+    const rules = [];
+    for (const [key, value] of Object.entries(fstyle)) {
+        if (typeof value === "string") {
+            properties.push({ key, value });
+        }
+        else {
+            rules.push({ key, value });
+        }
+    }
+    let rule = "";
+    if (properties.length > 0) {
+        rule += `${prefix} {\n`;
+        for (const { key, value } of properties) {
+            rule += `  ${dashCase(key)}: ${value};\n`;
+        }
+        rule += "}\n\n";
+    }
+    for (const { key, value } of rules) {
+        if (key.startsWith("@media")) {
+            rule += `${key} {\n`;
+            rule += compileFStyle(value, "  ");
+            rule += "}\n\n";
+        }
+        else {
+            rule += compileFStyle(value, `${prefix} ${key}`);
+        }
+    }
+    return rule;
+}

package/lib/esm/dom/css/sizing.d.ts

@@ -0,0 +1,5 @@
+import { type Width } from "./constants.ts";
+export declare function width(amount: Width, block?: "inline"): {
+    width: string;
+    display?: string;
+};

package/lib/esm/dom/css/sizing.js

@@ -0,0 +1,10 @@
+import { Widths } from "./constants.js";
+export function width(amount, block) {
+    if (amount === undefined && Widths[block] !== undefined) {
+        amount = block;
+    }
+    return {
+        ...(block === "inline" ? { display: "inline-block" } : {}),
+        width: Widths[amount] ?? "0",
+    };
+}

package/lib/esm/dom/dom.d.ts

@@ -0,0 +1,36 @@
+import type { Properties as SVGProperties } from "./types/css.ts";
+export declare const XHTML_NAMESPACE_URI = "http://www.w3.org/1999/xhtml";
+export declare const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
+declare const Events: unique symbol;
+export declare const CLEAR: unique symbol;
+export type EventHandler = EventListenerOrEventListenerObject;
+export type DenormChildren = Node | string | typeof CLEAR | null | undefined | false;
+export type DOMElement = Element & ElementCSSInlineStyle;
+export type DomAttrs = {
+    class: string | string[];
+    style: Partial<SVGProperties> | string;
+    role: "button" | "list" | "listbox";
+    events: Partial<{
+        [K in keyof HTMLElementEventMap]: EventHandler | null;
+    }>;
+};
+export type Attrs<E extends Omit<Element, "update">, S = object> = Partial<Omit<{
+    [k in keyof E]: string | number | boolean;
+}, "style" | "toString"> & S & DomAttrs>;
+export type DenormAttrs<E extends Omit<Element, "update">, S = object> = Attrs<E, S> | DenormChildren;
+declare global {
+    interface Element {
+        [Events]: Map<string, EventHandler>;
+        update(attrs?: DenormAttrs<Element>, ...children: DenormChildren[]): this;
+    }
+}
+export type DOMUpdates<E extends Element = Element> = [DenormAttrs<E>, ...DenormChildren[]] | DenormChildren[];
+export declare function normalizeArguments<E extends Element>(attrs?: DenormAttrs<E>, children?: DenormChildren[], defaultAttrs?: Attrs<E>): [Attrs<E>, DenormChildren[]];
+export declare function up<E extends Element>(element: Omit<E, "update">, attrs?: DenormAttrs<E>, ...children: DenormChildren[]): E;
+export declare function update(element: Omit<Element, "update">, attrs: Attrs<Element>, children: DenormChildren[]): Element;
+/**
+ * Reconcile `element`'s mounted children against expected `children`, mutating the live DOM in place.
+ */
+export declare function reconcileChildren(element: Node, children: (string | Node)[]): void;
+export declare function patchNode(kept: Element, fresh: Element): void;
+export {};

package/lib/esm/dom/dom.js

@@ -0,0 +1,217 @@
+import { assert, assertExists } from "../assert.js";
+if (typeof window === "undefined") {
+    const { JSDOM } = await import("jsdom");
+    // biome-ignore lint/suspicious/noGlobalAssign: Load JSDom globally
+    window = global.window = new JSDOM().window;
+    global.HTMLElement ??= window.HTMLElement;
+    global.customElements ??= window.customElements;
+    // Unconditional: jsdom's dispatchEvent instanceof-checks its own Event class, so Node's native Event must be replaced.
+    global.Event = window.Event;
+    global.MouseEvent ??= window.MouseEvent;
+    global.Element ??= window.Element;
+}
+export const XHTML_NAMESPACE_URI = "http://www.w3.org/1999/xhtml";
+export const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
+const Events = Symbol("events");
+export const CLEAR = Symbol("Clear children");
+// Node.ELEMENT_NODE; the Node global is not installed in the jsdom bootstrap
+// above, so the numeric constant is used directly (cf. nodeType 3 for text).
+const ELEMENT_NODE = 1;
+function isAttrs(attrs) {
+    if (!attrs) {
+        return false;
+    }
+    if (typeof attrs === "object") {
+        return !attrs.nodeType;
+    }
+    return false;
+}
+export function normalizeArguments(attrs, children = [], defaultAttrs = {}) {
+    let attributes;
+    if (isAttrs(attrs)) {
+        attributes = attrs;
+    }
+    else {
+        if (attrs !== undefined) {
+            children.unshift(attrs);
+        }
+        attributes = defaultAttrs;
+    }
+    // Drop conditional/absent children (React's `{cond && <X/>}` idiom): null,
+    // undefined, and false. `0` and `""` are kept — they are legitimate text
+    // nodes, and dropping them would reintroduce the React `0`-renders-nothing bug.
+    return [attributes, children.flat().filter((c) => c != null && c !== false)];
+}
+export function up(element, attrs, ...children) {
+    return update(element, ...normalizeArguments(attrs, children));
+}
+/**
+ * (Re)attach a single listener for `type`, replacing any handler `events`
+ * already tracks for it, so each event has exactly one live handler — no
+ * stacking, no orphans. `events` is the element's own `[Events]` map; it
+ * stays the single source of truth.
+ */
+function setListener(target, events, type, handler) {
+    if (events.has(type)) {
+        target.removeEventListener(type, assertExists(events.get(type)));
+    }
+    target.addEventListener(type, handler);
+    events.set(type, handler);
+}
+/** Detach the listener `events` tracks for `type`, if any, and forget it. */
+function clearListener(target, events, type) {
+    if (events.has(type)) {
+        target.removeEventListener(type, assertExists(events.get(type)));
+        events.delete(type);
+    }
+}
+export function update(element, attrs, children) {
+    element[Events] ??= new Map();
+    const $events = element[Events];
+    for (const [k, v] of Object.entries(attrs.events ?? {})) {
+        if (v === null) {
+            clearListener(element, $events, k);
+        }
+        else if (v !== undefined) {
+            setListener(element, $events, k, v);
+        }
+    }
+    element.toggleAttribute("data-hydrate", $events.size > 0);
+    const _style = element.style;
+    if (_style) {
+        if (typeof attrs.style === "string") {
+            _style.cssText = attrs.style;
+        }
+        else {
+            for (const [k, v] of Object.entries(attrs.style ?? {})) {
+                // @ts-expect-error Object.entries is unable to statically look into args
+                _style[k] = v;
+            }
+        }
+    }
+    for (const [k, v] of Object.entries(attrs)) {
+        if (k === "style") {
+            continue;
+        }
+        if (k === "events") {
+            continue;
+        }
+        if (k === "class") {
+            const cs = Array.isArray(v) ? v : String(v).split(/\s+/m).filter(Boolean);
+            for (const c of cs) {
+                if (c.startsWith("!")) {
+                    element.classList.remove(c.substring(1));
+                }
+                else {
+                    element.classList.add(c);
+                }
+            }
+            continue;
+        }
+        if (!v) {
+            element.removeAttribute(k);
+        }
+        else if (v === true) {
+            element.setAttribute(k, k);
+        }
+        else {
+            element.setAttribute(k, String(v));
+        }
+    }
+    if (children?.length > 0) {
+        reconcileChildren(element, children[0] === CLEAR ? [] : children);
+    }
+    element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
+    return element;
+}
+/**
+ * Reconcile `element`'s mounted children against expected `children`, mutating the live DOM in place.
+ */
+export function reconcileChildren(element, children) {
+    const desired = findDesiredNodes(element, children);
+    const { mountedSet, unclaimed } = findUnclaimedNodes(desired, element);
+    patchUnclaimedNodes(desired, mountedSet, unclaimed);
+    clearUnwantedNodes(desired, element);
+    insertDesiredNodes(element, desired);
+}
+function findDesiredNodes(element, children) {
+    const doc = element.ownerDocument ?? window.document;
+    const desired = children.map((child) => typeof child === "string" ? doc.createTextNode(child) : child);
+    return desired;
+}
+function insertDesiredNodes(element, desired) {
+    let cursor = element.firstChild;
+    for (const node of desired) {
+        if (node === cursor) {
+            cursor = cursor.nextSibling;
+        }
+        else {
+            element.insertBefore(node, cursor);
+        }
+    }
+}
+function clearUnwantedNodes(desired, element) {
+    const keep = new Set(desired);
+    for (const mounted of Array.from(element.childNodes)) {
+        if (!keep.has(mounted)) {
+            element.removeChild(mounted);
+        }
+    }
+}
+function patchUnclaimedNodes(desired, mountedSet, unclaimed) {
+    let claim = 0;
+    for (let i = 0; i < desired.length; i++) {
+        const node = desired[i];
+        if (node.nodeType !== ELEMENT_NODE || mountedSet.has(node)) {
+            continue;
+        }
+        if (claim < unclaimed.length) {
+            if (unclaimed[claim].nodeName === node.nodeName) {
+                patchNode(unclaimed[claim], node);
+                desired[i] = unclaimed[claim];
+            }
+            claim++;
+        }
+    }
+}
+function findUnclaimedNodes(desired, element) {
+    const unclaimed = [];
+    const desiredSet = new Set(desired);
+    const mountedSet = new Set(element.childNodes);
+    for (const mounted of Array.from(element.childNodes)) {
+        if (mounted.nodeType === ELEMENT_NODE && !desiredSet.has(mounted)) {
+            unclaimed.push(mounted);
+        }
+    }
+    return { mountedSet, unclaimed };
+}
+export function patchNode(kept, fresh) {
+    assert(kept.nodeName === fresh.nodeName, "patching nodes of different types");
+    // Remove `kept` attributes that aren't on `fresh`, then add `fresh` attributes not on `kept`.
+    for (const { name } of Array.from(kept.attributes)) {
+        if (!fresh.hasAttribute(name)) {
+            kept.removeAttribute(name);
+        }
+    }
+    for (const { name, value } of Array.from(fresh.attributes)) {
+        if (kept.getAttribute(name) !== value) {
+            kept.setAttribute(name, value);
+        }
+    }
+    // Similar to attributes, but operating in a map on the side rather than the node itself.
+    kept[Events] ??= new Map();
+    const keptEvents = kept[Events];
+    const freshEvents = fresh[Events] ?? new Map();
+    for (const [type] of keptEvents) {
+        if (!freshEvents.has(type)) {
+            clearListener(kept, keptEvents, type);
+        }
+    }
+    for (const [type, handler] of freshEvents) {
+        setListener(kept, keptEvents, type, handler);
+    }
+    // Custom elements rebuild their own subtrees
+    if (customElements.get(kept.localName))
+        return;
+    reconcileChildren(kept, Array.from(fresh.childNodes));
+}

package/lib/esm/dom/fc.d.ts

@@ -0,0 +1,10 @@
+import { type DenormChildren, type DomAttrs } from "./dom.ts";
+export type Attrs<S> = S & Partial<DomAttrs>;
+export declare const State: unique symbol;
+export interface FCComponent<Props extends object, State extends object> extends Element {
+    [State]?: Partial<State>;
+    update(attrs?: Partial<Attrs<Props> & DomAttrs> | DenormChildren, ...children: DenormChildren[]): this;
+}
+export type RenderFn<Props extends object, State extends object> = (el: FCComponent<Props, State>, attrs: Attrs<Props>, children: DenormChildren[]) => Element | Element[];
+export type FCComponentCtor<Props extends object, State extends object> = (attrs?: Attrs<Props> | DenormChildren, ...children: DenormChildren[]) => FCComponent<Props, State>;
+export declare function FC<Props extends object, State extends object = object>(name: string, component: RenderFn<Props, State>): FCComponentCtor<Props, State>;