Karax でハマったこと

概要

このスクラップでは，Karax を使っていてうまく動かなかったこと，よくわからなかったことを書いていく．
追記歓迎．

環境

• Nim 1.6.6
• Karax 1.2.1

独自の HTML タグをもつ仮想 DOM を扱う

Karax の仮想 DOM に使えるタグは，karax/vdom で定義されたものに限定されている．
しかし，ここで定義されていないタグを使いたい場面に遭遇することがある．

例えば，SVG アイコンとして Boxicons を使いたい場合は，<i> タグを使う方法の他に次のように <box-icon> という独自のタグを使う方法もある．

<button class="button">
    <box-icon name="trash"></box-icon>
</button>

仮想 DOM としてこのようなタグを定義済みのタグと同じように記述することはできない．

import karax/[karax, karaxdsl, vdom]

proc createDeleteButton: VNode =
  result = buildHtml(button(class="buton")):
    `box-icon`(name="trash") # => Error: undeclared identifier: 'box-icon'

解決策

verbatim を用いることで，素の HTML を仮想 DOM の一部として扱うことができる．

import karax/[karax, karaxdsl, vdom]

proc createDeleteButton: VNode =
  result = buildHtml(button(class="buton")):
    verbatim "<box-icon name='trash'></box-icon>"

これは，次のような DOM として解釈される：

<button class="button">
    <div>
        <box-icon name="trash"></box-icon>
    </div>
</button>

• 利点
  • 独自タグなどの柔軟性の高い仮想 DOM を実現できる
• 欠点
  • あらゆる HTML を埋め込むことができてしまう（セキュリティリスク）
  • 必ず <div> 要素の子要素になる
  • 通常の仮想 DOM の要領で属性やイベントハンドラなどを操作できず，文字列操作で行う必要がある

CSS ライブラリとの連携がうまく行かない

CSS ライブラリと謳っていながら実際には JavaScript を親切で内包していることがある．
このようなライブラリでは，DOM を操作された場合に仮想 DOM との整合性がとれなくなり，Karax が正常動作しなくなる．
エラーメッセージも不親切なので原因究明も困難だった．

解決策

CSS ライブラリの中でも CSS のみを用いているもの を選択的に用いるほうが安全．