From 59a5679cbb19724923caad2b4463af1107839686 Mon Sep 17 00:00:00 2001 From: JellyBrick Date: Sun, 4 Aug 2024 16:31:07 +0900 Subject: [PATCH] fix(cache): use `cacheNoArgs` for better performance --- .../in-app-menu/renderer/IconButton.tsx | 4 ++-- .../in-app-menu/renderer/MenuButton.tsx | 4 ++-- src/plugins/in-app-menu/renderer/Panel.tsx | 6 +++--- .../in-app-menu/renderer/PanelItem.tsx | 16 ++++++++-------- src/plugins/in-app-menu/renderer/TitleBar.tsx | 19 +++++++++---------- .../in-app-menu/renderer/WindowController.tsx | 4 ++-- src/providers/decorators.ts | 10 ++++++++++ 7 files changed, 36 insertions(+), 27 deletions(-) diff --git a/src/plugins/in-app-menu/renderer/IconButton.tsx b/src/plugins/in-app-menu/renderer/IconButton.tsx index e1c6bc5f23..b3301b814c 100644 --- a/src/plugins/in-app-menu/renderer/IconButton.tsx +++ b/src/plugins/in-app-menu/renderer/IconButton.tsx @@ -1,9 +1,9 @@ import { JSX } from 'solid-js'; import { css } from 'solid-styled-components'; -import { cache } from '@/providers/decorators'; +import { cacheNoArgs } from '@/providers/decorators'; -const iconButton = cache(() => css` +const iconButton = cacheNoArgs(() => css` -webkit-app-region: none; background: transparent; diff --git a/src/plugins/in-app-menu/renderer/MenuButton.tsx b/src/plugins/in-app-menu/renderer/MenuButton.tsx index ae6ac9f807..c208b3320a 100644 --- a/src/plugins/in-app-menu/renderer/MenuButton.tsx +++ b/src/plugins/in-app-menu/renderer/MenuButton.tsx @@ -1,9 +1,9 @@ import { JSX, splitProps } from 'solid-js'; import { css } from 'solid-styled-components'; -import { cache } from '@/providers/decorators'; +import { cacheNoArgs } from '@/providers/decorators'; -const menuStyle = cache(() => css` +const menuStyle = cacheNoArgs(() => css` -webkit-app-region: none; display: flex; diff --git a/src/plugins/in-app-menu/renderer/Panel.tsx b/src/plugins/in-app-menu/renderer/Panel.tsx index 20c74ba174..f1f4f26cb3 100644 --- a/src/plugins/in-app-menu/renderer/Panel.tsx +++ b/src/plugins/in-app-menu/renderer/Panel.tsx @@ -5,9 +5,9 @@ import { Transition } from 'solid-transition-group'; import { autoUpdate, flip, offset, OffsetOptions, size } from '@floating-ui/dom'; import { useFloating } from 'solid-floating-ui'; -import { cache } from '@/providers/decorators'; +import { cacheNoArgs } from '@/providers/decorators'; -const panelStyle = cache(() => css` +const panelStyle = cacheNoArgs(() => css` position: fixed; top: var(--offset-y, 0); left: var(--offset-x, 0); @@ -36,7 +36,7 @@ const panelStyle = cache(() => css` transform-origin: var(--origin-x, 50%) var(--origin-y, 50%); `); -const animationStyle = cache(() => ({ +const animationStyle = cacheNoArgs(() => ({ enter: css` opacity: 0; transform: scale(0.9); diff --git a/src/plugins/in-app-menu/renderer/PanelItem.tsx b/src/plugins/in-app-menu/renderer/PanelItem.tsx index 68bdd67e7c..c54a0ae4f0 100644 --- a/src/plugins/in-app-menu/renderer/PanelItem.tsx +++ b/src/plugins/in-app-menu/renderer/PanelItem.tsx @@ -8,9 +8,9 @@ import { useFloating } from 'solid-floating-ui'; import { autoUpdate, offset, size } from '@floating-ui/dom'; import { Panel } from './Panel'; -import { cache } from '@/providers/decorators'; +import { cacheNoArgs } from '@/providers/decorators'; -const itemStyle = cache(() => css` +const itemStyle = cacheNoArgs(() => css` position: relative; -webkit-app-region: none; @@ -47,18 +47,18 @@ const itemStyle = cache(() => css` } `); -const itemIconStyle = cache(() => css` +const itemIconStyle = cacheNoArgs(() => css` height: 32px; padding: 4px; color: white; `); -const itemLabelStyle = cache(() => css` +const itemLabelStyle = cacheNoArgs(() => css` font-size: 12px; color: white; `); -const itemChipStyle = cache(() => css` +const itemChipStyle = cacheNoArgs(() => css` display: flex; justify-content: center; align-items: center; @@ -76,7 +76,7 @@ const itemChipStyle = cache(() => css` line-height: 1; `); -const toolTipStyle = cache(() => css` +const toolTipStyle = cacheNoArgs(() => css` min-width: 32px; width: 100%; height: 100%; @@ -92,7 +92,7 @@ const toolTipStyle = cache(() => css` font-size: 10px; `); -const popupStyle = cache(() => css` +const popupStyle = cacheNoArgs(() => css` position: fixed; top: var(--offset-y, 0); left: var(--offset-x, 0); @@ -105,7 +105,7 @@ const popupStyle = cache(() => css` `); -const animationStyle = cache(() => ({ +const animationStyle = cacheNoArgs(() => ({ enter: css` opacity: 0; transform: scale(0.9); diff --git a/src/plugins/in-app-menu/renderer/TitleBar.tsx b/src/plugins/in-app-menu/renderer/TitleBar.tsx index c9db625005..f92089224f 100644 --- a/src/plugins/in-app-menu/renderer/TitleBar.tsx +++ b/src/plugins/in-app-menu/renderer/TitleBar.tsx @@ -9,12 +9,12 @@ import { PanelItem } from './PanelItem'; import { IconButton } from './IconButton'; import { WindowController } from './WindowController'; -import { cache } from '@/providers/decorators'; +import { cacheNoArgs } from '@/providers/decorators'; import type { RendererContext } from '@/types/contexts'; import type { InAppMenuConfig } from '../constants'; -const titleStyle = cache(() => css` +const titleStyle = cacheNoArgs(() => css` -webkit-app-region: drag; box-sizing: border-box; @@ -50,7 +50,7 @@ const titleStyle = cache(() => css` } `); -const separatorStyle = cache(() => css` +const separatorStyle = cacheNoArgs(() => css` min-height: 1px; height: 1px; margin: 4px 0; @@ -58,7 +58,7 @@ const separatorStyle = cache(() => css` background-color: rgba(255, 255, 255, 0.2); `); -const animationStyle = cache(() => ({ +const animationStyle = cacheNoArgs(() => ({ enter: css` opacity: 0; transform: translateX(-50%) scale(0.8); @@ -271,19 +271,18 @@ export const TitleBar = (props: TitleBarProps) => { // tracking mouse position window.addEventListener('mousemove', listener); const ytmusicAppLayout = document.querySelector('#layout'); - ytmusicAppLayout?.addEventListener("scroll",()=>{ + ytmusicAppLayout?.addEventListener('scroll', () => { const scrollValue = ytmusicAppLayout.scrollTop; if (scrollValue > 20){ - ytmusicAppLayout.classList.add("content-scrolled"); + ytmusicAppLayout.classList.add('content-scrolled'); } else{ - ytmusicAppLayout.classList.remove("content-scrolled"); + ytmusicAppLayout.classList.remove('content-scrolled'); } - }) - + }); }); - + createEffect(() => { if (!menu() && data()) { diff --git a/src/plugins/in-app-menu/renderer/WindowController.tsx b/src/plugins/in-app-menu/renderer/WindowController.tsx index 63ae1345a6..44c703ecfd 100644 --- a/src/plugins/in-app-menu/renderer/WindowController.tsx +++ b/src/plugins/in-app-menu/renderer/WindowController.tsx @@ -2,9 +2,9 @@ import { css } from 'solid-styled-components'; import { Show } from 'solid-js'; import { IconButton } from './IconButton'; -import { cache } from '@/providers/decorators'; +import { cacheNoArgs } from '@/providers/decorators'; -const containerStyle = cache(() => css` +const containerStyle = cacheNoArgs(() => css` display: flex; justify-content: flex-end; align-items: center; diff --git a/src/providers/decorators.ts b/src/providers/decorators.ts index f0746b266f..805a1d5794 100644 --- a/src/providers/decorators.ts +++ b/src/providers/decorators.ts @@ -40,6 +40,16 @@ export function cache R, P extends never[], R>( }) as T; } +export function cacheNoArgs(fn: () => R): () => R { + let cached: R; + return () => { + if (cached === undefined) { + cached = fn(); + } + return cached; + }; +} + /* The following are currently unused, but potentially useful in the future */