data View action
  = Node NS  MisoString (Maybe Key) [Attribute action]  [View action] 
  | Text MisoString (View action)                                                                                                                                                                                                       
  | TextRaw MisoString  (View action)                                                                                                                                                                                                    
  | ComponentNode SomeComponent (ComponentOptions action) (View action)                                                                                                                                                                                               
                                                                                                                                                                                                                                          
data SomeComponent = forall name model action . Eq model => SomeComponent (Component name model action)                                                                                                                                                           

data Component (name :: Symbol) model action
  = Component
   { name :: MisoString
   , app :: App model action
   }

data ComponentOptions action
  = Component
   { onMounted :: Maybe action
   , onUnmounted :: Maybe action
   , key :: Maybe Key
   , attributes :: [ Attribute action ]
   }

-- Smart constructor
componentOptions :: ComponentOptions action
componentOptions = Component Nothing Nothing Nothing []

component :: App model action -> Component name model action
component app = Component (symbolVal @name) app
-- ^ dmj: we do this so 'name' is statically known and used as the `data-component-id`
                                                                                                                                                                                                                                          
embed :: Eq model => Component name model a -> View action                                                                                                                                                                                       
embed app = SomeComponent (Component app) componentOptions -- used for mount / unmount hooks                                                                                                                                                                                                                                           
-- ^ note how `action` and `a` are different. This is how we embed `App` inside each other (recursively)

embedWith :: Eq model => Component name model a -> ComponentOptions action -> View action                                                                                                                                                                                       
embedWith app = SomeComponent (Component app)

-- example
calendar :: Component "calendar-app" CalendarModel CalendarAction
calendar = component calendarApp

view m = div_ [ ] [ embed calendar ]

notify :: Component name model action -> action -> Effect a m
-- ^ `actions`'s unify here, ensuring that we're sending the right `action` to the right `App`

-- example
update action model = do
  notify calendar (NewEntry (todo model))