The sample repo is at least well-commented. I've taken the liberty of pasting some of the sample code here, sans comments, so we can see what the code style is like. My editorial take: no thanks. This looks less declarative than jQuery. If this is the alternative, then yeah, you still probably need React (or Vue/Svelte/Astro/whatever)
namespace App {
export class SegmentedButtonComponent {
readonly head
constructor(...segments: ((element: HTMLElement) => Raw.Param)[]) {
this.head = raw.div(
raw.css(
"> *", {
display: "inline-block",
padding: "1em",
borderRadius: "5px",
userSelect: "none",
webkitUserSelect: "none",
cursor: "default",
},
"> .active", {
backgroundColor: "hsl(215, 100%, 50%)",
color: "white",
},
),
() => {
const buttons: HTMLElement[] = []
for (const fn of segments) {
const button = raw.div()
raw.get(button)(
raw.on("click", () => this.select(button)),
fn(button),
)
buttons.push(button)
}
return buttons
},
)
}
select(childElement: HTMLElement) {
toggleClass(childElement, "active")
}
}
function toggleClass(child: Element, cls: string) {
Array.from(child.parentElement!.children).map(e => e.classList.toggle(cls, e === child))
}
}