Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(defaults): improve component performance #16775

Merged
merged 22 commits into from
Mar 14, 2023
Merged

refactor(defaults): improve component performance #16775

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f028da5
chore: init
johnleider Feb 24, 2023
48f7743
chore: updates from feedback
johnleider Feb 27, 2023
8a7d285
test(VChip): fix broken e2e test
johnleider Feb 27, 2023
c847a59
Merge branch 'master' into refactor/component-perf-tuning
johnleider Feb 28, 2023
25eeba5
fix(VDefaultsProvider): make computed defaults reactive
johnleider Feb 28, 2023
7f8d4c2
refactor(VAlert): revert emit events change
johnleider Feb 28, 2023
f756a24
refactor: implement conditional defaults-provider logic
johnleider Mar 2, 2023
f9a9588
test(VSelects): fix cypress test issues
johnleider Mar 3, 2023
f044f3f
Merge branch 'master' into refactor/component-perf-tuning
johnleider Mar 3, 2023
161c6df
refactor(VTimelineDivider/VTabs): conditional defaults
johnleider Mar 3, 2023
f4d801b
Merge branch 'master' into refactor/component-perf-tuning
KaelWD Mar 7, 2023
c003e6a
fix(VCardItem): use v-avatar for both icon/avatar props
johnleider Mar 7, 2023
4147863
use jsx children instead of v-slots
KaelWD Mar 8, 2023
a247762
remove redundant fragment
KaelWD Mar 8, 2023
75bd94e
remove redundant fragment
KaelWD Mar 8, 2023
38e1453
use jsx children instead of v-slots
KaelWD Mar 8, 2023
ff6e3a2
remove unnecessary toRef()
KaelWD Mar 8, 2023
13e30ac
Merge branch 'master' into refactor/component-perf-tuning
KaelWD Mar 8, 2023
9364f16
fix chip prepend/append avatar
KaelWD Mar 8, 2023
e06c84f
Merge branch 'master' into refactor/component-perf-tuning
johnleider Mar 13, 2023
5acadc9
chore(api-generator): update defaults provider peop descriptions
johnleider Mar 14, 2023
92e6a87
Merge branch 'master' into refactor/component-perf-tuning
johnleider Mar 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/vuetify/dev/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ library.add(fas)
export default viteSSR(App, { routes }, ({ app }) => {
const head = createHead()

app.config.performance = true
app.use(head)
app.use(vuetify)
app.component('FontAwesomeIcon', FontAwesomeIcon)
Expand Down
94 changes: 58 additions & 36 deletions packages/vuetify/src/components/VAlert/VAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,12 @@ export const VAlert = genericComponent<VAlertSlots>()({
},

emits: {
'click:close': (e: Event) => true,
'update:modelValue': (value: boolean) => true,
click: (e: MouseEvent | KeyboardEvent) => true,
johnleider marked this conversation as resolved.
Show resolved Hide resolved
},

setup (props, { slots }) {
setup (props, { emit, slots }) {
const isActive = useProxiedModel(props, 'modelValue')
const icon = computed(() => {
if (props.icon === false) return undefined
Expand All @@ -125,8 +127,10 @@ export const VAlert = genericComponent<VAlertSlots>()({

const closeProps = computed(() => ({
'aria-label': t(props.closeLabel),
onClick (e: MouseEvent) {
onClick (e: Event) {
johnleider marked this conversation as resolved.
Show resolved Hide resolved
isActive.value = false

emit('click:close', e)
},
}))

Expand Down Expand Up @@ -176,23 +180,31 @@ export const VAlert = genericComponent<VAlertSlots>()({
) }

{ hasPrepend && (
<VDefaultsProvider
key="prepend"
defaults={{
VIcon: {
density: props.density,
icon: icon.value,
size: props.prominent ? 44 : 28,
},
}}
>
<div class="v-alert__prepend">
{ slots.prepend
? slots.prepend()
: icon.value && (<VIcon />)
}
</div>
</VDefaultsProvider>
<div key="prepend" class="v-alert__prepend">
{ !slots.prepend && (
<VIcon
key="prepend-icon"
density={ props.density }
icon={ icon.value }
size={ props.prominent ? 44 : 28 }
/>
) }

{ slots.prepend && (
johnleider marked this conversation as resolved.
Show resolved Hide resolved
<VDefaultsProvider
key="prepend-defaults"
disabled={ !icon.value }
defaults={{
VIcon: {
density: props.density,
icon: icon.value,
size: props.prominent ? 44 : 28,
},
}}
v-slots:default={ slots.prepend }
/>
) }
</div>
) }

<div class="v-alert__content">
Expand All @@ -202,9 +214,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
</VAlertTitle>
) }

{ hasText && (
slots.text ? slots.text() : props.text
) }
{ hasText && (slots.text?.() ?? props.text) }

{ slots.default?.() }
</div>
Expand All @@ -216,20 +226,32 @@ export const VAlert = genericComponent<VAlertSlots>()({
) }

{ hasClose && (
<VDefaultsProvider
key="close"
defaults={{
VBtn: {
icon: props.closeIcon,
size: 'x-small',
variant: 'text',
},
}}
>
<div class="v-alert__close">
{ slots.close?.({ props: closeProps.value }) ?? <VBtn { ...closeProps.value } /> }
</div>
</VDefaultsProvider>
<div key="close" class="v-alert__close">
{ slots.close && (
<VDefaultsProvider
key="close-defaults"
defaults={{
VBtn: {
icon: props.closeIcon,
size: 'x-small',
variant: 'text',
},
}}
>
{ slots.close({ props: closeProps.value }) }
</VDefaultsProvider>
) }

{ !slots.close && (
<VBtn
key="close-btn"
icon={ props.closeIcon }
size="x-small"
variant="text"
{ ...closeProps.value }
/>
) }
</div>
) }
</props.tag>
)
Expand Down
54 changes: 31 additions & 23 deletions packages/vuetify/src/components/VBanner/VBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@ export const VBanner = genericComponent<VBannerSlots>()({

useRender(() => {
const hasText = !!(props.text || slots.text)
const hasPrepend = !!(slots.prepend || props.avatar || props.icon)
const hasPrependMedia = !!(props.avatar || props.icon)
const hasPrepend = !!(hasPrependMedia || slots.prepend)

return (
<props.tag
Expand All @@ -103,40 +104,47 @@ export const VBanner = genericComponent<VBannerSlots>()({
role="banner"
>
{ hasPrepend && (
<VDefaultsProvider
key="prepend"
defaults={{
VAvatar: {
color: color.value,
density: density.value,
icon: props.icon,
image: props.avatar,
},
}}
>
<div class="v-banner__prepend">
{ slots.prepend
? slots.prepend()
: (props.avatar || props.icon) && (<VAvatar />)
}
</div>
</VDefaultsProvider>
<div key="prepend" class="v-banner__prepend">
{ !slots.prepend && (
<VAvatar
key="prepend-avatar"
color={ color.value }
density={ density.value }
icon={ props.icon }
image={ props.avatar }
/>
) }

{ slots.prepend && (
<VDefaultsProvider
key="prepend-defaults"
disabled={ !hasPrependMedia }
defaults={{
VAvatar: {
color: color.value,
density: density.value,
icon: props.icon,
image: props.avatar,
},
}}
v-slots:default={ slots.prepend }
/>
) }
</div>
) }

<div class="v-banner__content">
{ hasText && (
<VBannerText key="text">
{ slots.text ? slots.text() : props.text }
{ slots.text?.() ?? props.text }
</VBannerText>
) }

{ slots.default?.() }
</div>

{ slots.actions && (
<VBannerActions>
{ slots.actions() }
</VBannerActions>
<VBannerActions key="actions" v-slots:default={ slots.actions } />
) }
</props.tag>
)
Expand Down
35 changes: 19 additions & 16 deletions packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,22 +93,25 @@ export const VBreadcrumbs = genericComponent<new <T>() => {
style={ backgroundColorStyles.value }
>
{ hasPrepend && (
<VDefaultsProvider
key="prepend"
defaults={{
VIcon: {
icon: props.icon,
start: true,
},
}}
>
<div class="v-breadcrumbs__prepend">
{ slots.prepend
? slots.prepend()
: props.icon && (<VIcon />)
}
</div>
</VDefaultsProvider>
<div key="prepend" class="v-breadcrumbs__prepend">
{ !slots.prepend && (
<VIcon key="prepend-icon" start icon={ props.icon } />
) }

{ slots.prepend && (
<VDefaultsProvider
key="prepend-default"
disabled={ !props.icon }
defaults={{
VIcon: {
icon: props.icon,
start: true,
},
}}
v-slots:default={ slots.prepend }
/>
) }
</div>
) }

{ props.items.map((item, index, array) => (
Expand Down
91 changes: 53 additions & 38 deletions packages/vuetify/src/components/VBtn/VBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable complexity */
// Styles
import './VBtn.sass'

Expand Down Expand Up @@ -190,50 +191,64 @@ export const VBtn = genericComponent<VBtnSlots>()({
{ genOverlays(true, 'v-btn') }

{ !props.icon && hasPrepend && (
<VDefaultsProvider
key="prepend"
defaults={{
VIcon: {
icon: props.prependIcon,
},
}}
>
<span class="v-btn__prepend">
{ slots.prepend?.() ?? (<VIcon />) }
</span>
</VDefaultsProvider>
<span key="prepend" class="v-btn__prepend">
{ !slots.prepend && (
<VIcon key="prepend-icon" icon={ props.prependIcon } />
) }

{ slots.prepend && (
<VDefaultsProvider
key="prepend-defaults"
disabled={ !props.prependIcon }
defaults={{
VIcon: {
icon: props.prependIcon,
},
}}
v-slots:default={ slots.prepend }
/>
) }
</span>
) }

<span class="v-btn__content" data-no-activator="">
<VDefaultsProvider
key="content"
defaults={{
VIcon: {
icon: hasIcon ? props.icon : undefined,
},
}}
>
{ slots.default?.() ?? (
hasIcon && (
<VIcon key="icon" />
)
) }
</VDefaultsProvider>
{ slots.default && (
<VDefaultsProvider
key="content-defaults"
disabled={ !hasIcon }
defaults={{
VIcon: {
icon: props.icon,
},
}}
v-slots:default={ slots.default }
/>
) }

{ !slots.default && hasIcon && (
<VIcon key="content-icon" icon={ props.icon } />
) }
</span>

{ !props.icon && hasAppend && (
<VDefaultsProvider
key="append"
defaults={{
VIcon: {
icon: props.appendIcon,
},
}}
>
<span class="v-btn__append">
{ slots.append?.() ?? (<VIcon />) }
</span>
</VDefaultsProvider>
<span key="append" class="v-btn__append">
{ slots.append && (
<VDefaultsProvider
key="append-defaults"
disabled={ !props.appendIcon }
defaults={{
VIcon: {
icon: props.appendIcon,
},
}}
v-slots:default={ slots.append }
/>
) }

{ !slots.append && (
<VIcon key="append-icon" icon={ props.appendIcon } />
) }
</span>
) }

{ !!props.loading && (
Expand Down
Loading