HalogenのSlot
全然理解していないmrsekut.icon
現状のあやふやな理解をとりあえず言語化しているだけなので多分めちゃくちゃ間違っている
何種類かのSlotがある
同じ概念だと思うが、出どころが違う
Slot
Halogenに出現する概念
Slot型
Slotを生成する型
3つの型引数を取る
Componentを作る時に、自身を表すSlotを定義し、親に渡して使用する
Slots型
子のSlotの集合
H.ComponentHTML型とかに渡す
Slots型の中身を見れば、どんな子Componentを持っているのかわかる
HH.slot_
忘れたmrsekut.icon
Reactには出てこない、型駆動ならではの概念という感じがしている
Comopnentを作る時に必ず必要になるわけではない
子を持つ時？かなんか条件があるがわかっていない #?? HalogenのSlot
1 Componentの情報
あるいは、Slotsの場合は、子にとる全てのComponentの情報
という感じかなmrsekut.icon
Conceptually, components occupy a "slot" in your tree of HTML. This slot is a place where the component can produce Halogen HTML until it is removed from the DOM. A component in a slot can be thought of as a dynamic, stateful HTML element.
Slot型
3つの型引数を取る
query
output
slot
unique identifier
これが分かりづらい
UnitだったりIntだったりする
Unitのとき→You can have at most one of this component because only one value, unit, inhabits the Unit type.
Intのとき→you can have as many of this component as there are integers.
Slots
自分で定義する型
H.ComponentHTMLの第2引数とかにとるやつ
Slotの集合
子Componentの数だけlabelを持つ
code:purs(hs)
type Slots2 =
( button :: H.Slot Button.Query Void Int
, modal :: H.Slot Modal.Query Modal.Output Unit
)
とあるcomponentの型が
render :: ∀ state action. state -> H.ComponentHTML action Slots2 m
だったら、konocomponentは、buttonとmodalという2つのComponentを持つ
つまりViewの実装を見なくてもComponentの型を見ればそれがどういうComponentを持っているのかが連鎖的にわかるということ #?? 親目線で何が変わるか
H.ComponentHTMLの第2引数にSlotsを指定する
これを指定することで「Halogen Componentのレンダリング」
という風に変わる
ココと書かれている箇所に変更が入っている
code:parent.purs(hs)
import Type.Proxy (Proxy(..))
type Slots = ( button :: Child.Slot ) -- ココ
_button = Proxy :: Proxy "button" -- ココ
parent :: ∀ query input output m. H.Component query input output m
parent = H.mkComponent {..}
where
render :: ∀ state action. state -> H.ComponentHTML action Slots m -- ココ
render _ =
子目線
code:child.purs(hs)
module Child where
type Slot = ∀ query. H.Slot query Void Int
..
evalにrecive filedを追加
..
handleActionに受け取ったinputをどう処理するか追記
..
HH.slot_
4つの引数を取る
slotを作る関数？
proxy
一意の識別子
code:purs(hs)
slot_
:: Proxy label -- Proxy
-> slot -- 一意の識別子
-> Component query input output m -- 子Component
-> input -- 子Componentへ渡すInput
-> ComponentHTML action slots m
slot_の代わりにslotを使うと、子→親のコミュニケーションができる
こういう感じ
code:ppurs(hs)
-- 親のcomponent内
HH.slot F._formless unit childComponent unit HandleContact
-- 子Componentの型定義
childComponent :: F.Component ContactForm (Const Void) () Unit Contact Aff
子の方を見ると、childComponentはoutputとしてContactを返している
親の方を見ると、HH.slotの最後の引数にHndleContactというActionを取っている
このActionがContactを引数に取るアクション担っている
code:purs(hs)
data Action = HandleContact Contact
queryってH.Componentの引数としても、Slotの引数としても与えるのか？
冗長ではないか？何が異なる？