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

Miso

Description

 
Synopsis

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 :: Ord 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 :: Ord 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

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 () #

tell w is an action that produces the output w.