innerHTML in Halogen

Main.purs

module Main where

import Prelude

import Effect (Effect)
import Effect.Aff (Aff)
import Data.Maybe (Maybe(..))
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP
import Halogen.VDom.Driver (runUI)
import Data.Foldable (traverse_)
import Web.DOM.Element (setAttribute)

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component "hello" body

component :: forall q. H.Component q String Void Aff
component =
  H.mkComponent
    { initialState: identity
    , render
    , eval: H.mkEval $ H.defaultEval
      { handleAction = handleAction
      , receive = Just <<< Just
      , initialize = Just Nothing
      }
    }
  where

  render _ = HH.div [ HP.ref (H.RefLabel "container") ] []

  handleAction mhtml = do
    html <- case mhtml of
      Just html -> html <$ H.put html
      Nothing -> H.get
    H.getRef (H.RefLabel "container") >>= traverse_ \container -> do
      -- NOTE! This is *NOT* the right function to use
      -- The PureScript API does not expose the actual function to do this
      -- So you will have to FFI it in your own module
      -- But the general concept of this component should work
      H.liftEffect $ setAttribute "innerHTML" html container
      pure unit