HyperappのLazy Components

hyperappにはv.1.2.0からLazy Componentsという機能が入りました。結構よさげなので紹介します。

コンポーネントは普通に親からpropsを受け取ることができるわけですが、LazyComponentsでは、トップレベルビューと同じようにグローバルステートとグローバルアクションを受け取ることができます。LazyComponentsを作成するには、通常のコンポーネントからビュー関数を返します。

import { h } from "hyperapp"

export const Up = ({ by }) => (state, actions) => (
  <button onclick={() => actions.up(by)}>+ {by}</button>
)

export const Down = ({ by }) => (state, actions) => (
  <button onclick={() => actions.down(by)}>- {by}</button>
)

export const Double = () => (state, actions) => (
  <button onclick={() => actions.up(state.count)}>+ {state.count}</button>
)

export const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <Up by={2} />
    <Down by={1} />
    <Double />
  </main>
)

これはHyperappのREADMEにある例ですが、この内Up、Down、DoubleがLazyComponentsで、viewが通常のコンポーネントで、トップレベルコンポーネントです。v.1.1.xまではstateやactionsをpropsバケツ渡しをする必要があったんですが、これでそのあたりを気にすることなく、直接stateやactionsにアクセスできるようになりました。便利。