mount

inline fun <V> TagContext.mount(into: RenderContext?, upstream: Flow<V>, crossinline content: RenderContext.(V) -> Unit)

Uses the content-lambda to render a subtree for each value on the upstream-Flow and mounts it to the DOM either

  • creating a new context-Div as a child of the receiver and adding the content as children to this Div

  • of, if into is set, replacing all children of this Tag.

Parameters

into

if set defines the target to mount the content to (replacing its static content)

upstream

the Flow that should be mounted at this point

content

lambda definining what to render for a given value on upstream

inline fun <V> TagContext.mount(into: RenderContext?, upstream: Flow<List<V>>, noinline idProvider: IdProvider<V, *>?, crossinline content: RenderContext.(V) -> RenderContext)

Compares each new List on upstream to its predecessor to create Patches using Myer's diff-algorithm. For each element that is newly inserted it uses the content-lambda to render a subtree. The resulting Patches are then applied to the DOM either

  • creating a new context-Div as a child of the receiver

  • or, if into is set, replacing all children of this Tag. Keep in mind, that if you do not offer an idProvider a changed value of a list-item will render a new subtree for this item. When you provide an idProvider though, a new subtree will only be rendered if a new id appears in the list, and you are responsible for updating the dynamic content (by using sub-Stores).

Parameters

into

if set defines the target to mount the content to (replacing its static content)

idProvider

optional function to identify a unique entity in the list

upstream

the Flow that should be mounted

content

lambda definining what to render for a given value on upstream

inline fun <V> TagContext.mount(into: RenderContext?, store: Store<List<V>>, noinline idProvider: IdProvider<V, *>, crossinline content: RenderContext.(Store<V>) -> RenderContext)

Compares each new List on store's data-Flow to its predecessor to create Patches using Myer's diff-algorithm. For each element that is newly inserted it uses the content-lambda to render a subtree. The resulting Patches are then applied to the DOM either

  • creating a new context-Div as a child of the receiver

  • or, if into is set, replacing all children of this Tag.

Parameters

into

if set defines the target to mount the content to (replacing its static content)

idProvider

function to identify a unique entity in the list

store

the Store that's values should be mounted at

content

lambda definining what to render for a given value on store's data-Flow

inline fun <V> TagContext.mount(into: RenderContext?, store: Store<List<V>>, crossinline content: RenderContext.(Store<V>) -> RenderContext)

Compares each new List on store's data-Flow to its predecessor element by element to create Patches. For each element that is newly inserted it uses the content-lambda to render a subtree. The resulting Patches are then applied to the DOM either

  • creating a new context-Div as a child of the receiver

  • or, if into is set, replacing all children of this Tag.

Parameters

into

if set defines the target to mount the content to (replacing its static content)

store

the Store that's values should be mounted at

content

lambda definining what to render for a given value on store's data-Flow