Module

Grain.UI

#VNode

data VNode

The type of virtual node.

#key

key :: String -> VNode -> VNode

Add a key to a VNode.

#fingerprint

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

component :: Render VNode -> VNode

Create a VNode of component.

#element

element :: String -> VNode

Create a VNode of specified tag element.

#text

text :: String -> VNode

Create a VNode of text.

#kids

kids :: Array VNode -> VNode -> VNode

Add children.

#prop

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

Add a property.

#handle

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

Bind an event handler.

#css

css :: String -> VNode -> VNode

Define styles with CSS string.

It generates a hash string as class name from CSS string, and the generated class name is used automatically.

justDiv :: VNode
justDiv =
  H.div # H.css styles

styles :: String
styles =
  """
  .& {
    width: 100px;
    height: 100px;
  }
  .&:hover {
    width: 100px;
    height: 100px;
  }
  .&:hover .selected {
    color: blue;
  }
  """

& in the CSS string is replaced with the generated class name, and output it as stylesheet.

Like this:

.gz66dqm {
  width: 100px;
  height: 100px;
}
.gz66dqm:hover {
  width: 100px;
  height: 100px;
}
.gz66dqm:hover .selected {
  color: blue;
}

#className

className :: String -> VNode -> VNode

#didCreate

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

Bind didCreate lifecycle.

#didUpdate

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

Bind didUpdate lifecycle.

#didDelete

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

Bind didDelete lifecycle.

#Render

newtype Render a

The type of component renderer.

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

Instances

#Query

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

#runRender

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

#useValue

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

Listen a state, then return it.

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

#useFinder

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

Get a finder of a state.

#useUpdater

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

Get an updater of a state.

#useKeyedValue

useKeyedValue :: forall k a. KeyedGlobalGrain k a => KGProxy k a -> k -> Render a

Listen a keyed global state, then return it.