fix(in-app-menu): fix app crash in production

Author: Su-Yong

src/plugins/in-app-menu/renderer.tsx

@@ -1,5 +1,6 @@
 import { createSignal } from 'solid-js';
 import { render } from 'solid-js/web';
+import { extractCss } from 'solid-styled-components';
 
 import { TitleBar } from './renderer/TitleBar';
 import { defaultInAppMenuConfig, InAppMenuConfig } from './constants';

src/plugins/in-app-menu/renderer/IconButton.tsx

@@ -1,7 +1,9 @@
 import { JSX } from 'solid-js';
 import { css } from 'solid-styled-components';
 
-const iconButton = css`
+import { cache } from '@/providers/decorators';
+
+const iconButton = cache(() => css`
   background: transparent;
 
   width: 24px;
@@ -28,12 +30,12 @@ const iconButton = css`
   &:active {
     scale: 0.9;
   }
-`;
+`);
 
 type CollapseIconButtonProps = JSX.HTMLAttributes<HTMLButtonElement>;
 export const IconButton = (props: CollapseIconButtonProps) => {
   return (
-    <button {...props} class={iconButton}>
+    <button {...props} class={iconButton()}>
       {props.children}
     </button>
   );

src/plugins/in-app-menu/renderer/MenuButton.tsx

@@ -1,7 +1,8 @@
 import { JSX, splitProps } from 'solid-js';
 import { css } from 'solid-styled-components';
+import { cache } from '@/providers/decorators';
 
-const menuStyle = css`
+const menuStyle = cache(() => css`
   -webkit-app-region: none;
 
   display: flex;
@@ -25,7 +26,7 @@ const menuStyle = css`
   &[data-selected="true"] {
     background-color: rgba(255, 255, 255, 0.2);
   }
-`;
+`);
 
 export type MenuButtonProps = JSX.HTMLAttributes<HTMLLIElement> & {
   text?: string;
@@ -35,7 +36,7 @@ export const MenuButton = (props: MenuButtonProps) => {
   const [local, leftProps] = splitProps(props, ['text']);
 
   return (
-    <li {...leftProps} class={menuStyle} data-selected={props.selected}>
+    <li {...leftProps} class={menuStyle()} data-selected={props.selected}>
       {local.text}
     </li>
   );

src/plugins/in-app-menu/renderer/Panel.tsx

@@ -4,8 +4,9 @@ import { css } from 'solid-styled-components';
 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';
 
-const panelStyle = css`
+const panelStyle = cache(() => css`
   position: fixed;
   top: var(--offset-y, 0);
   left: var(--offset-x, 0);
@@ -32,9 +33,9 @@ const panelStyle = css`
   0 2px 8px rgba(0, 0, 0, 0.2);
 
   transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
-`;
+`);
 
-const animationStyle = {
+const animationStyle = cache(() => ({
   enter: css`
     opacity: 0;
     transform: scale(0.9);
@@ -49,7 +50,7 @@ const animationStyle = {
   exitActive: css`
     transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0);
   `,
-};
+}));
 
 export type Placement =
   'top'
@@ -122,16 +123,16 @@ export const Panel = (props: PanelProps) => {
     <Portal>
       <Transition
         appear
-        enterClass={animationStyle.enter}
-        enterActiveClass={animationStyle.enterActive}
-        exitToClass={animationStyle.exitTo}
-        exitActiveClass={animationStyle.exitActive}
+        enterClass={animationStyle().enter}
+        enterActiveClass={animationStyle().enterActive}
+        exitToClass={animationStyle().exitTo}
+        exitActiveClass={animationStyle().exitActive}
       >
         <Show when={local.open}>
           <ul
             {...leftProps}
             ref={setPanel}
-            class={panelStyle}
+            class={panelStyle()}
             style={{
               '--offset-x': `${position.x}px`,
               '--offset-y': `${position.y}px`,