Riot Router の v5 について
以下
- Riot.js を
riot
と呼ぶ - @riotjs/route を
route
と呼ぶ
ことにします.
route
が気付いたら v5 になってた
…え, v5 …だと…!?
とりあえず驚きました. 本体である riot のメジャーバージョンがまだ v4 であること, route の方が本体よりも後に v4 版がリリースされたことから, こちらのほうが先に v5 が出るとはカケラも思っていませんでしたので…( ゚д゚)
コミットログを追ってみる
とりあえず変更点を見ていきましょう. デモアプリの更新, コアの実装以外の小さな変更点は割愛します. 全部で 13 コミットされていました.
onStarted
コールバックの実装
The router component has also an
onStarted
callback that will be called asynchronously after the first route event will be called
<router onStarted={onRouterStarted}></router>
以下のように router
タグの属性としてセットすると, コールバックが自動で実行されます.
<app> <!-- ここでセット --> <router onStarted={onRouterStarted}> <nav> <a href="/hello">Hello</a> <a href="/user">User</a> <a href="/user/gianluca">Username</a> <a href="/goodbye">goodbye</a> </nav> <route path="/hello">hello</route> <route path="/user">user</route> <route path="/user/:username"> <user username={route.params[0]}></user> </route> <route path="/goodbye">goodbye</route> </router> <script> export default { // 呼ばれるメソッド名は任意 onRouterStarted(currentRoute) { console.log("start!!") console.log(currentRoute) } } </script> </app>
createSlot
メソッドの内部処理が変更
内部処理が若干変更になっていました. 以下一部抜粋.
+ const getAttribute = name => attributes && attributes.find(a => a.name === name) // (中略) - createSlot() { + createSlot(context) { if (!slots || !slots.length) return + const onStartedAttr = getAttribute(ON_STARTED_ATTRIBUTE_NAME) - this.slot = template('<slot/>', [{ + this.slot = template(null, [{ type: bindingTypes.SLOT, name: 'default' }]).mount(this.el, { slots }, context) // ←※ + + if (onStartedAttr) { + onStartedAttr.evaluate(context)(getCurrentRoute()) + } },
createSlot
メソッドに明示的に context
を引数に指定するようになりましたね.*1
template
というメソッドは @riotjs/dom-bindings の template メソッドです. 戻り値の中に mount
メソッドがあるため, メソッドチェーンでそのまま実行されています.
元々は template
メソッドを実行してテンプレートを生成する際に slot
タグを引数に指定*2していましたが, null
でも問題ないようですね.*3
さらに onStartedAttr.evaluate
メソッドですが, これは riot 本体の メソッドであり, それは以下のようなものです.
// evaluates a compiled tag within the global context function evaluate(js, url) { const node = document.createElement('script') const root = document.documentElement // make the source available in the "(no domain)" tab // of Chrome DevTools, with a .js extension if (url) node.text = `${js}\n//# sourceURL=${url}.js` root.appendChild(node) root.removeChild(node) }
まぁ要は, onStarted
という属性があった場合は, そこに設定されている関数を評価・実行してね, と言った感じです. 全体を通して, この機能が追加されただけのように見受けられました.
感想
大きな変更は特になく, route ユーザーは今まで通り v4 と同じ使い方で問題なさそうですね. onStarted
機能は地味に嬉しかったので, このアップデートは個人的には GooD です👍しかし, 何故メジャーバージョンを上げたのだろう?🤔
ではでは(=゚ω゚)ノ