perf: Improved performance and reduced memory consumption

package.json

@@ -58,7 +58,7 @@
     "jest": "^27.3.1",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "node-sass": "^7.0.0",
-    "nouislider": "^15.4.0",
+    "nouislider": "^15.7.2",
     "postcss": "^8.2.1",
     "rollup": "^2.77.0",
     "rollup-plugin-postcss": "^4.0.0",

src/Slider.vue

@@ -8,30 +8,26 @@
   import useTooltip from './composables/useTooltip'
   import useSlider from './composables/useSlider'
 
-  /* istanbul ignore next */
-  const valueProps = {
-    value: {
-      validator: function(p) {
-        return p => typeof p === 'number' || p instanceof Array || p === null || p === undefined || p === false
-      },
-      required: false,
-    },
-    modelValue: {
-      validator: function(p) {
-        return p => typeof p === 'number' || p instanceof Array || p === null || p === undefined || p === false
-      },
-      required: false,
-    },
-  }
-
   export default {
     name: 'Slider',
     emits: [
       'input', 'update:modelValue',
       'start', 'slide', 'drag', 'update', 'change', 'set', 'end',
     ],
     props: {
-      ...valueProps,
+      value: {
+        validator: function(p) {
+          return p => typeof p === 'number' || p instanceof Array || p === null || p === undefined || p === false
+        },
+        required: false,
+      },
+      modelValue: {
+        validator: function(p) {
+          return p => typeof p === 'number' || p instanceof Array || p === null || p === undefined || p === false
+        },
+        required: false,
+      },
+
       id: {
         type: [String, Number],
         required: false,

src/composables/useClasses.js

@@ -1,4 +1,5 @@
-import { computed, ref, toRefs } from 'vue'
+import { toRefs } from 'vue'
+import toRef from '../utils/toRef'
 
 export default function useClasses (props, context, dependencies)
 {
@@ -8,7 +9,7 @@ export default function useClasses (props, context, dependencies)
 
   // ============== COMPUTED ==============
 
-  const classes = computed(() => ({
+  const classes = toRef(() => ({
     target: 'slider-target',
     focused: 'slider-focused',
     tooltipFocus: 'slider-tooltip-focus',
@@ -58,7 +59,7 @@ export default function useClasses (props, context, dependencies)
     ...classes_.value,
   }))
 
-  const classList = computed(() => {
+  const classList = toRef(() => {
     const classList = { ...classes.value }
 
     Object.keys(classList).forEach((className) => {

src/composables/useSlider.js

@@ -1,7 +1,8 @@
-import { ref, computed, toRefs, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, shallowRef, toRefs, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import nouislider from 'nouislider'
 import isNullish from './../utils/isNullish'
 import arraysEqual from './../utils/arraysEqual'
+import toRef from '../utils/toRef'
 
 export default function useSlider (props, context, dependencies)
 {
@@ -23,17 +24,17 @@ export default function useSlider (props, context, dependencies)
 
   // ================ DATA ================
 
-  const slider = ref(null)
+  const slider = shallowRef(null)
 
-  const slider$ = ref(null)
+  const slider$ = shallowRef(null)
 
   // no export
   const inited = ref(false)
 
   // ============== COMPUTED ==============
 
   // no export
-  const defaultOptions = computed(() => {
+  const defaultOptions = toRef(() => {
     let defaultOptions = {
       cssPrefix: '',
       cssClasses: classList.value,
@@ -56,10 +57,10 @@ export default function useSlider (props, context, dependencies)
       defaultOptions.connect = true
     }
 
-    if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
+    if ((ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
       let handles = Array.isArray(value.value) ? value.value : [value.value]
 
-      defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby && ariaLabelledby.value ? {
+      defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby.value ? {
         'aria-labelledby': ariaLabelledby.value,
       }: {})))
     }
@@ -71,9 +72,9 @@ export default function useSlider (props, context, dependencies)
     return defaultOptions
   })
 
-  const sliderProps = computed(() => {
+  const sliderProps = toRef(() => {
     let sliderProps = {
-      id: id && id.value ? id.value : undefined,
+      id: id.value ? id.value : undefined,
     }
 
     if (disabled.value) {
@@ -83,7 +84,7 @@ export default function useSlider (props, context, dependencies)
     return sliderProps
   })
 
-  const isRange = computed(() => {
+  const isRange = toRef(() => {
     return Array.isArray(value.value)
   })
 
@@ -194,6 +195,10 @@ export default function useSlider (props, context, dependencies)
   }
 
   const destroy = () => {
+    if (!slider$.value) {
+      return;
+    }
+
     slider$.value.off()
     slider$.value.destroy()
     slider$.value = null
@@ -212,17 +217,8 @@ export default function useSlider (props, context, dependencies)
 
   // ============== WATCHERS ==============
 
-  watch(isRange, refresh, { immediate: false })
-  watch(min, refresh, { immediate: false })
-  watch(max, refresh, { immediate: false })
-  watch(step, refresh, { immediate: false })
-  watch(orientation, refresh, { immediate: false })
-  watch(direction, refresh, { immediate: false })
-  watch(tooltips, refresh, { immediate: false })
-  watch(merge, refresh, { immediate: false })
-  watch(format, refresh, { immediate: false, deep: true })
-  watch(options, refresh, { immediate: false, deep: true })
-  watch(classes, refresh, { immediate: false, deep: true })
+  watch([isRange, min, max, step, orientation, direction, tooltips, merge], refresh, { immediate: false })
+  watch([format, options, classes], refresh, { immediate: false, deep: true })
 
   watch(value, (value, old) => {
     // If old was 0, null, undefined, '', false
@@ -244,7 +240,7 @@ export default function useSlider (props, context, dependencies)
     ) {
       refresh()
     }
-  }, { immediate: false })
+  }, { immediate: false })
 
   watch(value, (newValue) => {
     if (isNullish(newValue)) {

src/composables/useTooltip.js

@@ -1,5 +1,6 @@
 import { computed, toRefs } from 'vue'
 import wnumb from 'wnumb'
+import toRef from '../utils/toRef'
 
 export default function useTooltip (props, context, dependencies)
 {
@@ -25,7 +26,7 @@ export default function useTooltip (props, context, dependencies)
     return wnumb({...format.value})
   })
 
-  const tooltipsFormat = computed(() => {
+  const tooltipsFormat = toRef(() => {
     return Array.isArray(value.value) ? value.value.map(v => tooltipFormat.value) : tooltipFormat.value
   })
 

src/composables/useValue.js

@@ -8,7 +8,7 @@ export default function useValue (props, context, dependencies)
   // ================ DATA ================
 
   /* istanbul ignore next */
-  let value = modelValue && modelValue.value !== undefined ? modelValue : baseValue
+  let value = modelValue.value !== undefined ? modelValue : baseValue
 
   const initialValue = ref(value.value)
 

src/utils/arraysEqual.js

@@ -5,9 +5,13 @@ export default function arraysEqual (array1, array2) {
     return false
   }
 
+  if (array1.length !== array2.length) {
+    return false;
+  }
+
   const array2Sorted = array2.slice().sort()
 
-  return array1.length === array2.length && array1.slice().sort().every(function(value, index) {
+  return array1.slice().sort().every(function(value, index) {
     return value === array2Sorted[index];
   })
 }

src/utils/isNullish.js

@@ -1,3 +1,3 @@
 export default function isNullish (val) {
-  return [null, undefined, false].indexOf(val) !== -1
+  return val === null || val === undefined || val === false
 }

src/utils/toRef.js

@@ -0,0 +1,7 @@
+import { customRef } from 'vue'
+
+// Polyfill for Vue <3.3 for getters only
+// https://vuejs.org/api/reactivity-utilities.html#toref
+export default function toRef (get) {
+    return customRef(() => ({ get, set: () => { } }))
+}