keii.dev
1// IMPORTS ---------------------------------------------------------------------
2
3import gleam/dict.{type Dict}
4import gleam/dynamic.{type Decoder}
5import lustre.{type App}
6import lustre/attribute.{type Attribute}
7import lustre/effect.{type Effect}
8import lustre/element.{type Element}
9
10// API -------------------------------------------------------------------------
11
12pub const name = "your-component"
13
14// This function is used when running registering the component using
15// `lustre.register` and building the component as a standalone JavaScript bundle
16// with `gleam run -m lustre/dev build component`.
17pub fn component() -> App(Nil, Model, Msg) {
18 lustre.component(init, update, view, on_attribute_change())
19}
20
21// This function will be used by your other view functions to render the component.
22// Remember a component must be registered with `lustre.register` first!
23pub fn element(attributes: List(Attribute(msg))) -> Element(Msg) {
24 element.element(name, attributes, [])
25}
26
27// This function can be used to render a component on the server. It renders your
28// component's tag name and inside that element it renders the initial view of
29// your component.
30pub fn prerender(attributes: List(Attribute(msg))) -> Element(Msg) {
31 let #(model, _) = init(Nil)
32
33 element.element(name, attributes, [view(model)])
34}
35
36// MODEL -----------------------------------------------------------------------
37
38pub type Model {
39 Model
40}
41
42fn init(_) -> #(Model, Effect(Msg)) {
43 todo
44}
45
46// UPDATE ----------------------------------------------------------------------
47
48pub opaque type Msg {
49 Msg
50}
51
52fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
53 todo
54}
55
56// This function sets up any attributes you want to listen for changes on. This
57// will listen to changes on both HTML attributes as well as DOM node properties.
58// Remember that attributes are always strings but properties can be any JavaScript
59// value – you might find the deciphper package on hex useful for writing decoders.
60fn on_attribute_change() -> Dict(String, Decoder(Msg)) {
61 dict.from_list([])
62}
63
64// VIEW ------------------------------------------------------------------------
65
66fn view(model: Model) -> Element(Msg) {
67 todo
68}