LoginSignup
1

More than 5 years have passed since last update.

この記事は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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1