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

constructor(element, options = {}) {
    super(NAMESPACE, element)
    // options
    this.initOptions(DEFAULTS, options)
    if (options.module) {
      this.options.module = options.module
    }
    this.firstClassName = this.element.className
    this.setupI18n()
    // class
    this.initClasses(CLASSES)
    compose(
      attr({ placeholder: this.options.placeholder }),
      addClass(this.classes.NAMESPACE, 'pj-input')
    )(this.element)
    // init global vars
    this.$body = query('body')

    this.module = this.options.module[0]
    this.contrast = true
    this.history = true

    this.data = DATA
    this.color = null
    this.oldColor = null
    this.solidModule = this.options.solidModule

    this.info = {
      collection: '',

(element, options) => {
    new Flip({
      ...options,
      node: element,
      from: attr('data-from', element),
      to: attr('data-to', element)
    })
  },
  {

initialize() {
    this.data = []
    this.items = []

    attr(
      {
        autocomplete: 'off',
        spellcheck: 'false'
      },
      this.element
    )

    if (this.options.placeholder) {
      this.element.placeholder = this.options.placeholder
    }

    addClass(this.classes.INPUT, this.element)

    this.$trigger = wrap(
      templateEngine.render(this.options.templates.trigger.call(this), {
        classes: this.classes

attr('src', this.src, this.element)
      attr('srcset', this.srcset, this.element)
    } else if (this.element.tagName === 'PICTURE') {
      queryAll('source', this.element).forEach(source => {
        const src = getData('src', source)
        const srcset = getData('srcset', source)
        attr('src', src, source)
        attr('srcset', srcset, source)
      })
      const img = query('img', this.element)
      const src = getData('src', img)
      const srcset = getData('srcset', img)

      attr('src', src, img)
      attr('srcset', srcset, img)
    } else {
      setStyle('backgroundImage', `url(${this.src})`, this.element)
    }

    this.trigger(EVENTS.LOAD)
    loader.load()
  }

get(index) {
    if (isString(index) && index.substring(0, 1) === '#') {
      const id = index.substring(1)
      for (const i in this.steps) {
        if (attr('id', this.steps[i].pane) === id) {
          return this.steps[i]
        }
      }
    }

    if (index < this.length() && this.steps[index]) {
      return this.steps[index]
    }

    return null
  }

this.trigger(EVENTS.LOADED)
      this.destroy()
    })

    if (this.element.tagName === 'IMG') {
      if (parent(this.element).tagName === 'PICTURE') {
        queryAll('source', parent(this.element)).forEach(source => {
          const src = getData('src', source)
          const srcset = getData('srcset', source)
          attr('src', src, source)
          attr('srcset', srcset, source)
        })
      }

      attr('src', this.src, this.element)
      attr('srcset', this.srcset, this.element)
    } else if (this.element.tagName === 'PICTURE') {
      queryAll('source', this.element).forEach(source => {
        const src = getData('src', source)
        const srcset = getData('srcset', source)
        attr('src', src, source)
        attr('srcset', srcset, source)
      })
      const img = query('img', this.element)
      const src = getData('src', img)
      const srcset = getData('srcset', img)

      attr('src', src, img)
      attr('srcset', srcset, img)
    } else {
      setStyle('backgroundImage', `url(${this.src})`, this.element)
    }

addClass(this.classes.LOADED, this.element)
      this.trigger(EVENTS.LOADED)
      this.destroy()
    })

    if (this.element.tagName === 'IMG') {
      if (parent(this.element).tagName === 'PICTURE') {
        queryAll('source', parent(this.element)).forEach(source => {
          const src = getData('src', source)
          const srcset = getData('srcset', source)
          attr('src', src, source)
          attr('srcset', srcset, source)
        })
      }

      attr('src', this.src, this.element)
      attr('srcset', this.srcset, this.element)
    } else if (this.element.tagName === 'PICTURE') {
      queryAll('source', this.element).forEach(source => {
        const src = getData('src', source)
        const srcset = getData('srcset', source)
        attr('src', src, source)
        attr('srcset', srcset, source)
      })
      const img = query('img', this.element)
      const src = getData('src', img)
      const srcset = getData('srcset', img)

      attr('src', src, img)
      attr('srcset', srcset, img)
    } else {
      setStyle('backgroundImage', `url(${this.src})`, this.element)

this.menuItems.forEach(item => {
      let activeElement
      if (this.options.cloestActive) {
        activeElement = item.closest(this.options.cloestActive)
      } else {
        activeElement = item.parentNode
      }

      removeClass(activeClass, activeElement)

      if (attr(this.options.hrefFrom, item) === `#${id}`) {
        addClass(activeClass, activeElement)
        this.activeElement = activeElement
        this.activeTarget = query(`#${id}`)
        this.trigger(EVENTS.CHANGE, `#${id}`)
      }
    })
  }

`.${this.classes.ITEM}.${
            this.classes.CLONED
          }[data-swipe-item-index="${attr(
            'data-swipe-item-index',
            nextItem
          )}"]`,
          this.$inner
        ).forEach(children => {
          addClass(this.classes.CLONEDNEXT, children)
        })
      }
      if (hasClass(this.classes.CLONED, prevItem)) {
        children(
          `.${this.classes.ITEM}:not(.${
            this.classes.CLONED
          })[data-swipe-item-index="${attr(
            'data-swipe-item-index',
            prevItem
          )}"]`,
          this.$inner
        ).forEach(children => {
          addClass(this.classes.CLONEDPREV, children)
        })
      } else {
        children(
          `.${this.classes.ITEM}.${
            this.classes.CLONED
          }[data-swipe-item-index="${attr(
            'data-swipe-item-index',
            prevItem
          )}"]`,
          this.$inner

children(this.element).forEach(element => {
      switch (element.tagName.toLowerCase()) {
        case 'img':
          dataArr.push({
            type: 'image',
            src: attr('src', element)
          })
          break
        case 'video':
          dataArr.push({
            type: 'video',
            videoType: data('videoType', element),
            src: data('src', element),
            href: attr('href', element),
            id: data('id', element)
          })
          break
        default:
          if (data('type', element) === 'inline') {
            dataArr.push({
              type: 'inline',
              html: element.innerHTML
            })
          } else {
            dataArr.push({
              type: data('type', element),
              src: data('src', element)
            })
          }
      }