elements-kit 0.0.1 → 0.0.3

package/dist/element-CCHXkEsj.mjs

@@ -0,0 +1,262 @@
+import { a as effect, t as isReactive } from "./signals-Cr7xgAJH.mjs";
+import { $slots, Slot, Slots } from "./slot.mjs";
+import { t as resolveNode } from "./lib-B2drrxlV.mjs";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+//#endregion
+//#region src/jsx-runtime/constants.ts
+var constants_exports = /* @__PURE__ */ __exportAll({ ReservedNameSpaces: () => ReservedNameSpaces });
+import * as import_dom_expressions_src_constants_js from "dom-expressions/src/constants.js";
+__reExport(constants_exports, import_dom_expressions_src_constants_js);
+const ReservedNameSpaces = new Set([
+	"class",
+	"on",
+	"style",
+	"prop"
+]);
+//#endregion
+//#region src/jsx-runtime/children.ts
+function hasSlots(node) {
+	return $slots in node;
+}
+function isChildrenProperty(node, key) {
+	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) return true;
+	if (hasSlots(node)) {
+		const slotName = key.replace(/^slot:/, "");
+		if (Slots.has(node[$slots], slotName)) return true;
+	}
+	return key in node && node[key] instanceof Slot;
+}
+function applyChildren(node, key, value) {
+	if (hasSlots(node)) {
+		const slotName = key.replace(/^slot:/, "");
+		if (Slots.has(node[$slots], slotName)) return applySlot(node[$slots][slotName], value);
+	}
+	if (key === "children" && (node instanceof Element || node instanceof DocumentFragment)) return mountChildren(node, value);
+	if (key in node) {
+		const slot = node[key];
+		if (!(slot instanceof Slot)) return;
+		return applySlot(slot, value);
+	}
+}
+/**
+* Sets a Slot's content from a Child value.
+*/
+function applySlot(slot, value) {
+	if (typeof value === "function") return effect(() => slot.set(resolveChild(value())));
+	slot.set(resolveChild(value));
+}
+function mountChildren(el, value) {
+	const children = ensureFlatArray(value);
+	const disposers = [];
+	for (const child of children) {
+		if (typeof child === "function") {
+			const slot = Slot.new();
+			el.appendChild(slot());
+			disposers.push(effect(() => slot.set(resolveChild(child()))));
+			continue;
+		}
+		el.appendChild(resolveChild(child));
+	}
+	return disposers.length > 0 ? () => disposers.forEach((d) => d()) : void 0;
+}
+function resolveChild(value) {
+	if (Array.isArray(value)) {
+		const fragment = document.createDocumentFragment();
+		for (const item of value) fragment.appendChild(resolveChild(item));
+		return fragment;
+	}
+	if (typeof value === "function") return resolveChild(value());
+	return resolveNode(value);
+}
+/** Normalises the children prop into a flat array. */
+function ensureFlatArray(raw) {
+	return (Array.isArray(raw) ? raw : [raw]).flat(Infinity);
+}
+//#endregion
+//#region src/jsx-runtime/properties.ts
+function applyProps(node, props) {
+	const disposables = /* @__PURE__ */ new Set();
+	for (const [key, value] of Object.entries(props)) {
+		if (isChildrenProperty(node, key)) {
+			const disposable = applyChildren(node, key, value);
+			if (disposable) disposables.add(disposable);
+			continue;
+		}
+		if (isReactive(value)) {
+			if (isEventKey(key)) {
+				let cleanup;
+				const dispose = effect(() => {
+					if (cleanup) cleanup();
+					cleanup = setEvent(node, key, value());
+				});
+				disposables.add(() => {
+					dispose();
+					if (cleanup) cleanup();
+				});
+				continue;
+			}
+			disposables.add(effect(() => setProp(node, key, value())));
+			continue;
+		}
+		if (isEventKey(key)) {
+			disposables.add(setEvent(node, key, value));
+			continue;
+		}
+		setProp(node, key, value);
+	}
+	return disposables;
+}
+function setProp(node, key, value) {
+	const colonIdx = key.indexOf(":");
+	if (colonIdx > -1) {
+		const ns = key.slice(0, colonIdx);
+		const name = key.slice(colonIdx + 1);
+		if (ReservedNameSpaces.has(ns)) {
+			if (ns === "prop") {
+				node[name] = value;
+				return;
+			}
+			if (ns === "class") {
+				node.classList.toggle(name, Boolean(value));
+				return;
+			}
+			if (ns === "style") {
+				if (value == null || value === false) node.style.removeProperty(name);
+				else node.style.setProperty(name, String(value));
+				return;
+			}
+			return;
+		}
+		const svgNs = constants_exports.SVGNamespace[ns];
+		if (svgNs) {
+			node.setAttributeNS(svgNs, key, String(value ?? ""));
+			return;
+		}
+	}
+	if (key === "class") {
+		node.className = String(value ?? "");
+		return;
+	}
+	if (key === "style") {
+		applyStyle(node, value);
+		return;
+	}
+	if (constants_exports.ChildProperties.has(key)) {
+		node[key] = value ?? "";
+		return;
+	}
+	if (!(node instanceof SVGElement) && constants_exports.Properties.has(key)) {
+		node[key] = value;
+		return;
+	}
+	if (node instanceof Element && node.nodeName.includes("-") && key in node) {
+		try {
+			node[key] = value;
+		} catch {
+			setAttribute(node, key, value);
+		}
+		return;
+	}
+	if (!(node instanceof Element)) {
+		node[key] = value;
+		return;
+	}
+	setAttribute(node, key, value);
+}
+function applyStyle(el, value) {
+	const s = el.style;
+	if (!s) return;
+	if (typeof value === "string") s.cssText = value;
+	else if (value && typeof value === "object") Object.assign(s, value);
+}
+function setAttribute(el, key, value) {
+	if (value == null || value === false) el.removeAttribute(key);
+	else el.setAttribute(key, value === true ? "" : String(value));
+}
+function isEventKey(key) {
+	return key.startsWith("on:") || key.length > 2 && key.startsWith("on") && key[2] >= "A" && key[2] <= "Z";
+}
+function setEvent(el, key, handler) {
+	const event = key.startsWith("on:") ? key.slice(3) : key[2].toLowerCase() + key.slice(3);
+	el.addEventListener(event, handler);
+	return () => el.removeEventListener(event, handler);
+}
+//#endregion
+//#region src/jsx-runtime/ref.ts
+const $ref = Symbol("ref");
+//#endregion
+//#region src/jsx-runtime/element.ts
+function createElement(type, { [$ref]: ref, ...props } = {}) {
+	if (typeof type === "function" && !type.prototype?.render) {
+		const el = type(props);
+		if (typeof ref === "function" && el instanceof Element) ref(el);
+		return el;
+	}
+	const node = resolveElement(type);
+	if (!node) return null;
+	const disposables = applyProps(node, props);
+	if (disposables.size > 0) attachDisposables(node, disposables);
+	const el = _render(node);
+	if (typeof ref === "function" && el instanceof Element) ref(el);
+	return el;
+}
+function _render(node) {
+	if (node instanceof Element || node instanceof DocumentFragment) return node;
+	if (!node || typeof node.render !== "function") return null;
+	return _render(node.render());
+}
+/**
+* Resolves the `type` argument of createElement into a concrete DOM node:
+*   - string          → document.createElement(type)
+*   - Element         → the element itself  (apply props to an existing node)
+*   - class component → new type()
+*/
+function resolveElement(type) {
+	if (typeof type === "string") return document.createElement(type);
+	if (type instanceof Element || type instanceof DocumentFragment) return type;
+	return new type();
+}
+function hasOwnDisposable(el) {
+	return Object.hasOwn(el, Symbol.dispose);
+}
+function attachDisposables(el, disposables) {
+	const existingDispose = hasOwnDisposable(el) ? el[Symbol.dispose].bind(el) : null;
+	Object.defineProperty(el, Symbol.dispose, {
+		value() {
+			existingDispose?.();
+			disposables.forEach((fn) => fn());
+			disposables.clear();
+		},
+		configurable: true
+	});
+}
+/** Runs all cleanup functions registered by JSX props/effects on `el`. */
+function disposeElement(el) {
+	el[Symbol.dispose]?.();
+}
+//#endregion
+export { disposeElement as n, createElement as t };

package/dist/index-C6xwOPCO.d.mts

@@ -0,0 +1,263 @@
+import { u as ValueOrReactive } from "./index-DJejH8Ff.mjs";
+
+//#region src/signals/lib.d.ts
+/**
+ * Returns `true` if `fn` is a signal handle created by {@link signal}.
+ *
+ * Relies on `Function.name` matching the internal `signalOper` function name.
+ */
+declare function isSignal(fn: () => void): boolean;
+/**
+ * Returns `true` if `fn` is a computed handle created by {@link computed}.
+ *
+ * Relies on `Function.name` matching the internal `computedOper` function name.
+ */
+declare function isComputed(fn: () => void): boolean;
+/**
+ * Returns `true` if `fn` is an effect cleanup handle created by {@link effect}.
+ *
+ * Relies on `Function.name` matching the internal `effectOper` function name.
+ */
+declare function isEffect(fn: () => void): boolean;
+/**
+ * Returns `true` if `fn` is an effectScope cleanup handle created by
+ * {@link effectScope}.
+ *
+ * Relies on `Function.name` matching the internal `effectScopeOper` function name.
+ */
+declare function isEffectScope(fn: () => void): boolean;
+/**
+ * Creates a mutable reactive signal.
+ *
+ * - **Read**: call with no arguments → returns the current value and
+ *   subscribes the active tracking context.
+ * - **Write**: call with a value → updates the signal and schedules
+ *   downstream effects if the value changed.
+ *
+ * @example
+ * ```ts
+ * const count = signal(0);
+ * count();        // → 0  (read)
+ * count(1);       // write – effects depending on count will re-run
+ * count();        // → 1
+ * ```
+ */
+declare function signal<T>(): {
+  (): T | undefined;
+  (value: T | undefined): void;
+};
+declare function signal<T>(initialValue: T): {
+  (): T;
+  (value: T): void;
+};
+/**
+ * Creates a lazily-evaluated computed value.
+ *
+ * The `getter` is only called when the computed value is read **and** one of
+ * its dependencies has changed since the last evaluation.  If nothing has
+ * changed the cached `value` is returned without re-running `getter`.
+ *
+ * Computed values are read-only; they cannot be set directly.
+ *
+ * @param getter - Pure function deriving a value from other reactive sources.
+ *                 Receives the previous value as an optional optimisation hint.
+ *
+ * @example
+ * ```ts
+ * const a = signal(1);
+ * const b = signal(2);
+ * const sum = computed(() => a() + b());
+ *
+ * sum(); // → 3
+ * a(10);
+ * sum(); // → 12  (re-evaluated lazily)
+ * ```
+ */
+declare function computed<T>(getter: (previousValue?: T) => T): () => T;
+/**
+ * Creates a reactive side-effect that runs immediately and re-runs whenever
+ * any signal or computed it read during its last execution changes.
+ *
+ * Use {@link onCleanup} inside `fn` to register teardown logic that runs
+ * before each re-execution and on final disposal.
+ *
+ * If `effect` is called inside an `effectScope` or another `effect`, the
+ * new effect is automatically owned by the outer scope and will be disposed
+ * when the scope is disposed.
+ *
+ * @param fn - The side-effect body.  Reactive reads inside this function
+ *             establish dependency links.
+ * @returns A disposal function.  Call it to stop the effect and run any
+ *          registered cleanup.
+ *
+ * @example
+ * ```ts
+ * const url = signal('/api/data');
+ *
+ * const stop = effect(() => {
+ *   const controller = new AbortController();
+ *   fetch(url(), { signal: controller.signal });
+ *   onCleanup(() => controller.abort());
+ * });
+ *
+ * url('/api/other'); // previous fetch is aborted, new one starts
+ * stop();            // final cleanup: abort the last fetch
+ * ```
+ */
+declare function effect(fn: () => void): () => void;
+/**
+ * Creates an ownership scope that groups reactive effects so they can all be
+ * disposed at once.
+ *
+ * Effects and nested scopes created inside `fn` are linked to this scope.
+ * When the returned disposal function is called, all owned effects are stopped
+ * in cascade – triggering their registered {@link onCleanup} callbacks – and
+ * the scope itself is removed from any parent scope that owns it.
+ *
+ * @param fn - Synchronous setup function.  Create effects and nested scopes
+ *             here.
+ * @returns A disposal function that tears down all owned effects and the scope
+ *          itself.
+ *
+ * @example
+ * ```ts
+ * const stopAll = effectScope(() => {
+ *   effect(() => console.log('a:', a()));
+ *   effect(() => console.log('b:', b()));
+ * });
+ *
+ * stopAll(); // both effects stopped simultaneously
+ * ```
+ */
+declare function effectScope(fn: () => void): () => void;
+/**
+ * Registers a cleanup callback for the currently executing effect or scope.
+ *
+ * The callback will be called:
+ * 1. **Before the next re-run** of the enclosing effect (so resources from
+ *    the previous run are released before the new run sets them up again).
+ * 2. **On final disposal** of the effect, whether triggered explicitly by
+ *    calling the effect's cleanup handle or implicitly by an owning
+ *    `effectScope` being disposed.
+ *
+ * Calling `onCleanup` outside of a tracking context (no active effect) is a
+ * no-op; it does **not** throw.
+ *
+ * Only one cleanup function per effect run is supported.  Calling `onCleanup`
+ * multiple times within the same run overwrites the previous registration.
+ *
+ * @param fn - The teardown callback.
+ *
+ * @example
+ * ```ts
+ * effect(() => {
+ *   const id = setInterval(() => tick(), 1000);
+ *   onCleanup(() => clearInterval(id));
+ * });
+ * ```
+ *
+ * @example Composable helper – no prop-drilling needed:
+ * ```ts
+ * function useEventListener(target: EventTarget, type: string, handler: EventListener) {
+ *   target.addEventListener(type, handler);
+ *   onCleanup(() => target.removeEventListener(type, handler));
+ * }
+ *
+ * effect(() => {
+ *   useEventListener(window, 'resize', onResize);
+ * });
+ * ```
+ */
+declare function onCleanup(fn: () => void): void;
+/**
+ * Runs `fn` as a single atomic update: all signal writes inside `fn` are
+ * collected and effects are flushed only once after `fn` returns, rather than
+ * after each individual write.
+ *
+ * Batches can be nested; the flush only occurs when the outermost batch
+ * completes.
+ *
+ * @example
+ * ```ts
+ * batch(() => {
+ *   x(1);
+ *   y(2);
+ *   z(3);
+ * }); // effects that depend on x, y, or z run once here
+ * ```
+ */
+declare function batch(fn: () => void): void;
+/**
+ * Executes `fn` in a non-tracking context: any signals read inside `fn` do
+ * **not** create dependency links on the currently active subscriber.
+ *
+ * Useful when you need to read a signal's current value without subscribing to
+ * future changes.
+ *
+ * @returns The value returned by `fn`.
+ *
+ * @example
+ * ```ts
+ * const logCount = effect(() => {
+ *   console.log('triggered by a:', a());
+ *   // read b without subscribing – effect won't re-run when b changes
+ *   console.log('current b:', untracked(() => b()));
+ * });
+ * ```
+ */
+declare function untracked<T>(fn: () => T): T;
+/**
+ * Manually triggers all subscribers of every signal read inside `fn`.
+ *
+ * Unlike writing to a signal, `trigger` does not change the signal's value; it
+ * only forces downstream effects and computeds to re-evaluate.
+ *
+ * @param fn - Function whose reactive reads identify the signals to trigger.
+ *
+ * @example
+ * ```ts
+ * const items = signal([1, 2, 3]);
+ *
+ * // Mutate in place (referential equality won't detect the change):
+ * items().push(4);
+ * trigger(() => items()); // manually notify subscribers
+ * ```
+ */
+declare function trigger(fn: () => void): void;
+//#endregion
+//#region src/signals/index.d.ts
+declare function isReactive<T>(value: ValueOrReactive<T>): value is () => T;
+type Updater<T> = (value: T) => void;
+type Computed<T> = () => T;
+type Signal<T> = Updater<T> & Computed<T>;
+/**
+ * A decorator that makes a class field reactive by automatically wrapping its value in a signal.
+ *
+ * The field behaves like a normal property (get/set) but reactivity is tracked under the hood.
+ * Any reads will subscribe to the signal and any writes will trigger updates.
+ *
+ * @example
+ * ```ts
+ * class Counter {
+ *   @reactive()
+ *   count: number = 0;
+ * }
+ *
+ * const counter = new Counter();
+ * counter.count++;        // Triggers reactivity
+ * console.log(counter.count); // Subscribes to changes
+ * ```
+ *
+ * @remarks
+ * Equivalent to manually creating a private signal and getter/setter:
+ * ```ts
+ * class Counter {
+ *   #count = signal(0);
+ *   get count() { return this.#count(); }
+ *   set count(value) { this.#count(value); }
+ * }
+ * ```
+ */
+declare function reactive<This extends object, Value>(source?: (self: This) => Signal<Value>): (_target: unknown, context: ClassFieldDecoratorContext<This, Value>) => (this: This, initialValue: Value) => Value;
+//#endregion
+export { untracked as _, reactive as a, effect as c, isEffect as d, isEffectScope as f, trigger as g, signal as h, isReactive as i, effectScope as l, onCleanup as m, Signal as n, batch as o, isSignal as p, Updater as r, computed as s, Computed as t, isComputed as u };

package/dist/index-DJejH8Ff.d.mts

@@ -0,0 +1,89 @@
+import { t as PrimitiveNodeType } from "./polyfill-BEL-HWkO.mjs";
+
+//#region src/builder/index.d.ts
+declare const DISPOSABLES: unique symbol;
+declare const DISPOSE: symbol;
+declare const VALUE: unique symbol;
+declare const EFFECT: unique symbol;
+declare class ElementBuilder<T extends Element = Element> {
+  /** Dispose the reactive element and run all cleanup functions */
+  [DISPOSE]: () => void;
+  /** The underlying DOM element */
+  private [VALUE];
+  /** A set of cleanup functions to run when disposing the element */
+  private [DISPOSABLES];
+  [EFFECT](fn: () => void): this;
+  private constructor();
+  static create<T extends Element>(el: T): ReactiveElement<T>;
+  children(...children: ValueOrReactive<ElementBuilder | Node | string | number>[]): T;
+  ref(): T;
+  ref(apply: (ref: T) => void | (() => void)): this;
+  on<K extends keyof HTMLElementEventMap>(eventType: K, listener: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): this;
+}
+declare function toNode(c: ElementBuilder | PrimitiveNodeType): Node;
+declare function builder<T extends Element>(el: T): ReactiveElementOf<T>;
+/**
+ * Callable overloads matching the Proxy apply trap → ref() behavior.
+ * Calling a reactive element as a function delegates to ref():
+ *   el()            → returns the raw DOM element
+ *   el((ref) => {}) → applies a side-effect, returns the builder for chaining
+ */
+interface RefCallable<T extends Element> {
+  (): T;
+  (apply: (ref: T) => void | (() => void)): this;
+}
+type ReactiveElement<T extends Element> = ElementBuilder<T> & RefCallable<T>;
+type ValueOrReactive<T> = (() => T) | T;
+type ValueOrReactiveArray<T extends any[]> = { [K in keyof T]: ValueOrReactive<T[K]> | T[K] };
+/**
+ * Filter keys that are writable (exclude readonly and getter-only).
+ */
+type WritableKeys<T> = { [K in keyof T]: (<U>() => U extends { [Q in K]: T[K] } ? 1 : 2) extends (<U>() => U extends { readonly [Q in K]: T[K] } ? 1 : 2) ? never : K }[keyof T];
+/**
+ * Extracts the object chaining part of ReactiveBuilder.
+ * Used for properties like `style` where you can do both:
+ *   .style("padding: 20px;")     // setter
+ *   .style.padding("20px")       // sub-property chaining
+ */
+type Chain<R, T> = T extends object ? { [K in WritableKeys<T>]: Builder<R, T[K]> } : {};
+type Builder<R, T = R> = T extends ((...args: infer U) => unknown) ? (...value: ValueOrReactiveArray<U>) => R : (value?: ValueOrReactive<T>) => R;
+/**
+ * Types eligible for sub-property chaining (e.g., `.style.padding("20px")`).
+ */
+type ChainableType = CSSStyleDeclaration | DOMTokenList | DOMStringMap | StylePropertyMap;
+/**
+ * Filters keys to only writable data properties.
+ * Excludes methods (function-valued properties) and event handlers (`on*`).
+ */
+type DataPropertyKeys<T> = { [K in keyof T]: K extends `on${string}` ? never : T[K] extends ((...args: any[]) => any) ? never : K }[keyof T];
+/**
+ * Reactive setter for a single property.
+ * Chainable types (CSSStyleDeclaration, DOMTokenList, etc.) get both
+ * sub-property chaining and direct setter support.
+ */
+type ReactiveSetter<R, T> = T extends ChainableType ? Chain<R, T> & ((value: ValueOrReactive<T>) => R) : (value: ValueOrReactive<T>) => R;
+/**
+ * A fully-typed reactive element builder for any Element type.
+ * Automatically maps all writable data properties into reactive setters.
+ *
+ * Use this for custom elements instead of needing generated builder interfaces.
+ *
+ * @example
+ * ```ts
+ * import { reactive, type ReactiveElementOf } from "elements-kit";
+ *
+ * class MyElement extends HTMLElement {
+ *   greeting = "hello";
+ * }
+ * customElements.define("my-element", MyElement);
+ *
+ * const myEl = () =>
+ *   reactive(document.createElement("my-element") as MyElement);
+ *
+ * // Full type support for both own and inherited properties:
+ * myEl().greeting("world").style.padding("20px").id("main");
+ * ```
+ */
+type ReactiveElementOf<T extends Element> = ElementBuilder<T> & { [K in WritableKeys<T> & DataPropertyKeys<T> & keyof T]: ReactiveSetter<ReactiveElementOf<T>, T[K]> };
+//#endregion
+export { EFFECT as a, ReactiveElementOf as c, builder as d, toNode as f, DISPOSE as i, VALUE as l, Chain as n, ElementBuilder as o, DISPOSABLES as r, ReactiveElement as s, Builder as t, ValueOrReactive as u };

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+//#region src/components/for.d.ts
+type KeyFn<T> = (item: T, index: number) => string | number;
+type RenderFn<T> = (item: T, index: number) => Element | DocumentFragment | null;
+/**
+ * Keyed list renderer. Reconciles a reactive array into the DOM using a key
+ * function to match existing nodes — minimising create/destroy churn.
+ *
+ * Reconciliation strategy (inspired by udomdiff / dom-expressions):
+ *   1. Remove stale entries (keys absent from the new array).
+ *   2. Skip unchanged common prefix and suffix.
+ *   3. Pure-append fast path when the surviving old range is empty.
+ *   4. Backward scan of the middle region — move or create entries so that
+ *      each entry's range lands immediately before the already-correct cursor.
+ *
+ * @example
+ * ```tsx
+ * <For each={visibleTodos} by={(todo) => todo.id}>
+ *   {(todo) => <li>{todo.text}</li>}
+ * </For>
+ * ```
+ *
+ * Props:
+ *   each     — reactive getter returning the array (e.g. a `computed`)
+ *   by       — extracts a stable key per item (default: index)
+ *   children — render function called once per new key
+ */
+declare class For<T = unknown> {
+  #private;
+  get each(): T[];
+  set each(v: T[]);
+  by: KeyFn<T>;
+  children: RenderFn<T>;
+  render(): DocumentFragment;
+}
+//#endregion
+export { For };