implement
Implement/Control flow/Switch

If is great for conditions but sometimes you have a value with several possible states. Rather than chaining a bunch of .ElseIf() conditions you can use the Switch component to match against values directly.

Switch accepts a readable signal and mounts the first .Case() whose value matches it. If no case matches, the .Default() children are rendered instead.

Switch(status)
	.Case("loading", P("Loading…"))
	.Case("success", P("Done!"))
	.Default(P("Something went wrong."));

In the example on the right we have a status signal that cycles between "loading", "success", and "error" every time you click the button.

Try replacing the plain status text with a Switch that renders a .Case() for "loading" and "success", and a .Default() for anything else.

PreviousForEachNextAwait
index.ts
import { Button, Div, H1, P, signal, Switch } from "@implementjs/core";

type Status = "loading" | "success" | "error";

export default function App() {
	const status = signal<Status>("loading");

	function nextStatus() {
		status.update((current) =>
			current === "loading" ? "success" : current === "success" ? "error" : "loading",
		);
	}

	return Div(
		H1("Switch"),
		Button({ onClick: nextStatus }, "Next status"),
		P("status is: ", status),
	);
}
Preview