JSFiddle - React, Tailwind, and code Playground
by lega911
CSS
.inactive {text-decoration: line-through; color: gray;}
.active {background-color: #b6d3de;}JavaScript
widget(document.body);
// source: https://github.com/lega911/svelte-m/blob/master/example.html
function widget(e){let n=[];let t="";let i={};function l(e){u();if(e.keyCode!==13)return;e.preventDefault();c()}function c(){u();if(!t)return;n.push({name:t,done:false});t=""}function d(e){u();n.splice(n.indexOf(e),1)}function r(e){u();i=e}var a;function u(){if(u.planned)return;u.planned=true;setTimeout(()=>{u.planned=false;a()},1)}(function(){function o(){let e={children:[],watchers:[]};e.wf=function(n,t){e.watchers.push({fn:n,cb:t,value:undefined})};e.wa=function(n,t){e.watchers.push({fn:n,cb:t,value:undefined,a:true})};return e}let s=o();const f=(e,n)=>{let t=e==null||!e.length;let i=n==null||!n.length;if(t!==i)return true;if(t===true)return false;if(e.length!==n.length)return true;for(let t=0;t<e.length;t++){if(e[t]!==n[t])return true}return false};a=(()=>{let e=10;while(e>=0){let n=0;let t;for(let e=-1;e<s.children.length;e++){if(e==-1)t=s;else t=s.children[e];t.watchers.forEach(e=>{let t=e.fn();if(e.a){if(f(e.value,t)){e.value=t.slice();n++;e.cb(e.value)}}else{if(e.value!==t){e.value=t;n++;e.cb(e.value)}}})}e--;if(!n)break}});e.innerHTML=`\n\n<input type="text" />\n<button >Add</button>\n\n<ul>\n \x3c!-- {#each todos as todo } --\x3e\n</ul>\n\nEdit: <input type="text" />\n`;function h(e,a){a.childNodes[1].addEventListener("keydown",e=>{u();{l(e)}});a.childNodes[1].addEventListener("input",e=>{t=e.target.value;u()});e.wf(()=>t,function(e){var n=a.childNodes[1];if(n.value!==e)n.value=e});a.childNodes[3].addEventListener("click",e=>{u();{c()}});(function(){const t=a.childNodes[5].childNodes[1];let l=document.createElement("div");l.innerHTML=`<li >\n <input type="checkbox" />\n <span style="cursor: pointer;"> </span>\n <a href >[x]</a>\n </li>`;l=l.firstChild;let c=new Map;e.wa(()=>n,n=>{let a=t;let s=new Map;if(c.size){let t=new Set;for(let e=0;e<n.length;e++){t.add(n[e])}c.forEach((n,i)=>{if(t.has(i))return;n.el.remove();let...