Get the latest tech news

VanillaJSX.com

What if JSX just returned DOM elements? export default function ClickMe() { let i = 0; const el = <button>Click me</button> as HTMLButtonElement; el.onclick = (e) => { el.textContent = `Clicked ${++i} times`; }; return el; } Would they be reusable? Could they keep their own state? import ClickMe from "./sample1.js"; export default () => <> <p><ClickMe /></p> <p><ClickMe /></p> <p><ClickMe /></p> </>; How would they work together? Could they create an interactive DOM tree? function TodoInput(attrs: { add: (v: string) => void }) { const input = <input /> as HTMLInputElement; input.placeholder = 'Add todo item...'; input.onkeydown = (e) => { if (e.key === 'Enter') { attrs.add(input.value); input.value = ''; } }; return input; } class TodoList { ul = <ul class='todolist' /> as HTMLUListElement; add(v: string) { const item = <li>{v}</li> as HTMLLIElement; item.onclick = () => item.remove(); this.ul.append(item); } } export default () => { const list = new TodoList(); list.add('foo'); list.add('bar'); return <> <TodoInput add={(v) => list.add(v)} /> {list.ul} </>; }; // Fuller example at https://sdegutis.github.io/imlib-todolist/ How would they handle large data? Could they be convenient without a virtual dom? import { data } from "../fetch-dataset.js"; export default function FindNames() { const status = <p style='margin:1em 0' /> as HTMLParagraphElement; const results = <ul /> as HTMLUListElement; const input = <input value='eri(c|k)a?' autocomplete='new-password' /> as HTMLInputElement; const updateMatches = () => { const matched = (data.entries() .filter(([k]) => k.match(input.value)) .toArray()); const matches = (Iterator.from(matched) .map(match => <Item regex={input.value} match={match} />) .take(30)); results.replaceChildren(...matches); status.textContent = `${matched.length} / ${data.size}`; }; input.oninput = updateMatches; updateMatches(); return <div class='sample4'> {input} {status} {results} </div>; } function Item(attrs: { match: [string, number], regex: string }) { const [name, count] = attrs.match; const total = <small style='color:#fff3'>({count})</small>; return <li> <span innerHTML={highlight(name, attrs.regex)} /> {total} </li>; } function highlight(str: string, regex: string) { if (!regex) return str; const r = new RegExp(`(${regex})`, 'gi'); return str.replace(r, '<span class="match">$1</span>'); } That's why I wrote imlib. It came out of my work on immaculatalibrary.com.

What if JSX just returned DOM elements? Could they create an interactive DOM tree? It was created because the status quo wasn't good enough for my site.

Get the Android app