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
Property
Router
Run
Exception
Subscriptions
Storage
Fetch
Util
FFI
State management

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 ()
renderComponent :: forall model (name :: Symbol) action. Eq model => Maybe MisoString -> Component name model action -> JSM () -> 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 -> Component Dynamic model action -> JSM model
notify :: forall (name :: Symbol) model action. KnownSymbol name => Component name model action -> action -> JSM ()
notify' :: MisoString -> Component Dynamic model action -> action -> JSM ()
startSub :: ToMisoString subKey => subKey -> Sub action -> Effect model action
stopSub :: ToMisoString subKey => subKey -> Effect model action
type Sub action = Sink action -> JSM ()
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
module Miso.Types
module Miso.Effect
module Miso.Event
module Miso.Property
module Miso.Html
module Miso.Render
module Miso.Router
module Miso.Run
module Miso.Exception
module Miso.Subscription
module Miso.Storage
module Miso.Fetch
module Miso.Util
module Miso.FFI
module Miso.State

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)

renderComponent Source #

Arguments

:: forall model (name :: Symbol) action. Eq model
=> Maybe MisoString	Name of the JS object that contains the drawing context
-> Component name model action	Component application
-> JSM ()	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.

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 Subscription which introduces a leaky-abstraction.

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 -> Component Dynamic model action -> JSM model Source #

Like sample except used for Component Dynamic model action where the component-id has been retrieved via ask and generated using onMountedWith.

We use the Component Dynamic model action argument to ensure the model sampled unifies with what sample' returns.

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 -> Component Dynamic model action -> action -> JSM () Source #

Like notify except used for dynamic Component where the component-id has been retrieved via ask and generated from onMountedWith.

We use the Component Dynamic model action argument to ensure the action being used unified with what the component expects.

Subscription

startSub :: ToMisoString subKey => subKey -> Sub action -> Effect 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")

stopSub :: ToMisoString subKey => subKey -> Effect 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

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 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 action -> Effect 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.

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.

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

Like io but generalized to any instance of Foldable

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

module Miso.Types

Effect

module Miso.Effect

Event

module Miso.Event

Property

module Miso.Property

Html

module Miso.Html

module Miso.Render

Property

Router

module Miso.Router

Run

module Miso.Run

Exception

module Miso.Exception

Subscriptions

module Miso.Subscription

Storage

module Miso.Storage

Fetch

module Miso.Fetch

Util

module Miso.Util

FFI

module Miso.FFI

State management

module Miso.State