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) globalMessageGlobal 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" ]
