From 969bf240d928e9b7c22bfd1118b7163e3bdc79f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B9=E7=AC=91=E5=AF=92?= Date: Tue, 12 Mar 2024 20:11:56 -0400 Subject: [PATCH] chore: use unplugin-auto-import --- .eslintrc.js => .eslintrc | 13 ++-- package.json | 2 + pnpm-lock.yaml | 82 ++++++++++++++++++++ src/auto-imports.d.ts | 53 +++++++++++++ src/components/{Window.tsx => AppWindow.tsx} | 6 +- src/components/Launchpad.tsx | 2 - src/components/Spotlight.tsx | 6 +- src/components/apps/Bear.tsx | 2 - src/components/apps/FaceTime.tsx | 2 - src/components/apps/Safari.tsx | 3 +- src/components/apps/Terminal.tsx | 6 +- src/components/apps/Typora.tsx | 1 - src/components/dock/Dock.tsx | 2 - src/components/dock/DockItem.tsx | 15 ++-- src/components/menus/AppleMenu.tsx | 7 +- src/components/menus/Battery.tsx | 2 - src/components/menus/ControlCenterMenu.tsx | 7 +- src/components/menus/TopBar.tsx | 14 +--- src/components/menus/WifiMenu.tsx | 7 +- src/components/menus/base.tsx | 6 +- src/configs/apps.tsx | 6 -- src/hooks/useAudio.ts | 2 - src/hooks/useBattery.ts | 2 - src/hooks/useClickOutside.ts | 7 +- src/hooks/useInterval.ts | 2 - src/hooks/useWindowSize.ts | 2 - src/index.tsx | 2 +- src/pages/Boot.tsx | 3 - src/pages/Desktop.tsx | 18 ++--- src/pages/Login.tsx | 3 +- src/stores/slices/dock.ts | 2 +- src/stores/slices/system.ts | 2 +- src/stores/slices/user.ts | 2 +- vite.config.ts | 16 ++-- 34 files changed, 197 insertions(+), 110 deletions(-) rename .eslintrc.js => .eslintrc (51%) create mode 100644 src/auto-imports.d.ts rename src/components/{Window.tsx => AppWindow.tsx} (97%) diff --git a/.eslintrc.js b/.eslintrc similarity index 51% rename from .eslintrc.js rename to .eslintrc index b47b948b..76f67b4d 100644 --- a/.eslintrc.js +++ b/.eslintrc @@ -1,11 +1,12 @@ -module.exports = { - extends: "@renovamen/eslint-config-react", - ignorePatterns: ["node_modules/", "dist/"], - rules: { +{ + "extends": "@renovamen/eslint-config-react", + "ignorePatterns": ["node_modules/", "dist/"], + "rules": { "@typescript-eslint/ban-types": "off", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-empty-function": "off", "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/no-unused-vars": "off" + "@typescript-eslint/no-unused-vars": "off", + "react/jsx-no-undef": "off" } -}; +} diff --git a/package.json b/package.json index f6df194a..9efbe7a6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "playground-macos", "private": true, + "type": "module", "scripts": { "build": "vite build", "dev": "vite --host", @@ -58,6 +59,7 @@ "taze": "^0.13.3", "typescript": "^5.4.2", "unocss": "^0.58.5", + "unplugin-auto-import": "^0.17.5", "vite": "^5.1.6" }, "packageManager": "pnpm@8.15.4" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 46d9bdc0..e48d8d52 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -135,6 +135,9 @@ importers: unocss: specifier: ^0.58.5 version: 0.58.5(postcss@8.4.35)(vite@5.1.6) + unplugin-auto-import: + specifier: ^0.17.5 + version: 0.17.5 vite: specifier: ^5.1.6 version: 5.1.6(@types/node@20.11.26) @@ -3618,6 +3621,12 @@ packages: resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} dev: true + /estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + dependencies: + '@types/estree': 1.0.5 + dev: true + /esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -6604,6 +6613,10 @@ packages: loose-envify: 1.4.0 dev: false + /scule@1.3.0: + resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==} + dev: true + /semver@6.3.1: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true @@ -6971,6 +6984,12 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} + /strip-literal@1.3.0: + resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==} + dependencies: + acorn: 8.11.3 + dev: true + /style-to-object@0.3.0: resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==} dependencies: @@ -7257,6 +7276,26 @@ packages: trough: 2.2.0 vfile: 6.0.1 + /unimport@3.7.1: + resolution: {integrity: sha512-V9HpXYfsZye5bPPYUgs0Otn3ODS1mDUciaBlXljI4C2fTwfFpvFZRywmlOu943puN9sncxROMZhsZCjNXEpzEQ==} + dependencies: + '@rollup/pluginutils': 5.1.0 + acorn: 8.11.3 + escape-string-regexp: 5.0.0 + estree-walker: 3.0.3 + fast-glob: 3.3.2 + local-pkg: 0.5.0 + magic-string: 0.30.8 + mlly: 1.6.1 + pathe: 1.1.2 + pkg-types: 1.0.3 + scule: 1.3.0 + strip-literal: 1.3.0 + unplugin: 1.9.0 + transitivePeerDependencies: + - rollup + dev: true + /unique-filename@3.0.0: resolution: {integrity: sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -7352,6 +7391,40 @@ packages: - supports-color dev: true + /unplugin-auto-import@0.17.5: + resolution: {integrity: sha512-fHNDkDSxv3PGagX1wmKBYBkgaM4AKAgZmdJw/bxjhNljx9KSXSgHpGfX0MwUrq9qw6q1bhHIZVWyOwoY2koo4w==} + engines: {node: '>=14'} + peerDependencies: + '@nuxt/kit': ^3.2.2 + '@vueuse/core': '*' + peerDependenciesMeta: + '@nuxt/kit': + optional: true + '@vueuse/core': + optional: true + dependencies: + '@antfu/utils': 0.7.7 + '@rollup/pluginutils': 5.1.0 + fast-glob: 3.3.2 + local-pkg: 0.5.0 + magic-string: 0.30.8 + minimatch: 9.0.3 + unimport: 3.7.1 + unplugin: 1.9.0 + transitivePeerDependencies: + - rollup + dev: true + + /unplugin@1.9.0: + resolution: {integrity: sha512-14PslvMY3gNbXnQtNIRB566Q057L5Fe7f5LDEamxVi0QQVxoz5hrveBwwZLcKyHtZ09ysmipxRRj5Lv+BGz2Iw==} + engines: {node: '>=14.0.0'} + dependencies: + acorn: 8.11.3 + chokidar: 3.6.0 + webpack-sources: 3.2.3 + webpack-virtual-modules: 0.6.1 + dev: true + /untildify@4.0.0: resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} engines: {node: '>=8'} @@ -7489,6 +7562,15 @@ packages: resolution: {integrity: sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==} dev: false + /webpack-sources@3.2.3: + resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} + engines: {node: '>=10.13.0'} + dev: true + + /webpack-virtual-modules@0.6.1: + resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} + dev: true + /which-boxed-primitive@1.0.2: resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} dependencies: diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts new file mode 100644 index 00000000..1567eca3 --- /dev/null +++ b/src/auto-imports.d.ts @@ -0,0 +1,53 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + const AppWindow: typeof import('./components/AppWindow')['default'] + const AppleMenu: typeof import('./components/menus/AppleMenu')['default'] + const Battery: typeof import('./components/menus/Battery')['default'] + const Bear: typeof import('./components/apps/Bear')['default'] + const ControlCenterMenu: typeof import('./components/menus/ControlCenterMenu')['default'] + const Dock: typeof import('./components/dock/Dock')['default'] + const DockItem: typeof import('./components/dock/DockItem')['default'] + const FaceTime: typeof import('./components/apps/FaceTime')['default'] + const Launchpad: typeof import('./components/Launchpad')['default'] + const MenuItem: typeof import('./components/menus/base')['MenuItem'] + const MenuItemGroup: typeof import('./components/menus/base')['MenuItemGroup'] + const Safari: typeof import('./components/apps/Safari')['default'] + const Spotlight: typeof import('./components/Spotlight')['default'] + const Terminal: typeof import('./components/apps/Terminal')['default'] + const TopBar: typeof import('./components/menus/TopBar')['default'] + const Typora: typeof import('./components/apps/Typora')['default'] + const VSCode: typeof import('./components/apps/VSCode')['default'] + const WifiMenu: typeof import('./components/menus/WifiMenu')['default'] + const Window: typeof import('./components/Window')['default'] + const createRef: typeof import('react')['createRef'] + const forwardRef: typeof import('react')['forwardRef'] + const lazy: typeof import('react')['lazy'] + const memo: typeof import('react')['memo'] + const startTransition: typeof import('react')['startTransition'] + const useAudio: typeof import('./hooks/useAudio')['useAudio'] + const useBattery: typeof import('./hooks/useBattery')['useBattery'] + const useCallback: typeof import('react')['useCallback'] + const useClickOutside: typeof import('./hooks/useClickOutside')['useClickOutside'] + const useContext: typeof import('react')['useContext'] + const useDebugValue: typeof import('react')['useDebugValue'] + const useDeferredValue: typeof import('react')['useDeferredValue'] + const useEffect: typeof import('react')['useEffect'] + const useId: typeof import('react')['useId'] + const useImperativeHandle: typeof import('react')['useImperativeHandle'] + const useInsertionEffect: typeof import('react')['useInsertionEffect'] + const useInterval: typeof import('./hooks/useInterval')['useInterval'] + const useLayoutEffect: typeof import('react')['useLayoutEffect'] + const useMemo: typeof import('react')['useMemo'] + const useReducer: typeof import('react')['useReducer'] + const useRef: typeof import('react')['useRef'] + const useState: typeof import('react')['useState'] + const useStore: typeof import('./stores/index')['useStore'] + const useSyncExternalStore: typeof import('react')['useSyncExternalStore'] + const useTransition: typeof import('react')['useTransition'] + const useWindowSize: typeof import('./hooks/useWindowSize')['useWindowSize'] +} diff --git a/src/components/Window.tsx b/src/components/AppWindow.tsx similarity index 97% rename from src/components/Window.tsx rename to src/components/AppWindow.tsx index 1f358992..27b698c8 100644 --- a/src/components/Window.tsx +++ b/src/components/AppWindow.tsx @@ -1,7 +1,5 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import { Rnd } from "react-rnd"; -import { useWindowSize } from "~/hooks"; -import { useStore } from "~/stores"; import { minMarginX, minMarginY, appBarHeight } from "~/utils"; const FullIcon = ({ size }: { size: number }) => { @@ -142,7 +140,7 @@ const Window = (props: WindowProps) => { const height = props.max ? winHeight : state.height; const disableMax = props.aspectRatio !== undefined; - const children = React.cloneElement(props.children as React.ReactElement, { + const children = React.cloneElement(props.children as React.ReactElement, { width: width }); diff --git a/src/components/Launchpad.tsx b/src/components/Launchpad.tsx index f84fef0c..0f817f23 100644 --- a/src/components/Launchpad.tsx +++ b/src/components/Launchpad.tsx @@ -1,6 +1,4 @@ -import { useState } from "react"; import { wallpapers, launchpadApps } from "~/configs"; -import { useStore } from "~/stores"; interface LaunchpadProps { show: boolean; diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx index 1326b9a0..ec2bffe4 100644 --- a/src/components/Spotlight.tsx +++ b/src/components/Spotlight.tsx @@ -1,8 +1,6 @@ -import React, { useRef, useState, useEffect } from "react"; -import type { RefObject } from "react"; +import React from "react"; import format from "date-fns/format"; import { apps, launchpadApps } from "~/configs"; -import { useClickOutside } from "~/hooks"; import type { LaunchpadData, AppsData } from "~/types"; const allApps: { [key: string]: (LaunchpadData | AppsData)[] } = { @@ -27,7 +25,7 @@ interface SpotlightProps { toggleSpotlight: () => void; openApp: (id: string) => void; toggleLaunchpad: (target: boolean) => void; - btnRef: RefObject; + btnRef: React.RefObject; } export default function Spotlight({ diff --git a/src/components/apps/Bear.tsx b/src/components/apps/Bear.tsx index 82b11f51..a668fa8a 100644 --- a/src/components/apps/Bear.tsx +++ b/src/components/apps/Bear.tsx @@ -1,4 +1,3 @@ -import { useState, useEffect, useCallback } from "react"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import remarkMath from "remark-math"; @@ -6,7 +5,6 @@ import rehypeKatex from "rehype-katex"; import rehypeExternalLinks from "rehype-external-links"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { dracula, prism } from "react-syntax-highlighter/dist/esm/styles/prism"; -import { useStore } from "~/stores"; import bear from "~/configs/bear"; import type { BearMdData } from "~/types"; diff --git a/src/components/apps/FaceTime.tsx b/src/components/apps/FaceTime.tsx index 3b19208d..80cddfe7 100644 --- a/src/components/apps/FaceTime.tsx +++ b/src/components/apps/FaceTime.tsx @@ -1,7 +1,5 @@ -import { useRef, useState } from "react"; import Webcam from "react-webcam"; import format from "date-fns/format"; -import { useStore } from "~/stores"; interface SidebarProps { state: FaceTimeState; diff --git a/src/components/apps/Safari.tsx b/src/components/apps/Safari.tsx index b2db5568..9554ab3f 100644 --- a/src/components/apps/Safari.tsx +++ b/src/components/apps/Safari.tsx @@ -1,7 +1,6 @@ -import React, { useState } from "react"; +import React from "react"; import { websites, wallpapers } from "~/configs"; import { checkURL } from "~/utils"; -import { useStore } from "~/stores"; import type { SiteSectionData, SiteData } from "~/types"; interface SafariState { diff --git a/src/components/apps/Terminal.tsx b/src/components/apps/Terminal.tsx index 2de5a7e1..a4d0da8d 100644 --- a/src/components/apps/Terminal.tsx +++ b/src/components/apps/Terminal.tsx @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React from "react"; import { terminal } from "~/configs"; import type { TerminalData } from "~/types"; @@ -21,7 +21,7 @@ interface TerminalState { } // rain animation is adopted from: https://codepen.io/P3R0/pen/MwgoKv -class HowDare extends Component { +class HowDare extends React.Component { private canvas = null as HTMLCanvasElement | null; private ctx = null as CanvasRenderingContext2D | null; private intervalId = null as any; @@ -92,7 +92,7 @@ class HowDare extends Component { } } -export default class Terminal extends Component<{}, TerminalState> { +export default class Terminal extends React.Component<{}, TerminalState> { private history = [] as string[]; private curHistory = 0; private curInputTimes = 0; diff --git a/src/components/apps/Typora.tsx b/src/components/apps/Typora.tsx index 2cc79423..1bace51c 100644 --- a/src/components/apps/Typora.tsx +++ b/src/components/apps/Typora.tsx @@ -4,7 +4,6 @@ import { commonmark } from "@milkdown/preset-commonmark"; import { gfm } from "@milkdown/preset-gfm"; import { history } from "@milkdown/plugin-history"; import { listener, listenerCtx } from "@milkdown/plugin-listener"; -import { useStore } from "~/stores"; const MilkdownEditor = () => { const { typoraMd, setTyporaMd } = useStore((state) => ({ diff --git a/src/components/dock/Dock.tsx b/src/components/dock/Dock.tsx index efa60cbb..d750f91b 100644 --- a/src/components/dock/Dock.tsx +++ b/src/components/dock/Dock.tsx @@ -1,7 +1,5 @@ import { useMotionValue } from "framer-motion"; import { apps } from "~/configs"; -import { useStore } from "~/stores"; -import DockItem from "./DockItem"; interface DockProps { open: (id: string) => void; diff --git a/src/components/dock/DockItem.tsx b/src/components/dock/DockItem.tsx index b7d105ab..6ce231ef 100644 --- a/src/components/dock/DockItem.tsx +++ b/src/components/dock/DockItem.tsx @@ -1,15 +1,18 @@ -import { useRef } from "react"; -import type { RefObject } from "react"; +import React from "react"; import useRaf from "@rooks/use-raf"; -import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; -import type { MotionValue } from "framer-motion"; -import { useWindowSize } from "~/hooks"; +import { + motion, + useMotionValue, + useSpring, + useTransform, + type MotionValue +} from "framer-motion"; // Hover effect is adopted from https://github.com/PuruVJ/macos-web/blob/main/src/components/dock/DockItem.tsx const useDockHoverAnimation = ( mouseX: MotionValue, - ref: RefObject, + ref: React.RefObject, dockSize: number, dockMag: number ) => { diff --git a/src/components/menus/AppleMenu.tsx b/src/components/menus/AppleMenu.tsx index ef792fab..69a86124 100644 --- a/src/components/menus/AppleMenu.tsx +++ b/src/components/menus/AppleMenu.tsx @@ -1,7 +1,4 @@ -import React, { useRef } from "react"; -import type { RefObject } from "react"; -import { useClickOutside } from "~/hooks"; -import { MenuItem, MenuItemGroup } from "./base"; +import React from "react"; interface AppleMenuProps { logout: () => void; @@ -9,7 +6,7 @@ interface AppleMenuProps { restart: (e: React.MouseEvent) => void; sleep: (e: React.MouseEvent) => void; toggleAppleMenu: () => void; - btnRef: RefObject; + btnRef: React.RefObject; } export default function AppleMenu({ diff --git a/src/components/menus/Battery.tsx b/src/components/menus/Battery.tsx index 91eb83c6..7a2fc59d 100644 --- a/src/components/menus/Battery.tsx +++ b/src/components/menus/Battery.tsx @@ -1,5 +1,3 @@ -import { useBattery } from "~/hooks"; - export default function Battery() { const batteryState = useBattery(); diff --git a/src/components/menus/ControlCenterMenu.tsx b/src/components/menus/ControlCenterMenu.tsx index bf5f831b..15fdfe43 100644 --- a/src/components/menus/ControlCenterMenu.tsx +++ b/src/components/menus/ControlCenterMenu.tsx @@ -1,10 +1,7 @@ -import { useRef } from "react"; -import type { RefObject } from "react"; +import React from "react"; import Slider from "react-rangeslider"; import "react-rangeslider/lib/index.css"; -import { useStore } from "~/stores"; import { music } from "~/configs"; -import { useClickOutside } from "~/hooks"; interface SliderProps { icon: string; @@ -39,7 +36,7 @@ interface CCMProps { setBrightness: (value: number) => void; setVolume: (value: number) => void; playing: boolean; - btnRef: RefObject; + btnRef: React.RefObject; } export default function ControlCenterMenu({ diff --git a/src/components/menus/TopBar.tsx b/src/components/menus/TopBar.tsx index d58bfe35..94de9a0f 100644 --- a/src/components/menus/TopBar.tsx +++ b/src/components/menus/TopBar.tsx @@ -1,22 +1,14 @@ -import React, { forwardRef, useState, useEffect, useRef } from "react"; -import type { RefObject, ReactNode } from "react"; +import React from "react"; import format from "date-fns/format"; - -import AppleMenu from "./AppleMenu"; -import WifiMenu from "./WifiMenu"; -import Battery from "./Battery"; -import ControlCenterMenu from "./ControlCenterMenu"; import { isFullScreen } from "~/utils"; -import { useStore } from "~/stores"; import { music } from "~/configs"; -import { useAudio, useWindowSize, useInterval } from "~/hooks"; import type { MacActions } from "~/types"; // ------- import icons ------- interface TopBarItemProps { hideOnMobile?: boolean; forceHover?: boolean; - children: ReactNode; + children: React.ReactNode; className?: string; onClick?: () => void; onMouseEnter?: () => void; @@ -58,7 +50,7 @@ const CCMIcon = ({ size }: { size: number }) => { interface TopBarProps extends MacActions { title: string; - setSpotlightBtnRef: (value: RefObject) => void; + setSpotlightBtnRef: (value: React.RefObject) => void; hide: boolean; toggleSpotlight: () => void; } diff --git a/src/components/menus/WifiMenu.tsx b/src/components/menus/WifiMenu.tsx index 368b7022..961df7ec 100644 --- a/src/components/menus/WifiMenu.tsx +++ b/src/components/menus/WifiMenu.tsx @@ -1,12 +1,9 @@ -import { useRef } from "react"; -import type { RefObject } from "react"; +import React from "react"; import "react-rangeslider/lib/index.css"; -import { useStore } from "~/stores"; -import { useClickOutside } from "~/hooks"; interface WifiMenuProps { toggleWifiMenu: () => void; - btnRef: RefObject; + btnRef: React.RefObject; } export default function WifiMenu({ toggleWifiMenu, btnRef }: WifiMenuProps) { diff --git a/src/components/menus/base.tsx b/src/components/menus/base.tsx index 83367569..3915f750 100644 --- a/src/components/menus/base.tsx +++ b/src/components/menus/base.tsx @@ -1,13 +1,13 @@ -import type { ReactNode } from "react"; +import React from "react"; interface MenuItemProps { onClick?: (e: React.MouseEvent) => void; - children: ReactNode; + children: React.ReactNode; } interface MenuItemGroupProps { border?: boolean; - children: ReactNode; + children: React.ReactNode; } const MenuItem = (props: MenuItemProps) => { diff --git a/src/configs/apps.tsx b/src/configs/apps.tsx index 1bf29329..602861ea 100644 --- a/src/configs/apps.tsx +++ b/src/configs/apps.tsx @@ -1,9 +1,3 @@ -import FaceTime from "~/components/apps/FaceTime"; -import Terminal from "~/components/apps/Terminal"; -import Safari from "~/components/apps/Safari"; -import Bear from "~/components/apps/Bear"; -import Typora from "~/components/apps/Typora"; -import VSCode from "~/components/apps/VSCode"; import { appBarHeight } from "~/utils"; import type { AppsData } from "~/types"; diff --git a/src/hooks/useAudio.ts b/src/hooks/useAudio.ts index 2c19c3e3..6abbb3d7 100644 --- a/src/hooks/useAudio.ts +++ b/src/hooks/useAudio.ts @@ -1,5 +1,3 @@ -import { useEffect, useRef, useState } from "react"; - export interface HTMLAudioState { volume: number; playing: boolean; diff --git a/src/hooks/useBattery.ts b/src/hooks/useBattery.ts index 9e8f6133..09d47998 100644 --- a/src/hooks/useBattery.ts +++ b/src/hooks/useBattery.ts @@ -1,6 +1,4 @@ // Borrowed from: https://github.com/streamich/react-use/blob/master/src/useBattery.ts -import { useEffect, useState } from "react"; - export interface BatteryState { charging: boolean; chargingTime: number; diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts index 8dfe3f83..02290384 100644 --- a/src/hooks/useClickOutside.ts +++ b/src/hooks/useClickOutside.ts @@ -1,12 +1,11 @@ -import { useEffect, useRef } from "react"; -import type { RefObject } from "react"; +import React from "react"; const defaultEvents = ["mousedown", "touchstart"]; export function useClickOutside( - ref: RefObject, + ref: React.RefObject, onClickOutside: (event: Event) => void, - excludeRefs: RefObject[] = [], + excludeRefs: React.RefObject[] = [], events: string[] = defaultEvents ) { const savedCallback = useRef(onClickOutside); diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts index 19555382..db091a86 100644 --- a/src/hooks/useInterval.ts +++ b/src/hooks/useInterval.ts @@ -1,5 +1,3 @@ -import { useEffect, useRef } from "react"; - export function useInterval(callback: Function, delay?: number | null) { const savedCallback = useRef(() => {}); diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts index 3de3b700..e113d6f6 100644 --- a/src/hooks/useWindowSize.ts +++ b/src/hooks/useWindowSize.ts @@ -1,5 +1,3 @@ -import { useState, useEffect } from "react"; - export function useWindowSize() { const [state, setState] = useState({ winWidth: window.innerWidth, diff --git a/src/index.tsx b/src/index.tsx index 9c6bf09d..7d56951c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { createRoot } from "react-dom/client"; import Desktop from "~/pages/Desktop"; diff --git a/src/pages/Boot.tsx b/src/pages/Boot.tsx index 274aca00..1f163f69 100644 --- a/src/pages/Boot.tsx +++ b/src/pages/Boot.tsx @@ -1,6 +1,3 @@ -import { useState, useEffect } from "react"; -import { useInterval } from "~/hooks"; - interface BootProps { restart: boolean; sleep: boolean; diff --git a/src/pages/Desktop.tsx b/src/pages/Desktop.tsx index 0e77ed1e..a5b6ff79 100644 --- a/src/pages/Desktop.tsx +++ b/src/pages/Desktop.tsx @@ -1,13 +1,5 @@ -import { useState, useEffect } from "react"; -import type { RefObject } from "react"; - -import TopBar from "~/components/menus/TopBar"; -import Dock from "~/components/dock/Dock"; -import Launchpad from "~/components/Launchpad"; -import Window from "~/components/Window"; -import Spotlight from "~/components/Spotlight"; +import React from "react"; import { apps, wallpapers } from "~/configs"; -import { useStore } from "~/stores"; import { minMarginY } from "~/utils"; import type { MacActions } from "~/types"; @@ -45,7 +37,7 @@ export default function Desktop(props: MacActions) { } as DesktopState); const [spotlightBtnRef, setSpotlightBtnRef] = - useState | null>(null); + useState | null>(null); const { dark, brightness } = useStore((state) => ({ dark: state.dark, @@ -233,9 +225,9 @@ export default function Desktop(props: MacActions) { }; return ( - + {app.content} - + ); } else { return
; @@ -274,7 +266,7 @@ export default function Desktop(props: MacActions) { openApp={openApp} toggleLaunchpad={toggleLaunchpad} toggleSpotlight={toggleSpotlight} - btnRef={spotlightBtnRef as RefObject} + btnRef={spotlightBtnRef as React.RefObject} /> )} diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 71466737..35f64ee4 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,5 +1,4 @@ -import React, { useState } from "react"; -import { useStore } from "~/stores"; +import React from "react"; import { wallpapers, user } from "~/configs"; import type { MacActions } from "~/types"; diff --git a/src/stores/slices/dock.ts b/src/stores/slices/dock.ts index 53ea50b7..c89a3c1e 100644 --- a/src/stores/slices/dock.ts +++ b/src/stores/slices/dock.ts @@ -1,4 +1,4 @@ -import { StateCreator } from "zustand"; +import type { StateCreator } from "zustand"; export interface DockSlice { dockSize: number; diff --git a/src/stores/slices/system.ts b/src/stores/slices/system.ts index c9afe5aa..b947abdc 100644 --- a/src/stores/slices/system.ts +++ b/src/stores/slices/system.ts @@ -1,4 +1,4 @@ -import { StateCreator } from "zustand"; +import type { StateCreator } from "zustand"; import { enterFullScreen, exitFullScreen } from "~/utils"; export interface SystemSlice { diff --git a/src/stores/slices/user.ts b/src/stores/slices/user.ts index 4722aceb..dbb8f8b8 100644 --- a/src/stores/slices/user.ts +++ b/src/stores/slices/user.ts @@ -1,4 +1,4 @@ -import { StateCreator } from "zustand"; +import type { StateCreator } from "zustand"; export interface UserSlice { typoraMd: string; diff --git a/vite.config.ts b/vite.config.ts index cd14608b..4a1c3e8c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,14 +1,20 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; -import Unocss from "unocss/vite"; +import unocss from "unocss/vite"; +import autoImport from "unplugin-auto-import/vite"; import path from "path"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [Unocss(), react()], - preview: { - port: 8000 - }, + plugins: [ + unocss(), + react(), + autoImport({ + imports: ["react"], + dts: "src/auto-imports.d.ts", + dirs: ["src/hooks", "src/stores", "src/components/**"] + }) + ], resolve: { alias: { "~/": `${path.resolve(__dirname, "src")}/`