この内容はv3.0.0の場合の話です。最新版では発生しません。

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」になりました。
単純な解決方法だけど、調べた限り全然情報がなかったので、同じようにハマっている人の救いになればと思います。
(まだv3.0.0を使っている人がいればだけど…)

余談

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

webpack.config.js

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