Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

Riot Router の v5 について

Riot.js アルゴリズム プログラミング

以下

ことにします.

route が気付いたら v5 になってた

Releases_·_riot_route.png

…え, 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 です👍しかし, 何故メジャーバージョンを上げたのだろう？🤔

ではでは(=ﾟωﾟ)ﾉ

参考

注釈

*1:と言うか, 今まで引数に指定されていなかったので, 上記の ※ の部分無意味だったのでは？

*2:厳密な仕様はこちら → {string|HTMLElement} html - template string

*3:こう変えた意図がコミットメッセージ "Comparing changes" ではわかりませんでした😓