diff --git a/src/signals.d.ts b/src/signals.d.ts
index 7632cc6..71a4e6e 100644
--- a/src/signals.d.ts
+++ b/src/signals.d.ts
@@ -41,6 +41,7 @@ interface S {
 		signal: SymbolSignal;
 		onclear: SymbolOnclear;
 	}
+	el<S extends any, T extends HTMLElement>(signal: Signal<S, any>, el: (v: S)=> T): T;
 }
 export const S: S;
 declare global {
diff --git a/test/components/todosComponent.js b/test/components/todosComponent.js
index 0ee48bb..5c94c62 100644
--- a/test/components/todosComponent.js
+++ b/test/components/todosComponent.js
@@ -16,12 +16,11 @@ const className= style.host(todosComponent).css`
 `;
 /** @param {{ todos: string[] }} */
 export function todosComponent({ todos= [ "Task A" ] }= {}){
-	const todosS= S([], {
+	const todosS= S(todos.map(t=> S(t)), {
 		add(v){ this.value.push(S(v)); },
 		remove(i){ this.value.splice(i, 1); },
 		[S.symbols.onclear](){ S.clear(...this.value); },
 	});
-	todos.forEach(v=> S.action(todosS, "add", v));
 	const name= "todoName";
 	const onsubmitAdd= on("submit", event=> {
 		const el= event.target.elements[name];
@@ -81,7 +80,7 @@ function todoComponent({ textContent, value }, host){
 	return el("li").append(
 		S.el(is_editable, is=> is
 			? el("input", { value: textContent(), type: "text" }, onedited)
-			: el("span", textContent, on("click", ()=> is_editable(true))),
+			: el("span", { textContent, onclick: is_editable.bind(null, true) }),
 		),
 		el("button", { type: "button", value, textContent: "-" }, onclick)
 	);