Load 3rd party javascript dependencies in order with Reflex-Dom.

Main.hs

module Main where

import qualified Data.Map as Map
import Data.Text
import Reflex.Dom

main :: IO ()
main = mainWidgetWithHead header body

header :: MonadWidget t m => m ()
header = do
  meta
  cssFile "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

  evPB <- getPostBuild
  dyEvJQuery <- widgetHold (return never) $ jsFile "https://code.jquery.com/jquery-3.2.1.slim.min.js" <$ evPB
  dyEvPopper <- widgetHold (return never) $ jsFile "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" <$ switchPromptlyDyn dyEvJQuery
  _ <- widgetHold (return never) $ jsFile "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" <$ switchPromptlyDyn dyEvPopper
  return ()
  where
    cssFile r = elAttr "link" (Map.fromList [
          ("rel", "stylesheet")
        , ("type", "text/css")
        , ("href", r)
      ]) $ return ()
    meta = elAttr "meta" (Map.fromList [
          ("name", "viewport")
        , ("content", "width=device-width,initial-scale=1")
        , ("charset", "UTF-8")
      ]) $ return ()
    jsFile :: MonadWidget t m => Text -> m (Event t ())
    jsFile file = do
      (e, _) <- elAttr' "script" (Map.fromList
        [ ("language", "javascript")
        , ("src", file)]) $ return ()
      return $ domEvent Load e

body :: MonadWidget t m => m ()
body = el "h1" $ text "Hello world."