| Copyright | (C) 2016-2025 David M. Johnson |
|---|---|
| License | BSD3-style (see the file LICENSE) |
| Maintainer | David M. Johnson <code@dmj.io> |
| Stability | experimental |
| Portability | non-portable |
| Safe Haskell | None |
| Language | Haskell2010 |
Miso
Description
Synopsis
- miso :: Eq model => (URI -> App effect model action a) -> JSM ()
- startApp :: Eq model => App effect model action a -> JSM ()
- sink :: MisoString -> App effect model action a -> Sink action
- sample :: Component effect model action a -> JSM model
- notify :: Component effect model action a -> action -> JSM ()
- data App effect model action a = App {
- model :: model
- update :: action -> effect model action a
- view :: model -> View action
- subs :: [Sub action]
- events :: Map MisoString Bool
- initialAction :: Maybe action
- mountPoint :: Maybe MisoString
- logLevel :: LogLevel
- translate :: effect model action a -> Effect model action a
- data View action
- = Node NS MisoString (Maybe Key) [Attribute action] [View action]
- | Text MisoString
- | TextRaw MisoString
- | Embed [Attribute action] SomeComponent
- newtype Key = Key MisoString
- data Attribute action
- = Property MisoString Value
- | Event (Sink action -> Object -> LogLevel -> Events -> JSM ())
- | Style (Map MisoString MisoString)
- data NS
- data LogLevel
- data Component effect model action a = Component {
- componentKey :: Maybe Key
- componentName :: MisoString
- componentApp :: App effect model action a
- data SomeComponent = Eq model => SomeComponent (Component effect model action a)
- class ToView a where
- type ToViewAction a :: Type
- toView :: a -> View (ToViewAction a)
- class ToKey key where
- defaultApp :: model -> (action -> Effect model action a) -> (model -> View action) -> App Effect model action a
- component :: MisoString -> App effect model action a -> Component effect model action a
- embed :: Eq model => Component effect model action a -> [Attribute b] -> View b
- embedKeyed :: Eq model => Component effect model action a -> Key -> [Attribute b] -> View b
- getMountPoint :: Maybe MisoString -> MisoString
- data Effect model action a
- type Sub action = Sink action -> JSM ()
- type Sink action = action -> JSM ()
- effectSub :: model -> Sub action -> Effect model action ()
- scheduleIO :: JSM action -> Effect model action ()
- scheduleIO_ :: JSM () -> Effect model action ()
- scheduleIOFor_ :: Foldable f => JSM (f action) -> Effect model action ()
- scheduleSub :: Sub action -> Effect model action ()
- mapSub :: (a -> b) -> Sub a -> Sub b
- noEff :: model -> Effect model action ()
- (<#) :: model -> JSM action -> Effect model action ()
- (#>) :: JSM action -> model -> Effect model action ()
- batchEff :: model -> [JSM action] -> Effect model action ()
- io :: JSM () -> Effect model action ()
- issue :: action -> Effect model action ()
- runEffect :: model -> Effect model action a -> (model, [Sub action])
- data Decoder a = Decoder {
- decoder :: Value -> Parser a
- decodeAt :: DecodeTarget
- data DecodeTarget
- = DecodeTarget [MisoString]
- | DecodeTargets [[MisoString]]
- at :: [MisoString] -> (Value -> Parser a) -> Decoder a
- emptyDecoder :: Decoder ()
- keycodeDecoder :: Decoder KeyCode
- keyInfoDecoder :: Decoder KeyInfo
- checkedDecoder :: Decoder Checked
- valueDecoder :: Decoder MisoString
- pointerDecoder :: Decoder PointerEvent
- type Events = Map MisoString Bool
- data KeyInfo = KeyInfo {}
- newtype KeyCode = KeyCode Int
- newtype Checked = Checked Bool
- data PointerEvent = PointerEvent {}
- data PointerType
- newtype AllowDrop = AllowDrop Bool
- data Options = Options {}
- defaultOptions :: Options
- defaultEvents :: Map MisoString Bool
- keyboardEvents :: Map MisoString Bool
- mouseEvents :: Map MisoString Bool
- dragEvents :: Map MisoString Bool
- pointerEvents :: Map MisoString Bool
- nodeHtml :: MisoString -> [Attribute action] -> [View action] -> View action
- nodeHtmlKeyed :: MisoString -> Key -> [Attribute action] -> [View action] -> View action
- doctype_ :: View action
- html_ :: [Attribute action] -> [View action] -> View action
- head_ :: [Attribute action] -> [View action] -> View action
- meta_ :: [Attribute action] -> View action
- h1_ :: [Attribute action] -> [View action] -> View action
- h2_ :: [Attribute action] -> [View action] -> View action
- h3_ :: [Attribute action] -> [View action] -> View action
- h4_ :: [Attribute action] -> [View action] -> View action
- h5_ :: [Attribute action] -> [View action] -> View action
- h6_ :: [Attribute action] -> [View action] -> View action
- div_ :: [Attribute action] -> [View action] -> View action
- p_ :: [Attribute action] -> [View action] -> View action
- hr_ :: [Attribute action] -> View action
- pre_ :: [Attribute action] -> [View action] -> View action
- blockquote_ :: [Attribute action] -> [View action] -> View action
- code_ :: [Attribute action] -> [View action] -> View action
- em_ :: [Attribute action] -> [View action] -> View action
- span_ :: [Attribute action] -> [View action] -> View action
- a_ :: [Attribute action] -> [View action] -> View action
- strong_ :: [Attribute action] -> [View action] -> View action
- i_ :: [Attribute action] -> [View action] -> View action
- b_ :: [Attribute action] -> [View action] -> View action
- u_ :: [Attribute action] -> [View action] -> View action
- sub_ :: [Attribute action] -> [View action] -> View action
- sup_ :: [Attribute action] -> [View action] -> View action
- br_ :: [Attribute action] -> View action
- ol_ :: [Attribute action] -> [View action] -> View action
- ul_ :: [Attribute action] -> [View action] -> View action
- li_ :: [Attribute action] -> [View action] -> View action
- liKeyed_ :: Key -> [Attribute action] -> [View action] -> View action
- dl_ :: [Attribute action] -> [View action] -> View action
- dt_ :: [Attribute action] -> [View action] -> View action
- dd_ :: [Attribute action] -> [View action] -> View action
- img_ :: [Attribute action] -> View action
- iframe_ :: [Attribute action] -> [View action] -> View action
- canvas_ :: [Attribute action] -> [View action] -> View action
- math_ :: [Attribute action] -> [View action] -> View action
- script_ :: [Attribute action] -> MisoString -> View action
- link_ :: [Attribute action] -> View action
- style_ :: Map MisoString MisoString -> Attribute action
- style :: [Attribute action] -> MisoString -> View action
- select_ :: [Attribute action] -> [View action] -> View action
- option_ :: [Attribute action] -> [View action] -> View action
- textarea_ :: [Attribute action] -> [View action] -> View action
- form :: [Attribute action] -> [View action] -> View action
- input_ :: [Attribute action] -> View action
- button_ :: [Attribute action] -> [View action] -> View action
- section_ :: [Attribute action] -> [View action] -> View action
- header_ :: [Attribute action] -> [View action] -> View action
- footer_ :: [Attribute action] -> [View action] -> View action
- nav_ :: [Attribute action] -> [View action] -> View action
- article_ :: [Attribute action] -> [View action] -> View action
- aside_ :: [Attribute action] -> [View action] -> View action
- address_ :: [Attribute action] -> [View action] -> View action
- main_ :: [Attribute action] -> [View action] -> View action
- body_ :: [Attribute action] -> [View action] -> View action
- figure_ :: [Attribute action] -> [View action] -> View action
- figcaption_ :: [Attribute action] -> [View action] -> View action
- table_ :: [Attribute action] -> [View action] -> View action
- caption_ :: [Attribute action] -> [View action] -> View action
- colgroup_ :: [Attribute action] -> [View action] -> View action
- col_ :: [Attribute action] -> View action
- tbody_ :: [Attribute action] -> [View action] -> View action
- thead_ :: [Attribute action] -> [View action] -> View action
- tfoot_ :: [Attribute action] -> [View action] -> View action
- tr_ :: [Attribute action] -> [View action] -> View action
- trKeyed_ :: Key -> [Attribute action] -> [View action] -> View action
- td_ :: [Attribute action] -> [View action] -> View action
- th_ :: [Attribute action] -> [View action] -> View action
- label_ :: [Attribute action] -> [View action] -> View action
- fieldset_ :: [Attribute action] -> [View action] -> View action
- legend_ :: [Attribute action] -> [View action] -> View action
- datalist_ :: [Attribute action] -> [View action] -> View action
- optgroup_ :: [Attribute action] -> [View action] -> View action
- keygen_ :: [Attribute action] -> [View action] -> View action
- output_ :: [Attribute action] -> [View action] -> View action
- progress_ :: [Attribute action] -> [View action] -> View action
- meter_ :: [Attribute action] -> [View action] -> View action
- center_ :: [Attribute action] -> [View action] -> View action
- mark_ :: [Attribute action] -> [View action] -> View action
- ruby_ :: [Attribute action] -> [View action] -> View action
- rt_ :: [Attribute action] -> [View action] -> View action
- rp_ :: [Attribute action] -> [View action] -> View action
- bdi_ :: [Attribute action] -> [View action] -> View action
- bdo_ :: [Attribute action] -> [View action] -> View action
- wbr_ :: [Attribute action] -> View action
- audio_ :: [Attribute action] -> [View action] -> View action
- video_ :: [Attribute action] -> [View action] -> View action
- source_ :: [Attribute action] -> View action
- track_ :: [Attribute action] -> View action
- embed_ :: [Attribute action] -> View action
- object_ :: [Attribute action] -> [View action] -> View action
- param_ :: [Attribute action] -> View action
- ins_ :: [Attribute action] -> [View action] -> View action
- del_ :: [Attribute action] -> [View action] -> View action
- small_ :: [Attribute action] -> [View action] -> View action
- cite_ :: [Attribute action] -> [View action] -> View action
- dfn_ :: [Attribute action] -> [View action] -> View action
- abbr_ :: [Attribute action] -> [View action] -> View action
- time_ :: [Attribute action] -> [View action] -> View action
- var_ :: [Attribute action] -> [View action] -> View action
- samp_ :: [Attribute action] -> [View action] -> View action
- kbd_ :: [Attribute action] -> [View action] -> View action
- q_ :: [Attribute action] -> [View action] -> View action
- s_ :: [Attribute action] -> [View action] -> View action
- details_ :: [Attribute action] -> [View action] -> View action
- summary_ :: [Attribute action] -> [View action] -> View action
- menuitem_ :: [Attribute action] -> [View action] -> View action
- menu_ :: [Attribute action] -> [View action] -> View action
- textProp :: MisoString -> MisoString -> Attribute action
- stringProp :: MisoString -> String -> Attribute action
- boolProp :: MisoString -> Bool -> Attribute action
- intProp :: MisoString -> Int -> Attribute action
- integerProp :: MisoString -> Int -> Attribute action
- doubleProp :: MisoString -> Double -> Attribute action
- class_ :: MisoString -> Attribute action
- classList_ :: [(MisoString, Bool)] -> Attribute action
- id_ :: MisoString -> Attribute action
- title_ :: MisoString -> Attribute action
- hidden_ :: Bool -> Attribute action
- lang_ :: MisoString -> Attribute action
- type_ :: MisoString -> Attribute action
- value_ :: MisoString -> Attribute action
- defaultValue_ :: MisoString -> Attribute action
- checked_ :: Bool -> Attribute action
- placeholder_ :: MisoString -> Attribute action
- selected_ :: Bool -> Attribute action
- accept_ :: MisoString -> Attribute action
- acceptCharset_ :: MisoString -> Attribute action
- action_ :: MisoString -> Attribute action
- autocomplete_ :: Bool -> Attribute action
- autofocus_ :: Bool -> Attribute action
- autosave_ :: MisoString -> Attribute action
- disabled_ :: Bool -> Attribute action
- enctype_ :: MisoString -> Attribute action
- formation_ :: MisoString -> Attribute action
- list_ :: MisoString -> Attribute action
- maxlength_ :: MisoString -> Attribute action
- minlength_ :: MisoString -> Attribute action
- method_ :: MisoString -> Attribute action
- multiple_ :: Bool -> Attribute action
- name_ :: MisoString -> Attribute action
- novalidate_ :: Bool -> Attribute action
- pattern_ :: MisoString -> Attribute action
- readonly_ :: Bool -> Attribute action
- required_ :: Bool -> Attribute action
- size_ :: MisoString -> Attribute action
- for_ :: MisoString -> Attribute action
- ref_ :: MisoString -> Attribute action
- form_ :: MisoString -> Attribute action
- max_ :: MisoString -> Attribute action
- min_ :: MisoString -> Attribute action
- step_ :: MisoString -> Attribute action
- cols_ :: MisoString -> Attribute action
- rows_ :: MisoString -> Attribute action
- wrap_ :: MisoString -> Attribute action
- href_ :: MisoString -> Attribute action
- target_ :: MisoString -> Attribute action
- download_ :: MisoString -> Attribute action
- downloadAs_ :: MisoString -> Attribute action
- hreflang_ :: MisoString -> Attribute action
- media_ :: MisoString -> Attribute action
- ping_ :: MisoString -> Attribute action
- rel_ :: MisoString -> Attribute action
- ismap_ :: MisoString -> Attribute action
- usemap_ :: MisoString -> Attribute action
- shape_ :: MisoString -> Attribute action
- coords_ :: MisoString -> Attribute action
- src_ :: MisoString -> Attribute action
- height_ :: MisoString -> Attribute action
- width_ :: MisoString -> Attribute action
- alt_ :: MisoString -> Attribute action
- loading_ :: MisoString -> Attribute action
- autoplay_ :: Bool -> Attribute action
- controls_ :: Bool -> Attribute action
- loop_ :: Bool -> Attribute action
- preload_ :: MisoString -> Attribute action
- poster_ :: MisoString -> Attribute action
- default_ :: Bool -> Attribute action
- kind_ :: MisoString -> Attribute action
- srclang_ :: MisoString -> Attribute action
- sandbox_ :: MisoString -> Attribute action
- seamless_ :: MisoString -> Attribute action
- srcdoc_ :: MisoString -> Attribute action
- reversed_ :: MisoString -> Attribute action
- start_ :: MisoString -> Attribute action
- align_ :: MisoString -> Attribute action
- colspan_ :: MisoString -> Attribute action
- rowspan_ :: MisoString -> Attribute action
- headers_ :: MisoString -> Attribute action
- scope_ :: MisoString -> Attribute action
- async_ :: MisoString -> Attribute action
- charset_ :: MisoString -> Attribute action
- content_ :: MisoString -> Attribute action
- defer_ :: MisoString -> Attribute action
- httpEquiv_ :: MisoString -> Attribute action
- language_ :: MisoString -> Attribute action
- scoped_ :: MisoString -> Attribute action
- data_ :: MisoString -> MisoString -> Attribute action
- styleInline_ :: MisoString -> Attribute action
- on :: MisoString -> Decoder r -> (r -> action) -> Attribute action
- onWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Attribute action
- onMounted :: action -> Attribute action
- onUnmounted :: action -> Attribute action
- onCreated :: action -> Attribute action
- onDestroyed :: action -> Attribute action
- onBeforeDestroyed :: action -> Attribute action
- onClick :: action -> Attribute action
- onDoubleClick :: action -> Attribute action
- onMouseDown :: action -> Attribute action
- onMouseUp :: action -> Attribute action
- onMouseEnter :: action -> Attribute action
- onMouseLeave :: action -> Attribute action
- onMouseOver :: action -> Attribute action
- onMouseOut :: action -> Attribute action
- onKeyDown :: (KeyCode -> action) -> Attribute action
- onKeyDownWithInfo :: (KeyInfo -> action) -> Attribute action
- onKeyPress :: (KeyCode -> action) -> Attribute action
- onKeyUp :: (KeyCode -> action) -> Attribute action
- onInput :: (MisoString -> action) -> Attribute action
- onChange :: (MisoString -> action) -> Attribute action
- onChecked :: (Checked -> action) -> Attribute action
- onSubmit :: action -> Attribute action
- onBlur :: action -> Attribute action
- onFocus :: action -> Attribute action
- onDrag :: action -> Attribute action
- onDragLeave :: action -> Attribute action
- onDragEnter :: action -> Attribute action
- onDragEnd :: action -> Attribute action
- onDragStart :: action -> Attribute action
- onDragOver :: action -> Attribute action
- onDrop :: AllowDrop -> action -> Attribute action
- onSelect :: (MisoString -> action) -> Attribute action
- onPointerDown :: (PointerEvent -> action) -> Attribute action
- onPointerUp :: (PointerEvent -> action) -> Attribute action
- onPointerEnter :: (PointerEvent -> action) -> Attribute action
- onPointerLeave :: (PointerEvent -> action) -> Attribute action
- onPointerOver :: (PointerEvent -> action) -> Attribute action
- onPointerOut :: (PointerEvent -> action) -> Attribute action
- onPointerCancel :: (PointerEvent -> action) -> Attribute action
- onPointerMove :: (PointerEvent -> action) -> Attribute action
- newtype VTree = VTree {}
- data View action
- = Node NS MisoString (Maybe Key) [Attribute action] [View action]
- | Text MisoString
- | TextRaw MisoString
- | Embed [Attribute action] SomeComponent
- data Attribute action
- = Property MisoString Value
- | Event (Sink action -> Object -> LogLevel -> Events -> JSM ())
- | Style (Map MisoString MisoString)
- newtype Key = Key MisoString
- data NS
- class ToView a where
- type ToViewAction a :: Type
- toView :: a -> View (ToViewAction a)
- node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action
- text :: MisoString -> View action
- textRaw :: MisoString -> View action
- rawHtml :: MisoString -> View action
- prop :: ToJSON a => MisoString -> a -> Attribute action
- style_ :: Map MisoString MisoString -> Attribute action
- class ToHtml a where
- toHtml :: a -> ByteString
- data HTML
- nodeMathml :: MisoString -> [Attribute action] -> [View action] -> View action
- class HasRouter layout where
- data RoutingError = Fail
- data Router a
- route :: HasRouter layout => Proxy layout -> RouteT layout (m -> a) -> (m -> URI) -> m -> Either RoutingError a
- run :: JSM () -> IO ()
- data MisoException
- exception :: SomeException -> JSM JSVal
- mouseSub :: (PointerEvent -> action) -> Sub action
- data Arrows = Arrows {}
- arrowsSub :: (Arrows -> action) -> Sub action
- directionSub :: ([Int], [Int], [Int], [Int]) -> (Arrows -> action) -> Sub action
- keyboardSub :: (Set Int -> action) -> Sub action
- wasdSub :: (Arrows -> action) -> Sub action
- uriSub :: (URI -> action) -> Sub action
- getCurrentURI :: JSM URI
- pushURI :: URI -> JSM ()
- replaceURI :: URI -> JSM ()
- back :: JSM ()
- forward :: JSM ()
- go :: Int -> JSM ()
- data URI = URI {}
- windowSub :: MisoString -> Decoder r -> (r -> action) -> Sub action
- windowCoordsSub :: ((Int, Int) -> action) -> Sub action
- windowPointerMoveSub :: (PointerEvent -> action) -> Sub action
- windowSubWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Sub action
- data WebSocket action
- newtype URL = URL MisoString
- newtype Protocols = Protocols [MisoString]
- data SocketState
- = CONNECTING
- | OPEN
- | CLOSING
- | CLOSED
- data CloseCode
- newtype WasClean = WasClean Bool
- newtype Reason = Reason MisoString
- websocketSub :: FromJSON m => URL -> Protocols -> (WebSocket m -> action) -> Sub action
- send :: ToJSON a => a -> JSM ()
- close :: JSM ()
- connect :: URL -> Protocols -> JSM ()
- getSocketState :: JSM SocketState
- sseSub :: FromJSON msg => MisoString -> (SSE msg -> action) -> Sub action
- data SSE message
- = SSEMessage message
- | SSEClose
- | SSEError
- getLocalStorage :: FromJSON model => MisoString -> JSM (Either String model)
- setLocalStorage :: ToJSON model => MisoString -> model -> JSM ()
- removeLocalStorage :: MisoString -> JSM ()
- clearLocalStorage :: JSM ()
- localStorageLength :: JSM Int
- getSessionStorage :: FromJSON model => MisoString -> JSM (Either String model)
- setSessionStorage :: ToJSON model => MisoString -> model -> JSM ()
- removeSessionStorage :: MisoString -> JSM ()
- clearSessionStorage :: JSM ()
- sessionStorageLength :: JSM Int
- withFoldable :: Foldable t => t a -> (a -> b) -> [b]
- conditionalViews :: Bool -> [View action] -> [View action]
- (=:) :: k -> a -> Map k a
- set :: ToJSVal v => MisoString -> v -> Object -> JSM ()
- now :: JSM Double
- consoleLog :: MisoString -> JSM ()
- consoleLog' :: JSVal -> JSM ()
- consoleError :: MisoString -> JSM ()
- consoleWarn :: MisoString -> JSM ()
- getElementById :: MisoString -> JSM JSVal
- focus :: MisoString -> JSM ()
- blur :: MisoString -> JSM ()
- alert :: MisoString -> JSM ()
- reload :: JSM ()
Miso
Combinators
miso :: Eq model => (URI -> App effect model action a) -> JSM () Source #
Runs an isomorphic miso application.
Assumes the pre-rendered DOM is already present.
Note: Uses mountPoint as the Component name.
Always mounts to body. Copies page into the virtual DOM.
startApp :: Eq model => App effect model action a -> JSM () Source #
Runs a miso application
Initializes application at mountPoint (defaults to body when Nothing)
Sink
sink :: MisoString -> App effect model action a -> Sink action Source #
The sink function gives access to an App
Sink. This is use for third-party integration, or for
long-running IO operations. Use at your own risk.
If the Component or is not mounted, it does not exist
in the global component map, and will therefore be a no-op.
This is a backdoor function, caveat emptor.
It is recommended to use the mail or notify functions by default
when message passing with App and Component
Sampling
sample :: Component effect model action a -> JSM model Source #
Read-only access to another Component's model.
This function is safe to use when a child Component wishes access
a parent Components model state. Under this circumstance the parent
will always be mounted and available.
Otherwise, if a sibling or parent Component's model state is attempted
to be accessed. Then we throw a NotMountedException, in the case the
Component being accessed is not available.
Message Passing
notify :: Component effect model action a -> action -> JSM () Source #
Like mail but lifted to work with the Transition interface.
This function is used to send messages to Components on other parts of the application
Types
data App effect model action a Source #
Application entry point
Constructors
| App | |
Fields
| |
Instances
| ToView (App effect model action a) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (App effect model action a) :: Type Source # | |
| type ToViewAction (App effect model action a) Source # | |
Defined in Miso.Types | |
Core type for constructing a virtual DOM in Haskell
Constructors
| Node NS MisoString (Maybe Key) [Attribute action] [View action] | |
| Text MisoString | |
| TextRaw MisoString | |
| Embed [Attribute action] SomeComponent |
Instances
| Functor View Source # | |
| IsString (View a) Source # |
|
Defined in Miso.Types Methods fromString :: String -> View a Source # | |
| ToView (View action) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (View action) :: Type Source # | |
| ToHtml [View a] Source # | Render a |
Defined in Miso.Render Methods toHtml :: [View a] -> ByteString Source # | |
| ToHtml (View a) Source # | Render a |
Defined in Miso.Render Methods toHtml :: View a -> ByteString Source # | |
| HasRouter (View a) Source # | View |
| HasLink (View a :: Type) Source # | For constructing type-safe links |
| type ToViewAction (View action) Source # | |
Defined in Miso.Types | |
| type RouteT (View a) x Source # | |
Defined in Miso.Router | |
| type MkLink (View a :: Type) b Source # | |
Defined in Miso.Types | |
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 |
data Attribute action Source #
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.
Constructors
| Property MisoString Value | |
| Event (Sink action -> Object -> LogLevel -> Events -> JSM ()) | |
| Style (Map MisoString MisoString) |
Optional Logging for debugging miso internals (useful to see if prerendering is successful)
Constructors
| Off | |
| DebugPrerender | 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 |
data Component effect model action a Source #
Used with component to parameterize App by name
Constructors
| Component | |
Fields
| |
Instances
| ToView (Component effect model action a) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (Component effect model action a) :: Type Source # | |
| ToHtml (Component effect model action a) Source # | Render a |
Defined in Miso.Render Methods toHtml :: Component effect model action a -> ByteString Source # | |
| type ToViewAction (Component effect model action a) Source # | |
Defined in Miso.Types | |
data SomeComponent Source #
Existential wrapper used to allow the nesting of Component in App
Constructors
| Eq model => SomeComponent (Component effect model action a) |
Classes
Convenience class for using View
Associated Types
type ToViewAction a :: Type Source #
Methods
toView :: a -> View (ToViewAction a) Source #
Instances
| ToView (View action) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (View action) :: Type Source # | |
| ToView (Component effect model action a) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (Component effect model action a) :: Type Source # | |
| ToView (App effect model action a) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (App effect model action a) :: Type Source # | |
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.
Instances
| ToKey Double Source # | Convert |
| ToKey Float Source # | Convert |
| ToKey Int Source # | Convert |
| ToKey Word Source # | Convert |
| ToKey String Source # | Convert |
| ToKey Text Source # | Convert |
| ToKey JSString Source # | Convert |
| ToKey Key Source # | Identity instance |
Functions
defaultApp :: model -> (action -> Effect model action a) -> (model -> View action) -> App Effect model action a Source #
Smart constructor for App with sane defaults.
component :: MisoString -> App effect model action a -> Component effect model action a Source #
Smart constructor for parameterizing App by name
Needed when calling embed and embedWith
embed :: Eq model => Component effect model action a -> [Attribute b] -> View b Source #
Used in the view function to embed Components in App
embedKeyed :: Eq model => Component effect model action a -> Key -> [Attribute b] -> View b Source #
Used in the view function to embed Components in App, with Key
getMountPoint :: Maybe MisoString -> MisoString Source #
Convenience for extracting mount point
Effect
Effect
Types
data Effect model action a Source #
A monad for succinctly expressing model transitions in the update function.
Effect is a state monad so it abstracts over manually passing the model
around. It's also a writer monad where the accumulator is a list of scheduled
IO actions. Multiple actions can be scheduled using
Control.Monad.Writer.Class.tell from the mtl library and a single action
can be scheduled using scheduleIO.
An Effect represents the results of an update action.
It consists of the updated model and a list of subscriptions. Each Sub is
run in a new thread so there is no risk of accidentally blocking the
application.
Tip: use the Effect monad in combination with the stateful
lens
operators (all operators ending in "="). The following example assumes
the lenses field1, counter and field2 are in scope and that the
LambdaCase language extension is enabled:
myApp = App
{ update = \case
MyAction1 -> do
field1 .= value1
counter += 1
MyAction2 -> do
field2 %= f
scheduleIO $ do
putStrLn "Hello"
putStrLn "World!"
, ...
}
Instances
| MonadState model (Effect model action) Source # | |
| MonadWriter [Sub action] (Effect model action) Source # | |
Defined in Miso.Effect | |
| Monad (Effect model action) Source # | |
Defined in Miso.Effect | |
| Functor (Effect model action) Source # | |
| MonadFail (Effect model action) Source # |
|
| Applicative (Effect model action) Source # | |
Defined in Miso.Effect Methods pure :: a -> Effect model action a Source # (<*>) :: Effect model action (a -> b) -> Effect model action a -> Effect model action b Source # liftA2 :: (a -> b -> c) -> Effect model action a -> Effect model action b -> Effect model action c Source # (*>) :: Effect model action a -> Effect model action b -> Effect model action b Source # (<*) :: Effect model action a -> Effect model action b -> Effect model action a Source # | |
type Sink action = action -> JSM () Source #
Function to asynchronously dispatch actions to the update function.
Combinators
effectSub :: model -> Sub action -> Effect model action () Source #
Like <# but schedules a subscription which is an IO computation which has
access to a Sink which can be used to asynchronously dispatch actions to
the update function.
A use-case is scheduling an IO computation which creates a 3rd-party JS
widget which has an associated callback. The callback can then call the sink
to turn events into actions. To do this without accessing a sink requires
going via a Subscription
scheduleIO :: JSM action -> Effect model action () Source #
Schedule a single IO action for later execution.
Note that multiple IO action can be scheduled using
Control.Monad.Writer.Class.tell from the mtl library.
scheduleIO_ :: JSM () -> Effect model action () Source #
Like scheduleIO but doesn't cause an action to be dispatched to
the update function.
This is handy for scheduling IO computations where you don't care about their results or when they complete.
scheduleSub :: Sub action -> Effect model action () Source #
Like scheduleIO but schedules a subscription which is an IO
computation that has access to a Sink which can be used to
asynchronously dispatch actions to the update function.
A use-case is scheduling an IO computation which creates a
3rd-party JS widget which has an associated callback. The callback
can then call the sink to turn events into actions. To do this
without accessing a sink requires going via a Subscription
mapSub :: (a -> b) -> Sub a -> Sub b Source #
Turn a subscription that consumes actions of type a into a subscription
that consumes actions of type b using the supplied function of type a -> b.
(<#) :: model -> JSM action -> Effect model action () infixl 0 Source #
Smart constructor for an Effect with exactly one action.
(#>) :: JSM action -> model -> Effect model action () infixr 0 Source #
Effect smart constructor, flipped
batchEff :: model -> [JSM action] -> Effect model action () Source #
Smart constructor for an Effect with multiple actions.
io :: JSM () -> Effect model action () Source #
A shorter synonym for scheduleIO_
update :: Action -> Effect Model Action () update = \case HelloWorld -> io (consoleLog "Hello World")
This is handy for scheduling IO computations where you don't care about their results or when they complete.
Since: 1.9.0.0
issue :: action -> Effect model action () Source #
A synonym for tell, specialized to Effect
update :: Action -> Effect Model Action () update = \case Click -> issue HelloWorld
Used to issue new action
Since: 1.9.0.0
Internal
runEffect :: model -> Effect model action a -> (model, [Sub action]) Source #
Internal function used to unwrap an Effect
Event
Types
Decoder data type for parsing events
data DecodeTarget Source #
Data type representing path (consisting of field names) within event object where a decoder should be applied.
Constructors
| DecodeTarget [MisoString] | Specify single path within Event object, where a decoder should be applied. |
| DecodeTargets [[MisoString]] | Specify multiple paths withing Event object, where decoding should be attempted. The first path where decoding suceeds is the one taken. |
Instances
| ToJSVal DecodeTarget Source # | |
Defined in Miso.Event.Decoder Methods toJSVal :: DecodeTarget -> IO JSVal Source # toJSValListOf :: [DecodeTarget] -> IO JSVal Source # | |
Combinators
at :: [MisoString] -> (Value -> Parser a) -> Decoder a Source #
Smart constructor for building a Decoder.
Decoders
emptyDecoder :: Decoder () Source #
Empty decoder for use with events like "click" that do not return any meaningful values
keycodeDecoder :: Decoder KeyCode Source #
Retrieves either "keyCode", "which" or "charCode" field in Decoder
keyInfoDecoder :: Decoder KeyInfo Source #
Retrieves either "keyCode", "which" or "charCode" field in Decoder,
along with shift, ctrl, meta and alt.
checkedDecoder :: Decoder Checked Source #
Retrieves "checked" field in Decoder
valueDecoder :: Decoder MisoString Source #
Retrieves "value" field in Decoder
pointerDecoder :: Decoder PointerEvent Source #
Pointer decoder for use with events like "onpointerover"
Types
KeyboardEvent
Type useful for both KeyCode and additional key press information.
Type used for Keyboard events.
See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Browser_compatibility
Instances
| Eq KeyCode Source # | |
| Ord KeyCode Source # | |
Defined in Miso.Event.Types | |
| Show KeyCode Source # | |
| FromJSON KeyCode Source # | |
CheckedEvent
Type used for Checkbox events.
Instances
| Eq Checked Source # | |
| Ord Checked Source # | |
Defined in Miso.Event.Types | |
| Show Checked Source # | |
| FromJSON Checked Source # | |
PointerEvent
data PointerEvent Source #
Type used for Pointer events. https://w3c.github.io/pointerevents
Constructors
| PointerEvent | |
Instances
| Eq PointerEvent Source # | |
Defined in Miso.Event.Types Methods (==) :: PointerEvent -> PointerEvent -> Bool Source # (/=) :: PointerEvent -> PointerEvent -> Bool Source # | |
| Show PointerEvent Source # | |
Defined in Miso.Event.Types | |
data PointerType Source #
Instances
| Eq PointerType Source # | |
Defined in Miso.Event.Types Methods (==) :: PointerType -> PointerType -> Bool Source # (/=) :: PointerType -> PointerType -> Bool Source # | |
| Show PointerType Source # | |
Defined in Miso.Event.Types | |
| FromJSON PointerType Source # | |
Defined in Miso.Event.Types Methods parseJSON :: Value -> Parser PointerType Source # parseJSONList :: Value -> Parser [PointerType] Source # | |
DropEvent
Related to using drop-related events
Options
Options for handling event propagation.
Constructors
| Options | |
Fields | |
Instances
| Eq Options Source # | |
| Show Options Source # | |
| Generic Options Source # | |
| ToJSVal Options Source # | |
| type Rep Options Source # | |
Defined in Miso.Event.Types type Rep Options = D1 (MetaData "Options" "Miso.Event.Types" "miso-1.9.0.0-ZJqKd2LHjaBpN766aHKPE" False) (C1 (MetaCons "Options" PrefixI True) (S1 (MetaSel (Just "preventDefault") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 Bool) :*: S1 (MetaSel (Just "stopPropagation") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 Bool))) | |
defaultOptions :: Options Source #
Default value for Options.
defaultOptions = Options { preventDefault = False, stopPropagation = False }Events
defaultEvents :: Map MisoString Bool Source #
Default delegated events
keyboardEvents :: Map MisoString Bool Source #
Keyboard events
mouseEvents :: Map MisoString Bool Source #
Mouse events
dragEvents :: Map MisoString Bool Source #
Drag events
pointerEvents :: Map MisoString Bool Source #
Pointer events
Html
Elements
Smart constructors
nodeHtml :: MisoString -> [Attribute action] -> [View action] -> View action Source #
Used to construct Node in View
nodeHtmlKeyed :: MisoString -> Key -> [Attribute action] -> [View action] -> View action Source #
Construct a node with a Key
Combinators
liKeyed_ :: Key -> [Attribute action] -> [View action] -> View action Source #
Contains Key, inteded to be used for child replacement patch
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
script_ :: [Attribute action] -> MisoString -> View action Source #
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
This takes the raw text to be put in the script tag.
That means that if any part of the text is not trusted there's a potential JavaScript injection. Read more at https://owasp.org/www-community/attacks/xss/
You can also easily shoot yourself in the foot with something like:
script_ [] "</script>"style_ :: Map MisoString MisoString -> Attribute action Source #
style_ attrs is an attribute that will set the style
attribute of the associated DOM node to attrs.
style attributes not contained in attrs will be deleted.
import qualified Data.Map as M div_ [ style_ $ M.singleton "background" "red" ] [ ]
style :: [Attribute action] -> MisoString -> View action Source #
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
This takes the raw text to be put in the style tag.
That means that if any part of the text is not trusted there's a potential CSS injection. Read more at https://owasp.org/www-project-web-security-testing-guide/latest/4-Web_Application_Security_Testing/11-Client_Side_Testing/05-Testing_for_CSS_Injection
You can also easily shoot yourself in the foot with something like:
style_ [] "</style>"form :: [Attribute action] -> [View action] -> View action Source #
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
For usage in a real-world application with the onSubmit event.
view :: Model -> View action view model = form [ onSubmit NoOp ] [ input [ type_ "submit" ] ]
Note: onSubmit will use preventDefault = True. This will keep
the form from submitting to the server.
trKeyed_ :: Key -> [Attribute action] -> [View action] -> View action Source #
Contains Key, inteded to be used for child replacement patch
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
Attributes
Smart constructors
textProp :: MisoString -> MisoString -> Attribute action Source #
Set field to Text value
stringProp :: MisoString -> String -> Attribute action Source #
Set field to String value
integerProp :: MisoString -> Int -> Attribute action Source #
Set field to Integer value
doubleProp :: MisoString -> Double -> Attribute action Source #
Set field to Double value
Combinators
class_ :: MisoString -> Attribute action Source #
Set "className" property https://developer.mozilla.org/en-US/docs/Web/API/Element/className
classList_ :: [(MisoString, Bool)] -> Attribute action Source #
Define multiple classes conditionally
div_ [ classList_ [ ("empty", null items) ] [ ]id_ :: MisoString -> Attribute action Source #
title_ :: MisoString -> Attribute action Source #
lang_ :: MisoString -> Attribute action Source #
type_ :: MisoString -> Attribute action Source #
value_ :: MisoString -> Attribute action Source #
defaultValue_ :: MisoString -> Attribute action Source #
placeholder_ :: MisoString -> Attribute action Source #
accept_ :: MisoString -> Attribute action Source #
acceptCharset_ :: MisoString -> Attribute action Source #
action_ :: MisoString -> Attribute action Source #
autocomplete_ :: Bool -> Attribute action Source #
autofocus_ :: Bool -> Attribute action Source #
Set "autofocus" property https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
autosave_ :: MisoString -> Attribute action Source #
enctype_ :: MisoString -> Attribute action Source #
formation_ :: MisoString -> Attribute action Source #
list_ :: MisoString -> Attribute action Source #
maxlength_ :: MisoString -> Attribute action Source #
minlength_ :: MisoString -> Attribute action Source #
method_ :: MisoString -> Attribute action Source #
name_ :: MisoString -> Attribute action Source #
novalidate_ :: Bool -> Attribute action Source #
pattern_ :: MisoString -> Attribute action Source #
size_ :: MisoString -> Attribute action Source #
for_ :: MisoString -> Attribute action Source #
ref_ :: MisoString -> Attribute action Source #
form_ :: MisoString -> Attribute action Source #
max_ :: MisoString -> Attribute action Source #
min_ :: MisoString -> Attribute action Source #
step_ :: MisoString -> Attribute action Source #
cols_ :: MisoString -> Attribute action Source #
rows_ :: MisoString -> Attribute action Source #
wrap_ :: MisoString -> Attribute action Source #
href_ :: MisoString -> Attribute action Source #
target_ :: MisoString -> Attribute action Source #
download_ :: MisoString -> Attribute action Source #
downloadAs_ :: MisoString -> Attribute action Source #
hreflang_ :: MisoString -> Attribute action Source #
media_ :: MisoString -> Attribute action Source #
ping_ :: MisoString -> Attribute action Source #
rel_ :: MisoString -> Attribute action Source #
ismap_ :: MisoString -> Attribute action Source #
usemap_ :: MisoString -> Attribute action Source #
shape_ :: MisoString -> Attribute action Source #
coords_ :: MisoString -> Attribute action Source #
src_ :: MisoString -> Attribute action Source #
height_ :: MisoString -> Attribute action Source #
width_ :: MisoString -> Attribute action Source #
alt_ :: MisoString -> Attribute action Source #
loading_ :: MisoString -> Attribute action Source #
preload_ :: MisoString -> Attribute action Source #
poster_ :: MisoString -> Attribute action Source #
kind_ :: MisoString -> Attribute action Source #
srclang_ :: MisoString -> Attribute action Source #
sandbox_ :: MisoString -> Attribute action Source #
seamless_ :: MisoString -> Attribute action Source #
srcdoc_ :: MisoString -> Attribute action Source #
reversed_ :: MisoString -> Attribute action Source #
start_ :: MisoString -> Attribute action Source #
align_ :: MisoString -> Attribute action Source #
colspan_ :: MisoString -> Attribute action Source #
rowspan_ :: MisoString -> Attribute action Source #
headers_ :: MisoString -> Attribute action Source #
scope_ :: MisoString -> Attribute action Source #
async_ :: MisoString -> Attribute action Source #
charset_ :: MisoString -> Attribute action Source #
content_ :: MisoString -> Attribute action Source #
defer_ :: MisoString -> Attribute action Source #
httpEquiv_ :: MisoString -> Attribute action Source #
language_ :: MisoString -> Attribute action Source #
scoped_ :: MisoString -> Attribute action Source #
data_ :: MisoString -> MisoString -> Attribute action Source #
Set "data-*" property https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
styleInline_ :: MisoString -> Attribute action Source #
Set "style" property
view m = div_ [ styleInline_ "background-color:red;color:blue;" ] [ "foo" ]
Events
Smart constructors
on :: MisoString -> Decoder r -> (r -> action) -> Attribute action Source #
Convenience wrapper for onWithOptions defaultOptions.
let clickHandler = on "click" emptyDecoder $ \() -> Action in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]
onWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Attribute action Source #
onWithOptions opts eventName decoder toAction is an attribute
that will set the event handler of the associated DOM node to a function that
decodes its argument using decoder, converts it to an action
using toAction and then feeds that action back to the update function.
opts can be used to disable further event propagation.
let clickHandler = onWithOptions defaultOptions "click" emptyDecoder $ \() -> Action in button_ [ clickHandler, class_ "add" ] [ text_ "+" ]
Lifecycle events
onMounted :: action -> Attribute action Source #
onMounted action is an event that gets called after the actual DOM
element is created.
Important note: Any node that uses this event MUST have a unique Key,
otherwise the event may not be reliably called!
onUnmounted :: action -> Attribute action Source #
onUnmounted action is an event that gets called before the DOM element
is removed from the DOM. The action is given the DOM element that was
removed from the DOM tree.
Important note: Any node that uses this event MUST have a unique Key,
otherwise the event may not be reliably called!
onCreated :: action -> Attribute action Source #
onCreated action is an event that gets called after the actual DOM
element is created.
Important note: Any node that uses this event MUST have a unique Key,
otherwise the event may not be reliably called!
onDestroyed :: action -> Attribute action Source #
onDestroyed action is an event that gets called after the DOM element
is removed from the DOM. The action is given the DOM element that was
removed from the DOM tree.
Important note: Any node that uses this event MUST have a unique Key,
otherwise the event may not be reliably called!
onBeforeDestroyed :: action -> Attribute action Source #
onBeforeDestroyed action is an event that gets called before the DOM element
is removed from the DOM. The action is given the DOM element that was
removed from the DOM tree.
Important note: Any node that uses this event MUST have a unique Key,
otherwise the event may not be reliably called!
Mouse
onDoubleClick :: action -> Attribute action Source #
onMouseDown :: action -> Attribute action Source #
onMouseEnter :: action -> Attribute action Source #
onMouseLeave :: action -> Attribute action Source #
onMouseOver :: action -> Attribute action Source #
onMouseOut :: action -> Attribute action Source #
Keyboard
onKeyDownWithInfo :: (KeyInfo -> action) -> Attribute action Source #
onKeyPress :: (KeyCode -> action) -> Attribute action Source #
Form
onInput :: (MisoString -> action) -> Attribute action Source #
onChange :: (MisoString -> action) -> Attribute action Source #
Focus
Drag
onDragLeave :: action -> Attribute action Source #
onDragEnter :: action -> Attribute action Source #
onDragStart :: action -> Attribute action Source #
onDragOver :: action -> Attribute action Source #
Drop
Select
onSelect :: (MisoString -> action) -> Attribute action Source #
Pointer
onPointerDown :: (PointerEvent -> action) -> Attribute action Source #
onPointerUp :: (PointerEvent -> action) -> Attribute action Source #
onPointerEnter :: (PointerEvent -> action) -> Attribute action Source #
onPointerLeave :: (PointerEvent -> action) -> Attribute action Source #
onPointerOver :: (PointerEvent -> action) -> Attribute action Source #
onPointerOut :: (PointerEvent -> action) -> Attribute action Source #
onPointerCancel :: (PointerEvent -> action) -> Attribute action Source #
onPointerMove :: (PointerEvent -> action) -> Attribute action Source #
Virtual DOM
Types
Core type for constructing a virtual DOM in Haskell
Constructors
| Node NS MisoString (Maybe Key) [Attribute action] [View action] | |
| Text MisoString | |
| TextRaw MisoString | |
| Embed [Attribute action] SomeComponent |
Instances
| Functor View Source # | |
| IsString (View a) Source # |
|
Defined in Miso.Types Methods fromString :: String -> View a Source # | |
| ToView (View action) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (View action) :: Type Source # | |
| ToHtml [View a] Source # | Render a |
Defined in Miso.Render Methods toHtml :: [View a] -> ByteString Source # | |
| ToHtml (View a) Source # | Render a |
Defined in Miso.Render Methods toHtml :: View a -> ByteString Source # | |
| HasRouter (View a) Source # | View |
| HasLink (View a :: Type) Source # | For constructing type-safe links |
| type ToViewAction (View action) Source # | |
Defined in Miso.Types | |
| type RouteT (View a) x Source # | |
Defined in Miso.Router | |
| type MkLink (View a :: Type) b Source # | |
Defined in Miso.Types | |
data Attribute action Source #
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.
Constructors
| Property MisoString Value | |
| Event (Sink action -> Object -> LogLevel -> Events -> JSM ()) | |
| Style (Map MisoString MisoString) |
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 |
Classes
Convenience class for using View
Associated Types
type ToViewAction a :: Type Source #
Methods
toView :: a -> View (ToViewAction a) Source #
Instances
| ToView (View action) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (View action) :: Type Source # | |
| ToView (Component effect model action a) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (Component effect model action a) :: Type Source # | |
| ToView (App effect model action a) Source # | |
Defined in Miso.Types Associated Types type ToViewAction (App effect model action a) :: Type Source # | |
Combinators
node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action Source #
Create a new Miso.Html.Types.Node.
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.
text :: MisoString -> View action Source #
Create a new Text with the given content.
rawHtml :: MisoString -> View action Source #
prop :: ToJSON a => MisoString -> a -> Attribute action Source #
prop k v is an attribute that will set the attribute k of the DOM node associated with the vnode
to v.
style_ :: Map MisoString MisoString -> Attribute action Source #
style_ attrs is an attribute that will set the style
attribute of the associated DOM node to attrs.
style attributes not contained in attrs will be deleted.
import qualified Data.Map as M div_ [ style_ $ M.singleton "background" "red" ] [ ]
Classes
Class for rendering HTML
Methods
toHtml :: a -> ByteString Source #
Instances
| ToHtml [View a] Source # | Render a |
Defined in Miso.Render Methods toHtml :: [View a] -> ByteString Source # | |
| ToHtml (View a) Source # | Render a |
Defined in Miso.Render Methods toHtml :: View a -> ByteString Source # | |
| ToHtml (Component effect model action a) Source # | Render a |
Defined in Miso.Render Methods toHtml :: Component effect model action a -> ByteString Source # | |
Combinator
HTML MimeType used for servant APIs
type Home = "home" :> Get '[HTML] (Component model action)
Instances
| Accept HTML Source # | text/html;charset=utf-8 |
Defined in Miso.Render | |
| ToHtml a => MimeRender HTML a Source # | Render HTML from a servant API |
Defined in Miso.Render Methods mimeRender :: Proxy HTML -> a -> ByteString Source # | |
Mathml
Combinator
nodeMathml :: MisoString -> [Attribute action] -> [View action] -> View action Source #
Used to construct Node in View
Router
Classes
class HasRouter layout where Source #
This is similar to the HasServer class from servant-server.
It is the class responsible for making API combinators routable.
RouteT is used to build up the handler types. Router is returned.
Methods
mkRouter :: Proxy layout -> Proxy a -> RouteT layout a -> Router a Source #
Transform a mkRouter handler into a Router.
Instances
| HasRouter Raw Source # | Raw |
| HasRouter (View a) Source # | View |
| (HasRouter x, HasRouter y) => HasRouter (x :<|> y) Source # | Alternative |
| (HasRouter sublayout, FromHttpApiData x, KnownSymbol sym) => HasRouter (QueryParam sym x :> sublayout) Source # | QueryParam |
Defined in Miso.Router | |
| (HasRouter sublayout, FromHttpApiData x, KnownSymbol sym) => HasRouter (QueryParams sym x :> sublayout) Source # | QueryParams |
Defined in Miso.Router | |
| (HasRouter sublayout, KnownSymbol sym) => HasRouter (QueryFlag sym :> sublayout) Source # | QueryFlag |
| HasRouter sublayout => HasRouter (Header sym x :> sublayout) Source # | Header |
| (HasRouter sublayout, FromHttpApiData x) => HasRouter (Capture sym x :> sublayout) Source # | Capture |
| (HasRouter sublayout, KnownSymbol path) => HasRouter (path :> sublayout) Source # | Path |
| HasRouter (Verb m s c a) Source # | Verb |
Types
data RoutingError Source #
When routing, the router may fail to match a location.
Constructors
| Fail |
Instances
| Eq RoutingError Source # | |
Defined in Miso.Router Methods (==) :: RoutingError -> RoutingError -> Bool Source # (/=) :: RoutingError -> RoutingError -> Bool Source # | |
| Ord RoutingError Source # | |
Defined in Miso.Router Methods compare :: RoutingError -> RoutingError -> Ordering Source # (<) :: RoutingError -> RoutingError -> Bool Source # (<=) :: RoutingError -> RoutingError -> Bool Source # (>) :: RoutingError -> RoutingError -> Bool Source # (>=) :: RoutingError -> RoutingError -> Bool Source # max :: RoutingError -> RoutingError -> RoutingError Source # min :: RoutingError -> RoutingError -> RoutingError Source # | |
| Show RoutingError Source # | |
Defined in Miso.Router | |
Routing
route :: HasRouter layout => Proxy layout -> RouteT layout (m -> a) -> (m -> URI) -> m -> Either RoutingError a Source #
Executes router This is most likely the function you want to use. See haskell-miso.orgsharedCommon.hs for usage.
Run
Live reload
run :: JSM () -> IO () Source #
Entry point for a miso application
When compiling with jsaddle on native platforms
run will start a web server for live reload
of your miso application.
When compiling to WASM use 'jsaddle-wasm'.
When compiling to JS no special package is required (simply the id function).
JSM becomes a type synonym for IO
Exception
Types
data MisoException Source #
The MisoException type is used to catch Component-related mounting errors.
The two mounting errors that can occur during the lifetime of a miso application are
- Not Mounted Exception
This occurs if a user tries to call sample myComponent when myComponent is currently
not mounted on the DOM.
- Already Mounted Exception
It is a requirement that all Component be named uniquely
(this is to avoid runaway recursion during mounting).
If we detect a Component is attempting to be mounted twice
this exception will be raised.
Other exceptions can arise, but its up to the user to handle them in
the update function. All unhandled exceptions are caught in the event loop
and logged to the console with console.error()
Constructors
| NotMountedException MisoString | Thrown when a |
| AlreadyMountedException MisoString | Thrown when a |
Instances
| Eq MisoException Source # | |
Defined in Miso.Exception Methods (==) :: MisoException -> MisoException -> Bool Source # (/=) :: MisoException -> MisoException -> Bool Source # | |
| Show MisoException Source # | |
Defined in Miso.Exception | |
| Exception MisoException Source # | |
Defined in Miso.Exception Methods toException :: MisoException -> SomeException Source # fromException :: SomeException -> Maybe MisoException Source # | |
Functions
exception :: SomeException -> JSM JSVal Source #
Exception handler
Used to catch Component mounting exceptions
action `catch` exception
Subs
Mouse
Subscription
mouseSub :: (PointerEvent -> action) -> Sub action Source #
Captures mouse coordinates as they occur and writes them to an event sink
Keyboard
Types
type for arrow keys currently pressed 37 left arrow ( x = -1 ) 38 up arrow ( y = 1 ) 39 right arrow ( x = 1 ) 40 down arrow ( y = -1 )
Subscriptions
directionSub :: ([Int], [Int], [Int], [Int]) -> (Arrows -> action) -> Sub action Source #
Maps a specified list of keys to directions (up, down, left, right)
wasdSub :: (Arrows -> action) -> Sub action Source #
Maps Arrows onto a Keyboard subscription for directions (W+A+S+D keys)
History
Subscription
uriSub :: (URI -> action) -> Sub action Source #
Subscription for popstate events, from the History API
Functions
getCurrentURI :: JSM URI Source #
Retrieves current URI of page
replaceURI :: URI -> JSM () Source #
Replaces current URI on stack
Types
Represents a general universal resource identifier using its component parts.
For example, for the URI
foo://anonymous@www.haskell.org:42/ghc?query#frag
the components are:
Constructors
| URI | |
Instances
| Eq URI | |
| Data URI | |
Defined in Network.URI Methods gfoldl :: (forall d b. Data d => c (d -> b) -> d -> c b) -> (forall g. g -> c g) -> URI -> c URI Source # gunfold :: (forall b r. Data b => c (b -> r) -> c r) -> (forall r. r -> c r) -> Constr -> c URI Source # toConstr :: URI -> Constr Source # dataTypeOf :: URI -> DataType Source # dataCast1 :: Typeable t => (forall d. Data d => c (t d)) -> Maybe (c URI) Source # dataCast2 :: Typeable t => (forall d e. (Data d, Data e) => c (t d e)) -> Maybe (c URI) Source # gmapT :: (forall b. Data b => b -> b) -> URI -> URI Source # gmapQl :: (r -> r' -> r) -> r -> (forall d. Data d => d -> r') -> URI -> r Source # gmapQr :: (r' -> r -> r) -> r -> (forall d. Data d => d -> r') -> URI -> r Source # gmapQ :: (forall d. Data d => d -> u) -> URI -> [u] Source # gmapQi :: Int -> (forall d. Data d => d -> u) -> URI -> u Source # gmapM :: Monad m => (forall d. Data d => d -> m d) -> URI -> m URI Source # gmapMp :: MonadPlus m => (forall d. Data d => d -> m d) -> URI -> m URI Source # gmapMo :: MonadPlus m => (forall d. Data d => d -> m d) -> URI -> m URI Source # | |
| Ord URI | |
| Show URI | |
| Generic URI | |
| NFData URI | |
Defined in Network.URI | |
| type Rep URI | |
Defined in Network.URI type Rep URI = D1 (MetaData "URI" "Network.URI" "network-uri-2.6.1.0-AXUWDGZX7KMJoBmHCpAUoc" False) (C1 (MetaCons "URI" PrefixI True) ((S1 (MetaSel (Just "uriScheme") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 String) :*: S1 (MetaSel (Just "uriAuthority") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 (Maybe URIAuth))) :*: (S1 (MetaSel (Just "uriPath") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 String) :*: (S1 (MetaSel (Just "uriQuery") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 String) :*: S1 (MetaSel (Just "uriFragment") NoSourceUnpackedness NoSourceStrictness DecidedLazy) (Rec0 String))))) | |
Window
Subscription
windowSub :: MisoString -> Decoder r -> (r -> action) -> Sub action Source #
windowSub eventName decoder toAction provides a subscription
to listen to window level events.
windowCoordsSub :: ((Int, Int) -> action) -> Sub action Source #
Captures window coordinates changes as they occur and writes them to an event sink
windowPointerMoveSub :: (PointerEvent -> action) -> Sub action Source #
window.addEventListener ("pointermove", (event) => handle(event))
A Sub for handler PointerEvent on window
windowSubWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Sub action Source #
windowSubWithOptions options eventName decoder toAction provides a
subscription to listen to window level events.
Websocket
Types
data WebSocket action Source #
WebSocket connection messages
Constructors
| WebSocketMessage action | |
| WebSocketClose CloseCode WasClean Reason | |
| WebSocketOpen | |
| WebSocketError MisoString |
URL of Websocket server
Constructors
| URL MisoString |
Protocols for Websocket connection
Constructors
| Protocols [MisoString] |
data SocketState Source #
SocketState corresponding to current WebSocket connection
Constructors
| CONNECTING | 0 |
| OPEN | 1 |
| CLOSING | 2 |
| CLOSED | 3 |
Instances
Code corresponding to a closed connection https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
Constructors
| CLOSE_NORMAL | 1000, Normal closure; the connection successfully completed whatever purpose for which it was created. |
| CLOSE_GOING_AWAY | 1001, The endpoint is going away, either because of a server failure or because the browser is navigating away from the page that opened the connection. |
| CLOSE_PROTOCOL_ERROR | 1002, The endpoint is terminating the connection due to a protocol error. |
| CLOSE_UNSUPPORTED | 1003, The connection is being terminated because the endpoint received data of a type it cannot accept (for example, a textonly endpoint received binary data). |
| CLOSE_NO_STATUS | 1005, Reserved. Indicates that no status code was provided even though one was expected. |
| CLOSE_ABNORMAL | 1006, Reserved. Used to indicate that a connection was closed abnormally (that is, with no close frame being sent) when a status code is expected. |
| Unsupported_Data | 1007, The endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., nonUTF8 data within a text message). |
| Policy_Violation | 1008, The endpoint is terminating the connection because it received a message that violates its policy. This is a generic status code, used when codes 1003 and 1009 are not suitable. |
| CLOSE_TOO_LARGE | 1009, The endpoint is terminating the connection because a data frame was received that is too large. |
| Missing_Extension | 1010, The client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn't. |
| Internal_Error | 1011, The server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request. |
| Service_Restart | 1012, The server is terminating the connection because it is restarting. |
| Try_Again_Later | 1013, The server is terminating the connection due to a temporary condition, e.g. it is overloaded and is casting off some of its clients. |
| TLS_Handshake | 1015, Reserved. Indicates that the connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified). |
| OtherCode Int | OtherCode that is reserved and not in the range 0999 |
Instances
Wether or not the connection closed was done so cleanly
Reason for closed connection
Constructors
| Reason MisoString |
Subscription
websocketSub :: FromJSON m => URL -> Protocols -> (WebSocket m -> action) -> Sub action Source #
WebSocket subscription
getSocketState :: JSM SocketState Source #
Retrieves current status of WebSocket
SSE
Subscription
sseSub :: FromJSON msg => MisoString -> (SSE msg -> action) -> Sub action Source #
Server-sent events Subscription
Types
Server-sent events data
Constructors
| SSEMessage message | |
| SSEClose | |
| SSEError |
Storage
Local
getLocalStorage :: FromJSON model => MisoString -> JSM (Either String model) Source #
Retrieve a value stored under given key in local storage
setLocalStorage :: ToJSON model => MisoString -> model -> JSM () Source #
Set the value of a key in local storage.
setLocalStorage key value sets the value of key to value.
removeLocalStorage :: MisoString -> JSM () Source #
Removes an item from local storage
removeLocalStorage key removes the value of key.
clearLocalStorage :: JSM () Source #
Clear local storage
clearLocalStorage removes all values from local storage.
localStorageLength :: JSM Int Source #
Local storage length
localStorageLength returns the count of items in local storage
Session
getSessionStorage :: FromJSON model => MisoString -> JSM (Either String model) Source #
Retrieve a value stored under given key in session storage
setSessionStorage :: ToJSON model => MisoString -> model -> JSM () Source #
Set the value of a key in session storage.
setSessionStorage key value sets the value of key to value.
removeSessionStorage :: MisoString -> JSM () Source #
Removes an item from session storage.
removeSessionStorage key removes the value of key.
clearSessionStorage :: JSM () Source #
Clear session storage
clearSessionStorage removes all values from session storage.
sessionStorageLength :: JSM Int Source #
Session storage length
sessionStorageLength returns the count of items in session storage
Util
withFoldable :: Foldable t => t a -> (a -> b) -> [b] Source #
Generic map function, useful for creating Views from the elements of
some Foldable. Particularly handy for Maybe, as shown in the example
below.
view model =
div_ [] $
withFoldable (model ^. mSomeMaybeVal) $ someVal ->
p_ [] [ text $ "Hey, look at this value: " <> ms (show someVal) ]
conditionalViews :: Bool -> [View action] -> [View action] Source #
Hides the Views the condition is False. Shows them when the condition
is True.
(=:) :: k -> a -> Map k a Source #
Smart constructor for Attributes. This function is helpful when constructing numerous Attributes Example shown below.
div_ [ style_ $ ("background" =: "red" <> "width" =: "250px" <> "height" =: "250px") ] []
FFI
Retrieve high resolution time stamp
See https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
consoleLog :: MisoString -> JSM () Source #
Outputs a message to the web console
See https://developer.mozilla.org/en-US/docs/Web/API/Console/log
Console logging of JavaScript strings.
consoleLog' :: JSVal -> JSM () Source #
Console-logging of JSVal
consoleError :: MisoString -> JSM () Source #
Outputs an error message to the web console
See https://developer.mozilla.org/en-US/docs/Web/API/Console/error
Console logging of JavaScript strings.
consoleWarn :: MisoString -> JSM () Source #
Outputs a warning message to the web console
See https://developer.mozilla.org/en-US/docs/Web/API/Console/warn
Console logging of JavaScript strings.
getElementById :: MisoString -> JSM JSVal Source #
Returns an Element object representing the element whose id property matches the specified string.
See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
focus :: MisoString -> JSM () Source #
Fails silently if the element is not found.
Analogous to document.getElementById(id).focus().
blur :: MisoString -> JSM () Source #
Fails silently if the element is not found.
Analogous to document.getElementById(id).blur()
alert :: MisoString -> JSM () Source #
Calls the alert() function.