Overview

renderSwitch(cases) walks an ordered list of branches and returns the first match. Each branch is either a [condition, template] tuple or a bare TemplateResult fallback.

If nothing matches and there is no fallback, it returns nothing so the call site produces no DOM.

Compared to other conditionals

API
Branches
Notes
cond ? a : b 2-way Fine for simple toggles.
animatedIf 2-way + motion Use when enter/exit animation matters.
renderSwitch N-way First truthy tuple wins; optional trailing TemplateResult default.

Tab navigation with renderSwitch

renderSwitch evaluates each [condition, template] tuple in order and renders the first truthy match. A plain TemplateResult at the end of the array is used as the fallback when no case matches.

import { html, atom, renderSwitch, renderApp } from 'mates';

const App = () => {
const tab = atom('home');
return () => html`
<div class="m-col m-gap">
<nav>
${['home', 'profile', 'settings'].map(t => html`
<button
class=${tab() === t ? 'btn-primary' : 'btn-ghost'}
@click=${() => tab.set(t)}
>${t}</button>
`)}
</nav>
${renderSwitch([
[tab() === 'home', html`<div class="card card-body"><h3 class="m-0">🏠 Home</h3><p>Welcome back!</p></div>`],
[tab() === 'profile', html`<div class="card card-body"><h3 class="m-0">👤 Profile</h3><p>Ada Lovelace</p></div>`],
[tab() === 'settings', html`<div class="card card-body"><h3 class="m-0">⚙️ Settings</h3><p>Configure your app.</p></div>`],
])}
</div>
`;
};
renderApp(App, document.getElementById('app'));

Fallback branch

A bare TemplateResult at the end acts as the default when no condition matches.

import { html, atom, renderSwitch, renderApp } from 'mates';

const App = () => {
const role = atom('guest');
return () => html`
<div class="m-col m-gap">
<div class="m-flex m-items-center m-justify-center m-gap-sm">
${['admin', 'member', 'guest'].map(r => html`
<button class=${role() === r ? 'btn-primary' : 'btn-ghost'} @click=${() => role.set(r)}>${r}</button>
`)}
</div>
${renderSwitch([
[role() === 'admin', html`<div class="card card-body">Admin tools</div>`],
[role() === 'member', html`<div class="card card-body">Member feed</div>`],
html`<div class="card card-body label">Please sign in</div>`,
])}
</div>
`;
};
renderApp(App, document.getElementById('app'));