These components respect the exact structure we saw earlier. However, they are prone to an implicit implementation, such as:

• determined variable names: each module has to export a certain amount of attended variables
• page / layout: refering to the component specs we have seen before
• premount: Aff monad runned before the page first mount and blocking it, can throw an error to abort the redirection to the page / layouts
• layout: each page should subscribe to an existing layout

module Hello.Pages.Example (page, premount, layout) where

import Prelude

import Effect.Aff (Aff)
import Hello.Plugins.Core.Layouts as LT
import Hello.Plugins.Core.Routes as RT
import Hello.Plugins.Core.Stores (RootStore)
import Hello.Plugins.Core.UI as UI
import Hello.Plugins.Middlewares.Authenticated (authenticated)
import Reactix as R
import Reactix.DOM.HTML as H

-- this is the "Example" page component
page :: UI.Leaf()
page = UI.leaf component

-- subscribe the page to the "dashboard" layout
layout :: LT.Layout
layout = LT.Dashboad

-- Premount hook: here we have imported a middleware checking
-- the authentication of the current user (and will throw an error
-- if anonymous, catched by the Router plugin)
--
-- The premount can also served as a Store hydration, quick XHR/graph calls, etc
premount :: Record RootStore -> Aff Unit
premount rootStore = authenticated rootStore

component :: R.Component ()
component = R.hooksComponent "page-misc" cpt where
  cpt _ _ = pure mempty

• analysis opened in milestones regarding premount variable definition