fix(cache): use cacheNoArgs for better performance

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;

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;

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);

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);

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,16 +271,15 @@ export const TitleBar = (props: TitleBarProps) => {
     // tracking mouse position
     window.addEventListener('mousemove', listener);
     const ytmusicAppLayout = document.querySelector<HTMLElement>('#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');
     }
-    })
+    });
-
   });
 
 

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;

src/providers/decorators.ts

@@ -40,6 +40,16 @@ export function cache<T extends (...params: P) => R, P extends never[], R>(
   }) as T;
 }
 
+export function cacheNoArgs<R>(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
 */