PureScript + Halogen + Firebase で簡単なものを作った

https://github.com/quek/cocsan-purescript

version

PureScritp 0.12.5
Halogen v5.0.0-rc.4

Halogen はぜひ v5 系を使いたい。 Child component addressing (H.slot) がきれいになっている。

参考にすべきもの

build

purescript-halogen-realworld を持って来て Webpack 化した。

パッケージ管理は spago
コンパイルは webpack + purs-loader

Firebase

初期化

js でログイン処理と一緒にやっちゃう。ログインできたら PureScript の main を呼ぶ。

/__/firebase/init.json を使うコードあまり見かけないけど環境ごとの設定ファイルが不要になるので便利。

fetch('/__/firebase/init.json')
  .then(response => {
    return response.json();
  })
  .then(config => {
    firebase.initializeApp(config);

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        require('./Main').main();
      } else {
        const provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().signInWithRedirect(provider);
      }
    });
  });

ffi

Firestore.purs 必要最低限なものだけ。

js のクラス毎にモジュールを分けた方がいいだろうか? id, get など名前がかぶるから。

ルーティング

purescript-halogen-realworld は Hash ベースだったけど History API ベースで実装した。

purescript-halogen-realworld がやっているようにモナドを作る（?） AppM.purs

class Monad m <= Navigate m where
  navigate :: MyRoute -> m Unit

instance navigateHalogenM :: Navigate m => Navigate (H.HalogenM st act slots msg m) where
  navigate = lift <<< navigate

instance navigateAppM :: Navigate AppM where
  navigate route = do
    globalMessage <- asks _.globalMessage
    liftAff $ put (NavigateG route) globalMessage

Global Message passing inside Purescript Halogen - DEV Community 👩‍💻👨‍💻 を参考にルーティングを担当するコンポーネントでグローバルメッセージ（AVar GlobalMessage）を監視して処理する。

  handleAction :: Action -> H.HalogenM State Action ChildSlots o m Unit
  handleAction = case _ of
    Initialize -> do
      logMessage "初期化 Routing.purs"
      path <- H.liftEffect $ window >>= location >>= pathname
      updateRoute path
      void $ H.fork globalMessageLoop

  globalMessageLoop = do
    globalMessage <- asks _.globalMessage
    query <- H.liftAff $ AVar.take globalMessage
    case query of
      NavigateG route -> do
        pushState route
        H.modify_ \st -> st { route = route }
        pure unit
    globalMessageLoop

  pushState route = do
    pushStateInterface <- asks _.pushStateInterface
    H.liftEffect $ pushStateInterface.pushState (unsafeToForeign {}) $ routeToPath route

  updateRoute path = do
    case match myRoute path of
      Right newRoute -> do
        H.modify_ \st -> st { route = newRoute }
      Left e -> H.liftEffect $ log e

あと Main で PopStateEvent を監視する。

-- A producer coroutine that emits messages whenever the window emits a
-- `hashchange` event.
popStateProducer :: Coroutine.Producer HCE.PopStateEvent Aff Unit
popStateProducer = CoroutineAff.produce \emitter -> do
  listener <- eventListener (traverse_ (emit emitter) <<< HCE.fromEvent)
  liftEffect $
    window
      >>= Window.toEventTarget
      >>> addEventListener HCET.popstate listener false

-- A consumer coroutine that takes the `query` function from our component IO
-- record and sends `ChangeRoute` queries in when it receives inputs from the
-- producer.
popStateConsumer
  :: (forall a. Routing.Query a -> Aff (Maybe a))
  -> Coroutine.Consumer HCE.PopStateEvent Aff Unit
popStateConsumer query = CR.consumer \event -> do
  path <- liftEffect $ window >>= location >>= pathname
  H.liftEffect $ log path
  void $ query $ H.tell $ Routing.ChangeRoute path
  pure Nothing

main :: Effect Unit
main = HA.runHalogenAff do
  globalMessage <- AVar.empty
  pushStateInterface <- H.liftEffect $ makeInterface
  let
    environment = { globalMessage, pushStateInterface }
    component = H.hoist (runAppM environment) Routing.component
  body <- HA.awaitBody
  io <- runUI component unit body
  Coroutine.runProcess (popStateProducer Coroutine.$$ popStateConsumer io.query)

画像ファイル

file-loader が処理した画像ファイル名を使いたいのでこんなふうにした。ちょっとめんどい。もっといい方法ないかな。

Assets.js

const ASSETS = {
  '1.png': require('./assets/1.png')
};
exports.assets = function(name) {
  return ASSETS[name];
};

Assets.purs

module Assets where
foreign import assets :: String -> String

import Assets (assets)

render _ = HH.img [ HP.src $ assets "1.png" ]

letter

2019/07/05