diff --git a/examples/components/todosComponent.js b/examples/components/todosComponent.js index 333b138..4337c98 100644 --- a/examples/components/todosComponent.js +++ b/examples/components/todosComponent.js @@ -81,11 +81,24 @@ function todoComponent({ textContent, value }){ textContent(ev.target.value); is_editable(false); }); + const memo= initMemo(host); return el("li").append( O.el(is_editable, is=> is - ? el("input", { value: textContent(), type: "text" }, onedited) - : el("span", { textContent, onclick: is_editable.bind(null, true) }), + ? memo("view", ()=> el("input", { value: textContent(), type: "text" }, onedited)) + : memo("edit", ()=> el("span", { textContent, onclick: is_editable.bind(null, true) })) ), el("button", { type: "button", value, textContent: "-" }, onclick) ); } +function initMemo(host){ + const memos= new Map(); + host(on.disconnected(()=> memos.clear())); + return function useMemo(key, fn){ + let memo= memos.get(key); + if(!memo){ + memo= fn(); + memos.set(key, memo); + } + return memo; + } +}