2022.12.07 - Article

[riot.js v7]コンパイルしたtagの読み込みをmodule形式以外で行う方法

Tag:

Riot.js Advent Calendar 2022 の7日目の記事なります。(埋まれ~)
未だにv3推しですが需要もなさそうなので、今回はRiot v7についての記事を書きたいと思います!

公式ページではriot.jsのタグをプリコンパイルして使用する際は<script type=”module”>を使用して読み込むが記載されています。

できるだけ互いの機能に干渉しないように独立したモジュールとして開発を行うのが良い作法だと思いますが、僕はグローバルな通常の<script>で使用したい場合が多いです。
そこで”通常”の<script>で使用する方法を解説します。

ちなみにブラウザコンパイルを行うriot+compiler.min.jsライブラリを使う場合は”通常”の<script>で使用する事が可能です。
プリコンパイルされたtagを使うriot.min.jsライブラリを使用する場合は<script type=”module”>でしか使用できないように思います。

📓 この”通常”の<script>で処理する方法をなんと呼ぶのが正しいのでしょうか…検索の時なども悩みます…

実践

次のようなタグ(my-tag.html)を作り

それをコンパイルしたmy-tag.jsがあったとします。

始まりが export default なのでモジュールとしてしか読み込めません。

riot+compiler.min.jsの場合には、string状態のtagを export defaultreturn で置換して、objectとして読み込むメソッド(riot.inject)が用意されています。そのため”通常”の<script>で読み込むことができます。

ソースコードを参考に同じような役割の関数を作ります。

使い方

公式の例と同じ事が次のように書けます。

動作を見る

またriot.component()を使用して、コンポーネント(タグ)をグローバルに登録せずコンポーネントを生成・マウントすることもできるはずです。

結び

riot+compiler.min.js(313KB, gzip:88KB)が重いためriot.min.js(15.7KB, gzip:5.78KB)を使いたいと言うときの参考になれば
また文字列のtagをobjectに変換できるとなにか別の利用法もありそうだと思い実現できる方法考えてみました。

さらにriotの記事が増えることを期待してます!!!!

コメントを残す