Copyright | (C) 2016-2025 David M. Johnson (@dmjio) |
---|---|
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 :: forall model (name :: Symbol) action. Eq model => (URI -> Component name model action) -> JSM ()
- (🍜) :: forall model (name :: Symbol) action. Eq model => (URI -> Component name model action) -> JSM ()
- startComponent :: forall model (name :: Symbol) action. Eq model => Component name model action -> JSM ()
- withSink :: (Sink action -> JSM ()) -> Effect model action
- type Sink action = action -> JSM ()
- sample :: forall (name :: Symbol) model action. KnownSymbol name => Component name model action -> JSM model
- sample' :: MisoString -> JSM model
- notify :: forall (name :: Symbol) model action. KnownSymbol name => Component name model action -> action -> JSM ()
- notify' :: MisoString -> action -> JSM ()
- startSub :: SubName -> Sub action -> Effect action model
- stopSub :: SubName -> Effect action model
- type Sub action = Sink action -> JSM ()
- type SubName = MisoString
- issue :: action -> Effect model action
- batch :: [JSM action] -> Effect model action
- io :: JSM action -> Effect model action
- io_ :: JSM () -> Effect model action
- for :: Foldable f => JSM (f action) -> Effect model action
- component :: forall (name :: Symbol) model action a. (Eq model, KnownSymbol name) => Component name model action -> View a
- componentWith :: forall (name :: Symbol) model action a. (Eq model, KnownSymbol name) => Component name model action -> Maybe Key -> [Attribute a] -> View a
- componentWith_ :: Eq model => Component "" model action -> Maybe Key -> [Attribute a] -> View a
- component_ :: Eq model => Component "" model action -> View a
- defaultComponent :: forall model action (name :: Symbol). model -> (action -> Effect model action) -> (model -> View action) -> Component name model action
- getMountPoint :: Maybe MisoString -> MisoString
- data Attribute action
- = Property MisoString Value
- | Event (Sink action -> Object -> LogLevel -> Events -> JSM ())
- | Styles (Map MisoString MisoString)
- data CSS
- data Component (name :: Symbol) model action = Component {}
- newtype Key = Key MisoString
- data LogLevel
- type MountPoint = MisoString
- data NS
- data SomeComponent = Eq model => SomeComponent (Component name model action)
- class ToKey key where
- class ToView a where
- type ToViewAction a
- toView :: a -> View (ToViewAction a)
- type family ToViewAction a
- data View action
- = VNode NS MisoString (Maybe Key) [Attribute action] [View action]
- | VText MisoString
- | VTextRaw MisoString
- | VComp MisoString [Attribute action] (Maybe Key) SomeComponent
- (#>) :: JSM action -> model -> Effect model action
- (<#) :: model -> JSM action -> Effect model action
- batch :: [JSM action] -> Effect model action
- batchEff :: model -> [JSM action] -> Effect model action
- batch_ :: [JSM ()] -> Effect model action
- effectSub :: model -> (Sink action -> JSM ()) -> Effect model action
- for :: Foldable f => JSM (f action) -> Effect model action
- io :: JSM action -> Effect model action
- io_ :: JSM () -> Effect model action
- issue :: action -> Effect model action
- mapSub :: (a -> b) -> Sub a -> Sub b
- noEff :: model -> Effect model action
- runEffect :: Effect model action -> MisoString -> model -> (model, [Sink action -> JSM ()])
- scheduleIO :: JSM action -> Effect model action
- scheduleIOFor_ :: Foldable f => JSM (f action) -> Effect model action
- scheduleIO_ :: JSM () -> Effect model action
- scheduleSub :: (Sink action -> JSM ()) -> Effect model action
- withSink :: (Sink action -> JSM ()) -> Effect model action
- type Effect model action = EffectCore model action ()
- type Sink action = action -> JSM ()
- type Sub action = Sink action -> JSM ()
- type SubName = MisoString
- at :: [MisoString] -> (Value -> Parser a) -> Decoder a
- checkedDecoder :: Decoder Checked
- emptyDecoder :: Decoder ()
- keyInfoDecoder :: Decoder KeyInfo
- keycodeDecoder :: Decoder KeyCode
- pointerDecoder :: Decoder PointerEvent
- valueDecoder :: Decoder MisoString
- defaultEvents :: Map MisoString Capture
- defaultOptions :: Options
- dragEvents :: Map MisoString Capture
- keyboardEvents :: Map MisoString Capture
- mouseEvents :: Map MisoString Capture
- pointerEvents :: Map MisoString Capture
- data DecodeTarget
- = DecodeTarget [MisoString]
- | DecodeTargets [[MisoString]]
- data Decoder a = Decoder {
- decoder :: Value -> Parser a
- decodeAt :: DecodeTarget
- newtype AllowDrop = AllowDrop Bool
- type Capture = Bool
- newtype Checked = Checked Bool
- type Events = Map MisoString Capture
- newtype KeyCode = KeyCode Int
- data KeyInfo = KeyInfo {}
- data Options = Options {}
- data PointerEvent = PointerEvent {}
- data PointerType
- boolProp :: MisoString -> Bool -> Attribute action
- doubleProp :: MisoString -> Double -> Attribute action
- intProp :: MisoString -> Int -> Attribute action
- integerProp :: MisoString -> Integer -> Attribute action
- prop :: ToJSON a => MisoString -> a -> Attribute action
- stringProp :: MisoString -> String -> Attribute action
- textProp :: MisoString -> MisoString -> Attribute action
- a_ :: [Attribute action] -> [View action] -> View action
- abbr_ :: [Attribute action] -> [View action] -> View action
- address_ :: [Attribute action] -> [View action] -> View action
- area_ :: [Attribute action] -> [View action] -> View action
- article_ :: [Attribute action] -> [View action] -> View action
- aside_ :: [Attribute action] -> [View action] -> View action
- audio_ :: [Attribute action] -> [View action] -> View action
- b_ :: [Attribute action] -> [View action] -> View action
- base_ :: [Attribute action] -> [View action] -> View action
- bdi_ :: [Attribute action] -> [View action] -> View action
- bdo_ :: [Attribute action] -> [View action] -> View action
- blockquote_ :: [Attribute action] -> [View action] -> View action
- body_ :: [Attribute action] -> [View action] -> View action
- br_ :: [Attribute action] -> View action
- button_ :: [Attribute action] -> [View action] -> View action
- canvas_ :: [Attribute action] -> [View action] -> View action
- caption_ :: [Attribute action] -> [View action] -> View action
- cite_ :: [Attribute action] -> [View action] -> View action
- code_ :: [Attribute action] -> [View action] -> View action
- col_ :: [Attribute action] -> View action
- colgroup_ :: [Attribute action] -> [View action] -> View action
- datalist_ :: [Attribute action] -> [View action] -> View action
- dd_ :: [Attribute action] -> [View action] -> View action
- del_ :: [Attribute action] -> [View action] -> View action
- details_ :: [Attribute action] -> [View action] -> View action
- dfn_ :: [Attribute action] -> [View action] -> View action
- dialog_ :: [Attribute action] -> [View action] -> View action
- div_ :: [Attribute action] -> [View action] -> View action
- dl_ :: [Attribute action] -> [View action] -> View action
- doctype_ :: View action
- dt_ :: [Attribute action] -> [View action] -> View action
- em_ :: [Attribute action] -> [View action] -> View action
- embed_ :: [Attribute action] -> View action
- fencedframe_ :: [Attribute action] -> [View action] -> View action
- fieldset_ :: [Attribute action] -> [View action] -> View action
- figcaption_ :: [Attribute action] -> [View action] -> View action
- figure_ :: [Attribute action] -> [View action] -> View action
- footer_ :: [Attribute action] -> [View action] -> View action
- form :: [Attribute action] -> [View 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
- head_ :: [Attribute action] -> [View action] -> View action
- header_ :: [Attribute action] -> [View action] -> View action
- hgroup_ :: [Attribute action] -> [View action] -> View action
- hr_ :: [Attribute action] -> View action
- html_ :: [Attribute action] -> [View action] -> View action
- i_ :: [Attribute action] -> [View action] -> View action
- iframe_ :: [Attribute action] -> [View action] -> View action
- img_ :: [Attribute action] -> View action
- input_ :: [Attribute action] -> View action
- ins_ :: [Attribute action] -> [View action] -> View action
- kbd_ :: [Attribute action] -> [View action] -> View action
- label_ :: [Attribute action] -> [View action] -> View action
- legend_ :: [Attribute action] -> [View action] -> View action
- liKeyed_ :: Key -> [Attribute action] -> [View action] -> View action
- li_ :: [Attribute action] -> [View action] -> View action
- link_ :: [Attribute action] -> View action
- main_ :: [Attribute action] -> [View action] -> View action
- map_ :: [Attribute action] -> [View action] -> View action
- mark_ :: [Attribute action] -> [View action] -> View action
- menu_ :: [Attribute action] -> [View action] -> View action
- meta_ :: [Attribute action] -> View action
- meter_ :: [Attribute action] -> [View action] -> View action
- nav_ :: [Attribute action] -> [View action] -> View action
- nodeHtml :: MisoString -> [Attribute action] -> [View action] -> View action
- nodeHtmlKeyed :: MisoString -> Key -> [Attribute action] -> [View action] -> View action
- noscript_ :: [Attribute action] -> [View action] -> View action
- object_ :: [Attribute action] -> [View action] -> View action
- ol_ :: [Attribute action] -> [View action] -> View action
- optgroup_ :: [Attribute action] -> [View action] -> View action
- option_ :: [Attribute action] -> [View action] -> View action
- output_ :: [Attribute action] -> [View action] -> View action
- p_ :: [Attribute action] -> [View action] -> View action
- picture_ :: [Attribute action] -> [View action] -> View action
- pre_ :: [Attribute action] -> [View action] -> View action
- progress_ :: [Attribute action] -> [View action] -> View action
- q_ :: [Attribute action] -> [View action] -> View action
- rp_ :: [Attribute action] -> [View action] -> View action
- rt_ :: [Attribute action] -> [View action] -> View action
- ruby_ :: [Attribute action] -> [View action] -> View action
- s_ :: [Attribute action] -> [View action] -> View action
- samp_ :: [Attribute action] -> [View action] -> View action
- script_ :: [Attribute action] -> MisoString -> View action
- search_ :: [Attribute action] -> [View action] -> View action
- section_ :: [Attribute action] -> [View action] -> View action
- select_ :: [Attribute action] -> [View action] -> View action
- slot_ :: [Attribute action] -> [View action] -> View action
- small_ :: [Attribute action] -> [View action] -> View action
- source_ :: [Attribute action] -> View action
- span_ :: [Attribute action] -> [View action] -> View action
- strong_ :: [Attribute action] -> [View action] -> View action
- style_ :: [Attribute action] -> MisoString -> View action
- sub_ :: [Attribute action] -> [View action] -> View action
- summary_ :: [Attribute action] -> [View action] -> View action
- sup_ :: [Attribute action] -> [View action] -> View action
- table_ :: [Attribute action] -> [View action] -> View action
- tbody_ :: [Attribute action] -> [View action] -> View action
- td_ :: [Attribute action] -> [View action] -> View action
- template_ :: [Attribute action] -> [View action] -> View action
- textarea_ :: [Attribute action] -> [View action] -> View action
- tfoot_ :: [Attribute action] -> [View action] -> View action
- th_ :: [Attribute action] -> [View action] -> View action
- thead_ :: [Attribute action] -> [View action] -> View action
- time_ :: [Attribute action] -> [View action] -> View action
- trKeyed_ :: Key -> [Attribute action] -> [View action] -> View action
- tr_ :: [Attribute action] -> [View action] -> View action
- track_ :: [Attribute action] -> View action
- u_ :: [Attribute action] -> [View action] -> View action
- ul_ :: [Attribute action] -> [View action] -> View action
- var_ :: [Attribute action] -> [View action] -> View action
- video_ :: [Attribute action] -> [View action] -> View action
- wbr_ :: [Attribute action] -> View action
- on :: MisoString -> Decoder r -> (r -> action) -> Attribute action
- onBeforeCreated :: action -> Attribute action
- onBeforeDestroyed :: action -> Attribute action
- onBeforeMounted :: action -> Attribute action
- onBeforeUnmounted :: action -> Attribute action
- onBlur :: action -> Attribute action
- onChange :: (MisoString -> action) -> Attribute action
- onChecked :: (Checked -> action) -> Attribute action
- onClick :: action -> Attribute action
- onCreated :: action -> Attribute action
- onDestroyed :: action -> Attribute action
- onDoubleClick :: action -> Attribute action
- onDrag :: action -> Attribute action
- onDragEnd :: action -> Attribute action
- onDragEnter :: action -> Attribute action
- onDragLeave :: action -> Attribute action
- onDragOver :: action -> Attribute action
- onDragStart :: action -> Attribute action
- onDrop :: AllowDrop -> action -> Attribute action
- onFocus :: action -> Attribute action
- onInput :: (MisoString -> action) -> Attribute action
- onKeyDown :: (KeyCode -> action) -> Attribute action
- onKeyDownWithInfo :: (KeyInfo -> action) -> Attribute action
- onKeyPress :: (KeyCode -> action) -> Attribute action
- onKeyUp :: (KeyCode -> action) -> Attribute action
- onMounted :: action -> Attribute action
- onMountedWith :: (MisoString -> action) -> Attribute action
- onMouseDown :: action -> Attribute action
- onMouseEnter :: action -> Attribute action
- onMouseLeave :: action -> Attribute action
- onMouseOut :: action -> Attribute action
- onMouseOver :: action -> Attribute action
- onMouseUp :: action -> Attribute action
- onPointerCancel :: (PointerEvent -> action) -> Attribute action
- onPointerDown :: (PointerEvent -> action) -> Attribute action
- onPointerEnter :: (PointerEvent -> action) -> Attribute action
- onPointerLeave :: (PointerEvent -> action) -> Attribute action
- onPointerMove :: (PointerEvent -> action) -> Attribute action
- onPointerOut :: (PointerEvent -> action) -> Attribute action
- onPointerOver :: (PointerEvent -> action) -> Attribute action
- onPointerUp :: (PointerEvent -> action) -> Attribute action
- onSelect :: (MisoString -> action) -> Attribute action
- onSubmit :: action -> Attribute action
- onUnmounted :: action -> Attribute action
- onUnmountedWith :: (MisoString -> action) -> Attribute action
- onWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Attribute action
- acceptCharset_ :: MisoString -> Attribute action
- accept_ :: MisoString -> Attribute action
- action_ :: MisoString -> Attribute action
- align_ :: MisoString -> Attribute action
- alt_ :: MisoString -> Attribute action
- async_ :: MisoString -> Attribute action
- autocomplete_ :: Bool -> Attribute action
- autofocus_ :: Bool -> Attribute action
- autoplay_ :: Bool -> Attribute action
- autosave_ :: MisoString -> Attribute action
- charset_ :: MisoString -> Attribute action
- checked_ :: Bool -> Attribute action
- classList_ :: [(MisoString, Bool)] -> Attribute action
- class_ :: MisoString -> Attribute action
- cols_ :: MisoString -> Attribute action
- colspan_ :: MisoString -> Attribute action
- content_ :: MisoString -> Attribute action
- controls_ :: Bool -> Attribute action
- coords_ :: MisoString -> Attribute action
- data_ :: MisoString -> MisoString -> Attribute action
- defaultValue_ :: MisoString -> Attribute action
- default_ :: Bool -> Attribute action
- defer_ :: MisoString -> Attribute action
- disabled_ :: Bool -> Attribute action
- downloadAs_ :: MisoString -> Attribute action
- download_ :: MisoString -> Attribute action
- enctype_ :: MisoString -> Attribute action
- for_ :: MisoString -> Attribute action
- form_ :: MisoString -> Attribute action
- formation_ :: MisoString -> Attribute action
- headers_ :: MisoString -> Attribute action
- height_ :: MisoString -> Attribute action
- hidden_ :: Bool -> Attribute action
- href_ :: MisoString -> Attribute action
- hreflang_ :: MisoString -> Attribute action
- httpEquiv_ :: MisoString -> Attribute action
- id_ :: MisoString -> Attribute action
- ismap_ :: MisoString -> Attribute action
- kind_ :: MisoString -> Attribute action
- lang_ :: MisoString -> Attribute action
- language_ :: MisoString -> Attribute action
- list_ :: MisoString -> Attribute action
- loading_ :: MisoString -> Attribute action
- loop_ :: Bool -> Attribute action
- max_ :: MisoString -> Attribute action
- maxlength_ :: MisoString -> Attribute action
- media_ :: MisoString -> Attribute action
- method_ :: MisoString -> Attribute action
- min_ :: MisoString -> Attribute action
- minlength_ :: MisoString -> Attribute action
- multiple_ :: Bool -> Attribute action
- name_ :: MisoString -> Attribute action
- novalidate_ :: Bool -> Attribute action
- pattern_ :: MisoString -> Attribute action
- ping_ :: MisoString -> Attribute action
- placeholder_ :: MisoString -> Attribute action
- poster_ :: MisoString -> Attribute action
- preload_ :: MisoString -> Attribute action
- readonly_ :: Bool -> Attribute action
- ref_ :: MisoString -> Attribute action
- rel_ :: MisoString -> Attribute action
- required_ :: Bool -> Attribute action
- reversed_ :: MisoString -> Attribute action
- rows_ :: MisoString -> Attribute action
- rowspan_ :: MisoString -> Attribute action
- sandbox_ :: MisoString -> Attribute action
- scope_ :: MisoString -> Attribute action
- scoped_ :: MisoString -> Attribute action
- seamless_ :: MisoString -> Attribute action
- selected_ :: Bool -> Attribute action
- shape_ :: MisoString -> Attribute action
- size_ :: MisoString -> Attribute action
- src_ :: MisoString -> Attribute action
- srcdoc_ :: MisoString -> Attribute action
- srclang_ :: MisoString -> Attribute action
- step_ :: MisoString -> Attribute action
- target_ :: MisoString -> Attribute action
- title_ :: MisoString -> Attribute action
- type_ :: MisoString -> Attribute action
- usemap_ :: MisoString -> Attribute action
- value_ :: MisoString -> Attribute action
- width_ :: MisoString -> Attribute action
- wrap_ :: MisoString -> Attribute action
- node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action
- rawHtml :: MisoString -> View action
- text :: MisoString -> View action
- textRaw :: MisoString -> View action
- newtype VTree = VTree {}
- data Attribute action
- = Property MisoString Value
- | Event (Sink action -> Object -> LogLevel -> Events -> JSM ())
- | Styles (Map MisoString MisoString)
- newtype Key = Key MisoString
- data NS
- class ToView a where
- type ToViewAction a
- toView :: a -> View (ToViewAction a)
- type family ToViewAction a
- data View action
- = VNode NS MisoString (Maybe Key) [Attribute action] [View action]
- | VText MisoString
- | VTextRaw MisoString
- | VComp MisoString [Attribute action] (Maybe Key) SomeComponent
- data HTML
- class ToHtml a where
- toHtml :: a -> ByteString
- route :: forall {k} (layout :: k) m a. HasRouter layout => Proxy layout -> RouteT layout (m -> a) -> (m -> URI) -> m -> Either RoutingError a
- class HasRouter (layout :: k) where
- type family RouteT (layout :: k) a
- data Router a
- data RoutingError = Fail
- run :: JSM () -> IO ()
- exception :: SomeException -> JSM JSVal
- data MisoException
- back :: JSM ()
- forward :: JSM ()
- getURI :: JSM URI
- go :: Int -> JSM ()
- pushURI :: URI -> JSM ()
- replaceURI :: URI -> JSM ()
- uriSub :: (URI -> action) -> Sub action
- 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
- mouseSub :: (PointerEvent -> action) -> Sub action
- sseSub :: FromJSON msg => MisoString -> (SSE msg -> action) -> Sub action
- close :: JSM ()
- connect :: URL -> Protocols -> JSM ()
- getSocketState :: JSM SocketState
- send :: ToJSON a => a -> JSM ()
- websocketSub :: FromJSON m => URL -> Protocols -> (WebSocket m -> action) -> Sub action
- windowCoordsSub :: ((Int, Int) -> action) -> Sub action
- windowPointerMoveSub :: (PointerEvent -> action) -> Sub action
- windowSub :: MisoString -> Decoder r -> (r -> action) -> Sub action
- windowSubWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Sub action
- data Arrows = Arrows {}
- data SSE message
- = SSEMessage message
- | SSEClose
- | SSEError
- data CloseCode
- newtype Protocols = Protocols [MisoString]
- newtype Reason = Reason MisoString
- data SocketState
- = CONNECTING
- | OPEN
- | CLOSING
- | CLOSED
- newtype URL = URL MisoString
- newtype WasClean = WasClean Bool
- data WebSocket action
- data URI = URI {}
- clearLocalStorage :: JSM ()
- clearSessionStorage :: JSM ()
- getLocalStorage :: FromJSON model => MisoString -> JSM (Either String model)
- getSessionStorage :: FromJSON model => MisoString -> JSM (Either String model)
- localStorageLength :: JSM Int
- removeLocalStorage :: MisoString -> JSM ()
- removeSessionStorage :: MisoString -> JSM ()
- sessionStorageLength :: JSM Int
- setLocalStorage :: ToJSON model => MisoString -> model -> JSM ()
- setSessionStorage :: ToJSON model => MisoString -> model -> JSM ()
- fetchJSON :: FromJSON action => MisoString -> MisoString -> Maybe MisoString -> [(MisoString, MisoString)] -> (action -> JSM ()) -> (MisoString -> JSM ()) -> JSM ()
- conditionalViews :: Bool -> [View action] -> [View action]
- withFoldable :: Foldable t => t a -> (a -> b) -> [b]
- addStyle :: MisoString -> JSM ()
- addStyleSheet :: MisoString -> JSM ()
- alert :: MisoString -> JSM ()
- asyncCallback :: JSM () -> JSM Function
- blur :: MisoString -> JSM ()
- consoleError :: MisoString -> JSM ()
- consoleLog :: MisoString -> JSM ()
- consoleLog' :: JSVal -> JSM ()
- consoleWarn :: MisoString -> JSM ()
- focus :: MisoString -> JSM ()
- getElementById :: MisoString -> JSM JSVal
- newImage :: MisoString -> JSM Image
- now :: JSM Double
- reload :: JSM ()
- set :: ToJSVal v => MisoString -> v -> Object -> JSM ()
- syncCallback :: JSM () -> JSM Function
- syncCallback1 :: (JSVal -> JSM ()) -> JSM Function
- newtype Image = Image JSVal
- ask :: MonadReader r m => m r
- modify :: MonadState s m => (s -> s) -> m ()
- modify' :: MonadState s m => (s -> s) -> m ()
- get :: MonadState s m => m s
- gets :: MonadState s m => (s -> a) -> m a
- put :: MonadState s m => s -> m ()
- tell :: MonadWriter w m => w -> m ()
API
Entry
miso :: forall model (name :: Symbol) action. Eq model => (URI -> Component name model action) -> 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.
(🍜) :: forall model (name :: Symbol) action. Eq model => (URI -> Component name model action) -> JSM () Source #
Alias for miso
.
startComponent :: forall model (name :: Symbol) action. Eq model => Component name model action -> JSM () Source #
Runs a miso application
Initializes application at mountPoint
(defaults to <body> when Nothing
)
Sink
withSink :: (Sink action -> JSM ()) -> Effect model action Source #
withSink
allows users to access the sink of the Component
or top-level
Component
in their application. This is useful for introducing IO
into the system.
A synonym for tell
, specialized to Effect
.
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
which introduces a leaky-abstraction.Sub
scription
update FetchJSON = withSink $ \sink -> getJSON (sink . ReceivedJSON) (sink . HandleError)
type Sink action = action -> JSM () Source #
Function to asynchronously dispatch actions to the update
function.
Sampling
sample :: forall (name :: Symbol) model action. KnownSymbol name => Component name model action -> 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.
sample' :: MisoString -> JSM model Source #
Like sample
except used for dynamic Component
where the component-id
has been retrieved via ask
.
Message Passing
notify :: forall (name :: Symbol) model action. KnownSymbol name => Component name model action -> action -> JSM () Source #
Used for bidirectional communication between components.
Specify the mounted Component
you'd like to target.
This function is used to send messages to Component
that are mounted on
other parts of the DOM tree.
notify' :: MisoString -> action -> JSM () Source #
Like notify
except used for dynamic Component
where the component-id
has been retrieved via ask
.
Subscription
type SubName = MisoString Source #
SubName
The name of a Sub
(e.g. "websocket")
Effect
issue :: action -> Effect model action Source #
Issue a new Action
to be processed by update
.
update :: Action -> Effect Model Action update = \case Click -> issue HelloWorld
Since: 1.9.0.0
batch :: [JSM action] -> Effect model action Source #
Smart constructor for an Effect
with multiple actions.
io_ :: JSM () -> Effect model action Source #
Like io_
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.
component :: forall (name :: Symbol) model action a. (Eq model, KnownSymbol name) => Component name model action -> View a Source #
Used in the view
function to embed an Component
into another Component
Use this function if you'd like send messages to this Component
at name
via
notify
or to read the state of this Component
via sample
.
componentWith :: forall (name :: Symbol) model action a. (Eq model, KnownSymbol name) => Component name model action -> Maybe Key -> [Attribute a] -> View a Source #
Like component
except it allows the specification of Key
and Attribute action
.
componentWith_ :: Eq model => Component "" model action -> Maybe Key -> [Attribute a] -> View a Source #
Like component_
except it allows the specification of Key
and Attribute action
. Note: the name
parameter is ()
here.
This symbolizes the fact that the Component
is dynamically generated
and it's component-id can only be known at runtime.
component_ :: Eq model => Component "" model action -> View a Source #
Like component
, but uses a dynamically generated name
(enforced via Component
).
The component name is dynamically generated at runtime and available via ask
.
This is for dynamic Component
creation, where a mounted Component
isn't necessarily
statically known. Use this during circumstances where a parent would like
to dynamically generate / destroy n-many children in response to user input.
Note: the name
parameter is ()
here.
This symbolizes the fact that the Component
is dynamically generated
and it's component-id can only be known at runtime.
defaultComponent :: forall model action (name :: Symbol). model -> (action -> Effect model action) -> (model -> View action) -> Component name model action Source #
Smart constructor for Component
with sane defaults.
getMountPoint :: Maybe MisoString -> MisoString Source #
Convenience for extracting mount point
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 ()) | |
Styles (Map MisoString MisoString) |
Allow users to express CSS and append it to head before the first draw
Href "http://domain.com/style.css
Constructors
Href MisoString |
|
Style MisoString |
|
data Component (name :: Symbol) model action Source #
Application entry point
Constructors
Component | |
Fields
|
Instances
ToView (Component name model action) Source # | |||||
Defined in Miso.Types Associated Types
| |||||
type ToViewAction (Component name model action) 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 |
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 |
type MountPoint = MisoString Source #
mountPoint
for Component
, e.g "body"
data SomeComponent Source #
Existential wrapper used to allow the nesting of Component
in Component
Constructors
Eq model => SomeComponent (Component name model action) |
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 JSString Source # | Convert |
ToKey Key Source # | Identity instance |
ToKey Text Source # | Convert |
ToKey String Source # | Convert |
ToKey Double Source # | Convert |
ToKey Float Source # | Convert |
ToKey Int Source # | Convert |
ToKey Word Source # | Convert |
Convenience class for using View
Associated Types
type ToViewAction a Source #
Methods
toView :: a -> View (ToViewAction a) Source #
Instances
ToView (View action) Source # | |||||
Defined in Miso.Types Associated Types
| |||||
ToView (Component name model action) Source # | |||||
Defined in Miso.Types Associated Types
|
type family ToViewAction a Source #
Instances
type ToViewAction (View action) Source # | |
Defined in Miso.Types | |
type ToViewAction (Component name model action) Source # | |
Defined in Miso.Types |
Core type for constructing a virtual DOM in Haskell
Constructors
VNode NS MisoString (Maybe Key) [Attribute action] [View action] | |
VText MisoString | |
VTextRaw MisoString | |
VComp MisoString [Attribute action] (Maybe Key) SomeComponent |
Instances
Functor View Source # | |||||
HasRouter (View a :: Type) Source # | View | ||||
HasLink (View a :: Type) Source # | For constructing type-safe links | ||||
IsString (View a) Source # |
| ||||
Defined in Miso.Types Methods fromString :: String -> View a # | |||||
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 # | |||||
ToView (View action) Source # | |||||
Defined in Miso.Types Associated Types
| |||||
type RouteT (View a :: Type) x Source # | |||||
Defined in Miso.Router | |||||
type MkLink (View a :: Type) b Source # | |||||
Defined in Miso.Types | |||||
type ToViewAction (View action) Source # | |||||
Defined in Miso.Types |
Effect
(#>) :: JSM action -> model -> Effect model action infixr 0 Source #
Effect
smart constructor, flipped
(<#) :: model -> JSM action -> Effect model action infixl 0 Source #
Smart constructor for an Effect
with exactly one action.
batch :: [JSM action] -> Effect model action Source #
Smart constructor for an Effect
with multiple actions.
io_ :: JSM () -> Effect model action Source #
Like io_
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.
issue :: action -> Effect model action Source #
Issue a new Action
to be processed by update
.
update :: Action -> Effect Model Action update = \case Click -> issue HelloWorld
Since: 1.9.0.0
runEffect :: Effect model action -> MisoString -> model -> (model, [Sink action -> JSM ()]) Source #
Internal function used to unwrap an EffectCore
scheduleIOFor_ :: Foldable f => JSM (f action) -> Effect model action Source #
Deprecated: Please use for
instead
scheduleSub :: (Sink action -> JSM ()) -> Effect model action Source #
Deprecated: Please use withSink
instead
withSink :: (Sink action -> JSM ()) -> Effect model action Source #
withSink
allows users to access the sink of the Component
or top-level
Component
in their application. This is useful for introducing IO
into the system.
A synonym for tell
, specialized to Effect
.
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
which introduces a leaky-abstraction.Sub
scription
update FetchJSON = withSink $ \sink -> getJSON (sink . ReceivedJSON) (sink . HandleError)
type Effect model action = EffectCore model action () Source #
A monad for succinctly expressing model transitions in the update
function.
Effect
is a RWS
, where the State
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 tell
from the mtl
library and a single action can be scheduled using io_
.
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:
myComponent = Component { update = \case MyAction1 -> do field1 .= value1 counter += 1 MyAction2 -> do field2 %= f io_ $ do putStrLn "Hello" putStrLn "World!" , ... }
type Sink action = action -> JSM () Source #
Function to asynchronously dispatch actions to the update
function.
type SubName = MisoString Source #
SubName
The name of a Sub
(e.g. "websocket")
Event
at :: [MisoString] -> (Value -> Parser a) -> Decoder a Source #
Smart constructor for building a Decoder
.
checkedDecoder :: Decoder Checked Source #
Retrieves "checked" field in Decoder
emptyDecoder :: Decoder () Source #
Empty decoder for use with events like "click" that do not return any meaningful values
keyInfoDecoder :: Decoder KeyInfo Source #
Retrieves either "keyCode", "which" or "charCode" field in Decoder
,
along with shift, ctrl, meta and alt.
keycodeDecoder :: Decoder KeyCode Source #
Retrieves either "keyCode", "which" or "charCode" field in Decoder
pointerDecoder :: Decoder PointerEvent Source #
Pointer decoder for use with events like "onpointerover"
valueDecoder :: Decoder MisoString Source #
Retrieves "value" field in Decoder
defaultEvents :: Map MisoString Capture Source #
Default delegated events
defaultOptions :: Options Source #
Default value for Options
.
defaultOptions = Options { preventDefault = False, stopPropagation = False }
dragEvents :: Map MisoString Capture Source #
Drag events
keyboardEvents :: Map MisoString Capture Source #
Keyboard events
mouseEvents :: Map MisoString Capture Source #
Mouse events
pointerEvents :: Map MisoString Capture Source #
Pointer 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 -> JSM JSVal Source # toJSValListOf :: [DecodeTarget] -> JSM JSVal Source # |
Decoder data type for parsing events
Related to using drop-related events
Capture
Used to determine if *capture* should be set when using addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture
Type used for Checkbox events.
Type used for Keyboard events.
See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Browser_compatibility
Type useful for both KeyCode and additional key press information.
Constructors
KeyInfo | |
Options for handling event propagation.
Constructors
Options | |
Fields |
Instances
Generic Options Source # | |||||
Defined in Miso.Event.Types Associated Types
| |||||
Show Options Source # | |||||
Eq 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-inplace" 'False) (C1 ('MetaCons "Options" 'PrefixI 'True) (S1 ('MetaSel ('Just "preventDefault") 'NoSourceUnpackedness 'NoSourceStrictness 'DecidedLazy) (Rec0 Bool) :*: S1 ('MetaSel ('Just "stopPropagation") 'NoSourceUnpackedness 'NoSourceStrictness 'DecidedLazy) (Rec0 Bool))) |
data PointerEvent Source #
Type used for Pointer events. https://w3c.github.io/pointerevents
Constructors
PointerEvent | |
Instances
Show PointerEvent Source # | |
Defined in Miso.Event.Types Methods showsPrec :: Int -> PointerEvent -> ShowS # show :: PointerEvent -> String # showList :: [PointerEvent] -> ShowS # | |
Eq PointerEvent Source # | |
Defined in Miso.Event.Types |
data PointerType Source #
Instances
FromJSON PointerType Source # | |
Defined in Miso.Event.Types Methods parseJSON :: Value -> Parser PointerType Source # parseJSONList :: Value -> Parser [PointerType] Source # | |
Show PointerType Source # | |
Defined in Miso.Event.Types Methods showsPrec :: Int -> PointerType -> ShowS # show :: PointerType -> String # showList :: [PointerType] -> ShowS # | |
Eq PointerType Source # | |
Defined in Miso.Event.Types |
Property
doubleProp :: MisoString -> Double -> Attribute action Source #
Set field to Double
value
integerProp :: MisoString -> Integer -> Attribute action Source #
Set field to Integer
value
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
.
stringProp :: MisoString -> String -> Attribute action Source #
Set field to String
value
textProp :: MisoString -> MisoString -> Attribute action Source #
Set field to Text
value
Html
form :: [Attribute action] -> [View action] -> View action Source #
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.
nodeHtmlKeyed :: MisoString -> Key -> [Attribute action] -> [View action] -> View action Source #
Construct a node with a Key
script_ :: [Attribute action] -> MisoString -> View action Source #
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_ :: [Attribute action] -> MisoString -> View action Source #
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/stable/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>"
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_ "+" ]
onBeforeCreated :: action -> Attribute action Source #
onBeforeCreated action
is an event that gets called before the DOM element
is created on the DOM. The action
is given the DOM element that was
removed from the DOM tree.
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.
onBeforeMounted :: action -> Attribute action Source #
onBeforeMounted action
is an event that gets called before the actual DOM
element is created.
onBeforeUnmounted :: action -> Attribute action Source #
onBeforeUnmounted action
is an event that gets called before the DOM element
is removed from the DOM.
onChange :: (MisoString -> action) -> Attribute action Source #
onCreated :: action -> Attribute action Source #
onCreated action
is an event that gets called after the actual DOM
element is created.
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.
onDoubleClick :: action -> Attribute action Source #
onDragEnter :: action -> Attribute action Source #
onDragLeave :: action -> Attribute action Source #
onDragOver :: action -> Attribute action Source #
onDragStart :: action -> Attribute action Source #
onInput :: (MisoString -> action) -> Attribute action Source #
onKeyDownWithInfo :: (KeyInfo -> action) -> Attribute action Source #
onKeyPress :: (KeyCode -> action) -> Attribute action Source #
onMounted :: action -> Attribute action Source #
onMounted action
is an event that gets called after the actual DOM
element is created.
onMountedWith :: (MisoString -> action) -> Attribute action Source #
onMountedWith action
is an event that gets called after the actual DOM
element is created. It returns the component-id from the component.
Returning component-id is useful when creating Component
dynamically.
This way the parent can maintain a Map
of the child Component
IDs. When
the parent Component
wants to send a child Component
a message it can use
notify'
.
Use this or onMounted
, but not both in the same [Attribute action]
list.
onMouseDown :: action -> Attribute action Source #
onMouseEnter :: action -> Attribute action Source #
onMouseLeave :: action -> Attribute action Source #
onMouseOut :: action -> Attribute action Source #
onMouseOver :: action -> Attribute action Source #
onPointerCancel :: (PointerEvent -> action) -> Attribute action Source #
onPointerDown :: (PointerEvent -> action) -> Attribute action Source #
onPointerEnter :: (PointerEvent -> action) -> Attribute action Source #
onPointerLeave :: (PointerEvent -> action) -> Attribute action Source #
onPointerMove :: (PointerEvent -> action) -> Attribute action Source #
onPointerOut :: (PointerEvent -> action) -> Attribute action Source #
onPointerOver :: (PointerEvent -> action) -> Attribute action Source #
onPointerUp :: (PointerEvent -> action) -> Attribute action Source #
onSelect :: (MisoString -> action) -> Attribute action Source #
onUnmounted :: action -> Attribute action Source #
onUnmounted action
is an event that gets called after the DOM element
is removed from the DOM.
onUnmountedWith :: (MisoString -> action) -> Attribute action Source #
onUnmounted action
is an event that gets called after the DOM element
is removed from the DOM. It returns the component-id after the unmount call.
Returning component-id is useful when dynamically created Component
need
to notify their parents about their own destruction.
This way the parent can maintain a Map
of the child Component
IDs. When
the parent Component
wants to send a child Component
a message it can use
notify'
.
Use this or onUnmounted
, but not both in the same [Attribute action]
list.
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_ "+" ]
acceptCharset_ :: MisoString -> Attribute action Source #
accept_ :: MisoString -> Attribute action Source #
action_ :: MisoString -> Attribute action Source #
align_ :: MisoString -> Attribute action Source #
alt_ :: MisoString -> Attribute action Source #
async_ :: 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 #
charset_ :: MisoString -> Attribute action Source #
classList_ :: [(MisoString, Bool)] -> Attribute action Source #
class_ :: MisoString -> Attribute action Source #
Set "className" property https://developer.mozilla.org/en-US/docs/Web/API/Element/className
cols_ :: MisoString -> Attribute action Source #
colspan_ :: MisoString -> Attribute action Source #
content_ :: MisoString -> Attribute action Source #
coords_ :: 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-*
defaultValue_ :: MisoString -> Attribute action Source #
defer_ :: MisoString -> Attribute action Source #
downloadAs_ :: MisoString -> Attribute action Source #
download_ :: MisoString -> Attribute action Source #
enctype_ :: MisoString -> Attribute action Source #
for_ :: MisoString -> Attribute action Source #
form_ :: MisoString -> Attribute action Source #
formation_ :: MisoString -> Attribute action Source #
headers_ :: MisoString -> Attribute action Source #
height_ :: MisoString -> Attribute action Source #
href_ :: MisoString -> Attribute action Source #
hreflang_ :: MisoString -> Attribute action Source #
httpEquiv_ :: MisoString -> Attribute action Source #
id_ :: MisoString -> Attribute action Source #
ismap_ :: MisoString -> Attribute action Source #
kind_ :: MisoString -> Attribute action Source #
lang_ :: MisoString -> Attribute action Source #
language_ :: MisoString -> Attribute action Source #
list_ :: MisoString -> Attribute action Source #
loading_ :: MisoString -> Attribute action Source #
max_ :: MisoString -> Attribute action Source #
maxlength_ :: MisoString -> Attribute action Source #
media_ :: MisoString -> Attribute action Source #
method_ :: MisoString -> Attribute action Source #
min_ :: MisoString -> Attribute action Source #
minlength_ :: MisoString -> Attribute action Source #
name_ :: MisoString -> Attribute action Source #
novalidate_ :: Bool -> Attribute action Source #
pattern_ :: MisoString -> Attribute action Source #
ping_ :: MisoString -> Attribute action Source #
placeholder_ :: MisoString -> Attribute action Source #
poster_ :: MisoString -> Attribute action Source #
preload_ :: MisoString -> Attribute action Source #
ref_ :: MisoString -> Attribute action Source #
rel_ :: MisoString -> Attribute action Source #
reversed_ :: MisoString -> Attribute action Source #
rows_ :: MisoString -> Attribute action Source #
rowspan_ :: MisoString -> Attribute action Source #
sandbox_ :: MisoString -> Attribute action Source #
scope_ :: MisoString -> Attribute action Source #
scoped_ :: MisoString -> Attribute action Source #
seamless_ :: MisoString -> Attribute action Source #
shape_ :: MisoString -> Attribute action Source #
size_ :: MisoString -> Attribute action Source #
src_ :: MisoString -> Attribute action Source #
srcdoc_ :: MisoString -> Attribute action Source #
srclang_ :: MisoString -> Attribute action Source #
step_ :: MisoString -> Attribute action Source #
target_ :: MisoString -> Attribute action Source #
title_ :: MisoString -> Attribute action Source #
type_ :: MisoString -> Attribute action Source #
usemap_ :: MisoString -> Attribute action Source #
value_ :: MisoString -> Attribute action Source #
width_ :: MisoString -> Attribute action Source #
wrap_ :: MisoString -> Attribute action Source #
node :: NS -> MisoString -> Maybe Key -> [Attribute action] -> [View action] -> View action Source #
Create a new Miso.Html.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
.
rawHtml :: MisoString -> View action Source #
text :: MisoString -> View action Source #
Create a new Text
with the given content.
textRaw :: MisoString -> View action Source #
TextRaw
creation. Don't use directly
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 ()) | |
Styles (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 |
Convenience class for using View
Associated Types
type ToViewAction a Source #
Methods
toView :: a -> View (ToViewAction a) Source #
Instances
ToView (View action) Source # | |||||
Defined in Miso.Types Associated Types
| |||||
ToView (Component name model action) Source # | |||||
Defined in Miso.Types Associated Types
|
type family ToViewAction a Source #
Instances
type ToViewAction (View action) Source # | |
Defined in Miso.Types | |
type ToViewAction (Component name model action) Source # | |
Defined in Miso.Types |
Core type for constructing a virtual DOM in Haskell
Constructors
VNode NS MisoString (Maybe Key) [Attribute action] [View action] | |
VText MisoString | |
VTextRaw MisoString | |
VComp MisoString [Attribute action] (Maybe Key) SomeComponent |
Instances
Functor View Source # | |||||
HasRouter (View a :: Type) Source # | View | ||||
HasLink (View a :: Type) Source # | For constructing type-safe links | ||||
IsString (View a) Source # |
| ||||
Defined in Miso.Types Methods fromString :: String -> View a # | |||||
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 # | |||||
ToView (View action) Source # | |||||
Defined in Miso.Types Associated Types
| |||||
type RouteT (View a :: Type) x Source # | |||||
Defined in Miso.Router | |||||
type MkLink (View a :: Type) b Source # | |||||
Defined in Miso.Types | |||||
type ToViewAction (View action) Source # | |||||
Defined in Miso.Types |
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 # |
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 # |
Router
route :: forall {k} (layout :: k) m a. 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.
class HasRouter (layout :: k) 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 :: Type) Source # | View |
(HasRouter x, HasRouter y) => HasRouter (x :<|> y :: Type) Source # | Alternative |
(HasRouter sublayout, KnownSymbol path) => HasRouter (path :> sublayout :: Type) Source # | Path |
(HasRouter sublayout, FromHttpApiData x) => HasRouter (Capture sym x :> sublayout :: Type) Source # | Capture |
HasRouter sublayout => HasRouter (Header sym x :> sublayout :: Type) Source # | Header |
(HasRouter sublayout, KnownSymbol sym) => HasRouter (QueryFlag sym :> sublayout :: Type) Source # | QueryFlag |
(HasRouter sublayout, FromHttpApiData x, KnownSymbol sym) => HasRouter (QueryParam sym x :> sublayout :: Type) Source # | QueryParam |
Defined in Miso.Router | |
(HasRouter sublayout, FromHttpApiData x, KnownSymbol sym) => HasRouter (QueryParams sym x :> sublayout :: Type) Source # | QueryParams |
Defined in Miso.Router | |
HasRouter (Verb m s c a :: Type) Source # | Verb |
type family RouteT (layout :: k) a Source #
Type family for route dispatch
Instances
type RouteT Raw x Source # | |
Defined in Miso.Router | |
type RouteT (View a :: Type) x Source # | |
Defined in Miso.Router | |
type RouteT (x :<|> y :: Type) a Source # | |
type RouteT (path :> sublayout :: Type) a Source # | |
Defined in Miso.Router | |
type RouteT (Capture sym x :> sublayout :: Type) a Source # | |
type RouteT (Header sym x :> sublayout :: Type) a Source # | |
type RouteT (QueryFlag sym :> sublayout :: Type) a Source # | |
type RouteT (QueryParam sym x :> sublayout :: Type) a Source # | |
Defined in Miso.Router | |
type RouteT (QueryParams sym x :> sublayout :: Type) a Source # | |
Defined in Miso.Router | |
type RouteT (Verb m s c a :: Type) x Source # | |
Defined in Miso.Router |
data RoutingError Source #
When routing, the router may fail to match a location.
Constructors
Fail |
Instances
Show RoutingError Source # | |
Defined in Miso.Router Methods showsPrec :: Int -> RoutingError -> ShowS # show :: RoutingError -> String # showList :: [RoutingError] -> ShowS # | |
Eq RoutingError Source # | |
Defined in Miso.Router | |
Ord RoutingError Source # | |
Defined in Miso.Router Methods compare :: RoutingError -> RoutingError -> Ordering # (<) :: RoutingError -> RoutingError -> Bool # (<=) :: RoutingError -> RoutingError -> Bool # (>) :: RoutingError -> RoutingError -> Bool # (>=) :: RoutingError -> RoutingError -> Bool # max :: RoutingError -> RoutingError -> RoutingError # min :: RoutingError -> RoutingError -> RoutingError # |
Run
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
exception :: SomeException -> JSM JSVal Source #
Exception handler
Used to catch Component
mounting exceptions
action `catch` exception
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
Exception MisoException Source # | |
Defined in Miso.Exception Methods toException :: MisoException -> SomeException # fromException :: SomeException -> Maybe MisoException # displayException :: MisoException -> String # backtraceDesired :: MisoException -> Bool # | |
Show MisoException Source # | |
Defined in Miso.Exception Methods showsPrec :: Int -> MisoException -> ShowS # show :: MisoException -> String # showList :: [MisoException] -> ShowS # | |
Eq MisoException Source # | |
Defined in Miso.Exception Methods (==) :: MisoException -> MisoException -> Bool # (/=) :: MisoException -> MisoException -> Bool # |
Subscriptions
replaceURI :: URI -> JSM () Source #
Replaces current URI on stack
uriSub :: (URI -> action) -> Sub action Source #
Subscription for popstate
events, from the History API
directionSub :: ([Int], [Int], [Int], [Int]) -> (Arrows -> action) -> Sub action Source #
Maps a specified list of keys to directions (up, down, left, right)
keyboardSub :: (Set Int -> action) -> Sub action Source #
Returns subscription for Keyboard.
The callback will be called with the Set of currently pressed keyCode
s.
wasdSub :: (Arrows -> action) -> Sub action Source #
Maps Arrows
onto a Keyboard subscription for directions (W+A+S+D keys)
mouseSub :: (PointerEvent -> action) -> Sub action Source #
Captures mouse coordinates as they occur and writes them to an event sink
Arguments
:: FromJSON msg | |
=> MisoString | EventSource URL |
-> (SSE msg -> action) | |
-> Sub action |
Server-sent events Subscription
getSocketState :: JSM SocketState Source #
Retrieves current status of WebSocket
websocketSub :: FromJSON m => URL -> Protocols -> (WebSocket m -> action) -> Sub action Source #
WebSocket subscription
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
to handle PointerEvent
s on window
windowSub :: MisoString -> Decoder r -> (r -> action) -> Sub action Source #
windowSub eventName decoder toAction
provides a subscription
to listen to window level events.
windowSubWithOptions :: Options -> MisoString -> Decoder r -> (r -> action) -> Sub action Source #
windowSubWithOptions options eventName decoder toAction
provides a
subscription to listen to window level events.
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 )
Instances
Server-sent events data
Constructors
SSEMessage message | |
SSEClose | |
SSEError |
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
Generic CloseCode Source # | |||||
Defined in Miso.WebSocket Associated Types
| |||||
Show CloseCode Source # | |||||
Eq CloseCode Source # | |||||
FromJSVal CloseCode Source # | |||||
ToJSVal CloseCode Source # | |||||
type Rep CloseCode Source # | |||||
Defined in Miso.WebSocket type Rep CloseCode = D1 ('MetaData "CloseCode" "Miso.WebSocket" "miso-1.9.0.0-inplace" 'False) (((C1 ('MetaCons "CLOSE_NORMAL" 'PrefixI 'False) (U1 :: Type -> Type) :+: (C1 ('MetaCons "CLOSE_GOING_AWAY" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "CLOSE_PROTOCOL_ERROR" 'PrefixI 'False) (U1 :: Type -> Type))) :+: ((C1 ('MetaCons "CLOSE_UNSUPPORTED" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "CLOSE_NO_STATUS" 'PrefixI 'False) (U1 :: Type -> Type)) :+: (C1 ('MetaCons "CLOSE_ABNORMAL" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "Unsupported_Data" 'PrefixI 'False) (U1 :: Type -> Type)))) :+: (((C1 ('MetaCons "Policy_Violation" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "CLOSE_TOO_LARGE" 'PrefixI 'False) (U1 :: Type -> Type)) :+: (C1 ('MetaCons "Missing_Extension" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "Internal_Error" 'PrefixI 'False) (U1 :: Type -> Type))) :+: ((C1 ('MetaCons "Service_Restart" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "Try_Again_Later" 'PrefixI 'False) (U1 :: Type -> Type)) :+: (C1 ('MetaCons "TLS_Handshake" 'PrefixI 'False) (U1 :: Type -> Type) :+: C1 ('MetaCons "OtherCode" 'PrefixI 'False) (S1 ('MetaSel ('Nothing :: Maybe Symbol) 'NoSourceUnpackedness 'NoSourceStrictness 'DecidedLazy) (Rec0 Int)))))) |
Reason for closed connection
Constructors
Reason MisoString |
data SocketState Source #
SocketState
corresponding to current WebSocket connection
Constructors
CONNECTING | 0 |
OPEN | 1 |
CLOSING | 2 |
CLOSED | 3 |
Instances
URL of Websocket server
Constructors
URL MisoString |
Wether or not the connection closed was done so cleanly
data WebSocket action Source #
WebSocket connection messages
Constructors
WebSocketMessage action | |
WebSocketClose CloseCode WasClean Reason | |
WebSocketOpen | |
WebSocketError MisoString |
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
FromJSON URI Source # | Since: aeson-2.2.0.0 | ||||
FromJSONKey URI Source # | Since: aeson-2.2.0.0 | ||||
Defined in Data.Aeson.Types.FromJSON Methods | |||||
ToJSON URI Source # | Since: aeson-2.2.0.0 | ||||
ToJSONKey URI Source # | Since: aeson-2.2.0.0 | ||||
Defined in Data.Aeson.Types.ToJSON | |||||
NFData URI Source # | |||||
Defined in Network.URI | |||||
Data URI Source # | |||||
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 # gunfold :: (forall b r. Data b => c (b -> r) -> c r) -> (forall r. r -> c r) -> Constr -> c URI # dataTypeOf :: URI -> DataType # dataCast1 :: Typeable t => (forall d. Data d => c (t d)) -> Maybe (c URI) # dataCast2 :: Typeable t => (forall d e. (Data d, Data e) => c (t d e)) -> Maybe (c URI) # gmapT :: (forall b. Data b => b -> b) -> URI -> URI # gmapQl :: (r -> r' -> r) -> r -> (forall d. Data d => d -> r') -> URI -> r # gmapQr :: forall r r'. (r' -> r -> r) -> r -> (forall d. Data d => d -> r') -> URI -> r # gmapQ :: (forall d. Data d => d -> u) -> URI -> [u] # gmapQi :: Int -> (forall d. Data d => d -> u) -> URI -> u # gmapM :: Monad m => (forall d. Data d => d -> m d) -> URI -> m URI # gmapMp :: MonadPlus m => (forall d. Data d => d -> m d) -> URI -> m URI # gmapMo :: MonadPlus m => (forall d. Data d => d -> m d) -> URI -> m URI # | |||||
Generic URI Source # | |||||
Defined in Network.URI Associated Types
| |||||
Show URI Source # | |||||
Eq URI Source # | |||||
Ord URI Source # | |||||
Lift URI Source # | |||||
type Rep URI Source # | |||||
Defined in Network.URI type Rep URI = D1 ('MetaData "URI" "Network.URI" "network-uri-2.6.4.2-EJ2U5kfgADg5BdbDj7oONH" '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))))) |
Storage
clearLocalStorage :: JSM () Source #
Clear local storage
clearLocalStorage
removes all values from local storage.
clearSessionStorage :: JSM () Source #
Clear session storage
clearSessionStorage
removes all values from session storage.
getLocalStorage :: FromJSON model => MisoString -> JSM (Either String model) Source #
Retrieve a value stored under given key in local storage
getSessionStorage :: FromJSON model => MisoString -> JSM (Either String model) Source #
Retrieve a value stored under given key in session storage
localStorageLength :: JSM Int Source #
Local storage length
localStorageLength
returns the count of items in local storage
removeLocalStorage :: MisoString -> JSM () Source #
Removes an item from local storage
removeLocalStorage key
removes the value of key
.
removeSessionStorage :: MisoString -> JSM () Source #
Removes an item from session storage.
removeSessionStorage key
removes the value of key
.
sessionStorageLength :: JSM Int Source #
Session storage length
sessionStorageLength
returns the count of items in session 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
.
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
.
Fetch
Arguments
:: FromJSON action | |
=> MisoString | url |
-> MisoString | method |
-> Maybe MisoString | body |
-> [(MisoString, MisoString)] | headers |
-> (action -> JSM ()) | successful callback |
-> (MisoString -> JSM ()) | errorful callback |
-> JSM () |
Retrieve JSON via Fetch API
Basic GET of JSON using Fetch API, will be expanded upon.
See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Util
conditionalViews :: Bool -> [View action] -> [View action] Source #
Hides the View
s if the condition is False. Shows them when the condition
is True.
withFoldable :: Foldable t => t a -> (a -> b) -> [b] Source #
Generic map
function, useful for creating View
s 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) ]
FFI
addStyle :: MisoString -> JSM () Source #
Appends a style_
element containing CSS to head_
addStyle "body { background-color: green; }"
<head><style>body { background-color: green; }</style></head>
addStyleSheet :: MisoString -> JSM () Source #
Appends a StyleSheet link_
element to head_
The link_
tag will contain a URL to a CSS file.
addStyleSheet "https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.min.css"
<head><link href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.min.css" ref="stylesheet"></head>
alert :: MisoString -> JSM () Source #
Calls the alert()
function.
blur :: MisoString -> JSM () Source #
Fails silently if the element is not found.
Analogous to document.getElementById(id).blur()
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.
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
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.
focus :: MisoString -> JSM () Source #
Fails silently if the element is not found.
Analogous to document.getElementById(id).focus()
.
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
newImage :: MisoString -> JSM Image Source #
Smart constructor for building a Image
w/ src
attribute.
Retrieve high resolution time stamp
See https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
syncCallback :: JSM () -> JSM Function Source #
Creates a synchronous callback function (no return value)
State management
ask :: MonadReader r m => m r #
Retrieves the monad environment.
modify :: MonadState s m => (s -> s) -> m () #
Monadic state transformer.
Maps an old state to a new state inside a state monad. The old state is thrown away.
Main> :t modify ((+1) :: Int -> Int) modify (...) :: (MonadState Int a) => a ()
This says that modify (+1)
acts over any
Monad that is a member of the MonadState
class,
with an Int
state.
modify' :: MonadState s m => (s -> s) -> m () #
A variant of modify
in which the computation is strict in the
new state.
Since: mtl-2.2
get :: MonadState s m => m s #
Return the state from the internals of the monad.
gets :: MonadState s m => (s -> a) -> m a #
Gets specific component of the state, using a projection function supplied.
put :: MonadState s m => s -> m () #
Replace the state inside the monad.
tell :: MonadWriter w m => w -> m () #
is an action that produces the output tell
ww
.