Riot 2 からのマイグレーション

はじめに

Riot 3は以前のリリースで見つかったイシューについての大きな改善です。詳細についてはリリースノートを確認してください。

いろいろな問題を解決しましたが、以前のコードベースでは修正できなかったため、新しいメジャーバージョンのリリースを必要としました。ですが、Riot 2からのマイグレーションは簡単であるべきです。以下に、知っておくべき主な互換性のない変更(breaking change)を挙げておきます。

互換性のない変更

`riot-tag`の廃止

属性riot-tagは廃止されて、data-isに変わります。

<!-- not supported -->
<div riot-tag="my-tag"></div>

<!-- good -->
<div data-is="my-tag"></div>

なお、data-isはネストしたタグでも使え、動的なテンプレート変数(expression)にも対応しました。

<my-tag>
  <div data-is={ subComponent }></div>

  <script>
    this.subComponent = 'child-tag'
  </script>
</my-tag>

`name`と`id`によるDOM参照の廃止

もう、nameとid属性から、自動的にDOMへの参照を作成することはありません。代わりにref属性を使用してください。

Warning: refs オブジェクトは mount イベント の発火後でなければ設定されません 。

<my-tag>
  <p ref="paragraph">Hello</p>
  <script>
    console.log(this.refs.paragraph) // => p node
  </script>
</my-tag>

オブジェクトループ

オブジェクトのループの文法が変わります。以前はkey, value in objectでしたが、value, key in objectに変更されます。関連イシューはこちら

`riot.route`をコアから削除

riot.routeはRiotのコアから削除されました。今後はニーズに合ったルータを好きに組み合わせて使えます。 riot-routeの開発は今後も続きます。スタンドアローンのライブラリとして、Riotとあるいは別のライブラリと合わせて使うことができるでしょう。

`mount`の前に`update`と`updated`イベントは起きない

以前のRiotではupdateとupdatedイベントがmountイベントの前にトリガーされていました。今後、タグをマウント前に調整したい場合は、before-mountかmountイベントが使えます。updateとupdatedイベントはタグのアップデートを実行した時のみに、発生します。

自動`preventDefault`の廃止

Riotはタグで発生するイベントで、自動的にevent.preventDefault()を実行していましたが、この挙動は適切でないと判断し、廃止することにしました。

<my-tag>
  <form onsubmit={ ajaxSubmit }>
    <input>
  </form>

  <script>
    ajaxSubmit(event) {
      // in riot2 this was not needed
      event.preventDefault()
    }
  </script>
</my-tag>

子タグで発生したイベントで、親タグをアップデートしない

Riot 2では、イベントがループ内の子カスタムタグで発生すると、親タグでもイベントがトリガーされていました riot/1319。Riot 3でイベントがループ内の子カスタムタグから親タグのアップデートをしたい場合は、明示的にする必要があります。

イベント名の複数指定できない (`riot.observable`)

riot.observableを以前のバージョンから6倍高速にしましたが、このパフォーマンス改善のため、スペース区切りでイベント名を複数指定する機能を削除する必要がありました。

var el = riot.observable()

// not supported
el.on('start stop', function() { /* */ })
el.trigger('start stop')

// use this instead
function cb() {}
el
  .on('start', cb)
  .on('stop', cb)

el
  .trigger('start')
  .trigger('stop')

jQueryのDOMイベントとは非互換に

Riot 2では、jQueryを使い$('.my-element').trigger('click')といった方法で、Riotのイベントハンドラをトリガできました。Riot 2は古い形式のDOMイベントモデル（レベル２）を採用しており、これがjQueryのイベントAPIと完全互換だったため、こうしたことが可能だったのです。しかし、Riot 3ではを内部イベントハンドラを今後の標準となる（そしてjQueryのDOMイベントAPIがサポートしていない）新しい形式のDOMイベントモデル（レベル３）へと刷新しました。これによって、ダミーのイベントのシミュレートには（今までのやり方ではなく）別の方法を使わなければならなくなりました。この件については、こちらのイシュー（英語）をご確認ください。

Scoped CSSがデフォルトに

Riot 3では、全てのCSSはデフォルトで「scoped」になります。もう、<style>要素にscoped属性をいちいち追加する必要はありません。

`babel` 5.8にはもう対応しない

es6パーサーは最新版のbabelを使います (詳しくはこちら)。どうしても古いバージョンのbabelを使いたい場合、es6用のパーサを独自設定することは可能です。

なお、babelだけでなく、bubléにも対応しました。

テンプレートエラーの出力

Riot 2では、タグ内のテンプレートのエラーをキャッチするためには自分で関数をセットする必要がありました。Riot 3では、タグ内の全てのテンプレートエラーはconsole.errorから出力されます。(console APIが利用可能な場合)

Riot 2 からのマイグレーション

はじめに

互換性のない変更

riot-tagの廃止

nameとidによるDOM参照の廃止