なんとなく覚え書き的なアレです。
Riot.js v3がつい先日リリースしたのですが、公式サイトもまだv2の内容な上、JSPMと併せて使う方法がよくわからなかったので、自己解決してまとめ。
以下簡単な手順です。参考にどうぞ。
JSPMインストール
細かい説明は他のサイトを参照してください。
$ npm install jspm -g
$ npm init
$ jspm init
Riot.jsのインストール
今ならv3が入ります。
$ jspm install npm:riot
loader plugin作成
tagファイルをimportしたときにコンパイルしてくれるプラグインを作成。
v2用のでは正常に動かないのでこちらを参考にv3用を作成。
jspm-riot
A riot plugin for System.JS and/or JSPM to load tag files while keeping ES6 support. Latest version: 1.0.4, last publish...
www.npmjs.com
riot-compilerインストール
riotの依存モジュールなのですでに入ってるはずですが手抜きする。
$ jspm install npm:riot-compiler
loader本体はこちら。
riot-tag.js
import * as compiler from 'riot-compiler';
export function translate(load) {
return compiler.compile(`import * as riot from 'riot';\n` + load.source);
};
使い方
import 'app.tag!riot-tag';
ひとひねり
お好みでconfig.jsいじって
map: {
...
"tag": "riot-tag"
},
import 'app.tag!';
正直言って、tagで済ましてしまうのは好きじゃないので使いませんけど。
テストコード的なもの
雑に作りました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
</head>
<body>
<div data-is="app"></div>
<script>
System.import('main');
</script>
</body>
</html>
add.tag
<app>
<h1>テストだよ</h1>
<button onclick={ onClick }>クリックして！</button>
<script>
this.message = opts.message;
onClick(e) {
console.log(`Hello, ${this.message}`);
}
</script>
</app>
riotのimportはv2と違って、こういう指定しじゃないといけない模様。
main.js
import * as riot from 'riot';
import 'app.tag!riot-tag';
riot.mount('app', { message: 'Riot.js' });
最後に
これから導入するなら、どうしてもv3にしたかったのですが、その理由としてはカスタムタグを静的HTMLに突っ込むとHTMLバリデータに引っかかってしまうからでした。
v2ではカスタムタグの代替としてriot-tag属性がありましたが、結局バリデータにひっかかるので不満です。
しかしv3ではriot-tag属性に代わり、data-is属性で代用できるようになり、普通のカスタムデータ属性なのでバリデーションが通過できるんですよね。
その他はまだ触り始めでよくわからんので、また機会があったらなんか書きますです。
コメント