stylesheet

2024-06-22

Riot.js v3系からv9系へのマイグレーションメモ

いわゆるレガシーコードの延命で、Riot3で書いたChrome拡張をRiot9へ移行した。公式でもRiot3からのマイグレーションは推奨されていないが、今回は外部要因で仕方なく。（Riot3はManifest V3で動作しない)

基本的なことはマイグレーションガイドに記載されている手順を参照するが、その他のガイドに記載されていない事柄をメモしておく。

each属性でオブジェクトのループができなくなった

以前のRiotで動作していた以下のコードはエラーとなる。

<my-component>
    <ul>
    <li each={ v,k in obj }>{k}: {v}</li>
    </ul>

    <script>
    export default {
        items: { mayer:46, frusciante:54 }
    }
    </script>
</my-component>

配列に変換するしかないようだ。

<my-component>
    <ul>
    <li each={ x in Object.entries(items) }>{x[0]}: {x[1]}</li>
    </ul>
    ...
</my-component>

タグとタグの間の空白文字や改行が完全に除去されるようになった

以前のRiotでは、通常のHTMLと同様に、連続するスペースや改行は１つにまとめて扱われていた。

<div>
    <span>Hello</span>
    <span>World</span>
</div>

上記のマークアップは、通常のHTMLと同様に以下のように表示される。

Hello World

一方、現行バージョンのRiotでは、スペースが付与されず、レイアウト乱れの要因に。

HelloWorld

意図してやっているようなので、&nbsp;を挟むか、スタイルで調整が必要。

Refsの置き換えはコンポーネントインスタンスの取得に使えない

refs属性廃止に伴い、$や$$といった関数型ヘルパーが用意されたが、これらはDOM参照を返す。 コンポーネントインスタンスの取得には使えない。

<my-hello-button ref="b1"></my-hello-button>

<script>
export default {
    doSomething() {
        this.$('[ref="b1"]').sayHello()  // エラー
    }
}
</script>

「コンポーネントはpropsを介してのみ通信すべし」とのことらしい。 こういったバッドプラクティス的なコードも許容できるのが利点だったんだけどな…。

以上。

参照

on
ラベル: ,