elements-kit 0.0.18 → 0.0.20

package/dist/custom-elements.mjs

@@ -1,100 +1,29 @@
-import { b as untracked, f as effectScope } from "./signals-J8dK_rA4.mjs";
-//#region src/define.ts
+//#region src/custom-elements.ts
 /**
 * Register a custom element with the browser and return its class.
 * Pair with a module augmentation of `CustomElementRegistry` to get typed JSX.
-*/
-function defineElement(tag, cls, options) {
-	customElements.define(tag, cls, options);
-	return cls;
-}
-//#endregion
-//#region src/custom-elements.ts
-/**
-* Runs `setup` inside a fresh `effectScope` and returns both its result and
-* the scope's dispose handle.
-*
-* Use this wherever you need to run reactive code with an explicit lifetime
-* outside the JSX element flow — most commonly inside a custom element's
-* `connectedCallback`. `onCleanup`, nested `effect`s and any other
-* scope-bound registrations made in `setup` are owned by the returned
-* `dispose`.
-*
-* `untracked` detaches the new scope from any enclosing effect so it isn't
-* torn down when that effect re-runs — its lifetime is solely the caller's
-* responsibility.
 *
 * @example
-* ```ts
-* class Clock extends HTMLElement {
-*   #dispose?: () => void;
+* ```tsx
+* import { defineElement } from "elements-kit/custom-elements";
 *
-*   connectedCallback() {
-*     const { dispose } = renderScope(() => {
-*       const id = setInterval(() => (this.textContent = String(Date.now())), 1000);
-*       onCleanup(() => clearInterval(id));
-*     });
-*     this.#dispose = dispose;
-*   }
+* class XCounter extends HTMLElement {}
 *
-*   disconnectedCallback() {
-*     this.#dispose?.();
-*     this.#dispose = undefined;
-*   }
-* }
-* ```
-*/
-function renderScope(setup) {
-	let result;
-	let dispose;
-	untracked(() => {
-		dispose = effectScope(() => {
-			result = setup();
-		});
-	});
-	return {
-		result,
-		dispose
-	};
-}
-const scopes = /* @__PURE__ */ new WeakMap();
-/**
-* Runs `setup` inside an `effectScope` tied to `el`'s connected lifetime.
-*
-* Call from `connectedCallback`. Effects, `onCleanup` registrations, and
-* reactive reads inside `setup` belong to this scope. Pair with
-* {@link disconnectedScope} from `disconnectedCallback` to dispose.
+* defineElement("x-counter", XCounter);
 *
-* Safe to call more than once (e.g. if the element is reconnected after
-* disconnection): the previous scope is disposed first.
-*
-* @example
-* ```ts
-* class Clock extends HTMLElement {
-*   connectedCallback() {
-*     connectedScope(this, () => {
-*       const id = setInterval(() => this.textContent = String(Date.now()), 1000);
-*       onCleanup(() => clearInterval(id));
-*     });
-*   }
-*   disconnectedCallback() {
-*     disconnectedScope(this);
+* declare module "elements-kit/custom-elements" {
+*   interface CustomElementRegistry {
+*     "x-counter": typeof XCounter;
 *   }
 * }
+*
+* // JSX now gets typed props + typed ref
+* // <x-counter />
 * ```
 */
-function connectedScope(el, setup) {
-	scopes.get(el)?.();
-	const { dispose } = renderScope(setup);
-	scopes.set(el, dispose);
-}
-/**
-* Disposes the scope previously created by {@link connectedScope} for `el`.
-* No-op if there is no active scope.
-*/
-function disconnectedScope(el) {
-	scopes.get(el)?.();
-	scopes.delete(el);
+function defineElement(tag, cls, options) {
+	customElements.define(tag, cls, options);
+	return cls;
 }
 //#endregion
-export { connectedScope, defineElement, disconnectedScope, renderScope };
+export { defineElement };

package/dist/{element-CGVy_8TW.mjs → element-w1GCIMVp.mjs}

@@ -1,7 +1,8 @@
-import { _ as onCleanup, b as untracked, d as effect, f as effectScope, t as isReactive } from "./signals-J8dK_rA4.mjs";
+import { c as effectScope, g as untracked, p as onCleanup, s as effect } from "./lib-D6duEs38.mjs";
 import "./polyfill-B1lNNcum.mjs";
+import { isReactive, resolveProps } from "./signals/index.mjs";
 import { on } from "./utilities/event-listener.mjs";
-import { i as resolveNode$1, n as Slot, r as Slots, t as SLOTS } from "./slot-Kb61AcgW.mjs";
+import { i as resolveNode$1, n as Slot, r as Slots, t as SLOTS } from "./slot-CKtUoy2X.mjs";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -85,23 +86,34 @@ function applySlot(slot, value) {
 	});
 }
 function mountChildren(el, value) {
-	for (const child of ensureFlatArray(value)) {
-		if (typeof child === "function") {
-			const slot = Slot.new();
-			el.appendChild(slot());
-			effectScope(() => {
-				effect(() => slot.set(resolveChild(child())));
-				onCleanup(() => slot.clear());
-			});
-			continue;
-		}
-		const node = resolveChild(child);
-		const dispose = node[Symbol.dispose];
-		el.appendChild(node);
-		if (dispose) effectScope(() => {
-			onCleanup(dispose);
+	for (const child of ensureFlatArray(value)) mountChild(el, child);
+}
+/**
+* Mounts a single child into `el`. Reactive functions become live slots; other
+* values append as-is. Each child owns its own `effectScope` so sibling
+* `onCleanup` registrations don't overwrite each other (the signals lib
+* supports only one onCleanup per subscriber).
+*
+* Also used by `createFunctionElement` when a component returns a reactive
+* getter or primitive — keeps the component's `effectScope` alive for the
+* lifetime of the fragment it mounts into.
+*/
+function mountChild(el, child) {
+	if (typeof child === "function") {
+		const slot = Slot.new();
+		el.appendChild(slot());
+		effectScope(() => {
+			effect(() => slot.set(resolveChild(child())));
+			onCleanup(() => slot.clear());
 		});
+		return;
 	}
+	const node = resolveChild(child);
+	const dispose = node[Symbol.dispose];
+	el.appendChild(node);
+	if (dispose) effectScope(() => {
+		onCleanup(dispose);
+	});
 }
 function resolveChild(value) {
 	if (Array.isArray(value)) {
@@ -209,10 +221,10 @@ function setAttribute(el, key, value) {
 	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";
+	return key.startsWith("on:");
 }
 function eventName(key) {
-	return key.startsWith("on:") ? key.slice(3) : key[2].toLowerCase() + key.slice(3);
+	return key.slice(3);
 }
 //#endregion
 //#region src/jsx-runtime/element.ts
@@ -229,7 +241,7 @@ function createFunctionElement(type, props, ref) {
 	let dispose;
 	untracked(() => {
 		dispose = effectScope(() => {
-			el = type(props);
+			el = type(resolveProps(props));
 			if (typeof ref === "function" && el instanceof Element) ref(el);
 		});
 	});
@@ -280,4 +292,4 @@ function attachDisposables(el, disposables) {
 	});
 }
 //#endregion
-export { disposeElement as n, createElement as t };
+export { disposeElement as n, mountChild as r, createElement as t };

package/dist/for.d.mts

@@ -1,4 +1,4 @@
-import { a as Props, o as Require } from "./infer-BfzRJoCn.mjs";
+import { i as Props, s as Require } from "./infer-DuFY-y2b.mjs";
 
 //#region src/for.d.ts
 type KeyFn<T> = (item: T, index: number) => string | number;
@@ -30,8 +30,37 @@ type RenderFn<T> = (item: T, index: number) => Element | DocumentFragment | null
  * Props for `<For>`, derived from its public instance fields.
  * All props are optional — the class initializes sane defaults at runtime.
  * Non-function props also accept a reactive getter.
+ *
+ * @example
+ * ```tsx
+ * import { signal } from "elements-kit/signals";
+ * import { For } from "elements-kit";
+ *
+ * const todos = signal([{ id: 1, text: "write docs" }]);
+ *
+ * const props: ForProps<{ id: number; text: string }> = {
+ *   each: todos,
+ *   by: (t) => t.id,
+ *   children: (t) => <li>{t.text}</li>,
+ * };
+ * ```
  */
 type ForProps<T> = Require<Props<For<T>>, "each" | "children">;
+/**
+ * Keyed list renderer. See {@link ForProps} for prop details.
+ *
+ * @example
+ * ```tsx
+ * import { signal } from "elements-kit/signals";
+ * import { For } from "elements-kit";
+ *
+ * const todos = signal([{ id: 1, text: "write docs" }]);
+ *
+ * <For each={todos} by={(t) => t.id}>
+ *   {(t) => <li>{t.text}</li>}
+ * </For>
+ * ```
+ */
 declare class For<T = unknown> {
   #private;
   constructor(_props?: ForProps<T>);
@@ -42,4 +71,4 @@ declare class For<T = unknown> {
   render(): DocumentFragment;
 }
 //#endregion
-export { For, ForProps };
+export { For };

package/dist/for.mjs

@@ -1,6 +1,22 @@
-import { n as disposeElement } from "./element-CGVy_8TW.mjs";
-import { _ as onCleanup, b as untracked, d as effect, f as effectScope, v as signal, y as trigger } from "./signals-J8dK_rA4.mjs";
+import { n as disposeElement } from "./element-w1GCIMVp.mjs";
+import { c as effectScope, g as untracked, h as trigger, m as signal, p as onCleanup, s as effect } from "./lib-D6duEs38.mjs";
+import "./signals/index.mjs";
 //#region src/for.ts
+/**
+* Keyed list renderer. See {@link ForProps} for prop details.
+*
+* @example
+* ```tsx
+* import { signal } from "elements-kit/signals";
+* import { For } from "elements-kit";
+*
+* const todos = signal([{ id: 1, text: "write docs" }]);
+*
+* <For each={todos} by={(t) => t.id}>
+*   {(t) => <li>{t.text}</li>}
+* </For>
+* ```
+*/
 var For = class {
 	constructor(_props) {}
 	#each = signal([]);