@fluixi/lit

The lit-html renderer for Fluixi — templates, directives, and lit-based control flow.

✨ Overview

@fluixi/lit is the optional lit-html authoring layer, built on @fluixi/dom. Fluixi's default path is JSX (compiled to fine-grained DOM calls); @fluixi/lit is for apps that prefer html tagged-template syntax. It lives in its own package so lit (which extends HTMLElement at module init) stays out of the core/SSR graph — import lit symbols from here, never from @fluixi/core.

📦 Installation

pnpm add @fluixi/lit

🚀 Usage

import { createSignal } from '@fluixi/reactive/signal';
import { html, litrx, render } from '@fluixi/lit';

function Counter() {
  const [count, setCount] = createSignal(0);
  return html`
    <button @click=${() => setCount(count() + 1)}>
      count: ${litrx(count)}
    </button>
  `;
}

render(Counter(), document.getElementById('app')!);

🧩 Exports

• Templates — html, svg, nothing, render, litrx (reactive interpolation).
• Directives — $classMap, $styleMap, and the lit directive set.
• Control flow — $show, $for, $switch, $portal, $if, $each.

For framework-agnostic control flow / class+style maps that don't pull lit, use @fluixi/dom's Show/For/classMap/styleMap instead.

📄 License

MIT © Fluixi