riotjs-loaderを3.0.0->4.0.0に変更するとscoped cssがデフォルトになる

riotjs-loaderの実態


別の記事で、riotjs-loaderを 3.0.0 から 4.0.0
に変更すると、真偽値属性が使えるようになると書きましたが、実際は riotjs-loader が依存している riot-compiler が 2.3.22 から 3.0.0 に変更になっただけでした。

つまり、どういうことかというと、自分のプロジェクトでriot v3を使っていたつもりだけど、今まではコンパイラがv2指定だったので、旧バージョンで動作していたということ。
件名の内容に戻ると、scoped css は riot v3 からデフォルトでした。
確かにコンポーネント志向なので、それで正しい動きですが、loaderから依存していたとは思っていませんでした…。

riot-compilerを最新版にする


riot-compiler の最新は現時点で 3.2.4 でした。
riotjs-loader は riot-compiler が dependencies に定義されている点が厄介で、自分のプロジェクトの node_modules\riot-compiler を使用してくれず、 node_modules\riotjs-loader\node_modules\riot-compiler が使用されます。

あまり自由が効かないので、この際自分でloaderを作ってみました。
ついでに、コンパイルオプションも使うつもりはなかったので、差別化としてシンプルなloaderにしました。

riot-simple-loader


riot-simple-loader
https://www.npmjs.com/package/riot-simple-loader

npmモジュールとして公開しているので、良かったら使ってやってください。

使い方は上記の公式npmページと、サンプルをgithubにあげていますので参考にしてください。
https://github.com/nekijak/riot-simple-loader-sample

Riot.jsで真偽値属性(disabledなど)が「__disabled」になる問題

Riot.jsについて


最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。
検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。
 
 

__disabled問題


Riot.jsでは、disabled=”{ !data.reference[0] }”のように判定式でdisabledが出来る。と公式ガイドに書いてある。

真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。
<input checked={ null }><input> になります。

http://riotjs.com/ja/guide/#真偽値属性

しかし、いざ使おうとすると、何故か「__disabled」になってしまい、全然機能してくれなかった。
どこで「__disabled」になっているかというと、コンパイル時に変換されているのだが、それでも普通はDOM評価時には「disabled」になるはずが、DOM評価されても、「__disabled」となっていた。
 
 

解決策


仕方がないのでdomReady後に無理やり「__disabled」を自前で置き換えて回避してましたが、別件でnpmモジュールを更新していたら、この問題が解決。
riotjs-loaderを3.0.0から4.0.0にしたら、ちゃんと「disabled」になりました。
単純な解決方法だけど、調べた限り全然情報が無かったので、同じようにハマっている人の救いになればと思います。

 
 

余談


これは私だけかもしれませんが、riotjs-loaderを4.0.0にしたら、webpack.config.jsの書き換えが必要でした。
type: 'babel'type: 'none' に変更。

{
enforce: "pre",
test: /\.tag$/,
exclude: /node_modules/,
use: [
{
loader: 'riotjs-loader',
options: {
type: 'none'
}
}
],
}