ポートフォリオサイト

https://yukikurage.github.io/portfolio/

PureScriptで作りました．知見が色々得られたのでメモ．

おおざっぱに

フレームワークはHalogen + Halogen Hooks
デザインはTailwind CSS

Halogen Hooks

Halogenのコンポーネントを生成するが，Halogen単体で生成されている方法とはだいぶ違う．
React HooksのHalogen版となっている．非常に使いやすい．
基本的に

component = Hooks.component \token input -> Hooks.do
  state /\ stateId <- Hooks.useState initialState
  
  Hooks.pure $ text "Hooks"

のような感じ．
tokenは親/子コンポーネントとのやり取りに使う
inputは親コンポーネントからの入力

stateはHooks.pureの中身とかで使ったほうが良い

component = Hooks.component \token input -> Hooks.do
  state /\ stateId <- Hooks.useState initialState
  state2 /\ state2Id <- Hooks.useState state
  
  Hooks.pure $ text "Hooks"

こういうことをするとヤバめ

親コンポーネントが子コンポーネントを描画しなくなった段階で子コンポーネントの状態は捨てられる(？)ので状態管理はしっかりと
個人的には明示的に状態破棄するまでは状態を保っててほしかった、具体的な手法わかりませんが

大域的な状態管理にはHalogen Storeを使う
またここでも書いたんですが、Storeとの通信を直接するのではなく一回型クラスを噛ませてあげるといい感じです
https://trap.jp/post/1344/