pream - v1.4.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(event.Event(dynamic.Dynamic)) -> 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(event.Event(dynamic.Dynamic)) -> Nil,
)

VChild

</>

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

pub type VChild {
  Element(VNode)
  Text(String)
  Reactive(signal.Signal(VNode))
  ReactiveText(signal.Signal(String))
  Boundary(render: dom.Native)
}

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

Creates an <a> vnode.

alt

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

Sets the alt attribute on the vnode.

article

</> 
pub fn article() -> VNode

Creates an <article> vnode.

br

</> 
pub fn br() -> VNode

Creates a <br> vnode.

button

</> 
pub fn button() -> VNode

Creates a <button> vnode.

checked

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

Sets the checked attribute on the vnode to True.

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

Sets the class attribute on the vnode.

component

</> 
pub fn component(render: fn() -> VNode) -> VChild

Creates a Preact component boundary from a render function. Use this when composing components so that Preact devtools and signal-driven re-rendering work correctly.

Named zero-arg functions can be passed directly: vnode.component(counter)

Functions with arguments need a wrapping closure: vnode.component(fn() { inner(count) })

disabled

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

Sets the disabled attribute on the vnode to True.

div

</> 
pub fn div() -> VNode

Creates a <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

Creates a <footer> vnode.

form

</> 
pub fn form() -> VNode

Creates a <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

Creates an <h1> vnode.

h2

</> 
pub fn h2() -> VNode

Creates an <h2> vnode.

h3

</> 
pub fn h3() -> VNode

Creates an <h3> vnode.

h4

</> 
pub fn h4() -> VNode

Creates an <h4> vnode.

h5

</> 
pub fn h5() -> VNode

Creates an <h5> vnode.

h6

</> 
pub fn h6() -> VNode

Creates an <h6> vnode.

</> 
pub fn header() -> VNode

Creates a <header> vnode.

hr

</> 
pub fn hr() -> VNode

Creates an <hr> vnode.

href

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

Sets the href attribute on the vnode.

id

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

Sets the id attribute on the vnode.

img

</> 
pub fn img() -> VNode

Creates an <img> vnode.

input

</> 
pub fn input() -> VNode

Creates an <input> vnode.

label

</> 
pub fn label() -> VNode

Creates a <label> vnode.

li

</> 
pub fn li() -> VNode

Creates an <li> vnode.

main

</> 
pub fn main() -> VNode

Creates a <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

Sets the name attribute on the vnode.

</> 
pub fn nav() -> VNode

Creates a <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

Creates an <ol> vnode.

on

</> 
pub fn on(
  vnode: VNode,
  event: String,
  handle: fn(event.Event(dynamic.Dynamic)) -> 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

Creates an <option> vnode.

p

</> 
pub fn p() -> VNode

Creates a <p> vnode.

placeholder

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

Sets the placeholder attribute on the 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

Sets the required attribute on the vnode to True.

role

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

Sets the role attribute on the vnode.

section

</> 
pub fn section() -> VNode

Creates a <section> vnode.

select

</> 
pub fn select() -> VNode

Creates a <select> vnode.

span

</> 
pub fn span() -> VNode

Creates a <span> vnode.

src

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

Sets the src attribute on the vnode.

table

</> 
pub fn table() -> VNode

Creates a <table> vnode.

td

</> 
pub fn td() -> VNode

Creates a <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

Creates a <textarea> vnode.

th

</> 
pub fn th() -> VNode

Creates a <th> vnode.

title

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

Sets the title attribute on the vnode.

tr

</> 
pub fn tr() -> VNode

Creates a <tr> vnode.

type_

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

Sets the type attribute on the vnode.

ul

</> 
pub fn ul() -> VNode

Creates a <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

Sets the value attribute on the vnode as an integer.

value_string

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

Sets the value attribute on the vnode as a string.

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