HalogenのSlot
from Halogen Component
全然理解していない
現状のあやふやな理解をとりあえず言語化しているだけなので多分めちゃくちゃ間違っている
何種類かのSlotがある
同じ概念だと思うが、出どころが違う
Slot
Halogenに出現する概念
Slot型
Slotを生成する型
3つの型引数を取る
Componentを作る時に、自身を表すSlotを定義し、親に渡して使用する
Slots型
子のSlotの集合
PureScriptのRow型で表現される
H.ComponentHTML型とかに渡す
Slots型の中身を見れば、どんな子Componentを持っているのかわかる
HH.slot_
忘れた
Reactには出てこない、型駆動ならではの概念という感じがしている
Comopnentを作る時に必ず必要になるわけではない
子を持つ時？かなんか条件があるがわかっていない #??
HalogenのSlot
1 Componentの情報
あるいは、Slotsの場合は、子にとる全てのComponentの情報
という感じかな
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を持つ
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 HTMLのレンダリング」
これを指定することで「Halogen Componentのレンダリング」
という風に変わる
ココ と書かれている箇所に変更が入っている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 _ =
HH.div_ [ HH.slot_ _button 0 Child.component { label: "Click Me" } ] -- ココ子目線
child.purs(hs)module Child where
type Slot = ∀ query. H.Slot query Void Int
..
evalにrecive filedを追加
..
handleActionに受け取ったinputをどう処理するか追記
..HH.slot_
4つの引数を取る
slotを作る関数？
proxy
これなんで必要になるんだ #??
一意の識別子
Reactでの
key みたいなもの #??purs(hs)slot_
:: Proxy label -- Proxy
-> slot -- 一意の識別子
-> Component query input output m -- 子Component
-> input -- 子Componentへ渡すInput
-> ComponentHTML action slots mslot_の代わりにslotを使うと、子→親のコミュニケーションができる
こういう感じ
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を引数に取るアクション担っている
purs(hs)data Action = HandleContact ContactqueryってH.Componentの引数としても、Slotの引数としても与えるのか？
冗長ではないか？何が異なる？