2021/9/2 Halogenの型だけ見て概念の俯瞰をする

うまくいけばタイトルも変えて整理しよう

方針

Halogen Component全体を俯瞰したい

親子を別々でコードを提示し、それぞれ概念と型を同時に説明する

型以外の実装はできるだけ無視する

query

親→子

reactで言う関数のprops

reactのイメージと言うよりは、

親が子にqueryを送る

通信するイメージ？

input

親→子

reactで言う値のprops

output

子→親

event

これらは根幹の概念で、色々な型に出現する

この名詞が使われていたらこれを指すものと考えればいい

子

code:child.purs(hs)

type Slot p = ∀ query. H.Slot query Void p

_home :: Proxy "home"

component :: ∀ q i o m. H.Component q i o m

component =

H.mkComponent

{ initialState: identity

, render

, eval: H.mkEval H.defaultEval

}

where

render :: ∀ state action m. state -> H.ComponentHTML action () m

ここでは開いているので、何も受け取らないことを意味する

だから、親からのinputを使用したい場合には、initialState内でstateに変換しておく必要がある

H.ComponentHTML

action, slot, m

親

code:parent.purs(hs)

type ChildSlots =

( home :: Home.Slot Unit

)

render :: ∀ m. State -> H.ComponentHTML Action ChildSlots m

code:purs(hs)

type ComponentSpec state query action slots input output m =

{ initialState :: input -> state

, render :: state -> HC.HTML (ComponentSlot slots m action) action

, eval :: HalogenQ query action input ~> HalogenM state action slots output m

}

State

なにかしらの状態を持っている

Action

その状態を操作することもできる

ChildSlots

子に、componentを持っている

子componentを呼ぶ時に必要になる

code:purs(hs)

code:purs(hs)

HH.slot Home._home unit Home.component unit absurd

_button

slotを指定するタグ的な関数

0

後述

button

子component

{..}

子componentの引数Input

子からのoutputがあるならここで指定

code:purs(hs)

_button a :: forall query. H.Slot query Void a -- 子で定義

type Slots = ( button :: _button Int ) -- 親で定義

reactで言う、listにわたすkeyみたいなイメージかな

同じ子同士を識別するために使う

list的なやつの場合は、

Intで連番で区別するか、ユニークな文字列(e.g. ID)とかを与えるとか

eval

3つがlifecycleの話で、2つは別の話をしている

initialize :: Maybe action

lifecycleの話

そのComponentが生成された時に実行するActionを指定する

reactで言う、初回のuseEffect

receive :: input -> Maybe action

親から得たInputを処理する

親がrenderingされる度に、子にinputが渡ってくる

inputが渡ってくると、inputはstopしない

reactで言う、2回目以降のuseEffect

finalize :: Maybe action

lifecycleの話

そのComponentが破棄された時に実行するActionを指定する

reactで言う、useEffectのreturn

↑これら3つはいずれも、「○○のときにこのActionを実行する」というのを指定する

どのタイミングでも、何もActionを実行しませんよ、と宣言している

handleAction :: action -> HalogenM state action slots output m Unit

自信のなかで発火した何らかのactoinが実行された時にそれを処理する

reduxで言うreducer

TEAのupdate

1つのactionを処理している中で、別のactionを呼んでもいい

handleQuery :: forall a. query a -> HalogenM state action slots output m (Maybe a)

こういう面倒臭さがある

1秒毎に子を再renderingする

reactの場合はsimple

code:tsx

function Parent() {

useEffect(() => {

setTimeout(() => {

setCount((c) => c + 1);

}, 1000);

return <Button label={count} />;

}

function Button({ label }) {

return <div>{label}</div>;

}

halogenは割と記述量が増える

code:purs(hs)

parent :: forall query input output m. MonadAff m => H.Component query input output m

parent =

H.mkComponent

{ initialState

, render

, eval: H.mkEval $ H.defaultEval

{ handleAction = handleAction

, initialize = Just Initialize

}

}

where

initialState :: input -> ParentState

initialState _ = { count: 0 }

render :: ParentState -> H.ComponentHTML ParentAction Slots m

render { count } =

handleAction :: ParentAction -> H.HalogenM ParentState ParentAction Slots output m Unit

handleAction = case _ of

Initialize -> do

{ emitter, listener } <- H.liftEffect HS.create

void $ H.subscribe emitter

void

$ H.liftAff

$ Aff.forkAff

$ forever do

Aff.delay $ Milliseconds 1000.0

H.liftEffect $ HS.notify listener Increment

Increment -> H.modify_ \st -> st { count = st.count + 1 }

button :: forall query output m. H.Component query ButtonInput output m

button =

H.mkComponent

{ initialState

, render

, eval: H.mkEval $ H.defaultEval

{ handleAction = handleAction

, receive = Just <<< Receive

}

}

where

initialState :: ButtonInput -> ButtonState

initialState { label } = { label }

render :: ButtonState -> H.ComponentHTML ButtonAction () m

handleAction :: ButtonAction -> H.HalogenM ButtonState ButtonAction () output m Unit

handleAction = case _ of

Receive input ->

H.modify_ _ { label = input.label }

特筆すべきは、button側のreceiveの箇所

1秒ごとに親からlabelを受け取るが、それを毎度表示する実装をしないといけない

initialStateは初回の初回の話なので、それ以降の処理はReceiveで別途定義する必要がある

reactの場合は、ここでのinitialStateとreceiveを同時に書いているようなもの

親から受け取ったinputをいったんstateに変換しないと、子の中で使えないので、こういう操作が発生してしまう

output

親が子をsubscriptionするイメージ

親>モーダルという状況で、モーダルが閉じられた時に親にeventを送ったりする