feat: reactivity (POC)

[Harpush]

This is a reactivity POC for an easier rendering engine (handwritten!)
The building blocks are:

Signals

signal

const a = signal(2);

computed

const a = computed(() => a() + b());

effect

const dispose = effect(() => console.log(a()));

DOM

element template (with reactivity support)

{tag: "div", class: "green", children: ["test"]}

control flow

conditional(
  () => a() > 2, 
  () => ({tag: "div", children: ["Big"]}), 
  () => ({tag: "div", children: ["Small"]})
)
iterate([1,2,3], item => ({tag: "div", children: [item]}))
switchOn(item, [
  {case: 1, view: () => "Test1"},
  {case: 2, view: () => "Test2"}
])

mounting

const root = createRoot(...);
root.mountAfter(document.querySelector<HTMLElement>("#id"));

Example

type Tab = "home" | "settings" | "profile";
const tabs: Tab[] = ["home", "settings", "profile"];
const activeTab = signal<Tab>("home");

const root = createRoot({
	tag: "div",
	class: "main-wrapper",
	children: [
		{ tag: "h3", children: ["Tabs"] },
		iterate(tabs, (tab) => ({
			tag: "div",
			children: [tab],
			class: () => (tab === activeTab() ? "selected" : undefined),
			events: {
				click: () => activeTab.set(tab),
			},
		})),
		switchOn(activeTab, [
			{ case: "home", view: () => ({ tag: "div", children: ["Home View"] }) },
			{ case: "settings", view: () => ({ tag: "div", children: ["Settings View"] }) },
			{ case: "profile", view: () => ({ tag: "div", children: ["Profile View"] }) },
		]),
	],
});

root.mountAfter(document.querySelector<HTMLElement>("#id"));