まとまった記事がなくて四苦八苦したので書きました。
方法
カスタムタグを書く方法は3つあります。
<script type="riot/tag"></script>の中に直接書く- .tagファイルに分割し、
<script src="path/to/file.tag" type="riot/tag"></script>で読み込む(注意点あり) - プリコンパイルし、
<script src="tag.js"></script>で読み込む
1. 直接書く
オーソドックスに直接書きます。このとき、いくつか注意点があります。
- カスタムタグ内に
<script>と明示的に書く場合、 閉じる</script>を 書かない - riot.js ではなく、 riot+compiler.js を読み込む
2はわかるとして、1はこういうことです。
<my-custom-tag></my-custom-tag> <script src="path/to/riot+compiler.js"></script> <script type="riot/tag"> <my-custom-tag> {hoge} <script> this.hoge = "hoge"; // </script>は書かない！ </my-custom-tag> </script> <!-- ここにたどり着かなくなるから --> <script> riot.mount('*'); </script>
</script> を書くと、 <script type="riot/tag"> が閉じられてしまい、 </my-custom-tag> まで読み込まれず、エラーとなるようです。
2. 分割して書く
この場合もブラウザ側でコンパイルするので 、riot.js ではなく riot+compiler.jsを読み込みます。
この方法の場合、とても大事な注意点があります。 ローカル環境で閲覧できない ことです。クロスドメイン制約に引っかかるためです。ただし、ローカルサーバを建てればローカル環境でも見られます。
というわけなので、ローカル環境からアクセスするときは1. の直接書くか、3. のプリコンパイルして読み込むかしかできません。
分割して書くサンプルはこんな感じです
↓HTML
<my-custom-tag></my-custom-tag> <script src="path/to/riot+compiler.js"></script> <script src="src/tags/customTag.tag" type="riot/tag"></script> <script> riot.mount('*'); </script>
↓customTag.tag
<my-custom-tag> {hoge} <script> this.hoge = "hoge"; // 今度は1とは違い、</script>を書いてもOKです。 </script> </my-custom-tag>
こちらは</script>を書いても、<script type=“riot/tag”>の中でないので問題ありません。
3. プリコンパイルする
この場合、 npm i riot -g としてRiotをインストールする必要があります。
この方法なら、カスタムタグ内でES2015やCoffeeScriptを使うことができます。もちろん、使いたいものに合わせてコンパイラをインストールしなければなりませんが。
コンパイラなど環境を整える手間をおしまず、一々コンパイルする手間が惜しくないなら、この方法が一番いいと思います。
それと、プリコンパイルしたファイルを読み込むときは、拡張子は.tagではなく.jsにして、 type=“riot/tag"をつけないでください 。コンパイル後のコードはただのJavaScriptなのでこうしないと動きません。
サンプルはこんな感じです。
<my-custom-tag></my-custom-tag> <script src="path/to/riot.js"></script><!-- compilerはいらない --> <script src="dist/tags/customTag.js"></script><!-- 拡張子はjs --> <script> riot.mount('*'); </script>
コンパイルするときのコマンドはこれがベストプラクティスのようです。
riot --ext tag.html src/tags/customTag.tag.html dist/tags
拡張子を.tag.htmlとすることで、エディタが適切なシンタックスを選択しやすくなります。
