Thermite, Riotの紹介 Halogen, Thermite, Riotの紹介 Halogen, Thermite, Riotの紹介 by tipo159 by tipo159 by tipo159 by tipo159 by tipo159 by tipo159 2017-08-29 2017-08-29 2017-08-29 2017-08-29 2017-08-29 2017-08-29 1 / 47
クエリ代数の動作を定義 クエリ代数の動作を定義 eval eval :: :: TaskQuery TaskQuery ~> ~> H.ComponentDSL H.ComponentDSL Task Task TaskQuery TaskQuery TaskMessage TaskMessage m m eval eval ( (UpdateDescription UpdateDescription desc desc next next) ) = = do do CMS.modify CMS.modify ( (_ _ { { description description = = desc desc } }) ) pure pure next next eval eval ( (ToggleCompleted ToggleCompleted b b next next) ) = = do do CMS.modify CMS.modify ( (_ _ { { completed completed = = b b } }) ) H.raise H.raise ( (Toggled Toggled b b) ) pure pure next next ... ...
where where import import Prelude Prelude import import Control.Monad.Eff Control.Monad.Eff ( (Eff Eff) ) import import Halogen.Aff Halogen.Aff as as HA HA import import Halogen.VDom.Driver Halogen.VDom.Driver ( (runUI runUI) ) import import Component.List Component.List ( (list list) ) main main :: :: Eff Eff ( (HA.HalogenEffects HA.HalogenEffects ( () )) ) Unit Unit main main = = HA.runHalogenAff HA.runHalogenAff do do body body <- <- HA.awaitBody HA.awaitBody runUI runUI list list unit unit body body 14 / 47
Main.purs Main.purs main() main() main() main() main() main() Model.purs Model.purs Model.purs Model.purs Model.purs Model.purs type Task, initialTask, type List, initialList() type Task, initialTask, type List, initialList() type Task, initialTask, type List, initialList() type Task, initialTask, type List, initialList() type Task, initialTask, type List, initialList() type Task, initialTask, type List, initialList() Component/List.purs Component/List.purs Component/List.purs Component/List.purs Component/List.purs Component/List.purs data ListQuery, newtype TaskSlot, data ListQuery, newtype TaskSlot, data ListQuery, newtype TaskSlot, data ListQuery, newtype TaskSlot, data ListQuery, newtype TaskSlot, data ListQuery, newtype TaskSlot, list() list() list() list() list() list() Component/Task.purs Component/Task.purs Component/Task.purs Component/Task.purs Component/Task.purs Component/Task.purs data TaskQuery, data TaskMessage, data TaskQuery, data TaskMessage, data TaskQuery, data TaskMessage, data TaskQuery, data TaskMessage, data TaskQuery, data TaskMessage, data TaskQuery, data TaskMessage, task() task() task() task() task() task() 15 / 47
コンポーネントの仕様をSpecとして定義 コンポーネントの仕様をSpecとして定義 taskSpec taskSpec :: :: forall forall eff eff props props. . T.Spec T.Spec eff eff Task Task props props TaskAction TaskAction taskSpec taskSpec = = T.simpleSpec T.simpleSpec performAction performAction render render where where -- Renders the current state of the component as a collection of -- Renders the current state of the component as a collection of React elemen React elemen ts ts. . render render :: :: T.Render T.Render Task Task props props TaskAction TaskAction ... ... -- Updates the state in response to an action. -- Updates the state in response to an action.
( (main main) ) where where import import Prelude Prelude import import Components.TaskList Components.TaskList ( (initialTaskListState initialTaskListState, , taskList taskList) ) import import Control.Monad.Eff Control.Monad.Eff ( (Eff Eff) ) import import DOM DOM ( (DOM DOM) ) as as DOM DOM import import Thermite Thermite as as T T -- | The main method creates the task list component, and renders -- | The main method creates the task list component, and renders it to the document body. it to the document body. main main :: :: Eff Eff ( (dom dom :: :: DOM.DOM DOM.DOM) ) Unit Unit main main = = T.defaultMain T.defaultMain taskList taskList initialTaskListState initialTaskListState unit unit 23 / 47
次のような手順で,様々なライフサイクルイベントについてタグ 次のような手順で,様々なライフサイクルイベントについてタグ の中からリスナー登録可能 の中からリスナー登録可能 の中からリスナー登録可能 の中からリスナー登録可能 の中からリスナー登録可能 の中からリスナー登録可能 < <todo todo> > this.on('before-mount', function() { this.on('before-mount', function() { // before the tag is mounted // before the tag is mounted }) }) this.on('mount', function() { this.on('mount', function() { // right after the tag is mounted on the page // right after the tag is mounted on the page }) }) this.on('update', function() { this.on('update', function() { // allows recalculation of context data before the update // allows recalculation of context data before the update 35 / 47
イベントハンドラは次のように定義される イベントハンドラは次のように定義される < <login login> > < <form form onsubmit onsubmit= ={ { submit submit } }> > ... ... </ </form form> > submit(e) { // this method is called when above form is submitte submit(e) { // this method is called when above form is submitte d d ... ... } } </ </login login> > 40 / 47