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

Contents

API
Effect
Event
Property
Html
PubSub
Router
Run
Subscriptions
Storage
Fetch
Util
FFI
State management

Description

Synopsis

miso :: Eq model => (URI -> App model action) -> JSM ()
(🍜) :: Eq model => (URI -> App model action) -> JSM ()
type App model action = Component ROOT model action
startApp :: Eq model => App model action -> JSM ()
renderApp :: Eq model => Maybe MisoString -> App model action -> JSM [DOMRef] -> JSM ()
data Component parent model action
startComponent :: Eq model => Component ROOT model action -> JSM ()
withSink :: (Sink action -> JSM ()) -> Effect parent model action
type Sink action = action -> JSM ()
mail :: ToJSON message => ComponentId -> message -> Effect parent model action
checkMail :: FromJSON value => (value -> action) -> (MisoString -> action) -> Value -> Maybe action
parent :: (parent -> action) -> action -> Effect parent model action
mailParent :: ToJSON message => message -> Effect parent model action
broadcast :: ToJSON message => message -> Effect parent model action
startSub :: ToMisoString subKey => subKey -> Sub action -> Effect parent model action
stopSub :: ToMisoString subKey => subKey -> Effect parent model action
type Sub action = Sink action -> JSM ()
issue :: action -> Effect parent model action
batch :: [JSM action] -> Effect parent model action
io :: JSM action -> Effect parent model action
io_ :: JSM () -> Effect parent model action
for :: Foldable f => JSM (f action) -> Effect parent model action
data Binding parent child
- = ParentToChild (Getter parent field) (Setter child field)
- | ChildToParent (Setter parent field) (Getter child field)
- | Bidirectional (Getter parent field) (Setter parent field) (Getter child field) (Setter child field)
(-->) :: Lens parent a -> Lens model a -> Binding parent model
(<--) :: Lens parent a -> Lens model a -> Binding parent model
(<-->) :: Lens parent field -> Lens child field -> Binding parent child
(<--->) :: Lens' parent field -> Lens' child field -> Binding parent child
(--->) :: Lens' parent field -> Lens' child field -> Binding parent child
(<---) :: Lens' parent field -> Lens' child field -> Binding parent child
module Miso.Types
module Miso.Effect
module Miso.Event
module Miso.Property
module Miso.Html
module Miso.Render
module Miso.PubSub
module Miso.Router
module Miso.Run
module Miso.Subscription
module Miso.Storage
module Miso.Fetch
module Miso.Util
module Miso.FFI
module Miso.State

API

Miso

miso :: Eq model => (URI -> App model action) -> JSM () Source #

Runs an isomorphic miso application. Assumes the pre-rendered DOM is already present. Always mounts to <body>. Copies page into the virtual DOM.

(🍜) :: Eq model => (URI -> App model action) -> JSM () Source #

Alias for miso.

App

type App model action = Component ROOT model action Source #

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

startApp :: Eq model => App model action -> JSM () Source #

Synonym startApp to startComponent.

renderApp Source #

Arguments

:: Eq model
=> Maybe MisoString	Name of the JS object that contains the drawing context
-> App model action	Component application
-> JSM [DOMRef]	Custom hook to perform any JSM action (e.g. render styles) before initialization.
-> JSM ()

Runs a miso application, but with a custom rendering engine. The MisoString specified here is the variable name of a globally-scoped JS object that implements the context interface per 'tsmisocontext/dom.ts' This is necessary for native support.

Component

data Component parent model action Source #

Application entry point

Instances

Instances details

ToView model (Component parent model action) Source #

Instance details

Defined in Miso.Types

Associated Types

type ToViewAction model (Component parent model action)
Instance details Defined in Miso.Types type ToViewAction model (Component parent model action) = action

Methods

toView :: Component parent model action -> View model (ToViewAction model (Component parent model action)) Source #

type ToViewAction model (Component parent model action) Source #

Instance details

Defined in Miso.Types

type ToViewAction model (Component parent model action) = action

startComponent :: Eq model => Component ROOT model action -> JSM () Source #

Runs a miso application

Sink

withSink :: (Sink action -> JSM ()) -> Effect parent 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 Subscription which introduces a leaky-abstraction.

update FetchJSON = withSink $ \sink -> getJSON (sink . ReceivedJSON) (sink . HandleError)

Since: 1.9.0.0

type Sink action = action -> JSM () Source #

Function to asynchronously dispatch actions to the update function.

Component

mail :: ToJSON message => ComponentId -> message -> Effect parent model action Source #

Send any ToJSON message => message to a Component mailbox, by ComponentId

mail componentId ("test message" :: MisoString) :: Effect parent model action

Since: 1.9.0.0

checkMail :: FromJSON value => (value -> action) -> (MisoString -> action) -> Value -> Maybe action Source #

Helper function for processing Mail from mail.

data Action
  = ParsedMail Message
  | ErrorMail MisoString

main = app { mailbox = checkMail ParsedMail ErrorMail }

Since: 1.9.0.0

parent :: (parent -> action) -> action -> Effect parent model action Source #

Fetches the parent model from the child.

Since: 1.9.0.0

mailParent :: ToJSON message => message -> Effect parent model action Source #

Send any ToJSON message => message to the parent's Component mailbox

mailParent ("test message" :: MisoString) :: Effect parent model action

Since: 1.9.0.0

broadcast :: ToJSON message => message -> Effect parent model action Source #

Sends a message to all Component mailbox, excluding oneself.

  broadcast (String "public service announcement")

Since: 1.9.0.0

Subscriptions

startSub :: ToMisoString subKey => subKey -> Sub action -> Effect parent model action Source #

Starts a named Sub dynamically, during the life of a Component. The Sub can be stopped by calling Ord subKey => stop subKey from the update function. All Sub started will be stopped if a Component is unmounted.

data SubType = LoggerSub | TimerSub
  deriving (Eq, Ord)

update Action =
  startSub LoggerSub $ sink -> forever (threadDelay (secs 1) >> consoleLog "test")

Since: 1.9.0.0

stopSub :: ToMisoString subKey => subKey -> Effect parent model action Source #

Stops a named Sub dynamically, during the life of a Component. All Sub started will be stopped automatically if a Component is unmounted.

data SubType = LoggerSub | TimerSub
  deriving (Eq, Ord)

update Action = do
  stopSub LoggerSub

Since: 1.9.0.0

type Sub action = Sink action -> JSM () Source #

Type synonym for constructing event subscriptions.

The Sink callback is used to dispatch actions which are then fed back into the update function.

Effect

issue :: action -> Effect parent 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 parent model action Source #

Smart constructor for an Effect with multiple actions.

Since: 1.9.0.0

io :: JSM action -> Effect parent model action Source #

Schedule a single IO action for later execution.

Note that multiple IO action can be scheduled using tell from the mtl library.

Since: 1.9.0.0

io_ :: JSM () -> Effect parent 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.

Since: 1.9.0.0

for :: Foldable f => JSM (f action) -> Effect parent model action Source #

Like io but generalized to any instance of Foldable

This is handy for scheduling IO computations that return a Maybe value

Since: 1.9.0.0

Reactivity

data Binding parent child Source #

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

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

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

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

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

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

Since: 1.9.0.0

Constructors

ParentToChild (Getter parent field) (Setter child field)
ChildToParent (Setter parent field) (Getter child field)
Bidirectional (Getter parent field) (Setter parent field) (Getter child field) (Setter child field)