WIP: TS revamp

demos/vite-spa/tsconfig.app.json

@@ -1,4 +1,6 @@
 {
+  "extends": "../../tsconfig.json",
+  "include": ["./src"],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
@@ -21,6 +23,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
+  }
 }

package.json

@@ -12,7 +12,7 @@
         "url": "https://github.com/E-Kuerschner/useAudioPlayer"
     },
     "scripts": {
-        "lint": "tsc --noEmit",
+        "lint": "tsc -b",
         "prepublishOnly": "echo 'TODO prepare'",
         "preversion": "yarn packages/react-use-audio-player/test && yarn build",
         "release": "yarn version && yarn publish --non-interactive && echo 'Remember to push new commit/tags to Github'"

packages/react-use-audio-player/src/HowlInstanceManager.ts

@@ -1,7 +1,7 @@
-import { Howl, HowlOptions } from "howler"
+import { Howl, type HowlOptions } from "howler"
 
-import { AudioLoadOptions } from "./types"
-import { Action, ActionTypes } from "./audioPlayerState"
+import type { AudioLoadOptions } from "./types"
+import { type Action, ActionTypes } from "./audioPlayerState"
 
 export type AudioActionCallback = (action: Action) => void
 
@@ -33,20 +33,16 @@ export class HowlInstanceManager {
         this.destroyHowl()
 
         this.options = options
-        const {
-            initialVolume,
-            initialRate,
-            initialMute,
-            ...rest
-        } = this.options
+        const { initialVolume, initialRate, initialMute, ...rest } =
+            this.options
         const newHowl = new Howl({
             mute: initialMute,
             volume: initialVolume,
             rate: initialRate,
             ...rest
         } as HowlOptions)
 
-        this.callbacks.forEach(cb =>
+        this.callbacks.forEach((cb) =>
             cb({ type: ActionTypes.START_LOAD, howl: newHowl })
         )
         this.howl = newHowl
@@ -78,7 +74,7 @@ export class HowlInstanceManager {
     }
 
     public broadcast(action: Action) {
-        this.callbacks.forEach(cb => cb(action))
+        this.callbacks.forEach((cb) => cb(action))
     }
 }
 

packages/react-use-audio-player/src/audioPlayerState.ts

@@ -1,4 +1,4 @@
-import { Howl } from "howler"
+import { type Howl } from "howler"
 
 export enum ActionTypes {
     START_LOAD = "START_LOAD",

packages/react-use-audio-player/src/types.ts

@@ -1,4 +1,4 @@
-import { AudioPlayerState } from "./audioPlayerState"
+import { type AudioPlayerState } from "./audioPlayerState"
 
 export interface AudioPlayer extends AudioPlayerState {
     play: () => void
@@ -33,4 +33,4 @@ export interface AudioLoadOptions extends UserListeners {
     html5?: boolean
 }
 
-export type LoadArguments = [src: string, options?: AudioLoadOptions]
+export type LoadArguments = [src: string, options?: AudioLoadOptions]

packages/react-use-audio-player/src/useAudioPlayer.ts

@@ -6,7 +6,7 @@ import {
 } from "./audioPlayerState"
 import { useHowlEventSync } from "./useHowlEventSync"
 import { HowlInstanceManager } from "./HowlInstanceManager"
-import { AudioPlayer, LoadArguments } from "./types"
+import type { AudioPlayer, LoadArguments } from "./types"
 
 export const useAudioPlayer = (): AudioPlayer & {
     cleanup: VoidFunction

packages/react-use-audio-player/src/useGlobalAudioPlayer.ts

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useReducer, useRef } from "react"
 import {
-    Action,
+    type Action,
     ActionTypes,
     initStateFromHowl,
     reducer as audioStateReducer
 } from "./audioPlayerState"
 import { useHowlEventSync } from "./useHowlEventSync"
 import { HowlInstanceManagerSingleton } from "./HowlInstanceManager"
-import { AudioPlayer, LoadArguments } from "./types"
+import type { AudioPlayer, LoadArguments } from "./types"
 
 export function useGlobalAudioPlayer(): AudioPlayer {
     const howlManager = useRef(HowlInstanceManagerSingleton.getInstance())

packages/react-use-audio-player/src/useHowlEventSync.ts

@@ -1,19 +1,19 @@
 import {
-    Dispatch,
-    ReducerAction,
-    ReducerState,
+    type Dispatch,
+    type ReducerAction,
+    type ReducerState,
     useCallback,
     useEffect,
     useRef
 } from "react"
+import { type HowlErrorCallback } from "howler"
 import {
-    Action,
+    type Action,
     ActionTypes,
-    AudioPlayerState,
+    type AudioPlayerState,
     reducer
 } from "./audioPlayerState"
 import { HowlInstanceManager } from "./HowlInstanceManager"
-import { HowlErrorCallback } from "howler"
 
 export function useHowlEventSync(
     howlManager: HowlInstanceManager,

packages/react-use-audio-player/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "target": "ES6",
+    // tsup handles the module resolution and outputs so can use full modern features in TS
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "verbatimModuleSyntax": true
+  }
+}

packages/react-use-audio-player/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/howlinstancemanager.ts","./src/audioplayerstate.ts","./src/index.ts","./src/types.ts","./src/useaudioplayer.ts","./src/useglobalaudioplayer.ts","./src/usehowleventsync.ts"],"errors":true,"version":"5.7.2"}

tsconfig.json

@@ -1,27 +1,23 @@
 {
-    "include": [
-        "packages/react-use-audio-player/src"
+    "files": [],
+    "references": [
+        { "path":  "./packages/react-use-audio-player" },
+        { "path":  "./demos/vite-spa" }
     ],
     "compilerOptions": {
         "noEmit": true,
-        "target": "es5",
-        "module": "esnext",
-        "lib": ["dom", "esnext"],
-        "declaration": true,
-        "sourceMap": true,
+        "declaration": false,
+        "esModuleInterop": true,
+        "alwaysStrict": true,
         "strict": true,
         "noImplicitAny": true,
         "strictNullChecks": true,
         "strictFunctionTypes": true,
         "strictPropertyInitialization": true,
         "noImplicitThis": true,
-        "alwaysStrict": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "noImplicitReturns": true,
-        "noFallthroughCasesInSwitch": true,
-        "moduleResolution": "node",
-        "jsx": "react",
-        "esModuleInterop": true
+        "noFallthroughCasesInSwitch": true
     }
 }