• 0
    いいね
  • 0
    コメント

    この記事はOpal Advent Calendar 2016の5日目の投稿として書いています。

    今日はこのアドベントカレンダーですっかりおなじみになったHyaliteについて近況を報告しようと思います。
    なんか自分のgemばかり紹介するアドベントカレンダーになってしまっていますが、他に書くひとがいないのでしょうがないですね。
    明日のyharaさんの記事に期待しましょう。
    Opalのいろいろなgemを紹介したりしたいのですが、台湾での発表の熱があるうちにこの辺りのことを書いておこうと思います。

    ここまで書いて、旅行つかれにより寝落ちました。公開遅れてすいません。yharaさんの記事ももう公開されていますね (> <)

    さてHyaliteのアップデートですが、とはいえそれほど大きなアップデートがあったわけではありません。

    • force_updateメソッドが追加されました。38d4119f
    • renderするだけのコンポーネントを簡単に書けるようになりました。610bf23f
    • classforといったプロパティはclassName,htmlForなどのようにキーワードと被らないような名前を使っていましたがそのままの名前でも使えるようになりました。0c4b0dd7
    • Hyalite::Component::ShortHandppメソッドを追加しました。(pメソッドは<p>タグを表すために使われているためKernel#pはシャドウされてしまっています。) cfc8b999
    • initial_statestateでDSL的に宣言できるようなり、stateの参照方法もメソッドとして呼びだせるようになりました。4e02842e
    • Hyalite::Component::ShortHandincludeしなくてもよくなりました。cf6e9276,6f4e2266

    記述方法が多少短かく書けるようになったとかそんな感じです。
    結果、READMEに書かれていたサンプルは以下のように書けるようになりました。

    require 'hyalite'
    require 'browser/interval'
    
    class ExampleView
      include Hyalite::Component
    
      state :count, 0
    
      def component_did_mount
        every(5) do
          @state.count += 1
        end
      end
    
      def render
        div({class: 'example'},
          h2(nil, @props[:title]),
          h3(nil, "count = #{@state.count}")
        )
      end
    end
    
    $document.ready do
      Hyalite.render(Hyalite.create_element(ExampleView, {title: "Hyalite counter example"}), $document['.container'])
    end
    
    この投稿は Opal Advent Calendar 20165日目の記事です。