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

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.

To get an IO action that starts the application, use run on the result of this function.

main :: IO ()
main = run (miso (\uri -> ..))

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

Alias for miso.

App

type App model action = Component ROOT model action Source #

A miso application is a top-level Component, which has no parent. This is enforced by specializing the parent type parameter to ROOT.

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

Synonym for startComponent.

To get an IO action that starts the application, use run on the result of this function.

main :: IO ()
main = run (startApp app)

renderApp Source #

Arguments

:: Eq model 
=> MisoString

Name of the JS object that contains the drawing context

-> App model action

Component application

-> 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 ts/miso/context/dom.ts This is necessary for native support.

To get an IO action that starts the application, use run on the result of this function.

main :: IO ()
main = run (renderApp "my-context" app)

Component

data Component parent model action Source #

Application entry point

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

Runs a miso application

component :: model -> (action -> Effect parent model action) -> (model -> View model action) -> Component parent model action Source #

Smart constructor for Component with sane defaults.

(+>) :: forall child model action a. Eq child => ([View model a] -> View model a) -> Component model child action -> View model a infixr 0 Source #

Component mounting combinator

Used in the view function to mount a Component on any VNode.

  div_ [ key_ "component-id" ] +> component model noop $ \m ->
    div_ [ id_ "foo" ] [ text (ms m) ]

Since: 1.9.0.0

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.

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.

Mail

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 :: IO ()
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.

update :: action -> Effect parent model actionx
update _ = 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.

data Action = HelloWorld

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 a -> 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.

Note: The result of JSM a is discarded.

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

Primitives for synchronizing parent and child models.

module Miso.Binding

Types

Core types for Miso applications.

module Miso.Types

Effect

Effect, Sub, and Sink types for defining update functions and subscriptions.

module Miso.Effect

Event

Functions for specifying component lifecycle events and event handlers.

module Miso.Event

Property

Construct custom properties on DOM elements.

module Miso.Property

PubSub

Publish / Subscribe primitives for communication between components.

module Miso.PubSub

Run

Support for running and live-reloading of miso applications.

module Miso.Run

Subscriptions

Subscriptions for external events (mouse, keyboard, window, history, etc.).

module Miso.Subscription

Storage

Web Storage API (Local and Session storage) interface.

module Miso.Storage

Fetch

Interface to the Fetch API for making HTTP requests.

module Miso.Fetch

Util

Utility functions for views, parsing, and general purpose combinators.

module Miso.Util

FFI

Foreign Function Interface (FFI) utilities for interacting with JavaScript.

module Miso.FFI

State management

State management for Miso applications.

module Miso.State