pream - v1.0.0

pream/vnode

Types

Prop

</>

vnode property — either an attribute (any gleam value, serialized downstream in ffi) or an event handler. handlers are camelCased and prefixed with on_ in ffi

pub type Prop {
  Attr(key: String, value: dom.Native)
  Handler(event: String, handle: fn(dom.Event) -> Nil)
}

Constructors 

  • Attr(key: String, value: dom.Native)

    NOTE: a prop can be any gleam value we’re swallowing the type here and handle it downstram in ffi. this is done to make the render API simple

  • Handler(event: String, handle: fn(dom.Event) -> Nil)

VChild

</>

child of a vnode — one of four variants: static element, static text, reactive element, or reactive text. use the constructors below (e.g. text, element, reactive, reactive_text) to build values of this type.

pub type VChild {
  Element(VNode)
  Text(String)
  Reactive(signal.Signal(VNode))
  ReactiveText(signal.Signal(String))
}

Constructors

VNode

opaque </>

virtual dom node — same shape as the output of preact’s h(). built up via small composable helpers below, then handed to pream.to_preact

pub opaque type VNode

Values

a

</> 
pub fn a() -> VNode

alt

</> 
pub fn alt(vnode: VNode, text: String) -> VNode

article

</> 
pub fn article() -> VNode

br

</> 
pub fn br() -> VNode

button

</> 
pub fn button() -> VNode

checked

</> 
pub fn checked(vnode: VNode) -> VNode

child

</> 
pub fn child(vnode: VNode, child: VChild) -> VNode

appends a single child

children

</> 
pub fn children(vnode: VNode, children: List(VChild)) -> VNode

appends a list of children

class

</> 
pub fn class(vnode: VNode, name: String) -> VNode

disabled

</> 
pub fn disabled(vnode: VNode) -> VNode

div

</> 
pub fn div() -> VNode

element

</> 
pub fn element(node: VNode) -> VChild

wraps a vnode as a child element

empty

</> 
pub fn empty() -> VNode

renders nothing — mapped to preact’s null in ffi

</> 
pub fn footer() -> VNode

form

</> 
pub fn form() -> VNode

fragment

</> 
pub fn fragment() -> VNode

https://npmx.dev/package-docs/preact/v/10.29.2#function-fragment a fragment vnode — used to return multiple sibling children without a wrapper element

h1

</> 
pub fn h1() -> VNode

h2

</> 
pub fn h2() -> VNode

h3

</> 
pub fn h3() -> VNode

h4

</> 
pub fn h4() -> VNode

h5

</> 
pub fn h5() -> VNode

h6

</> 
pub fn h6() -> VNode
</> 
pub fn header() -> VNode

hr

</> 
pub fn hr() -> VNode

href

</> 
pub fn href(vnode: VNode, url: String) -> VNode

id

</> 
pub fn id(vnode: VNode, name: String) -> VNode

img

</> 
pub fn img() -> VNode

input

</> 
pub fn input() -> VNode

label

</> 
pub fn label() -> VNode

li

</> 
pub fn li() -> VNode

main

</> 
pub fn main() -> VNode

map_signal

</> 
pub fn map_signal(
  s: signal.Signal(a),
  render: fn(a) -> VChild,
) -> VChild

maps a signal through render — each value is wrapped as a VChild inside a fragment. the result is itself a reactive VChild.

name

</> 
pub fn name(vnode: VNode, name: String) -> VNode
</> 
pub fn nav() -> VNode

new

</> 
pub fn new(tag: String) -> VNode

https://npmx.dev/package-docs/preact/v/10.29.2#function-h creates an empty vnode with the given tag and no props or children — equivalent to <tag />

ol

</> 
pub fn ol() -> VNode

on

</> 
pub fn on(
  vnode: VNode,
  event: String,
  handle: fn(dom.Event) -> Nil,
) -> VNode

attaches an event handler. the event name is camelCased and prefixed with on_ in ffi (e.g. click becomes onClick)

option_tag

</> 
pub fn option_tag() -> VNode

p

</> 
pub fn p() -> VNode

placeholder

</> 
pub fn placeholder(vnode: VNode, text: String) -> VNode

prop

</> 
pub fn prop(vnode: VNode, key: String, value: a) -> VNode

sets an attribute on the vnode. any gleam value is accepted — stringification/serialization is deferred to the ffi at render time

reactive

</> 
pub fn reactive(s: signal.Signal(VNode)) -> VChild

creates a reactive element child from a signal

reactive_text

</> 
pub fn reactive_text(s: signal.Signal(String)) -> VChild

creates a reactive text child from a signal

required

</> 
pub fn required(vnode: VNode) -> VNode

role

</> 
pub fn role(vnode: VNode, name: String) -> VNode

section

</> 
pub fn section() -> VNode

select

</> 
pub fn select() -> VNode

span

</> 
pub fn span() -> VNode

src

</> 
pub fn src(vnode: VNode, url: String) -> VNode

table

</> 
pub fn table() -> VNode

td

</> 
pub fn td() -> VNode

text

</> 
pub fn text(content: String) -> VChild

creates a static text child

text_with

</> 
pub fn text_with(content: String, args: List(String)) -> VChild

creates a static text child with positional formatting — each {} is replaced with the next value from the list

textarea

</> 
pub fn textarea() -> VNode

th

</> 
pub fn th() -> VNode

title

</> 
pub fn title(vnode: VNode, text: String) -> VNode

tr

</> 
pub fn tr() -> VNode

type_

</> 
pub fn type_(vnode: VNode, name: String) -> VNode

ul

</> 
pub fn ul() -> VNode

unless

</> 
pub fn unless(condition: Bool, render: fn() -> VChild) -> VChild

renders render when condition is False, otherwise returns an empty text node

value_int

</> 
pub fn value_int(vnode: VNode, val: Int) -> VNode

value_string

</> 
pub fn value_string(vnode: VNode, val: String) -> VNode

when

</> 
pub fn when(condition: Bool, render: fn() -> VChild) -> VChild

renders render when condition is True, otherwise returns an empty text node

when_signal

</> 
pub fn when_signal(
  s: signal.Signal(Bool),
  render: fn() -> VChild,
) -> VChild

renders render when the signal value is True, otherwise returns an empty fragment. the result is itself a reactive VChild.

when_some

</> 
pub fn when_some(
  option: option.Option(a),
  render: fn(a) -> VChild,
) -> VChild

renders render when the option is Some, otherwise returns an empty text node

✨ Search Document