How to use the @pluginjs/dom.queryAll function in @pluginjs/dom

test('should work with elements', () => {
      const $doc = parseHTML`<div data-plugin="example" class="example"><div><div data-plugin="example" class="example"><div>`
      const $examples = queryAll('.example', $doc)
      Initializer.of($examples)

      $examples.forEach($example =&gt; {
        expect($example.getAttribute('hello')).toEqual('world')
      })
    })
  })</div></div></div></div>

import { queryAll } from '@pluginjs/dom'
import Dropdown from '@pluginjs/dropdown'

queryAll('#placement .dropdown-example').forEach(el => {
  Dropdown.of(el, {
    placement: el.dataset.placement
  })
})

initGlobalArgs() {
    this.initInner()

    this.$items = this.options.itemSelector
      ? queryAll(this.options.itemSelector, this.element)
      : children(this.$inner)

    this.minWidth = this.options.minWidth
    this.minHeight = this.options.minHeight
    this.gutter = this.options.gutter
    this.width = this.getWidth()
    this.tags = this.getTags()
    this.filters = this.options.filters
    this.sortby = this.options.sortby

    this.defaultChunks = this.createChunks(this.$items)

    this.handleChunks()

    this.model = this.initModel(this.options.model)

autoOpen() {
    const root = this.root.dom

    switch (typeof this.options.autoOpen) {
      case 'boolean': {
        queryAll('li', root).forEach(item => {
          const node = getData('node', item)
          if (this.options.autoOpen === true && node.type === 'branch') {
            node.open()
          }
        })
        break
      }
      case 'number': {
        queryAll('li', root).forEach(item => {
          const node = getData('node', item)
          if (node.type === 'branch' && node.level <= this.options.autoOpen) {
            node.open()
          }
        })
        break
      }

assignValues() {
    this.lastId = ''
    if (this.options.reference !== 'top') {
      this.menuHeight = -this.options.threshold
    } else {
      this.menuHeight = this.element.offsetHeight + this.options.threshold
    }
    this.menuItems = queryAll(this.options.selector, this.element)
  }

constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    setData(this.plugin, this, this.element)
    this.$steps = queryAll(this.options.step, this.element)

    this.id = attr('id', this.element)

    if (!this.id) {
      this.id = `${NAMESPACE}-${++counter}`
      attr({ id: this.id }, this.element)
    }

    this.setupI18n()
    this.trigger(EVENTS.INIT)
    this.setupStates()
    this.initialize()
  }

getInlineOption() {
    return queryAll('.pj-image-selector-option', this.$content)
  }

build() {
    for (let i = 0; i < 18; i++) {
      const $item = `<span class="${this.classes.HISTORYITEM}"></span>`
      this.element.append(parseHTML($item))
    }

    this.$items = queryAll(`.${this.classes.HISTORYITEM}`, this.element)
  }

import { queryAll } from '@pluginjs/dom'
import Toast from '@pluginjs/toast'
import { parseDataOptions } from '@pluginjs/utils'

const element = queryAll('#closeable .example')

element.map(e => {
  return e.addEventListener('click', e => {
    Toast.open(parseDataOptions(e.target.dataset))
  })
})