ref: use type instead of interface

src/components/BytmDialog.ts

@@ -1,13 +1,12 @@
 // hoist the class declaration because either rollup or babel is being a hoe
 import { isDomLoaded, NanoEmitter } from "@sv443-network/userutils";
-import type { EventsMap } from "nanoevents";
 import { clearInner, error, getDomain, getResourceUrl, onInteraction, warn } from "../utils/index.js";
 import { t } from "../utils/translations.js";
 import { emitInterface } from "../interface.js";
 import "./BytmDialog.css";
 import "../dialogs/dialogs.css";
 
-export interface BytmDialogOptions {
+export type BytmDialogOptions = {
   /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
   id: string;
   /** Target and max width of the dialog in pixels */
@@ -36,9 +35,9 @@ export interface BytmDialogOptions {
   renderHeader?: () => HTMLElement | Promise<HTMLElement>;
   /** Called to render the footer of the dialog - leave undefined for no footer */
   renderFooter?: () => HTMLElement | Promise<HTMLElement>;
-}
+};
 
-export interface BytmDialogEvents extends EventsMap {
+export type BytmDialogEvents = {
   /** Emitted just **after** the dialog is closed */
   close: () => void;
   /** Emitted just **after** the dialog is opened */

src/components/hotkeyInput.ts

@@ -3,12 +3,12 @@ import { getOS, onInteraction, setInnerHtml, t } from "../utils/index.js";
 import type { HotkeyObj } from "../types.js";
 import "./hotkeyInput.css";
 
-interface HotkeyInputProps {
+type HotkeyInputProps = {
   initialValue?: HotkeyObj;
   onChange: (hotkey: HotkeyObj) => void;
   /** Function that returns the title and aria-label for the input element, given the hotkey value */
   createTitle?: (value: string) => string;
-}
+};
 
 let otherHotkeyInputActive = false;
 

src/components/toggleInput.ts

@@ -2,7 +2,7 @@ import { randomId } from "@sv443-network/userutils";
 import { setInnerHtml, t } from "../utils/index.js";
 import "./toggleInput.css";
 
-export interface ToggleInputProps {
+export type ToggleInputProps = {
   /** Callback function that is called when the toggle is changed */
   onChange: (value: boolean) => void;
   /** Initial value of the toggle - defaults to false */
@@ -11,7 +11,7 @@ export interface ToggleInputProps {
   id?: string;
   /** Toggle label off or change position of the label relative to the toggle */
   labelPos?: "off" | "left" | "right";
-}
+};
 
 /** Creates a simple toggle element */
 export async function createToggleInput({

src/features/behavior.ts

@@ -107,14 +107,14 @@ export async function initAutoScrollToActiveSong() {
 
 //#region remember song time
 
-interface RemVidObj {
+type RemVidObj = {
   /** Watch ID */
   id: string;
   /** Time of the song/video in seconds */
   time: number;
   /** Timestamp this entry was last updated */
   updated: number;
-}
+};
 
 /**
  * Remembers the time of the last played video and resumes playback from that time.  

src/features/index.ts

@@ -86,10 +86,10 @@ adornmentOrder.set(adornments.advanced, 4);
 
 //#region select options
 
-interface SelectOption<TValue = number | string> {
+type SelectOption<TValue = number | string> = {
   value: TValue;
   label: string;
-}
+};
 
 /** Common options for config items of type "select" */
 const options = {

src/modules.d.ts

@@ -1,17 +1,15 @@
 /** Import HTML as modules - https://stackoverflow.com/a/47705264/3323672 */
 declare module "*.html" {
   /** Content of the HTML file as a string */
-  const htmlContent: string;
-  export default htmlContent;
+  export default {} as string;
 }
 
 declare module "*.md" {
-  interface Exports {
+  export default {} as {
     /** Content of the markdown file, converted to an HTML string */
     html: string;
     metadata: Record<string, unknown>;
     filename: string;
     path: string;
-  }
-  export default {} as Exports;
+  };
 }

src/siteEvents.ts

@@ -4,7 +4,8 @@ import { FeatureConfig } from "./types.js";
 import { emitInterface } from "./interface.js";
 import { addSelectorListener, globserversReady } from "./observers.js";
 
-export interface SiteEventsMap {
+/** Map of all site events and their arguments */
+export type SiteEventsMap = {
   //#region misc:
   /** Emitted whenever the feature config is changed - initialization is not counted */
   configChanged: (newConfig: FeatureConfig) => void;
@@ -48,7 +49,7 @@ export interface SiteEventsMap {
   //#region features:
   /** Emitted whenever a channel was added, edited or removed from the auto-like list */
   autoLikeChannelsUpdated: () => void;
-}
+};
 
 /** Array of all site events */
 export const allSiteEvents = [

src/stories/example/Button.ts

@@ -1,6 +1,6 @@
 import "./button.css";
 
-export interface ButtonProps {
+export type ButtonProps = {
   /** Is this the principal call to action on the page? */
   primary?: boolean;
   /** What background color to use */
@@ -11,7 +11,7 @@ export interface ButtonProps {
   label: string;
   /** Optional click handler */
   onClick?: () => void;
-}
+};
 
 export const createButton = ({
   primary = false,