style: format with default prettier config

Author: SevenOutman

.eslintrc.cjs

@@ -7,4 +7,4 @@ module.exports = {
   ],
   parser: "@typescript-eslint/parser",
   root: true,
-}
+};

.prettierignore

@@ -0,0 +1,2 @@
+dist
+pnpm-lock.yaml

.prettierrc

@@ -1,7 +1,7 @@
-import { useState } from "react"
-import { createRoot } from "react-dom/client"
-import "aplayer/dist/APlayer.min.css"
-import { APlayer } from "../src"
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+import "aplayer/dist/APlayer.min.css";
+import { APlayer } from "../src";
 
 const playlist1 = [
   {
@@ -32,7 +32,7 @@ const playlist1 = [
     cover:
       "https://p1.music.126.net/RzAd3yEwGX6PW7LEQtK6mA==/109951163707194914.jpg",
   },
-]
+];
 
 const playlist2 = [
   {
@@ -42,10 +42,10 @@ const playlist2 = [
     cover:
       "https://p1.music.126.net/uOvEut2NG6enWVM1s_lJZQ==/109951167656922852.jpg",
   },
-]
+];
 
 function App() {
-  const [playlist, setPlaylist] = useState(playlist1)
+  const [playlist, setPlaylist] = useState(playlist1);
   return (
     <div
       style={{
@@ -68,7 +68,7 @@ function App() {
         <button onClick={() => setPlaylist(playlist2)}>Playlist 2</button>
       </div>
     </div>
-  )
+  );
 }
 
-createRoot(document.getElementById("root") as HTMLElement).render(<App />)
+createRoot(document.getElementById("root") as HTMLElement).render(<App />);

demo/index.tsx

@@ -19,11 +19,11 @@
     "build": "tsup src/index.ts",
     "dev": "vite",
     "test": "vitest run --passWithNoTests",
+    "format": "prettier --write .",
     "prepublishOnly": "pnpm run build"
   },
   "license": "MIT",
   "devDependencies": {
-    "@egoist/prettier-config": "1.0.0",
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",

package.json

@@ -1,5 +1,3 @@
 {
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }

pnpm-lock.yaml

@@ -1,33 +1,33 @@
-import { ReactComponent as IconVolumeUp } from "../assets/volume-up.svg"
-import { ReactComponent as IconVolumeDown } from "../assets/volume-down.svg"
-import { ReactComponent as IconVolumeOff } from "../assets/volume-off.svg"
-import { ReactComponent as IconMenu } from "../assets/menu.svg"
-import { ReactComponent as IconOrderList } from "../assets/order-list.svg"
-import { ReactComponent as IconOrderRandom } from "../assets/order-random.svg"
-import { ReactComponent as IconLoopAll } from "../assets/loop-all.svg"
-import { ReactComponent as IconLoopOne } from "../assets/loop-one.svg"
-import { ReactComponent as IconLoopNone } from "../assets/loop-none.svg"
-import { formatAudioDuration } from "../utils/formatAudioDuration"
-import { ProgressBar } from "./progress"
-import React, { useCallback } from "react"
-import { PlaylistLoop, PlaylistOrder } from "../hooks/usePlaylist"
+import { ReactComponent as IconVolumeUp } from "../assets/volume-up.svg";
+import { ReactComponent as IconVolumeDown } from "../assets/volume-down.svg";
+import { ReactComponent as IconVolumeOff } from "../assets/volume-off.svg";
+import { ReactComponent as IconMenu } from "../assets/menu.svg";
+import { ReactComponent as IconOrderList } from "../assets/order-list.svg";
+import { ReactComponent as IconOrderRandom } from "../assets/order-random.svg";
+import { ReactComponent as IconLoopAll } from "../assets/loop-all.svg";
+import { ReactComponent as IconLoopOne } from "../assets/loop-one.svg";
+import { ReactComponent as IconLoopNone } from "../assets/loop-none.svg";
+import { formatAudioDuration } from "../utils/formatAudioDuration";
+import { ProgressBar } from "./progress";
+import React, { useCallback } from "react";
+import { PlaylistLoop, PlaylistOrder } from "../hooks/usePlaylist";
 
 type PlaybackControlsProps = {
-  themeColor: string
-  volume: number
-  onChangeVolume: (volume: number) => void
-  muted: boolean
-  currentTime: number | undefined
-  audioDurationSeconds: number | undefined
-  bufferedSeconds: number | undefined
-  onSeek?: (second: number) => void
-  onToggleMenu?: () => void
-  onToggleMuted: () => void
-  order: PlaylistOrder
-  onOrderChange: (order: PlaylistOrder) => void
-  loop: PlaylistLoop
-  onLoopChange: (loop: PlaylistLoop) => void
-}
+  themeColor: string;
+  volume: number;
+  onChangeVolume: (volume: number) => void;
+  muted: boolean;
+  currentTime: number | undefined;
+  audioDurationSeconds: number | undefined;
+  bufferedSeconds: number | undefined;
+  onSeek?: (second: number) => void;
+  onToggleMenu?: () => void;
+  onToggleMuted: () => void;
+  order: PlaylistOrder;
+  onOrderChange: (order: PlaylistOrder) => void;
+  loop: PlaylistLoop;
+  onLoopChange: (loop: PlaylistLoop) => void;
+};
 
 export function PlaybackControls({
   themeColor,
@@ -47,21 +47,18 @@ export function PlaybackControls({
 }: PlaybackControlsProps) {
   const handleVolumeBarMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      const volumeBarElement = e.currentTarget
-      const volumeBarRect = volumeBarElement.getBoundingClientRect()
+      const volumeBarElement = e.currentTarget;
+      const volumeBarRect = volumeBarElement.getBoundingClientRect();
 
       onChangeVolume(
         Math.min(
           1,
-          Math.max(
-            0,
-            (volumeBarRect.bottom - e.clientY) / volumeBarRect.height,
-          ),
-        ),
-      )
+          Math.max(0, (volumeBarRect.bottom - e.clientY) / volumeBarRect.height)
+        )
+      );
     },
-    [onChangeVolume],
-  )
+    [onChangeVolume]
+  );
 
   // Switch order between "list" and "random"
   const handleOrderButtonClick = useCallback(() => {
@@ -70,10 +67,10 @@ export function PlaybackControls({
         list: "random",
         random: "list",
       } as const
-    )[order]
+    )[order];
 
-    onOrderChange(nextOrder)
-  }, [order, onOrderChange])
+    onOrderChange(nextOrder);
+  }, [order, onOrderChange]);
 
   // Transition of loop: all -> one -> none
   const handleLoopButtonClick = useCallback(() => {
@@ -83,10 +80,10 @@ export function PlaybackControls({
         one: "none",
         none: "all",
       } as const
-    )[loop]
+    )[loop];
 
-    onLoopChange(nextLoop)
-  }, [loop, onLoopChange])
+    onLoopChange(nextLoop);
+  }, [loop, onLoopChange]);
   return (
     <div className="aplayer-controller">
       <ProgressBar
@@ -163,5 +160,5 @@ export function PlaybackControls({
         <button className="aplayer-icon aplayer-icon-lrc"></button>
       </div>
     </div>
-  )
+  );
 }

renovate.json

@@ -1,13 +1,13 @@
-import cx from "clsx"
-import { defaultThemeColor } from "../constants"
-import type { AudioInfo } from "../types"
+import cx from "clsx";
+import { defaultThemeColor } from "../constants";
+import type { AudioInfo } from "../types";
 
 type PlaylistProps = {
-  open: boolean
-  audio: AudioInfo[]
-  playingAudioUrl?: string
-  onPlayAudio?: (audio: AudioInfo) => void
-}
+  open: boolean;
+  audio: AudioInfo[];
+  playingAudioUrl?: string;
+  onPlayAudio?: (audio: AudioInfo) => void;
+};
 
 export function Playlist({
   open,
@@ -30,7 +30,7 @@ export function Playlist({
             })}
             onClick={() => {
               if (audioInfo.url !== playingAudioUrl) {
-                onPlayAudio?.(audioInfo)
+                onPlayAudio?.(audioInfo);
               }
             }}
           >
@@ -51,5 +51,5 @@ export function Playlist({
         ))}
       </ol>
     </div>
-  )
+  );
 }

src/components/controller.tsx

@@ -1,42 +1,42 @@
-import { useEffect, useState } from "react"
-import cx from "clsx"
+import { useEffect, useState } from "react";
+import cx from "clsx";
 
-import { ReactComponent as IconPlay } from "../assets/play.svg"
-import { ReactComponent as IconPause } from "../assets/pause.svg"
-import type { AudioInfo } from "../types"
-import { Playlist } from "./list"
-import { PlaybackControls } from "./controller"
-import { useAudioControl } from "../hooks/useAudioControl"
-import { defaultThemeColor } from "../constants"
-import { PlaylistLoop, PlaylistOrder, usePlaylist } from "../hooks/usePlaylist"
+import { ReactComponent as IconPlay } from "../assets/play.svg";
+import { ReactComponent as IconPause } from "../assets/pause.svg";
+import type { AudioInfo } from "../types";
+import { Playlist } from "./list";
+import { PlaybackControls } from "./controller";
+import { useAudioControl } from "../hooks/useAudioControl";
+import { defaultThemeColor } from "../constants";
+import { PlaylistLoop, PlaylistOrder, usePlaylist } from "../hooks/usePlaylist";
 
 /**
  * @see https://aplayer.js.org/#/home?id=options
  */
 type APlayerProps = {
-  audio: AudioInfo | AudioInfo[]
+  audio: AudioInfo | AudioInfo[];
 
-  theme?: string
+  theme?: string;
 
   /**
    * Initial volume
    *
    * @default 0.7
    */
-  volume?: number
+  volume?: number;
 
   /**
    * @default "all"
    */
-  initialLoop?: PlaylistLoop
+  initialLoop?: PlaylistLoop;
 
   /**
    * @default "list"
    */
-  initialOrder?: PlaylistOrder
+  initialOrder?: PlaylistOrder;
 
-  autoplay?: boolean
-}
+  autoplay?: boolean;
+};
 
 export function APlayer({
   theme = defaultThemeColor,
@@ -49,31 +49,31 @@ export function APlayer({
     initialLoop,
     initialOrder,
     getSongId: (song) => song.url,
-  })
+  });
 
   const audioControl = useAudioControl({
     initialVolume: volume,
     onError() {
       if (playlist.hasNextSong) {
-        playlist.next()
+        playlist.next();
       }
     },
     onEnded() {
       if (playlist.hasNextSong) {
-        playlist.next()
+        playlist.next();
       }
     },
-  })
+  });
 
   useEffect(() => {
     if (playlist.currentSong) {
-      audioControl.playAudio(playlist.currentSong.url)
+      audioControl.playAudio(playlist.currentSong.url);
     }
-  }, [playlist.currentSong, audioControl])
+  }, [playlist.currentSong, audioControl]);
 
-  const hasPlaylist = Array.isArray(audio)
+  const hasPlaylist = Array.isArray(audio);
 
-  const [isPlaylistOpen, setPlaylistOpen] = useState(() => hasPlaylist)
+  const [isPlaylistOpen, setPlaylistOpen] = useState(() => hasPlaylist);
 
   return (
     <div style={{ width: 600 }}>
@@ -93,7 +93,7 @@ export function APlayer({
             <div
               className={cx(
                 "aplayer-button",
-                audioControl.isPlaying ? "aplayer-pause" : "aplayer-play",
+                audioControl.isPlaying ? "aplayer-pause" : "aplayer-play"
               )}
               onClick={() => audioControl.togglePlay()}
             >
@@ -143,5 +143,5 @@ export function APlayer({
         ) : null}
       </div>
     </div>
-  )
+  );
 }