A Topic represents a place to send and receive messages. Topic is used to facilitate communication between Component. Component can subscribe to or publish to any Topic, within the same Component or across Component.

This requires creating a custom ToJSON / FromJSON. Any other Component can publish or subscribe to this Topic message. It is a way to provide loosely-coupled communication between Components.

See publish, subscribe, unsubscribe for more details.

When distributing Component for third-party use, it is recommended to export the Topic, where message is the JSON protocol.

Since: 1.9.0.0

Smart constructor for creating a Topic message to write to

data Message
  = Increment
  | Decrement
  deriving (Show, Eq, Generic, ToJSON, FromJSON)

arithmetic :: Topic Message
arithmetic = topic "arithmetic"

data Action
  = Notification (Result Message)
  | Subscribe
  | Unsubscribe

update_ :: Action -> Effect parent props Int Action
update_ = case
  Unsubscribe ->
    unsubscribe arithmetic
  Subscribe ->
    subscribe arithmetic Notification
  Notification (Success Increment) ->
    update_ AddOne
  Notification (Success Decrement) ->
    update_ SubtractOne
  Notification (Error msg) ->
    io_ $ consoleError ("Decode failure: " <> ms msg)

Since: 1.9.0.0

Subscribes a Component to a Topic.

Registers a callback in the component that decodes incoming messages using its own FromJSON instance and dispatches them to the component's Sink. If the component is already subscribed to the named topic the previous callback is replaced.

Because each subscriber uses its own FromJSON, components can use different Haskell types for the same topic as long as the underlying JSON is compatible, enabling loose coupling between Component.

data Message = Increment | Decrement
  deriving (Show, Eq, Generic, ToJSON, FromJSON)

arithmetic :: Topic Message
arithmetic = topic "arithmetic"

data Action
  = Notify Message
  | NotifyError MisoString
  | Subscribe
  | Unsubscribe
  | AddOne
  | SubtractOne

update_ :: Action -> Effect parent props Int Action
update_ = \case
  Subscribe ->
    subscribe arithmetic Notify NotifyError
  Unsubscribe ->
    unsubscribe arithmetic
  Notify Increment -> update_ AddOne
  Notify Decrement -> update_ SubtractOne
  NotifyError msg ->
    io_ $ consoleError ("Decode failure: " <> msg)
  AddOne -> _count += 1
  SubtractOne -> _count -= 1

Since: 1.9.0.0

Unsubscribes a Component from a Topic.

Removes the callback registered by subscribe so the component no longer receives messages published to the topic. If the component is not currently subscribed this is a no-op.

See subscribe for example usage.

Since: 1.9.0.0

Publish to a t'Topic message'

t'Topic message' are generated dynamically if they do not exist. When using publish all subscribers are immediately notified of a new message. A message is distributed as a Value The underlying ToJSON instance is used to construct this Value.

We recommend documenting a public API for the JSON protocol message when distributing a Component downstream to end users for consumption (be it inside a single cabal project or across multiple cabal projects).

arithmetic :: Topic Message
arithmetic = topic "arithmetic"

server :: Component parent props () Action
server = component () update_ $ () ->
  div_
  []
  [ "Server component"
  , button_ [ onClick AddOne ] [ "+" ]
  , button_ [ onClick SubtractOne ] [ "-" ]
  , component_ (client_ "client 1")
  , component_ (client_ "client 2")
  ] where
      update_ :: Action -> Effect parent props () Action
      update_ = case
        AddOne ->
          publish arithmetic Increment
        SubtractOne ->
          publish arithemtic Decrement

Since: 1.9.0.0