Riot.jsのv2からv3でいろいろ修正・変更されたもの

Riot.js Advent Calendar 2016の9日目です！

Riot.js（以下riot）は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。（ここまでテンプレート）

v2からv3への移行する際の注意点

公式サイトのMigration from riot 2に詳細な内容が書かれていますので、そちらを読んでいただく方が早いと思いますので、ここでは単に列挙だけします。
（※日本語訳も出てます！）

1. riot-tag属性の廃止、data-is属性を使う

• data-isはネストしたタグでも使用可能
• また動的なテンプレート変数(expression)にも対応

1. スペースが入ったobservableのイベントは動作しない
2. id, name属性でのDOMの参照を廃止、ref属性を使う

• 参照する場合はthis.refs.hogeと書く（後でもうちょっと触れます）

1. オブジェクトのeachメソッドによるループの書き方がvalue, key in objectに変更
2. riot.routeが本体から分離しスタンドアローンのライブラリ化

• 別途npmなりcdnなりでriot-routeを持ってくる必要がある
• 書き方例：riot.route.start() → route.start()

1. mountの前にupdate, updatedイベントは発火しない

• タグをマウント前に調整したい場合はbefore-mount, mountを利用
• update, updatedはタグのアップデートの実行時のみ

1. 自動preventDefaultの廃止
2. 子タグで発生したイベントで、親タグをアップデートしない
3. （observableについて）半角スペース区切りでイベント名を複数指定できない

• メソッドチェーンで各イベントを一つずつトリガーする
• その代わり速度は6倍速くなった！！

1. Scoped CSSがデフォルトに
2. babel 5.8にはもう対応しない（使っている方のみ対象）

その他変更点

自分でも追ってみたんですが、v2でも修正されているものもたくさんありました。詳しくはリリースノートをご参照下さい。（※自分が見つけていないものもあるかもしれませんので、見つけ次第更新します！）

▼動的にロードされた子タグは親タグオブジェクトに入らない

コードを見ていただきましょう。

app.tag

<app>
  <h2> { opts.title } </h2>
  <div id="tgt"></div>

  <script>
    this.on('mount', function() {
      riot.mount('#tgt', 'child-tag')
      console.info(this.tags)
    })
  </script>
  <style>
    :scope h3 { 
      color: #4E88CC;
      float: left;
    }
  </style>
</app>

<child-tag>
  <h3>It's child tag!</h3>
</child-tag>

マウント

riot.mount('*', { title: 'Parent tag' })

上記を実行すると、consoleの出力結果にchild-tagタグは含まれません。ではappタグ内を以下のように変更してみます。

修正版appタグ

<app>
  <h2> { opts.title } </h2>
  <div data-is="{ subComponent }"></div>

  <script>
    this.on('mount', function() {
      this.subComponent = 'child-tag'
      this.update()  // 明示的にupdateを実行しないとchild-tagが反映されません
      console.info(this.tags)
    })
  </script>
  <style>
    :scope h3 { 
      color: #4E88CC;
      float: left;
    }
  </style>
</app>

これを実行すると、今度はconsoleにObject {child-tag: ee}と表示されたと思います。v3では、動的にロードされた子タグもthis.tagsで取得できるようになってました。

不具合？

個人的に使ってみて、これは不具合じゃないかな？と思ったものを書きていきます。（※今後アップデートで再現しなくなる可能性もありますので、その都度更新したいと思います）

▼ versionが取れない

現在利用しているのriotのバージョンを取得するには、riot.versionと書けばよかったですが、v3からはこれでは取得できません。どうすれば良いかもわからないため、ソース本体を参照すればド頭に書いてありますのでそれ見てます。

※2017/04/09 追記
v3.3.2の時点で修正され、従来通りriot.versionで取得できます！

▼ ref属性でも参照できないケースがある

v3からはDOMにid, name属性に代わってref属性を付けて、JavaScriptではthis.refs.名前で参照するように変わりましたが、以下のような場合は参照できません。

refでのDOMの参照

<app>
  <!-- layout -->
  <h3>{ opts.title }</h3>

  <div ref="hoge">hoge</div>
  <div>
    <input type="text" ref="fuga" value="fuga">
  </div>

  <!-- javascript -->
  <script>
    console.info(this.refs.hoge.innerText)  // ここでエラー（undefined）になる！
    console.info(this.refs.fuga.value)      // 上をコメントアウトしても、ここも同じエラーになる
  </script>  
</app>

これの対策は、scriptタグ内を以下のように書き換えると参照できます。

修正版

<script>
  this.on('mount', function() {
     console.info(this.refs.hoge.innerText)
     console.info(this.refs.fuga.value)
  })
</script>

上記で分かるように、イベントハンドラのコールバック関数内では問題なく参照できます。（onclickなど、他のものでも同様）

▼ eachループ内ではifメソッドが機能しない

v2では動作していた以下のコードがv3では機能しませんでした。（※issue #2133にて修正されてました）

<app>
  <!-- layout -->
  <h3>Collection with if</h1>
    <div each={ item, i in items } if={i == 2}> { item.name + (i+1) } </div>

    <!-- 'show'だと動作します。
      <div each={ item, i in items } show={i == 2}> { item.name + (i+1) } </div>
     -->
  </h3>

  <!-- javascript -->
  <script>
    this.items = [
    	{name: "one"},
      {name: "two"},
      {name: "three"},
      {name: "four"},
      {name: "five"},
      {name: "six"}
    ];
  </script>  
</app>

終わりに

公式サイトにv2からv3への移行についてしっかり注意点が書いてありますので、皆さんv3を使ってみて下さい(ﾟ∀ﾟ)だいぶ薄っぺらい内容になってしまった。。。

明日は @cognitom さんによるES6で書くRiot - Felt編です！