From Lit
For developers who know Lit. Each page takes a topic from Lit's documentation, in its order, and puts the TypeScript you know next to the F# that does the same thing.
Firelight binds Lit itself, so the runtime is the same: the same LitElement, the same update
cycle, the same template syntax. What changes is the language around it. These are the
differences you meet on every page:
- A component is an F# class that inherits
LitElement, marked[<AttachMembers>]so that Fable puts its members on the JavaScript class, where Lit looks for them. - F# has no decorators. Registration is a call to
defineElement, and property options go in astatic member properties, as in Lit without decorators. - A template hole is
{value}in an F# interpolated string, where TypeScript has${value}. - Members name their own
this:override this.render() = .... - Imports become
opendeclarations.open type Firelight.Litbrings inhtml,css,nothingand the directives.
Each pair of code blocks, Lit's TypeScript and Firelight's F#, does exactly the same thing. The
TypeScript uses Lit's decorators with experimentalDecorators: true and
useDefineForClassFields: false, the settings Lit's own examples assume. Each page ends with what
doesn't carry over directly, and with the Lit features Firelight doesn't bind yet.
Topics
- Components: defining, rendering and reactive properties.
- Styles: static styles, sharing them, and shadow DOM.
- Lifecycle: connecting, the update cycle and
changedProperties. - Events: listening, dispatching custom events and listening on the element.
- Decorators: what each Lit decorator becomes in F#.
- Templates: expressions, conditionals, lists, directives and static values.
- Composition: reactive controllers, and what replaces mixins.
- Context: providing and consuming values with
@lit/context. - Tasks: async work with
@lit/task. - Signals: shared reactive state with
@lit-labs/signals.
Beyond these pages
Some of Lit's documentation needs no F# version, or has none yet:
- Server rendering. Lit SSR runs in Node, so it can prerender Firelight components at build time, as this site does; see Prerendering. A .NET server can't render them.
- Localization.
@lit/localizeisn't bound. Its tooling reads TypeScript or JavaScript source, not F#. - React.
@lit/reactisn't bound. Firelight components are custom elements, so any framework that supports custom elements can use them. - Tools. Vite, bundling and publishing work as in Lit; Fable compiles the F# to JavaScript modules first. Get started sets this up.