perf: table, select and drawer checks (#130)

* fix: remove upload and drawer listeners

* perf(select): filter cache

* perf(table): map keys

Author: jpntex

.changeset/mean-hornets-share.md

@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+perf: table, select and drawer checks

packages/ui/src/components/drawer/Drawer.vue

@@ -137,7 +137,13 @@ function onEnter(el: Element, done: () => void) {
 
     return
   }
-  el.addEventListener('transitionend', done)
+
+  const handler = () => {
+    el.removeEventListener('transitionend', handler)
+    done()
+  }
+
+  el.addEventListener('transitionend', handler)
   setTimeout(() => {
     if (props.backdrop) el.classList.add('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = '0'
@@ -150,7 +156,12 @@ function onEnter(el: Element, done: () => void) {
 function onBeforeLeave(el: Element) {}
 
 function onLeave(el: Element, done: () => void) {
-  el.addEventListener('transitionend', done)
+  const handler = () => {
+    el.removeEventListener('transitionend', handler)
+    done()
+  }
+
+  el.addEventListener('transitionend', handler)
   setTimeout(() => {
     if (props.backdrop) el.classList.remove('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`

packages/ui/src/components/select/Select.vue

@@ -110,19 +110,32 @@ const selected = computed<any | any[]>({
   },
 })
 
+const labelCache = computed(() => {
+  if (!props.options) return new Map<SelectOption, string>()
+
+  return new Map(props.options.map((option) => [option, option.label.toLowerCase()]))
+})
+
 const internalOptions = computed(() => {
   if (!props.options || props.options.length === 0) return []
 
+  const filterLower = filter.value.toLowerCase()
+  const hasFilter = filter.value !== ''
+
+  const selectedSet = new Set(
+    internalMultiple.value && Array.isArray(selected.value)
+      ? selected.value
+      : [],
+  )
+  const singleSelectedValue = !internalMultiple.value ? selected.value : null
+  const cache = labelCache.value
+
   return props.options
-    .filter((option) => filter.value === '' || option.label.toLowerCase().includes(filter.value.toLowerCase()))
+    .filter((option) => !hasFilter || cache.get(option)?.includes(filterLower))
     .map((option) => {
-      let isActive = false
-
-      if (internalMultiple.value && Array.isArray(selected.value)) {
-        isActive = selected.value.includes(option.value)
-      } else {
-        isActive = option.value === selected.value
-      }
+      const isActive = internalMultiple.value
+        ? selectedSet.has(option.value)
+        : option.value === singleSelectedValue
 
       return {
         value: option.value,

packages/ui/src/components/table/Table.vue

@@ -201,11 +201,28 @@ function sortHeader(header: TableHeader) {
   emit('update:sort', sort)
 }
 
+const pathCache = new Map<string, string[]>()
+
 function getValue(item: T, path: string | string[] | undefined): unknown {
   if (!path) return ''
   if (!item) return ''
 
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
+  let pathArray: string[] | null
+
+  if (Array.isArray(path)) {
+    pathArray = path
+  } else {
+    // Check cache first
+    if (pathCache.has(path)) {
+      pathArray = pathCache.get(path)!
+    } else {
+      // Parse and cache the result
+      pathArray = path.match(/([^[.\]])+/g)
+      if (pathArray) {
+        pathCache.set(path, pathArray)
+      }
+    }
+  }
 
   if (!pathArray || pathArray.length === 0) return ''
 
@@ -225,34 +242,55 @@ const allKeys = computed<(number | string)[]>(() => {
   return items.value.map((item, index) => getItemKey(item, index))
 })
 
+const selectedSet = computed(() => {
+  if (!props.selectable || props.singleSelect) return new Set<number | string>()
+  if (!Array.isArray(selected.value)) return new Set<number | string>()
+
+  return new Set(selected.value)
+})
+
 const allRowsSelected = computed(() => {
   if (!props.selectable || props.singleSelect) return false
+  if (!Array.isArray(selected.value) || selected.value.length === 0) return false
+
+  const keysLength = allKeys.value.length
+
+  if (keysLength === 0) return false
 
-  return Array.isArray(selected.value) && selected.value.length > 0 && allKeys.value.length > 0 && selected.value.length === allKeys.value.length
+  return selected.value.length === keysLength
 })
 
 const someRowsSelected = computed(() => {
   if (!props.selectable || props.singleSelect) return false
+  if (!Array.isArray(selected.value) || selected.value.length === 0) return false
 
-  return Array.isArray(selected.value) && selected.value.length > 0 && allKeys.value.length > 0 && selected.value.length !== allKeys.value.length
+  const keysLength = allKeys.value.length
+
+  if (keysLength === 0) return false
+
+  return selected.value.length > 0 && selected.value.length !== keysLength
 })
 
 function isRowSelected(rowKey: number | string): boolean {
   if (!props.selectable) return false
+
   if (props.singleSelect) {
     return selected.value === rowKey
-  } else {
-    return Array.isArray(selected.value) && selected.value.includes(rowKey)
   }
+
+  return selectedSet.value.has(rowKey)
 }
 
 function toggleRowSelection(rowKey: number | string) {
   if (!props.selectable) return
+
   if (props.singleSelect) {
     selected.value = selected.value === rowKey ? undefined : rowKey
   } else {
     if (!Array.isArray(selected.value)) selected.value = []
-    if (selected.value.includes(rowKey)) {
+
+    // Use Set for O(1) lookup instead of includes O(n)
+    if (selectedSet.value.has(rowKey)) {
       selected.value = selected.value.filter((k: number | string) => k !== rowKey)
     } else {
       selected.value = [...selected.value, rowKey]
@@ -308,30 +346,30 @@ const columnCount = computed(() => {
 })
 
 watch(items, (newValue: T[]) => {
-  // Clear expanded state for items that no longer exist
-  if (props.expandable) {
-    const currentKeys = new Set<number | string>()
+  const currentKeys = new Set<number | string>()
 
-    newValue.forEach((item, index) => {
-      currentKeys.add(getItemKey(item, index))
-    })
+  newValue.forEach((item, index) => {
+    currentKeys.add(getItemKey(item, index))
+  })
 
-    // Remove expanded state for items that no longer exist
+  // Clear expanded state for items that no longer exist
+  if (props.expandable) {
     expandedState.value.forEach((_, key) => {
       if (!currentKeys.has(key)) {
         expandedState.value.delete(key)
       }
     })
   }
 
+  // Clear selected items that no longer exist
   if (props.selectable && props.autoClearSelected) {
     if (props.singleSelect) {
-      if (!allKeys.value.includes(selected.value as number | string)) {
+      if (!currentKeys.has(selected.value as number | string)) {
         selected.value = undefined
       }
     } else {
-      if (Array.isArray(selected.value)) {
-        selected.value = selected.value.filter((k: number | string) => allKeys.value.includes(k))
+      if (Array.isArray(selected.value) && selected.value.length > 0) {
+        selected.value = selected.value.filter((k: number | string) => currentKeys.has(k))
       }
     }
   }

packages/ui/src/components/upload/Upload.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { computed, onBeforeUnmount, ref, watch, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useDropZone } from '@vueuse/core'
 import { useCommon } from '../../composables/useCommon'
 import { useInteractive } from '../../composables/useInteractive'
@@ -187,10 +187,20 @@ function isImage(file: File) {
   return file.type.startsWith('image') || imageExtensions.some((ext) => file.name.endsWith(ext))
 }
 
+const blobUrls: string[] = []
+
 function getImagePreview(file: File) {
-  return URL.createObjectURL(file)
+  const url = URL.createObjectURL(file)
+
+  blobUrls.push(url)
+
+  return url
 }
 
+onBeforeUnmount(() => {
+  blobUrls.forEach((url) => URL.revokeObjectURL(url))
+})
+
 function calculateFileSize(size: number) {
   if (size < 1024) return `${size} B`
   if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`