Module

Grain.UI

Package: purescript-grain
Repository: purescript-grain/purescript-grain

#VNode Source

data VNode

The type of virtual node.

Instances

HasKey VNode

#key Source

key :: String -> VNode -> VNode

Add a key to a VNode.

#fingerprint Source

fingerprint :: String -> VNode -> VNode

Add a fingerprint to check equality of a VNode.

If it is same as previous rendered element's one, rendering will be skipped.

#component Source

component :: Render VNode -> VNode

Create a VNode of component.

#element Source

element :: String -> VNode

Create a VNode of specified tag element.

#text Source

text :: String -> VNode

Create a VNode of text.

#kids Source

kids :: Array VNode -> VNode -> VNode

Add children.

#prop Source

prop :: String -> String -> VNode -> VNode

Add a property.

#handle Source

handle :: String -> (Event -> Effect Unit) -> VNode -> VNode

Bind an event handler.

#didCreate Source

didCreate :: (Element -> Effect Unit) -> VNode -> VNode

Bind didCreate lifecycle.

#didUpdate Source

didUpdate :: (Element -> Effect Unit) -> VNode -> VNode

Bind didUpdate lifecycle.

#didDelete Source

didDelete :: (Element -> Effect Unit) -> VNode -> VNode

Bind didDelete lifecycle.

#Render Source

newtype Render a

The type of component renderer.

In this monad, you can declare that you use some states and updaters.

Instances

#Query Source

type Query = { listenValue :: forall a p. Grain p a => p a -> Effect Unit, portalVNode :: Effect Node -> VNode -> VNode, selectValue :: forall a p. Grain p a => p a -> Effect a, updateValue :: forall a p. Grain p a => p a -> (a -> a) -> Effect Unit }

#runRender Source

runRender :: forall a. Render a -> Query -> Effect a

#useValue Source

useValue :: forall a p. Grain p a => p a -> Render a

Listen a state, then return it.

If the state is changed, the component will be rerendered.

#useFinder Source

useFinder :: forall a p. Grain p a => p a -> Render (Effect a)

Get a finder of a state.

#useUpdater Source

useUpdater :: forall a p. Grain p a => p a -> Render ((a -> a) -> Effect Unit)

Get an updater of a state.

#usePortal Source

usePortal :: Effect Node -> Render (VNode -> VNode)

Get portal function.

#mount Source

mount :: VNode -> Node -> Effect Unit

Mount a VNode to a parent node.