riot.js v3.0.0の変更点をまとめました
Tag:JavaScriptWeb
JavaScriptフレームワークのriot.jsがv2.6.7からv3.0.0メジャーアップデートされました。
仕様が結構変わっており、過去作成したプロジェクトでそのままアップデートすると高確率でエラーとなるので、変更点(リリースノート)を翻訳しました。
重要だと思った所は赤字にしています。細かい修正部分で内容が理解できなかった所は翻訳していません。
変更箇所
riot:
Change: build riot using rollup+babel instead of smash using only es6 modules synta
未翻訳
Change: clean up the tests (we use 371 tests!) splitting them into several files written in es6 and we switched to chai.js replacing expect.js
未翻訳
Change: improve the loop performances, now the update method is much faster than before.
ループのパフォーマンスを向上。更新が以前よりもはるかに高速に。
Change: deprecate riot-tag in favor of data-is
htmlタグをカスタムタグとして使用する場合の属性をriot-tagからdata-isに変更。(破壊的変更)
1 2 3 |
<div riot-tag="xxx"></div> ↓ <div data-is="xxx"></div> |
Change: use the ref attribute instead of name and id riot/1185 (breaking change)
name属性かid属性を付けると自動でタグインスタンスへ要素をキャッシュしていたが、ref属性へ変更(破壊的変更)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<riot-tag> <input type="checkbox" name="xxx"> <script> this.xxx.checked = ture; </script> <riot-tag> ↓ <riot-tag> <input type="checkbox" ref="xxx"> <script> this.refs.xxx.checked = ture; //取得はrefsを使う </script> <riot-tag> |
Change: remove riot-route from the core making it optional riot/1485 (breaking change)
riot.route機能を別ファイルに分けたので、使用する場合は別途ファイルを読み込む(破壊的変更)
Change: avoid that the update and the updated events get triggered before any tag has been mounted riot/1661 (breaking change)
this.on(‘update updated’, function(){})でバインドした命令が、マウント時に実行されず、マウント後にupdateされた時から実行に(破壊的変更)
Add: support for es6 classes to create tags more info
ES6のclassを使用したタグの作成をサポート
Add: the shouldUpdate method to the tags to emulate componentShouldUpdate in react
タグインスタンスへshouldUpdateメソッドを追加。これはreactのcomponentShouldUpdateの様なものです。
update時に実行され、falseを返す場合はDOMを書き換えない。
1 2 3 4 |
//カスタムタグ内で this.shouldUpdate = function(){ return true or false; } |
Remove: the __ prefix for the “boolean” html attributes riot/276
html要素のboolean属性(checkedなど)でポリフィルのため __ 接頭辞を付けて使用する機能を削除
Remove: the automatic preventDefault from the riot DOM events riot/1770 riot/1718 riot/526 (breaking change)
onclick=”{fire}”などのイベントハンドラは自動でpreventDefaultを行っていたが、自分で指定しないといけないようになった。(破壊的変更)
Fix: all the issues related to the if conditions riot/1477 riot/1658
if属性に関連するすべての問題を修正
Fix: avoid to inherit properties from the parent in loops of custom children tags riot/1697
子タグのループ内では親タグからプロパティを継承しないようにする
Fix: avoid to update the parent tag on the events generated from a child tags riot/1319 (breaking change)
ループ内の子タグがupdateされた際、親タグも更新されていたが、updateされた小タグのみ更新する(破壊的変更)
Fix: arrays with multiple tags of the same name don’t contain actual tag elements riot/2061
未翻訳
Fix: the data-is attribute is not updated for dynamic tags riot/2037
data-is属性のタグが更新されないのを修正
Fix: virtual with each doesn’t remove tag references from parent tag riot/2029
virtualタグとeachループを使った時の親タグの参照が削除されない問題を修正
Fix: each and switching between object and array riot/2027
eachループのデータを配列とオブジェクトで切り替えると起きる問題を修正
Fix: properties set in looped custom tag element event seem to be cleared by parent update riot/2019
ループされたカスタムタグ要素のイベントで設定されたプロパティが、親の更新によってクリアされる問題を修正
Fix: riot+compiler.js:1245 Uncaught NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node – when adding to an ‘each’ structure from a recursively created element onlick riot/1962
未翻訳
Fix: input numbers leave unprocessed expressions after upgrade to 2.6.0 riot/1957
未翻訳
Fix: memory leak riot/1955
メモリリークを修正
Fix: require(*tag-name*) does not allow parserOptions riot/1935
未翻訳
Fix: clear riot tag cache to aid with testing riot/1875
未翻訳
Fix: ‘before-mount’ won’t work as expected in riot#render riot/1851
未翻訳
Fix: the logic is not work with if and class together riot/1769
未翻訳
Fix: should we add a updateSelf() API? riot/1748
shouldUpdateを修正
Fix: virtual elements disappear after tag update riot/1659
タグ更新後にvirtua要素が消えるのを修正
Fix: can I use the bool attribute with the custom tag? (like “disabled”) riot/1618
未翻訳
Fix: extra expression evaluation when using attributes riot/1590
未翻訳
Fix: eS6 class syntax with child tags riot/1451
未翻訳
Fix: different approaches in iterable objects in different contexts of “each – in” riot/1420
未翻訳
Fix: support conditions with virtual tag riot/139
未翻訳
Fix: riot-tag as expression in loop riot/1368
riot-tag属性を使用したタグでのeachループ使用した際のふるまい修正。
Fix: all treeitem tag have children riot/1361
未翻訳
Fix: method for clearing compiler state riot/1236
コンパイラの状態をクリアするメソッドを修正
Fix: dynamically loaded child tags don’t get into the parents tags object riot/1174
未翻訳
Fix: [Q] Child tags counts not matched? riot/1088
未翻訳
Fix: inconsistent tags behaviour with 1 item vs many riot/936
未翻訳
Fix: no way to override name attribute on e.g. <input>s to prevent overriding existing properties on this riot/715
未翻訳
riot-observable:
– Remove: support for spaced events, el.on(‘foo bar’) becomes el.on(‘foo’).on(‘bar’)(breaking change)
スペース区切りによるイベント指定は不可。下記のように分けて書く(破壊的変更)
1 |
el.on('foo').on('bar') |
– Fix: optimize speed x6 faster than before
上記の変更により速度が6倍早くなりました
riot-tmpl:
– Change: template errors will be always output in the via console.error if the console api is available (breaking change)
{}を用いた式の中で起きたエラーを常にコンソールに表示する(破壊的変更)ふるまいは下記で変更可能
1 2 3 |
riot.util.tmpl.errorHandler = function (err) { console.error(err.message + ' in ' + err.riotData.tagName) // your error logic here } |
riot-compiler:
– Fix: allow the es6 import also inside the tags compiler/69
タグ内でes6のインポートを許可
– Fix: all the value attributes using expressions will be output as riot-value to riot#1957
未翻訳
– Change: css generated via riot-compiler will be always scoped (breaking change)
カスタムタグ内の<style>は常にスコープへ変更(破壊的変更)
下記の要素をhead内に記入することで作成されたスタイルの挿入位置を指定できます。これはnormalize.cssなどを上書きしたい時に良いです。
1 |
<style type="riot"></style> |
– Deprecate: old babel support, now the es6 parser will use Babel 6 by default (breaking change)
古いbabelのサポートを廃止、現在es6パーサーはデフォルトでBabel 6を使用。(破壊的変更)
その他
誤った点があればご指摘下さい。
2件のコメントがあります。
こんにちはー!
ガイドに関しては、翻訳したのでこちらもご参考まで。(まだ、トップからリンクがないんですが…)
http://riotjs.com/ja/guide/migration-from-riot2/
よかったら、上記の部分だけで構わないので、プルリクエストを投げてもらえると助かります ;-)
https://github.com/riot/riot.github.io/pull/158
コメントありがとうございます。
プルリクエストさせていただきます。