Example of merging props with default values in wrapper component

Main.purs

module Main where

import Prelude

import Prim.Row (class Nub, class Union)
import React.Basic.DOM as DOM
import React.Basic.DOM.Generated (Props_video)
import React.Basic.Hooks (Component)
import React.Basic.Hooks as React
import Record (merge)
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Exception as Exception
import Web.DOM.NonElementParentNode as NonElementParentNode
import Web.HTML as HTML
import Web.HTML.HTMLDocument as HTMLDocument
import Web.HTML.HTMLElement as HTMLElement
import Web.HTML.Window as Window


main :: Effect Unit
main = do
  maybeRoot <- HTML.window
    >>= Window.document
    >>= HTMLDocument.body
  case maybeRoot of
    Nothing -> Exception.throw "Root element not found."
    Just root -> do
      app <- mkExample
      DOM.render (app unit) (HTMLElement.toElement root)

-- Attributes that are pre-supplied by the wrapper
type DefaultAttrs =
  ( autoPlay :: Boolean
  , children :: Array React.JSX
  , className :: String
  , height :: String
  , loop :: Boolean
  , muted :: Boolean
  , playsInline :: Boolean
  )

mkLoading
  :: forall attrs attrs_ extras unioned
   . Union attrs attrs_ Props_video
  => Union extras DefaultAttrs unioned
  => Nub unioned attrs
  => Component (Record extras)
mkLoading = do

  React.component "Loading" \extras -> React.do

    pure
      ( DOM.video
          ( merge extras
              { autoPlay: true
              , loop: true
              , muted: true
              , playsInline: true
              , height: "24"
              , className: "loading"
              , children:
                  [ DOM.source
                      { type: "video/webm"
                      , src: "./assets/loader.webm"
                      }
                  , DOM.source
                      { type: "video/mp4"
                      , src: "./assets/loader.mp4"
                      }
                  ]
              }
          )
      )

mkExample :: Component Unit
mkExample = do
  loading <- mkLoading

  React.component "Example" \_ -> React.do

    pure
      ( loading
          { autoPlay: false -- overrides default `true`
          , width: "200" -- in `Props_video` but not in `DefaultAttrs`
          }
      )