vdomk
v0.1.5
Published
This is an experimental React-like view layer. It's intended only as a research project and shouldn't be considered production ready.
Downloads
9
Readme
vdomk
This is an experimental React-like view layer. It's intended only as a research project and shouldn't be considered production ready.
Usage
Example Todos App:
import { h, Fragment, createRoot, TPC, OPC, scheduleUpdate } from "vdomk";
const Todo: OPC<{ text: string; done: boolean; toggle(): void; remove(): void }> = ({ text, done, toggle, remove }) => {
return (
<div>
{text}
<input type="checkbox" checked={done} onChange={toggle} />
<button type="button" onClick={remove}>
Remove me
</button>
</div>
);
};
const TodoApp: TPC<{}> = (_, instance) => {
let todos: { text: string; done: boolean }[] = [];
let text = "";
let input: HTMLInputElement | null = null;
function refInput(el: HTMLInputElement | null) {
input = el;
}
function onChange(ev: JSX.TargetedEvent<HTMLInputElement>) {
text = ev.currentTarget.value;
}
function addTodo() {
todos.push({ text, done: false });
text = "";
input!.value = ""; // Inputs are uncontrolled
scheduleUpdate(instance);
}
function handleToggle(index: number) {
todos[index].done = !todos[index].done;
scheduleUpdate(instance);
}
function handleRemove(index: number) {
todos.splice(index, 1);
scheduleUpdate(instance);
}
return () => {
return (
<>
<input type="text" value={text} onInput={onChange} ref={refInput} />
<button type="button" onClick={addTodo}>
Make new Todo
</button>
{todos.map(({ text, done }, index) => (
<Todo
text={text}
done={done}
toggle={() => handleToggle(index)}
remove={() => handleRemove(index)}
/>
))}
</>
);
};
};
createRoot(document.getElementById("root")!, <TodoApp />);
What's up with the component model?
It's somewhat inspired by Crank.
One-time setup goes in the first function, and then new props are accepted and rendered in the inner function.
Many uses of, useCallback
, useRef
, and useState
can be replaced with just local variables in the top scope.
In lieu of useMemo
, you can use a library like Reselect and call createSelector
in the top scope.