miso
Copyright(C) 2016-2025 David M. Johnson
LicenseBSD3-style (see the file LICENSE)
MaintainerDavid M. Johnson <code@dmj.io>
Stabilityexperimental
Portabilitynon-portable
Safe HaskellNone
LanguageHaskell2010

Miso.Types

Description

 
Synopsis

Types

type App model action = Component ROOT model action Source #

A top level Component of the application. For top-level Component, The parent type variable must always be specialized to ROOT.

data Component parent model action Source #

Application entry point

Constructors

Component 

Fields

  • model :: model

    initial model

  • hydrateModel :: Maybe (JSM model)

    Perform action to load component state, such as reading data from page The resulting model is only used during initial hydration, not on remounts.

  • update :: action -> Effect parent model action

    Function to update model, optionally providing effects.

  • view :: model -> View model action

    Function to draw View

  • subs :: [Sub action]

    List of subscriptions to run during application lifetime

  • events :: Events

    List of delegated events that the body element will listen for. You can start with defaultEvents and modify as needed.

  • styles :: [CSS]

    List of CSS styles expressed as either a URL (Href) or as Style text. These styles are appended dynamically to the <head> section of your HTML page before the initial draw on <body> occurs.

    Since: 1.9.0.0

  • scripts :: [JS]

    List of JavaScript scripts expressed as either a URL (Src) or raw JS text. These scripts are appended dynamically to the <head> section of your HTML page before the initial draw on <body> occurs.

    Since: 1.9.0.0

  • initialAction :: Maybe action

    Initial action that is run after the application has loaded, optional

    Since: 1.9.0.0

  • mountPoint :: Maybe MountPoint

    Id of the root element for DOM diff. If Nothing is provided, the entire document body is used as a mount point.

  • logLevel :: LogLevel

    Debugging for prerendering and event delegation

  • mailbox :: Mail -> Maybe action

    Used to receive mail from other Component

    Since: 1.9.0.0

  • bindings :: [Binding parent model]

    Data bindings between parent and child components

    Since: 1.9.0.0

data SomeComponent parent Source #

Existential wrapper used to allow the nesting of Component in Component

Constructors

Eq model => SomeComponent (Component parent model action) 

data View model action Source #

Core type for constructing a virtual DOM in Haskell

Constructors

VNode NS MisoString [Attribute action] [View model action] 
VText MisoString 
VComp NS MisoString [Attribute action] (SomeComponent model) 

Instances

Instances details
Functor (View model) Source # 
Instance details

Defined in Miso.Types

Methods

fmap :: (a -> b) -> View model a -> View model b #

(<$) :: a -> View model b -> View model a #

ToHtml [View m a] Source #

Render a [Miso.Types.View] to a L.ByteString

Instance details

Defined in Miso.Html.Render

Methods

toHtml :: [View m a] -> ByteString Source #

IsString (View model action) Source #

IsString instance

Instance details

Defined in Miso.Types

Methods

fromString :: String -> View model action #

ToHtml (View m a) Source #

Render a Miso.Types.View to a L.ByteString

Instance details

Defined in Miso.Html.Render

Methods

toHtml :: View m a -> ByteString Source #

newtype Key Source #

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.

Constructors

Key MisoString 

Instances

Instances details
ToJSON Key Source # 
Instance details

Defined in Miso.Types

IsString Key Source # 
Instance details

Defined in Miso.Types

Methods

fromString :: String -> Key #

Show Key Source # 
Instance details

Defined in Miso.Types

Methods

showsPrec :: Int -> Key -> ShowS #

show :: Key -> String #

showList :: [Key] -> ShowS #

Eq Key Source # 
Instance details

Defined in Miso.Types

Methods

(==) :: Key -> Key -> Bool #

(/=) :: Key -> Key -> Bool #

ToJSVal Key Source #

ToJSVal instance for Key

Instance details

Defined in Miso.Types

ToMisoString Key Source # 
Instance details

Defined in Miso.Types

ToKey Key Source #

Identity instance

Instance details

Defined in Miso.Types

Methods

toKey :: Key -> Key Source #

data Attribute action Source #

Attribute of a vnode in a View.

Constructors

Property MisoString Value 
Event (Sink action -> VTree -> LogLevel -> Events -> JSM ())

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.

Styles (Map MisoString MisoString) 

Instances

Instances details
Functor Attribute Source # 
Instance details

Defined in Miso.Types

Methods

fmap :: (a -> b) -> Attribute a -> Attribute b #

(<$) :: a -> Attribute b -> Attribute a #

data NS Source #

Namespace of DOM elements.

Constructors

HTML

HTML Namespace

SVG

SVG Namespace

MATHML

MATHML Namespace

Instances

Instances details
Show NS Source # 
Instance details

Defined in Miso.Types

Methods

showsPrec :: Int -> NS -> ShowS #

show :: NS -> String #

showList :: [NS] -> ShowS #

Eq NS Source # 
Instance details

Defined in Miso.Types

Methods

(==) :: NS -> NS -> Bool #

(/=) :: NS -> NS -> Bool #

ToJSVal NS Source # 
Instance details

Defined in Miso.Types

data CSS Source #

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

Href "http://domain.com/style.css"
Style "body { background-color: red; }"

Constructors

Href MisoString

Href is a URL meant to link to hosted CSS

Style MisoString

Style is meant to be raw CSS in a style_ tag

Sheet StyleSheet

Sheet is meant to be CSS built with CSS

Instances

Instances details
Show CSS Source # 
Instance details

Defined in Miso.Types

Methods

showsPrec :: Int -> CSS -> ShowS #

show :: CSS -> String #

showList :: [CSS] -> ShowS #

Eq CSS Source # 
Instance details

Defined in Miso.Types

Methods

(==) :: CSS -> CSS -> Bool #

(/=) :: CSS -> CSS -> Bool #

data JS Source #

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 "alert("hi");"
  ImportMap [ "key" =: "value" ]

Constructors

Src MisoString

Src is a URL meant to link to hosted JS

Script MisoString

Script is meant to be raw JS that you would enter in a <script> tag

Module MisoString

Module is meant to be raw JS that you would enter in a <script type="module"> tag. See script type

ImportMap [(MisoString, MisoString)]

ImportMap is meant to be an import map in a <script type="importmap"> tag. See importmap

Instances

Instances details
Show JS Source # 
Instance details

Defined in Miso.Types

Methods

showsPrec :: Int -> JS -> ShowS #

show :: JS -> String #

showList :: [JS] -> ShowS #

Eq JS Source # 
Instance details

Defined in Miso.Types

Methods

(==) :: JS -> JS -> Bool #

(/=) :: JS -> JS -> Bool #

data LogLevel Source #

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

Constructors

Off

No debug logging, the default value used in component

DebugHydrate

Will warn if the structure or properties of the DOM vs. Virtual DOM differ during prerendering.

DebugEvents

Will warn if an event cannot be routed to the Haskell event handler that raised it. Also will warn if an event handler is being used, yet it's not being listened for by the event delegator mount point.

DebugAll

Logs on all of the above

Instances

Instances details
Show LogLevel Source # 
Instance details

Defined in Miso.Types

Eq LogLevel Source # 
Instance details

Defined in Miso.Types

newtype VTree Source #

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

Constructors

VTree 

Fields

Instances

Instances details
ToJSVal VTree Source # 
Instance details

Defined in Miso.Types

type MountPoint = MisoString Source #

mountPoint for Component, e.g "body"

type DOMRef = JSVal Source #

Type to represent a DOM reference

data ROOT Source #

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 Void)

type Transition model action = Effect ROOT model action Source #

A specialized version of Effect that can be used in the type of application update function, when Components are not in use. Also for pre-1.9 miso applications.

data URI Source #

Type for dealing with URI. See the official specification

Instances

Instances details
Show URI Source # 
Instance details

Defined in Miso.Types

Methods

showsPrec :: Int -> URI -> ShowS #

show :: URI -> String #

showList :: [URI] -> ShowS #

Eq URI Source # 
Instance details

Defined in Miso.Types

Methods

(==) :: URI -> URI -> Bool #

(/=) :: URI -> URI -> Bool #

ToMisoString URI Source # 
Instance details

Defined in Miso.Types

Re-exports

data JSM a Source #

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

Instances

Instances details
MonadCatch JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

catch :: (HasCallStack, Exception e) => JSM a -> (e -> JSM a) -> JSM a #

MonadMask JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

mask :: HasCallStack => ((forall a. JSM a -> JSM a) -> JSM b) -> JSM b #

uninterruptibleMask :: HasCallStack => ((forall a. JSM a -> JSM a) -> JSM b) -> JSM b #

generalBracket :: HasCallStack => JSM a -> (a -> ExitCase b -> JSM c) -> (a -> JSM b) -> JSM (b, c) #

MonadThrow JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

throwM :: (HasCallStack, Exception e) => e -> JSM a #

Applicative JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

pure :: a -> JSM a #

(<*>) :: JSM (a -> b) -> JSM a -> JSM b #

liftA2 :: (a -> b -> c) -> JSM a -> JSM b -> JSM c #

(*>) :: JSM a -> JSM b -> JSM b #

(<*) :: JSM a -> JSM b -> JSM a #

Functor JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

fmap :: (a -> b) -> JSM a -> JSM b #

(<$) :: a -> JSM b -> JSM a #

Monad JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

(>>=) :: JSM a -> (a -> JSM b) -> JSM b #

(>>) :: JSM a -> JSM b -> JSM b #

return :: a -> JSM a #

MonadFail JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

fail :: String -> JSM a #

MonadFix JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

mfix :: (a -> JSM a) -> JSM a #

MonadIO JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

liftIO :: IO a -> JSM a #

MonadJSM JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

liftJSM' :: JSM a -> JSM a Source #

MonadAtomicRef JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

atomicModifyRef :: Ref JSM a -> (a -> (a, b)) -> JSM b Source #

atomicModifyRef' :: Ref JSM a -> (a -> (a, b)) -> JSM b Source #

MonadRef JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Associated Types

type Ref JSM 
Instance details

Defined in Language.Javascript.JSaddle.Types

type Ref JSM = Ref IO

Methods

newRef :: a -> JSM (Ref JSM a) Source #

readRef :: Ref JSM a -> JSM a Source #

writeRef :: Ref JSM a -> a -> JSM () Source #

modifyRef :: Ref JSM a -> (a -> a) -> JSM () Source #

modifyRef' :: Ref JSM a -> (a -> a) -> JSM () Source #

MonadUnliftIO JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

Methods

withRunInIO :: ((forall a. JSM a -> IO a) -> IO b) -> JSM b Source #

MakeArgs arg => MakeArgs (JSM arg) Source # 
Instance details

Defined in Language.Javascript.JSaddle.Classes.Internal

Methods

makeArgs :: JSM arg -> JSM [JSVal] Source #

type Ref JSM Source # 
Instance details

Defined in Language.Javascript.JSaddle.Types

type Ref JSM = Ref IO

Classes

class ToKey key where Source #

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 (different inputs must map to different outputs).

Methods

toKey :: key -> Key Source #

Converts any key into Key

Instances

Instances details
ToKey JSString Source #

Convert MisoString to Key

Instance details

Defined in Miso.Types

Methods

toKey :: JSString -> Key Source #

ToKey Key Source #

Identity instance

Instance details

Defined in Miso.Types

Methods

toKey :: Key -> Key Source #

ToKey Text Source #

Convert Text to Key

Instance details

Defined in Miso.Types

Methods

toKey :: Text -> Key Source #

ToKey String Source #

Convert String to Key

Instance details

Defined in Miso.Types

Methods

toKey :: String -> Key Source #

ToKey Double Source #

Convert Double to Key

Instance details

Defined in Miso.Types

Methods

toKey :: Double -> Key Source #

ToKey Float Source #

Convert Float to Key

Instance details

Defined in Miso.Types

Methods

toKey :: Float -> Key Source #

ToKey Int Source #

Convert Int to Key

Instance details

Defined in Miso.Types

Methods

toKey :: Int -> Key Source #

ToKey Word Source #

Convert Word to Key

Instance details

Defined in Miso.Types

Methods

toKey :: Word -> Key Source #

Data Bindings

data Binding parent child Source #

Binding is used to synchronize parent and child model changes at the granularity specified by a Lens

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).

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

Since: 1.9.0.0

Constructors

ParentToChild (parent -> field) (field -> child -> child) 
ChildToParent (field -> parent -> parent) (child -> field) 
Bidirectional (parent -> field) (field -> parent -> parent) (child -> field) (field -> child -> child) 

Smart Constructors

emptyURI :: URI Source #

An empty URI

component :: model -> (action -> Effect parent model action) -> (model -> View model action) -> Component parent model action Source #

Smart constructor for Component with sane defaults.

(-->) :: Lens parent a -> Lens model a -> Binding parent model Source #

Unidirectionally binds a parent field to a child field

Since: 1.9.0.0

(<--) :: Lens parent a -> Lens model a -> Binding parent model Source #

Unidirectionally binds a child field to a parent field

Since: 1.9.0.0

(<-->) :: Lens parent field -> Lens child field -> Binding parent child Source #

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

(<--->) :: Lens' parent field -> Lens' child field -> Binding parent child Source #

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

(--->) :: Lens' parent field -> Lens' child field -> Binding parent child Source #

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

Since: 1.9.0.0

(<---) :: Lens' parent field -> Lens' child field -> Binding parent child Source #

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

Since: 1.9.0.0

Component

mount :: forall child model action a. Eq child => ([View model a] -> View model a) -> Component model child action -> View model a Source #

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

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

Since: 1.9.0.0

(+>) :: forall child model action a. Eq child => ([View model a] -> View model a) -> Component model child action -> View model a infixr 0 Source #

Infix version of mount.

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

  div_ [ key_ "component-id" ] +> component model noop $ \m ->
    div_ [ id_ "foo" ] [ text (ms m) ]

Since: 1.9.0.0

Utils

getMountPoint :: Maybe MisoString -> MisoString Source #

Convenience for extracting mount point

optionalAttrs Source #

Arguments

:: ([Attribute action] -> [View model action] -> View model action) 
-> [Attribute action]

Attributes to be added unconditionally

-> Bool

A condition

-> [Attribute action]

Additional attributes to add if the condition is True

-> [View model action]

Children

-> View model action 

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

optionalChildren Source #

Arguments

:: ([Attribute action] -> [View model action] -> View model action) 
-> [Attribute action]

Attributes to be added unconditionally

-> [View model action]

Children to be added unconditionally

-> Bool

A condition

-> [View model action]

Additional children to add if the condition is True

-> View model action 

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

prettyURI :: URI -> MisoString Source #

URI pretty-printing

prettyQueryString :: URI -> MisoString Source #

URI query string pretty-printing

Combinators

node :: NS -> MisoString -> [Attribute action] -> [View model action] -> View model action Source #

Create a new VNode.

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

text :: MisoString -> View model action Source #

Create a new VText with the given content.

text_ :: [MisoString] -> View model action Source #

Create a new VText containing concatenation of the given strings.

MisoString

type MisoString = JSString Source #

String type swappable based on compiler

toMisoString :: ToMisoString str => str -> MisoString Source #

Convert a type into MisoString

fromMisoString :: FromMisoString a => MisoString -> a Source #

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

ms :: ToMisoString str => str -> MisoString Source #

Convenience function, shorthand for toMisoString