Skip to main content

Introduction

fnComponent​

Package fncmp is Kit Kitchen's pilot project aimed to bring granular control to server-side rendering with Go.

Granular control​

Developers can serve HTML components from a web server using packages such as templ or with fncmp's HTML struct. The FnComponent struct provides enhanced functionality to these components including when and how they are rendered to the DOM.

convert a component to a FnComponent
component := fncmp.HTML("<button>Click me</button>")
fn := fncmp.NewFn(ctx, component)

If we wanted this component in a specific location in the DOM:

fn.AppendElement("menu")

Event listeners​

The ability to create and respond to DOM events is a key feature of fncmp.
We can apply a function to be called when the "click" event is triggered on the component.

info
fncmp supplies a set of OnEvent constants to be used with the WithEvents method. Further parsing of events is covered in the reference documentation.
component = component.WithEvents(handleClick, fncmp.OnClick)

In this example, a component 'Greeting' is returned when the "click" event is triggered.

func handleClick(ctx context.Context) fncmp.FnComponent {
    return fncmp.NewFn(ctx, Greeting)
}

These short examples only hint at what can be done with fncmp. I will provide live examples and plenty of recipes, so please follow along, starting with installation.