Merge pull request #411 from negezor/perf

perf: Improved performance and reduced memory consumption

Author: adamberecz

dist/multiselect.global.js

@@ -1,4 +1,5 @@
 import { toRefs, onMounted, ref, computed } from 'vue'
+import toRef from './../utils/toRef'
 
 export default function useA11y (props, context, dep)
 {
@@ -19,72 +20,50 @@ export default function useA11y (props, context, dep)
 
   // ============== COMPUTED ==============
 
-  const ariaAssist = computed(() => {
-    let texts = []
+  const ariaAssist = toRef(() => (
+    `${id.value ? id.value + '-' : ''}assist`
+  ))
 
-    if (id && id.value) {
-      texts.push(id.value)
-    }
-
-    texts.push('assist')
-
-    return texts.join('-')
-  })
-
-  const ariaControls = computed(() => {
-    let texts = []
-
-    if (id && id.value) {
-      texts.push(id.value)
-    }
-
-    texts.push('multiselect-options')
-
-    return texts.join('-')
-  })
-
-  const ariaActiveDescendant = computed(() => {
-    let texts = []
-
-    if (id && id.value) {
-      texts.push(id.value)
-    }
+  const ariaControls = toRef(() => (
+    `${id.value ? id.value + '-' : ''}multiselect-options`
+  ))
 
+  const ariaActiveDescendant = toRef(() => {
     if (pointer.value) {
-      texts.push(pointer.value.group ? 'multiselect-group' : 'multiselect-option')
+      let texts = id.value
+        ? `${id.value}-`
+        : '';
+
+      texts += `${pointer.value.group ? 'multiselect-group' : 'multiselect-option'}-`
 
-      texts.push(pointer.value.group ? pointer.value.index : pointer.value[valueProp.value])
+      texts += pointer.value.group ? pointer.value.index : pointer.value[valueProp.value]
 
-      return texts.join('-')
+      return texts
     }
   })
 
-
-
-  const ariaPlaceholder = computed(() => {
+  const ariaPlaceholder = toRef(() => {
     return placeholder.value
   })
 
-  const ariaMultiselectable = computed(() => {
+  const ariaMultiselectable = toRef(() => {
     return mode.value !== 'single'
   })
 
   const ariaLabel = computed(() => {
-    let ariaLabel = ''
-
     if (mode.value === 'single' && hasSelected.value) {
-      ariaLabel += iv.value[labelProp.value]
+      return iv.value[labelProp.value]
     }
 
     if (mode.value === 'multiple' && hasSelected.value) {
-      ariaLabel += multipleLabelText.value
+      return multipleLabelText.value
     }
 
     if (mode.value === 'tags' && hasSelected.value) {
-      ariaLabel += iv.value.map(v => v[labelProp.value]).join(', ')
+      return iv.value.map(v => v[labelProp.value]).join(', ')
     }
 
-    return ariaLabel
+    return ''
   })
 
   const arias = computed(() => {
@@ -107,59 +86,25 @@ export default function useA11y (props, context, dep)
 
   // =============== METHODS ==============
 
-  const ariaOptionId = (option) => {
-    let texts = []
-
-    if (id && id.value) {
-      texts.push(id.value)
-    }
-
-    texts.push('multiselect-option')
-
-    texts.push(option[valueProp.value])
-
-    return texts.join('-')
-  }
-
-  const ariaGroupId = (option) => {
-    let texts = []
-
-    if (id && id.value) {
-      texts.push(id.value)
-    }
-
-    texts.push('multiselect-group')
+  const ariaOptionId = (option) => (
+    `${id.value ? id.value + '-' : ''}multiselect-option-${option[valueProp.value]}`
+  )
 
-    texts.push(option.index)
+  const ariaGroupId = (option) => (
+    `${id.value ? id.value + '-' : ''}multiselect-group-${option.index}`
+  )
 
-    return texts.join('-')
-  }
-
-  const ariaOptionLabel = (label) => {
-    let texts = []
-
-    texts.push(label)
-
-    return texts.join(' ')
-  }
+  const ariaOptionLabel = (label) => `${label}`
 
-  const ariaGroupLabel = (label) => {
-    let texts = []
+  const ariaGroupLabel = (label) => `${label}`
 
-    texts.push(label)
-
-    return texts.join(' ')
-  }
-
-  const ariaTagLabel = (label) => {
-    return `${label} ❎`
-  }
+  const ariaTagLabel = (label) => `${label} ❎`
 
   // =============== HOOKS ================
 
   onMounted(() => {
     /* istanbul ignore next */
-    if (id && id.value && document && document.querySelector) {
+    if (id.value && document && document.querySelector) {
       let forTag = document.querySelector(`[for="${id.value}"]`)
       label.value = forTag ? forTag.innerText : null
     }

dist/multiselect.js

@@ -1,4 +1,5 @@
 import { computed, toRefs } from 'vue'
+import toRef from './../utils/toRef'
 
 export default function useClasses (props, context, dependencies)
 {const { 
@@ -19,7 +20,7 @@ export default function useClasses (props, context, dependencies)
 
   // ============== COMPUTED ==============
 
-  const classes = computed(() => ({
+  const classes = toRef(() => ({
     container: 'multiselect',
     containerDisabled: 'is-disabled',
     containerOpen: 'is-open',
@@ -76,7 +77,7 @@ export default function useClasses (props, context, dependencies)
     ...classes_.value,
   }))
 
-  const showDropdown = computed(() => {
+  const showDropdown = toRef(() => {
     return !!(isOpen.value && showOptions.value && (!resolving.value || (resolving.value && fo.value.length)))
   })
 

dist/multiselect.min.js

@@ -1,7 +1,8 @@
-import { ref, toRefs, getCurrentInstance, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, toRefs, getCurrentInstance, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { createPopper } from '@popperjs/core/lib/popper-lite'
 import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'
 import flip from '@popperjs/core/lib/modifiers/flip'
+import toRef from './../utils/toRef'
 
 export default function useDropdown (props, context, dep)
 {
@@ -22,11 +23,11 @@ export default function useDropdown (props, context, dep)
 
   // ============== COMPUTED ==============
 
-  const appended = computed(() => {
+  const appended = toRef(() => {
     return appendTo.value || appendToBody.value
   })
 
-  const placement = computed(() => {
+  const placement = toRef(() => {
     return (openDirection.value === 'top' && forcedPlacement.value === 'bottom') ||
            (openDirection.value === 'bottom' && forcedPlacement.value !== 'top')
             ? 'bottom'

dist/multiselect.mjs

@@ -1,4 +1,5 @@
-import { toRefs, computed, getCurrentInstance } from 'vue'
+import { toRefs, getCurrentInstance } from 'vue'
+import toRef from './../utils/toRef'
 
 export default function useKeyboard (props, context, dep)
 {
@@ -32,12 +33,12 @@ export default function useKeyboard (props, context, dep)
   // ============== COMPUTED ==============
 
   // no export
-  const createOption = computed(() => {
+  const createOption = toRef(() => {
     return createTag.value || createOption_.value || false
   })
 
   // no export
-  const addOptionOn = computed(() => {
+  const addOptionOn = toRef(() => {
     if (addTagOn.value !== undefined) {
       return addTagOn.value
     }

src/composables/useA11y.js

@@ -1,4 +1,5 @@
-import { ref, toRefs, computed, nextTick } from 'vue'
+import { ref, toRefs } from 'vue'
+import toRef from './../utils/toRef'
 
 export default function useMultiselect (props, context, dep)
 {
@@ -22,7 +23,7 @@ export default function useMultiselect (props, context, dep)
 
   // ============== COMPUTED ==============
 
-  const tabindex = computed(() => {
+  const tabindex = toRef(() => {
     return searchable.value || disabled.value ? -1 : 0
   })
 

src/composables/useClasses.js

@@ -3,6 +3,7 @@ import normalize from './../utils/normalize'
 import isObject from './../utils/isObject'
 import isNullish from './../utils/isNullish'
 import arraysEqual from './../utils/arraysEqual'
+import toRef from './../utils/toRef'
 
 export default function useOptions (props, context, dep)
 {
@@ -56,12 +57,12 @@ export default function useOptions (props, context, dep)
   })
 
   // no export
-  const createOption = computed(() => {
+  const createOption = toRef(() => {
     return createTag.value || createOption_.value || false
   })
 
   // no export
-  const appendNewOption = computed(() => {
+  const appendNewOption = toRef(() => {
     if (appendNewTag.value !== undefined) {
       return appendNewTag.value
     } else if (appendNewOption_.value !== undefined) {
@@ -197,17 +198,17 @@ export default function useOptions (props, context, dep)
   })
 
   const multipleLabelText = computed(() => {
-    return multipleLabel !== undefined && multipleLabel.value !== undefined
+    return multipleLabel.value !== undefined
       ? multipleLabel.value(iv.value, $this)
       : (iv.value && iv.value.length > 1 ? `${iv.value.length} options selected` : `1 option selected`)
   })
 
-  const noOptions = computed(() => {
+  const noOptions = toRef(() => {
     return !eo.value.length && !resolving.value && !createdOption.value.length
   })
 
 
-  const noResults = computed(() => {
+  const noResults = toRef(() => {
     return eo.value.length > 0 && fo.value.length == 0 && ((search.value && groupped.value) || !groupped.value)
   })
 
@@ -234,7 +235,7 @@ export default function useOptions (props, context, dep)
   })
 
   // no export
-  const nullValue = computed(() => {
+  const nullValue = toRef(() => {
     switch (mode.value) {
       case 'single':
         return null
@@ -245,7 +246,7 @@ export default function useOptions (props, context, dep)
     }
   })
 
-  const busy = computed(() => {
+  const busy = toRef(() => {
     return loading.value || resolving.value
   })
 
@@ -349,7 +350,7 @@ export default function useOptions (props, context, dep)
       return
     }
 
-    if (onCreate && onCreate.value && !isSelected(option) && option.__CREATE__) {
+    if (onCreate.value && !isSelected(option) && option.__CREATE__) {
       option = { ...option }
       delete option.__CREATE__
 

src/composables/useDropdown.js

@@ -1,4 +1,5 @@
 import { toRefs, watch, nextTick, computed } from 'vue'
+import toRef from './../utils/toRef'
 
 export default function usePointer (props, context, dep)
 {
@@ -32,11 +33,11 @@ export default function usePointer (props, context, dep)
     return fg.value.filter(g => !g[disabledProp.value])
   })
 
-  const canPointGroups = computed(() => {
+  const canPointGroups = toRef(() => {
     return mode.value !== 'single' && groupSelect.value
   })
 
-  const isPointerGroup = computed(() => {
+  const isPointerGroup = toRef(() => {
     return pointer.value && pointer.value.group
   })
 

src/composables/useKeyboard.js

@@ -1,18 +1,18 @@
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 export default function useRefs (props, context, dep)
 {
   // ================ DATA ================
 
-  const multiselect = ref(null)
+  const multiselect = shallowRef(null)
 
-  const wrapper = ref(null)
+  const wrapper = shallowRef(null)
 
-  const tags = ref(null)
+  const tags = shallowRef(null)
 
-  const input = ref(null)
+  const input = shallowRef(null)
 
-  const dropdown = ref(null)
+  const dropdown = shallowRef(null)
 
   return {
     multiselect,

src/composables/useMultiselect.js

@@ -1,4 +1,5 @@
-import { toRefs, watch, nextTick, onMounted, ref, computed } from 'vue'
+import { toRefs, watch, nextTick, onMounted, ref, shallowRef, computed } from 'vue'
+import toRef from '../utils/toRef'
 
 export default function useScroll (props, context, dep)
 {
@@ -19,11 +20,11 @@ export default function useScroll (props, context, dep)
   // no export
   const observer = ref(null)
 
-  const infiniteLoader = ref(null)
+  const infiniteLoader = shallowRef(null)
 
   // ============== COMPUTED ==============
 
-  const hasMore = computed(() => {
+  const hasMore = toRef(() => {
     return offset.value < pfo.value.length
   })