quasar/src/composables/use-split-attrs/use-split-attrs.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import { ref, onBeforeUpdate, getCurrentInstance } from 'vue'

const listenerRE = /^on[A-Z]/

export default function useSplitAttrs() {
  const { attrs, vnode } = getCurrentInstance()

  const acc = {
    listeners: ref({}),
    attributes: ref({})
  }

  function update() {
    const attributes = {}
    const listeners = {}

    for (const key in attrs) {
      if (
        key !== 'class' &&
        key !== 'style' &&
        listenerRE.test(key) === false
      ) {
        attributes[key] = attrs[key]
      }
    }

    for (const key in vnode.props) {
      if (listenerRE.test(key) === true) {
        listeners[key] = vnode.props[key]
      }
    }

    acc.attributes.value = attributes
    acc.listeners.value = listeners
  }

  onBeforeUpdate(update)

  update()

  return acc
}