Ovtoにミドルウェア機能を追加しました

先日Ovtoの新バージョン0.6.0をリリースしました。本稿では0.6の目玉機能「Ovto::Middleware」について解説します。

Ovto::Middlwareとは

昨年のアドカレで書いたように、これまでのOvtoはstateとactionの名前空間が1つしかなく、ある機能を複数のアプリ間で使いまわそうとしたときに取り回しがあまり良くありませんでした。

Ovto::Middlewareはこれを解決するためのもので、あるまとまったState, Actions, Componentの組を「ミドルウェア」として切り出すことができます。

ミドルウェア

各ミドルウェアは名前を持ちます。名前に使える文字はRubyのメソッド名と同じです(つまりハイフン等は不可)。
各ミドルウェアはアプリと同様、State, Actions, Componentを持ちます。ただし名前空間はミドルウェアごとに固有なので、アプリや他のミドルウェアとの名前衝突を気にする必要はありません。
ミドルウェアはアプリがuseすることで使用可能になります。
- またはミドルウェアが別のミドルウェアをuseすることも可能です。

例

(https://yhara.github.io/ovto/docs/api/middleware.html の日本語訳です。)

# 1. ミドルウェア名を付ける
class MyMiddleware < Ovto::Middleware("my_middleware")
  def setup
    # アプリ起動時に行いたい処理
  end

  # 2. ミドルウェアのstate
  class State < MyMiddleware::State
    item :count, default: 0
  end

  # 3. ミドルウェアのaction
  class Actions < MyMiddleware::Actions
    def increment(by:)
      return {count: state.count + by}
    end
  end

  # 4. ミドルウェアのcomponent
  class SomeComponent < MyMiddleware::Component
    def render
      o 'span', state.count
      o 'button', onclick: ->{ actions.increment(by: 1) }
    end
  end
end

class MyApp < Ovto::App
  # 5. ミドルウェアを使うことを宣言
  use MyMiddleware

  class State < Ovto::State; end
  class Actions < Ovto::Actions; end

  class MainComponent < Ovto::Component
    def render
      o 'div.counter' do
        o MyMiddleware::SomeComponent
      end
    end
  end

デモ

Ovto::Middlewareの使用例です。昨年の春頃に「Smalltalkみたいな環境を作りたい」と思って作業していたものが例にちょうど良かったのでミドルウェア化しました。移動・リサイズ可能なウィンドウをovto_windowというミドルウェアとして実装しています。