(feat) add domutils - bindInput

Signed-off-by: Muthu Kumar <[email protected]>

mod.ts

@@ -5,3 +5,4 @@ export * from "./src/state.ts";
 export * from "./src/h_element.ts";
 export * from "./src/parse.ts";
 export * from "./src/render.ts";
+export * from "./src/domutils.ts";

src/domutils.ts

@@ -0,0 +1,8 @@
+import { SimpleState } from "./state.ts";
+
+export const bindInput =
+	<State extends SimpleState>(state: State) =>
+	(el: HTMLElement) =>
+		el.addEventListener("input", e =>
+			state.publish((e?.target as unknown as { value: string }).value),
+		);

src/state.ts

@@ -2,7 +2,8 @@ export const STATE = Symbol("@hyperactive/state");
 
 export type Subscriber<T> = (val: T) => void;
 
-export type SimpleStateRO<T = unknown> = {
+// deno-lint-ignore no-explicit-any
+export type SimpleStateRO<T = any> = {
 	init: T;
 	subscribe: (f: Subscriber<T>) => void;
 	transform: <U, Mapper extends (t: T) => U>(
@@ -11,7 +12,8 @@ export type SimpleStateRO<T = unknown> = {
 	[STATE]: true;
 };
 
-export type SimpleState<T = unknown> = SimpleStateRO<T> & {
+// deno-lint-ignore no-explicit-any
+export type SimpleState<T = any> = SimpleStateRO<T> & {
 	publish: (next: T) => void;
 	readonly: () => SimpleStateRO<T>;
 };

test.browser.ts

@@ -12,15 +12,9 @@ renderDOM(
 		{ class: "container" },
 		h3("Enter a number, it should double below"),
 		input({
+			ref: bindInput(state),
 			id: "input-el",
 			value: state.init,
-			on: {
-				input: e => {
-					state.publish(
-						(e.target as unknown as { value: string }).value,
-					);
-				},
-			},
 		}),
 		p(state.transform(v => span(String(parseFloat(v) * 2)))),
 	),