Riot.jsでjQueryライクにDOM操作する

Riot.jsでも、jQueryライクに$()とかで、簡単にDOM操作できないのかなと思って調べてみました。

環境は Riot.js 2.5.0

Riot.js本体のコードはどうやら短いらしいので、直接読んでみると、$()と$$（）の定義を発見。

lib/browser/tag/util.js のL.376行目くらいに以下のような記述があります。

util.js

/**
 * Shorter and fast way to select multiple nodes in the DOM
 * @param   { String } selector - DOM selector
 * @param   { Object } ctx - DOM node where the targets of our search will is located
 * @returns { Object } dom nodes found
 */
function $$(selector, ctx) {
  return (ctx || document).querySelectorAll(selector)
}

/**
 * Shorter and fast way to select a single node in the DOM
 * @param   { String } selector - unique dom selector
 * @param   { Object } ctx - DOM node where the target of our search will is located
 * @returns { Object } dom node found
 */
function $(selector, ctx) {
  return (ctx || document).querySelector(selector)
}

第二引数は通常のブラウザであれば、何も入れなくて平気かと思います。

ちなみに以下のファイルでimportされているので、すぐに使えるはずです。

lib/riot.js

import 'browser/wrap/prefix'
import 'browser/global-variables'
/* istanbul ignore next */
import '../node_modules/riot-observable/dist/riot.observable.js'
/* istanbul ignore next */
import '../node_modules/riot-route/dist/riot.route.js'
/* istanbul ignore next */
import '../node_modules/riot-tmpl/dist/riot.tmpl.js'
import 'browser/tag/mkdom'
import 'browser/tag/each'
import 'browser/tag/styleManager'
import 'browser/tag/parse'
import 'browser/tag/tag'
import 'browser/tag/update'
import 'browser/tag/util'
import 'browser/index'
import 'browser/wrap/suffix'

ソースコードを読まないと気づけなかったのですが、
$()はdocument.querySelector()
$$()はdocumet.querySelectorAll()
なので注意が必要でした。