For top-level Component, ROOT must always be specified for parent.

Application entry point

Existential wrapper used to allow the nesting of Component in Component

Core type for constructing a virtual DOM in Haskell

A unique key for a DOM node.

This key is only used to speed up diffing the children of a DOM node, the actual content is not important. The keys of the children of a given DOM node must be unique. Failure to satisfy this invariant gives undefined behavior at runtime.

Attribute of a vnode in a View.

The Sink callback can be used to dispatch actions which are fed back to the update function. This is especially useful for event handlers like the onclick attribute. The second argument represents the vnode the attribute is attached to.

Namespace of DOM elements.

Allow users to express CSS and append it to head before the first draw

Href "http://domain.com/style.css

Allow users to express JS and append it to head before the first draw

This is meant to be useful in development only.

  Src "http://example.com/script.js"
  Script "http://example.com/script.js"
  ImportMap [ "key" =: "value" ]

Optional logging for debugging miso internals (useful to see if prerendering is successful)

Virtual DOM implemented as a JavaScript Object. Used for diffing, patching and event delegation. Not meant to be constructed directly, see View instead.

mountPoint for Component, e.g "body"

Type to represent a DOM reference

A top-level Component can have no parent

The ROOT type is for disallowing a top-level mounted Component access into its parent state. It has no inhabitants (spiritually Data.Void.Void)

When Component are not in use, also for pre-1.9 miso applications.

The JSM monad keeps track of the JavaScript execution context.

When using GHCJS it is IO.

Given a JSM function and a JSContextRef you can run the function like this...

runJSM jsmFunction javaScriptContext

Convenience class for using View

Convert custom key types to Key.

Instances of this class do not have to guarantee uniqueness of the generated keys, it is up to the user to do so. toKey must be an injective function.

Type used for React-like "props" functionality. This is used to to bind parent model changes to the child model, or vice versa.

The difference between miso and React here is that miso is synchronizing model states of Components declaratively (outside of the view). In React "props" are used in the view code.

https://react.dev/learn/passing-props-to-a-component

This can be thought of as establishing an "edge" in the Component graph, whereby events cause model change synchronization to "ripple" or "pulsate" through the views. The "reactivity" of the graph is constructed manually by the end-user, using the edge primitives -->, <--, <--> (reactive combinators).

This can also be thought of as a Wire (from netwire) for reactive variable synchronization, except done at the granularity specified by the Lens.

main :: IO ()
main = run app { bindings = [ parentLens -- childLens ] }

Since: 1.9.0.0

Smart constructor for Component with sane defaults.

Unidirectionally binds a parent field to a child field

Since: 1.9.0.0

Unidirectionally binds a child field to a parent field

Since: 1.9.0.0

Bidirectionally binds a child field to a parent field, using Lens

This is a bidirectional reactive combinator for a miso Lens.

Since: 1.9.0.0

Bidirectionally binds a child field to a parent field, using Lens'

This is a bidirectional reactive combinator for a van Laarhoven Lens'

Since: 1.9.0.0

Unidirectionally binds a parent field to a child field, for van Laarhoven style Lens'

Since: 1.9.0.0

Unidirectionally binds a child field to a parent field, for van Laarhoven style Lens'

Since: 1.9.0.0

Used in the view function to mount a Component on any VNode

  mount (p_ [ key_ "component-1" ]) $ component $ \m ->
    div_ [ id_ "foo" ] [ text (ms m) ]

Warning this *is* a partial function. Do not attempt to mount on a Text node. This function will ignore the children given and mount the new Component on top of them. Attempts to mount a Component ontop of an existing Component always prioritize the component specified in the lowest level.

See usage above. In general, it's wise to only mount on VNode.

Since: 1.9.0.0

Convenience for extracting mount point

Utility function to make it easy to specify conditional attributes

view :: Bool -> View model action
view danger =
  optionalAttrs textarea_ [ id_ "txt" ] danger [ class_ "danger" ] ["child"]

Since: 1.9.0.0

Utility function to make it easy to specify conditional children

view :: Bool -> View model action
view withChild = optionalChildren div_ [ id_ "txt" ] [] withChild [ "foo" ]

Since: 1.9.0.0

Create a new Miso.Types.VNode.

node ns tag key attrs children creates a new node with tag tag and Key key in the namespace ns. All attrs are called when the node is created and its children are initialized to children.

Create a new Text with the given content.

Create a new Text with the given content.

TextRaw creation. Don't use directly

Create a new Miso.Types.TextRaw.

expandable a rawHtml node takes raw HTML and attempts to convert it to a VTree at runtime. This is a way to dynamically populate the virtual DOM from HTML received at runtime. If rawHtml cannot parse the HTML it will not render.

String type swappable based on compiler

Reads a MisoString, throws an error when decoding fails. Use fromMisoStringEither for as a safe alternative.

Convenience function, shorthand for toMisoString