refactor: make filterProps faster

vuetifyjs · Nov 7, 2023 · a36dfb8 · a36dfb8
1 parent 3247521
commit a36dfb8
Show file tree

Hide file tree

Showing 39 changed files with 91 additions and 73 deletions.
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -133,7 +133,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
     })
 
     useRender(() => {
-      const [toolbarProps] = VToolbar.filterProps(props)
+      const toolbarProps = VToolbar.filterProps(props)
 
       return (
         <VToolbar

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -391,7 +391,7 @@ export const VAutocomplete = genericComponent<new <
         slots['no-data']
       )
       const isDirty = model.value.length > 0
-      const [textFieldProps] = VTextField.filterProps(props)
+      const textFieldProps = VTextField.filterProps(props)
 
       return (
         <VTextField

diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -17,7 +17,7 @@ import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
 
 // Utilities
 import { toRef } from 'vue'
-import { genericComponent, pick, propsFactory, useRender } from '@/util'
+import { genericComponent, pickWithRest, propsFactory, useRender } from '@/util'
 
 export type VBadgeSlots = {
   default: never
@@ -85,7 +85,7 @@ export const VBadge = genericComponent<VBadgeSlots>()({
         : value <= +props.max ? value
         : `${props.max}+`
 
-      const [badgeAttrs, attrs] = pick(ctx.attrs as Record<string, any>, [
+      const [badgeAttrs, attrs] = pickWithRest(ctx.attrs as Record<string, any>, [
         'aria-atomic',
         'aria-label',
         'aria-live',

diff --git a/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx b/packages/vuetify/src/components/VBottomSheet/VBottomSheet.tsx
@@ -34,7 +34,7 @@ export const VBottomSheet = genericComponent<OverlaySlots>()({
     const isActive = useProxiedModel(props, 'modelValue')
 
     useRender(() => {
-      const [dialogProps] = VDialog.filterProps(props)
+      const dialogProps = VDialog.filterProps(props)
 
       return (
         <VDialog

diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx
@@ -41,7 +41,7 @@ export const VBtnToggle = genericComponent<VBtnToggleSlots>()({
     const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)
 
     useRender(() => {
-      const [btnGroupProps] = VBtnGroup.filterProps(props)
+      const btnGroupProps = VBtnGroup.filterProps(props)
 
       return (
         <VBtnGroup

diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.tsx b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
@@ -96,7 +96,7 @@ export const VCarousel = genericComponent<VCarouselSlots>()({
     }
 
     useRender(() => {
-      const [windowProps] = VWindow.filterProps(props)
+      const windowProps = VWindow.filterProps(props)
 
       return (
         <VWindow

diff --git a/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx b/packages/vuetify/src/components/VCarousel/VCarouselItem.tsx
@@ -22,8 +22,8 @@ export const VCarouselItem = genericComponent<VImgSlots>()({
 
   setup (props, { slots, attrs }) {
     useRender(() => {
-      const [imgProps] = VImg.filterProps(props)
-      const [windowItemProps] = VWindowItem.filterProps(props)
+      const imgProps = VImg.filterProps(props)
+      const windowItemProps = VWindowItem.filterProps(props)
 
       return (
         <VWindowItem

diff --git a/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx b/packages/vuetify/src/components/VCheckbox/VCheckbox.tsx
@@ -45,8 +45,8 @@ export const VCheckbox = genericComponent<VCheckboxSlots>()({
 
     useRender(() => {
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)
-      const [inputProps, _1] = VInput.filterProps(props)
-      const [checkboxProps, _2] = VCheckboxBtn.filterProps(props)
+      const inputProps = VInput.filterProps(props)
+      const checkboxProps = VCheckboxBtn.filterProps(props)
 
       return (
         <VInput

diff --git a/packages/vuetify/src/components/VCheckbox/VCheckboxBtn.tsx b/packages/vuetify/src/components/VCheckbox/VCheckboxBtn.tsx
@@ -58,21 +58,21 @@ export const VCheckboxBtn = genericComponent<VSelectionControlSlots>()({
     })
 
     useRender(() => {
-      const controlProps = omit(VSelectionControl.filterProps(props)[0], ['modelValue'])
+      const controlProps = omit(VSelectionControl.filterProps(props), ['modelValue'])
       return (
         <VSelectionControl
           { ...controlProps }
           v-model={ model.value }
-        class={[
-          'v-checkbox-btn',
-          props.class,
-        ]}
-        style={ props.style }
+          class={[
+            'v-checkbox-btn',
+            props.class,
+          ]}
+          style={ props.style }
           type="checkbox"
           onUpdate:modelValue={ onChange }
           falseIcon={ falseIcon.value }
           trueIcon={ trueIcon.value }
-        aria-checked={ indeterminate.value ? 'mixed' : undefined }
+          aria-checked={ indeterminate.value ? 'mixed' : undefined }
           v-slots={ slots }
         />
       )

diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
@@ -126,7 +126,7 @@ export const VColorPicker = defineComponent({
     })
 
     useRender(() => {
-      const [sheetProps] = VSheet.filterProps(props)
+      const sheetProps = VSheet.filterProps(props)
 
       return (
         <VSheet

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -417,7 +417,7 @@ export const VCombobox = genericComponent<new <
         slots['no-data']
       )
       const isDirty = model.value.length > 0
-      const [textFieldProps] = VTextField.filterProps(props)
+      const textFieldProps = VTextField.filterProps(props)
 
       return (
         <VTextField

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -188,10 +188,10 @@ export const VDataTable = genericComponent<VDataTableSlots>()({
     }))
 
     useRender(() => {
-      const [dataTableFooterProps] = VDataTableFooter.filterProps(props)
-      const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props)
-      const [dataTableRowsProps] = VDataTableRows.filterProps(props)
-      const [tableProps] = VTable.filterProps(props)
+      const dataTableFooterProps = VDataTableFooter.filterProps(props)
+      const dataTableHeadersProps = VDataTableHeaders.filterProps(props)
+      const dataTableRowsProps = VDataTableRows.filterProps(props)
+      const tableProps = VTable.filterProps(props)
 
       return (
         <VTable

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -126,10 +126,10 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
     }))
 
     useRender(() => {
-      const [dataTableFooterProps] = VDataTableFooter.filterProps(props)
-      const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props)
-      const [dataTableRowsProps] = VDataTableRows.filterProps(props)
-      const [tableProps] = VTable.filterProps(props)
+      const dataTableFooterProps = VDataTableFooter.filterProps(props)
+      const dataTableHeadersProps = VDataTableHeaders.filterProps(props)
+      const dataTableRowsProps = VDataTableRows.filterProps(props)
+      const tableProps = VTable.filterProps(props)
 
       return (
         <VTable

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -141,9 +141,9 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
     }))
 
     useRender(() => {
-      const [dataTableHeadersProps] = VDataTableHeaders.filterProps(props)
-      const [dataTableRowsProps] = VDataTableRows.filterProps(props)
-      const [tableProps] = VTable.filterProps(props)
+      const dataTableHeadersProps = VDataTableHeaders.filterProps(props)
+      const dataTableRowsProps = VDataTableRows.filterProps(props)
+      const tableProps = VTable.filterProps(props)
 
       return (
         <VTable

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -226,12 +226,12 @@ export const VDatePicker = genericComponent<new <T, Multiple extends boolean = f
     })
 
     useRender(() => {
-      const [pickerProps] = VPicker.filterProps(props)
-      const [datePickerControlsProps] = VDatePickerControls.filterProps(props)
-      const [datePickerHeaderProps] = VDatePickerHeader.filterProps(props)
-      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props)
-      const [datePickerMonthsProps] = VDatePickerMonths.filterProps(omit(props, ['modelValue']))
-      const [datePickerYearsProps] = VDatePickerYears.filterProps(omit(props, ['modelValue']))
+      const pickerProps = VPicker.filterProps(props)
+      const datePickerControlsProps = VDatePickerControls.filterProps(props)
+      const datePickerHeaderProps = VDatePickerHeader.filterProps(props)
+      const datePickerMonthProps = VDatePickerMonth.filterProps(props)
+      const datePickerMonthsProps = omit(VDatePickerMonths.filterProps(props), ['modelValue'])
+      const datePickerYearsProps = omit(VDatePickerYears.filterProps(props), ['modelValue'])
 
       return (
         <VPicker

diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx
@@ -104,7 +104,7 @@ export const VDialog = genericComponent<OverlaySlots>()({
     )
 
     useRender(() => {
-      const [overlayProps] = VOverlay.filterProps(props)
+      const overlayProps = VOverlay.filterProps(props)
 
       return (
         <VOverlay

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -161,8 +161,8 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
       const hasCounter = !!(slots.counter || props.counter)
       const hasDetails = !!(hasCounter || slots.details)
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
-      const [{ modelValue: _, ...inputProps }] = VInput.filterProps(props)
-      const [fieldProps] = filterFieldProps(props)
+      const { modelValue: _, ...inputProps } = VInput.filterProps(props)
+      const fieldProps = filterFieldProps(props)
 
       return (
         <VInput

diff --git a/packages/vuetify/src/components/VImg/VImg.tsx b/packages/vuetify/src/components/VImg/VImg.tsx
@@ -322,7 +322,7 @@ export const VImg = genericComponent<VImgSlots>()({
     }
 
     useRender(() => {
-      const [responsiveProps] = VResponsive.filterProps(props)
+      const responsiveProps = VResponsive.filterProps(props)
       return (
         <VResponsive
           class={[

diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
@@ -22,7 +22,7 @@ import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
 import { computed, ref, shallowRef, toRef } from 'vue'
-import { focusChild, genericComponent, getPropertyFromItem, pick, propsFactory, useRender } from '@/util'
+import { focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -43,7 +43,9 @@ function transformItem (props: ItemProps & { itemType: string }, item: any): Int
   const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle)
   const value = getPropertyFromItem(item, props.itemValue, undefined)
   const children = getPropertyFromItem(item, props.itemChildren)
-  const itemProps = props.itemProps === true ? pick(item, ['children'])[1] : getPropertyFromItem(item, props.itemProps)
+  const itemProps = props.itemProps === true
+    ? omit(item, ['children'])
+    : getPropertyFromItem(item, props.itemProps)
 
   const _props = {
     title,

diff --git a/packages/vuetify/src/components/VList/VListChildren.tsx b/packages/vuetify/src/components/VList/VListChildren.tsx
@@ -63,7 +63,7 @@ export const VListChildren = genericComponent<new <T extends InternalListItem>(
         title: slots.title ? (slotProps: any) => slots.title?.({ ...slotProps, item }) : undefined,
       }
 
-      const [listGroupProps, _1] = VListGroup.filterProps(itemProps)
+      const listGroupProps = VListGroup.filterProps(itemProps)
 
       return children ? (
         <VListGroup

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -155,7 +155,7 @@ export const VMenu = genericComponent<OverlaySlots>()({
     )
 
     useRender(() => {
-      const [overlayProps] = VOverlay.filterProps(props)
+      const overlayProps = VOverlay.filterProps(props)
 
       return (
         <VOverlay

diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
@@ -67,8 +67,8 @@ export const VRadioGroup = genericComponent<VRadioGroupSlots>()({
 
     useRender(() => {
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)
-      const [inputProps, _1] = VInput.filterProps(props)
-      const [controlProps, _2] = VSelectionControl.filterProps(props)
+      const inputProps = VInput.filterProps(props)
+      const controlProps = VSelectionControl.filterProps(props)
       const label = slots.label
         ? slots.label({
           label: props.label,

diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
@@ -125,7 +125,7 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
     const trackStop = computed(() => position(model.value[1]))
 
     useRender(() => {
-      const [inputProps, _] = VInput.filterProps(props)
+      const inputProps = VInput.filterProps(props)
       const hasPrepend = !!(props.label || slots.label || slots.prepend)
 
       return (

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -289,7 +289,7 @@ export const VSelect = genericComponent<new <
         slots['no-data']
       )
       const isDirty = model.value.length > 0
-      const [textFieldProps] = VTextField.filterProps(props)
+      const textFieldProps = VTextField.filterProps(props)
 
       const placeholder = isDirty || (
         !isFocused.value &&

diff --git a/packages/vuetify/src/components/VSlider/VSlider.tsx b/packages/vuetify/src/components/VSlider/VSlider.tsx
@@ -94,7 +94,7 @@ export const VSlider = genericComponent<VSliderSlots>()({
     const trackStop = computed(() => position(model.value))
 
     useRender(() => {
-      const [inputProps, _] = VInput.filterProps(props)
+      const inputProps = VInput.filterProps(props)
       const hasPrepend = !!(props.label || slots.label || slots.prepend)
 
       return (

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -147,7 +147,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
     }
 
     useRender(() => {
-      const [overlayProps] = VOverlay.filterProps(props)
+      const overlayProps = VOverlay.filterProps(props)
       const hasContent = !!(slots.default || slots.text || props.text)
 
       return (

diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -126,7 +126,7 @@ export const VStepper = genericComponent<VStepperSlots>()({
     })
 
     useRender(() => {
-      const [sheetProps] = VSheet.filterProps(props)
+      const sheetProps = VSheet.filterProps(props)
 
       const hasHeader = !!(slots.header || props.items.length)
       const hasWindow = props.items.length > 0

diff --git a/packages/vuetify/src/components/VStepper/VStepperWindow.tsx b/packages/vuetify/src/components/VStepper/VStepperWindow.tsx
@@ -49,7 +49,7 @@ export const VStepperWindow = genericComponent()({
     })
 
     useRender(() => {
-      const [windowProps] = VWindow.filterProps(props)
+      const windowProps = VWindow.filterProps(props)
 
       return (
         <VWindow

diff --git a/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx b/packages/vuetify/src/components/VStepper/VStepperWindowItem.tsx
@@ -15,7 +15,7 @@ export const VStepperWindowItem = genericComponent()({
 
   setup (props, { slots }) {
     useRender(() => {
-      const [windowItemProps] = VWindowItem.filterProps(props)
+      const windowItemProps = VWindowItem.filterProps(props)
 
       return (
         <VWindowItem

diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -82,8 +82,8 @@ export const VSwitch = genericComponent<VSwitchSlots>()({
 
     useRender(() => {
       const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)
-      const [inputProps, _1] = VInput.filterProps(props)
-      const [controlProps, _2] = VSelectionControl.filterProps(props)
+      const inputProps = VInput.filterProps(props)
+      const controlProps = VSelectionControl.filterProps(props)
 
       return (
         <VInput

diff --git a/packages/vuetify/src/components/VTabs/VTab.tsx b/packages/vuetify/src/components/VTabs/VTab.tsx
@@ -101,7 +101,7 @@ export const VTab = genericComponent()({
     }
 
     useRender(() => {
-      const [btnProps] = VBtn.filterProps(props)
+      const btnProps = VBtn.filterProps(props)
 
       return (
         <VBtn

diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -85,7 +85,7 @@ export const VTabs = genericComponent()({
     })
 
     useRender(() => {
-      const [slideGroupProps] = VSlideGroup.filterProps(props)
+      const slideGroupProps = VSlideGroup.filterProps(props)
 
       return (
         <VSlideGroup

diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -157,8 +157,8 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
       const hasCounter = !!(slots.counter || (props.counter !== false && props.counter != null))
       const hasDetails = !!(hasCounter || slots.details)
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
-      const [{ modelValue: _, ...inputProps }] = VInput.filterProps(props)
-      const [fieldProps] = filterFieldProps(props)
+      const { modelValue: _, ...inputProps } = VInput.filterProps(props)
+      const fieldProps = filterFieldProps(props)
 
       return (
         <VInput

diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -205,8 +205,8 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
       const hasCounter = !!(slots.counter || props.counter || props.counterValue)
       const hasDetails = !!(hasCounter || slots.details)
       const [rootAttrs, inputAttrs] = filterInputAttrs(attrs)
-      const [{ modelValue: _, ...inputProps }] = VInput.filterProps(props)
-      const [fieldProps] = filterFieldProps(props)
+      const { modelValue: _, ...inputProps } = VInput.filterProps(props)
+      const fieldProps = filterFieldProps(props)
 
       return (
         <VInput

diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.tsx b/packages/vuetify/src/components/VTooltip/VTooltip.tsx
@@ -87,7 +87,7 @@ export const VTooltip = genericComponent<OverlaySlots>()({
     )
 
     useRender(() => {
-      const [overlayProps] = VOverlay.filterProps(props)
+      const overlayProps = VOverlay.filterProps(props)
 
       return (
         <VOverlay