Views

Ranvier binds signals and memos to HTML. A template component has a template built once and setup run once per instance. Reactive reads update bound text, attributes and properties while the surrounding DOM stays in place.

One definition supports three paths:

In the browser, compiled with Fable, mounted into a DOM element.
On the server, on .NET or under Node, rendered to an HTML string. See Server rendering.
Over server HTML, where the client hydrates the server's nodes in place.

A taste

open global.Ranvier
open Ranvier.View
open Ranvier.View.Sugar

type CounterProps = { Start: int; Label: string }

type Counter =
    { Count: Signal<int>; Label: string }

    static member Create(_: Setup, props: CounterProps) =
        { Count = createSignal props.Start; Label = props.Label }

    static member View =
        div (Attrs.className "counter") {
            span (Attrs.className "label") { fun c -> c.Label }

            button (Attrs.attribute ("type", "button"), Events.onClick (fun c _ -> c.Count.Value <- c.Count.Value + 1)) {
                fun c -> string c.Count.Value
            }
        }

let counter = Component.ofMembers<Counter, _> ()

With { Start = 2; Label = "Clicks" }, the component shows Clicks and a button labelled 2. Clicking changes it to 3. Create owns the count; View binds it to the button. Try this in the browser editor.

Layers and status

Piece	Package or project	Status
Template components, server HTML writer	`Ranvier.View`	Alpha. Compiles for .NET and Fable.
Builder sugar (free tags, control flow, declarations)	`Ranvier.View` (`Ranvier.View.Sugar`)	Alpha; the primary authoring style. See Sugar.
DOM mounting, hydration, document head	`Ranvier.View.Dom`	Alpha. Runs under Fable.
Authored views (`Program.View`, `Generated.Html.Program`)	`Ranvier.View.Dom`	Alpha. See Other authoring layers.
DOM helper library	`src/Fable.Ranvier`	Proof of concept, not packaged. See Other authoring layers.
anime.js bindings, owners and signals for animations	`Fable.Ranvier.Anime`	Alpha. Compiles for .NET and Fable. See Animation.
Motion template parts	`Ranvier.View.Anime`	Alpha. See Motion parts.
Wire codecs for state transfer	`Ranvier.Wire`	Preview. See State transfer.
Runnable reference	`examples/Fable.Ranvier.Playground`	Vite app and test suite.

Views

A taste

Layers and status

Pages