From 2d051fedd763427d10ac2c0c1a0bd74fe7788501 Mon Sep 17 00:00:00 2001 From: molvqingtai Date: Mon, 28 Oct 2024 09:03:57 +0800 Subject: [PATCH] perf: optimize theme styles --- package.json | 1 - pnpm-lock.yaml | 14 ----------- src/app/content/App.tsx | 18 +++++++++----- src/app/content/components/EmojiButton.tsx | 15 +++++++----- src/app/content/components/LikeButton.tsx | 4 ++-- src/app/content/components/MessageList.tsx | 2 +- src/app/content/components/PromptItem.tsx | 5 +--- src/app/content/index.tsx | 14 +++++++---- src/app/content/views/AppButton/index.tsx | 28 ++++++++++------------ src/app/content/views/AppMain/index.tsx | 8 +++---- src/app/content/views/Footer/index.tsx | 8 +++---- src/app/content/views/Header/index.tsx | 2 +- src/app/options/App.tsx | 2 +- src/assets/styles/tailwind.css | 6 +++++ src/components/Markdown.tsx | 2 +- src/components/ui/Popover.tsx | 5 ++-- src/components/ui/ScrollArea.tsx | 5 +--- src/domain/AppStatus.ts | 2 +- src/hooks/useWindowResize.ts | 22 +++++++++++++++++ src/utils/getRootNode.ts | 5 ++++ src/utils/index.ts | 1 + tailwind.config.ts | 8 +++++++ 22 files changed, 105 insertions(+), 72 deletions(-) create mode 100644 src/hooks/useWindowResize.ts create mode 100644 src/utils/getRootNode.ts diff --git a/package.json b/package.json index 273961f..3c75843 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,6 @@ "idb-keyval": "^6.2.1", "lucide-react": "^0.453.0", "nanoid": "^5.0.7", - "next-themes": "^0.3.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f413aaf..4981fa2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,9 +98,6 @@ importers: nanoid: specifier: ^5.0.7 version: 5.0.7 - next-themes: - specifier: ^0.3.0 - version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -4949,12 +4946,6 @@ packages: resolution: {integrity: sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==} engines: {node: '>= 0.4.0'} - next-themes@0.3.0: - resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==} - peerDependencies: - react: ^16.8 || ^17 || ^18 - react-dom: ^16.8 || ^17 || ^18 - nice-try@1.0.5: resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==} @@ -12482,11 +12473,6 @@ snapshots: netmask@2.0.2: {} - next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - nice-try@1.0.5: {} no-case@3.0.4: diff --git a/src/app/content/App.tsx b/src/app/content/App.tsx index b00ef3e..57e5d36 100644 --- a/src/app/content/App.tsx +++ b/src/app/content/App.tsx @@ -15,6 +15,7 @@ import { AnimatePresence, motion } from 'framer-motion' import DanmakuContainer from './components/DanmakuContainer' import DanmakuDomain from '@/domain/Danmaku' import AppStatusDomain from '@/domain/AppStatus' +import { cn } from '@/utils' /** * Fix requestAnimationFrame error in jest @@ -63,24 +64,29 @@ export default function App() { return ( appStatusLoadIsFinished && ( - <> - +
+
{notUserInfo && ( - + )} - + - - + +
) ) } diff --git a/src/app/content/components/EmojiButton.tsx b/src/app/content/components/EmojiButton.tsx index 10cc39f..e95fa8c 100644 --- a/src/app/content/components/EmojiButton.tsx +++ b/src/app/content/components/EmojiButton.tsx @@ -10,7 +10,7 @@ export interface EmojiButtonProps { onSelect?: (value: string) => void } -const emojiGroups = chunk([...EMOJI_LIST], 8) +const emojiGroups = chunk([...EMOJI_LIST], 6) // BUG: https://github.com/radix-ui/primitives/pull/2433 // BUG https://github.com/radix-ui/primitives/issues/1666 @@ -34,16 +34,19 @@ const EmojiButton: FC = ({ onSelect }) => { - - + + {emojiGroups.map((group, index) => { return ( -
+
{group.map((emoji, index) => (
) diff --git a/src/app/content/views/AppMain/index.tsx b/src/app/content/views/AppMain/index.tsx index 9254a96..22d6f01 100644 --- a/src/app/content/views/AppMain/index.tsx +++ b/src/app/content/views/AppMain/index.tsx @@ -4,7 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion' import AppStatusDomain from '@/domain/AppStatus' import { useRemeshDomain, useRemeshQuery } from 'remesh-react' import { cn } from '@/utils' -import { useWindowSize } from 'react-use' +import useWindowResize from '@/hooks/useWindowResize' export interface AppMainProps { children?: ReactNode @@ -16,9 +16,9 @@ const AppMain: FC = ({ children, className }) => { const appOpenStatus = useRemeshQuery(appStatusDomain.query.OpenQuery()) const { x, y } = useRemeshQuery(appStatusDomain.query.PositionQuery()) - const { width } = useWindowSize() + const { width } = useWindowResize() - const isOnRightSide = x >= width / 2 + 44 + const isOnRightSide = x >= width / 2 + 50 const { size, setRef } = useResizable({ initSize: Math.max(375, width / 6), @@ -54,7 +54,7 @@ const AppMain: FC = ({ children, className }) => {
diff --git a/src/app/content/views/Footer/index.tsx b/src/app/content/views/Footer/index.tsx index d412868..95cbe5d 100644 --- a/src/app/content/views/Footer/index.tsx +++ b/src/app/content/views/Footer/index.tsx @@ -15,7 +15,7 @@ import useTriggerAway from '@/hooks/useTriggerAway' import { ScrollArea } from '@/components/ui/ScrollArea' import { Virtuoso, VirtuosoHandle } from 'react-virtuoso' import UserInfoDomain from '@/domain/UserInfo' -import { cn, getTextSimilarity } from '@/utils' +import { cn, getRootNode, getTextSimilarity } from '@/utils' import { Avatar, AvatarFallback } from '@/components/ui/Avatar' import { AvatarImage } from '@radix-ui/react-avatar' import ToastDomain from '@/domain/Toast' @@ -240,7 +240,7 @@ const Footer: FC = () => { }) } - const root = document.querySelector(__NAME__)?.shadowRoot + const root = getRootNode() return (
@@ -248,8 +248,8 @@ const Footer: FC = () => { { return (
- + diff --git a/src/app/options/App.tsx b/src/app/options/App.tsx index 87d6036..7256647 100644 --- a/src/app/options/App.tsx +++ b/src/app/options/App.tsx @@ -16,7 +16,7 @@ function App() {
- +
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css index 95b14c5..e253907 100644 --- a/src/assets/styles/tailwind.css +++ b/src/assets/styles/tailwind.css @@ -82,3 +82,9 @@ direction: ltr !important; } } + +/* @property --shimmer-angle { + syntax: ''; + inherits: false; + initial-value: 0deg; +} */ diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index 99855db..34c8db9 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -113,7 +113,7 @@ const Markdown: FC = ({ children = '', className }) => { ) }} remarkPlugins={[remarkGfm, remarkBreaks]} - className={cn(className, 'prose prose-sm prose-slate break-words dark:text-slate-400')} + className={cn(className, 'prose prose-sm prose-slate break-words dark:text-slate-50')} > {children} diff --git a/src/components/ui/Popover.tsx b/src/components/ui/Popover.tsx index d304a06..5ec947d 100644 --- a/src/components/ui/Popover.tsx +++ b/src/components/ui/Popover.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import * as PopoverPrimitive from '@radix-ui/react-popover' -import { cn } from '@/utils/index' +import { cn, getRootNode } from '@/utils' const Popover = PopoverPrimitive.Root @@ -10,8 +10,7 @@ const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = 'center', sideOffset = 4, ...props }, ref) => { - const root = document.querySelector(__NAME__)?.shadowRoot - + const root = getRootNode() return ( , React.ComponentPropsWithoutRef & { scrollLock?: boolean } >(({ className, children, scrollLock = true, ...props }, ref) => ( - + void) => { + const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }) + + useEffect(() => { + const handler = () => { + const width = window.innerWidth + const height = window.innerHeight + setSize({ width, height }) + callback?.({ width, height }) + } + window.addEventListener('resize', handler) + return () => { + window.removeEventListener('resize', handler) + } + }, []) + + return size +} + +export default useWindowResize diff --git a/src/utils/getRootNode.ts b/src/utils/getRootNode.ts new file mode 100644 index 0000000..8dced4a --- /dev/null +++ b/src/utils/getRootNode.ts @@ -0,0 +1,5 @@ +export const getRootNode = () => { + return document.querySelector(__NAME__)?.shadowRoot?.querySelector('#app') || document.body +} + +export default getRootNode diff --git a/src/utils/index.ts b/src/utils/index.ts index 2948d96..6bfa0a8 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -13,3 +13,4 @@ export { default as generateRandomAvatar } from './generateRandomAvatar' export { default as generateRandomName } from './generateRandomName' export { default as getCursorPosition } from './getCursorPosition' export { default as getTextSimilarity } from './getTextSimilarity' +export { default as getRootNode } from './getRootNode' diff --git a/tailwind.config.ts b/tailwind.config.ts index 06715da..768a2f4 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -81,6 +81,14 @@ export default { transform: 'rotate(215deg) translateX(-500px)', opacity: '0' } + }, + shimmer: { + '0%': { + '--shimmer-angle': '0deg' + }, + '100%': { + '--shimmer-angle': '360deg' + } } }, animation: {