format library, better types

package.json5

@@ -24,6 +24,7 @@
 		'eleventy-auto-cache-buster': '^0.3.0',
 		'html-minifier': '^4.0.0',
 		pako: '^2.1.0',
+		'ts-essentials': '^9.4.1',
 		xxhash: '^0.3.0',
 	},
 	devDependencies: {

pnpm-lock.yaml

@@ -59,6 +59,9 @@ dependencies:
   pako:
     specifier: ^2.1.0
     version: 2.1.0
+  ts-essentials:
+    specifier: ^9.4.1
+    version: 9.4.1(typescript@5.3.3)
   xxhash:
     specifier: ^0.3.0
     version: 0.3.0
@@ -1874,11 +1877,21 @@ packages:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
     dev: false
 
+  /ts-essentials@9.4.1(typescript@5.3.3):
+    resolution: {integrity: sha512-oke0rI2EN9pzHsesdmrOrnqv1eQODmJpd/noJjwj2ZPC3Z4N2wbjrOEqnsEgmvlO2+4fBb0a794DCna2elEVIQ==}
+    peerDependencies:
+      typescript: '>=4.1.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 5.3.3
+    dev: false
+
   /typescript@5.3.3:
     resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}

src/bytebeat.ts

@@ -289,7 +289,7 @@ function refreshCode() {
 function handleWindowResize(force: boolean) {
 	autoSizeCanvas(force);
 }
-function autoSizeCanvas(force: boolean) {
+function autoSizeCanvas(force: boolean = false) {
 	if (!elements.canvas.dataset.forcedWidth) {
 		const innerWidth = window.innerWidth;
 		// 768 is halfway between 512 and 1024, 3 added for outline

src/common.ts

@@ -1,9 +1,7 @@
-function isPlainObject(value: any) {
-	if (value && typeof value === "object") {
+function isPlainObject(value: unknown): value is object {
+	if (typeof value === "object" && value) {
 		const proto = Object.getPrototypeOf(value);
-		if (proto && !Object.getPrototypeOf(proto)) {
-			return true;
-		}
+		return proto && !Object.getPrototypeOf(proto);
 	}
 	return false;
 }

src/dom.ts

@@ -10,25 +10,25 @@ const elements = (async () => {
 	await domLoaded;
 	return {
 		main: document.getElementsByTagName("main")[0],
-		error: document.getElementById("error"),
-		canvas: document.getElementById("canvas-main"),
-		timeCursor: document.getElementById("canvas-timecursor"),
+		error: document.getElementById("error")!,
+		canvas: document.getElementById("canvas-main")!,
+		timeCursor: document.getElementById("canvas-timecursor")!,
 
-		timeUnit: document.getElementById("control-time-unit"),
-		timeUnitLabel: document.getElementById("control-time-unit-label"),
-		timeValue: document.getElementById("control-time-value"),
+		timeUnit: document.getElementById("control-time-unit")!,
+		timeUnitLabel: document.getElementById("control-time-unit-label")!,
+		timeValue: document.getElementById("control-time-value")!,
 
-		scaleUp: document.getElementById("control-scaleup"),
-		scaleDown: document.getElementById("control-scaledown"),
+		scaleUp: document.getElementById("control-scaleup")!,
+		scaleDown: document.getElementById("control-scaledown")!,
 
-		playbackMode: document.getElementById("control-song-mode"),
-		sampleRate: document.getElementById("control-sample-rate"),
-		volume: document.getElementById("control-volume"),
+		playbackMode: document.getElementById("control-song-mode")!,
+		sampleRate: document.getElementById("control-sample-rate")!,
+		volume: document.getElementById("control-volume")!,
 
-		canvasTogglePlay: document.getElementById("canvas-toggleplay"),
+		canvasTogglePlay: document.getElementById("canvas-toggleplay")!,
 
-		controls: document.getElementById("controls"),
-		canvasContainer: document.getElementById("canvas-container"),
+		controls: document.getElementById("controls")!,
+		canvasContainer: document.getElementById("canvas-container")!,
 	};
 })();
 

src/embed.ts

@@ -8,27 +8,27 @@ elements.then(elements => {
 		[
 			"timeControls",
 			show => {
-				elements.controls.dataset.timeControlsDisabled = !show;
-				elements.canvasContainer.dataset.disabled = !show;
+				elements.controls.dataset.timeControlsDisabled = !show as unknown as string;
+				elements.canvasContainer.dataset.disabled = !show as unknown as string;
 			},
 			"canvas-toggleplay",
 		],
 		[
 			"playbackControls",
 			show => {
-				elements.controls.dataset.playbackControlsDisabled = !show;
+				elements.controls.dataset.playbackControlsDisabled = !show as unknown as string;
 			},
 		],
 		[
 			"viewControls",
 			show => {
-				elements.controls.dataset.viewControlsDisabled = !show;
+				elements.controls.dataset.viewControlsDisabled = !show as unknown as string;
 			},
 		],
 		[
 			"songControls",
 			show => {
-				elements.controls.dataset.songControlsDisabled = !show;
+				elements.controls.dataset.songControlsDisabled = !show as unknown as string;
 			},
 		],
 		["error", () => {}, "error"],
@@ -40,20 +40,21 @@ elements.then(elements => {
 		e => {
 			console.info("recieved message", e);
 			if (isPlainObject(e.data)) {
-				const data = e.data;
+				const data: {[index: string]: any} = e.data;
 				// show/hide elements
 				if (isPlainObject(data.show)) {
 					for (const [name, fn, ...ids] of nameids) {
-						if (data.show[name] !== undefined) {
-							if (data.show[name]) {
+   					const show: {[index: string]: any} = data.show; 
+						if (show[name] !== undefined) {
+							if (show[name]) {
 								fn(true);
 								for (const id of ids) {
-									document.getElementById(id).classList.remove("disabled");
+									document.getElementById(id)!.classList.remove("disabled");
 								}
 							} else {
 								fn(false);
 								for (const id of ids) {
-									document.getElementById(id).classList.add("disabled");
+									document.getElementById(id)!.classList.add("disabled");
 								}
 							}
 						}
@@ -62,7 +63,7 @@ elements.then(elements => {
 
 				if (data.forceScopeWidth !== undefined && elements.canvas) {
 					if (typeof data.forceScopeWidth === "number") {
-						elements.canvas.dataset.forcedWidth = true;
+						elements.canvas.dataset.forcedWidth = true as unknown as string;
 						setCanvasWidth(data.forceScopeWidth);
 					} else {
 						delete elements.canvas.dataset.forcedWidth;

src/load-library.ts

@@ -1,26 +1,16 @@
-import library from "./library.ts";
+import { library, Entry, EntryBase, InlineEntry, FileEntry } from "./library.ts";
 import { setSong } from "./bytebeat.js";
 
-function parseEntry(entry) {
-	if (Array.isArray(entry.codeOriginal)) {
-		entry.codeOriginal = entry.codeOriginal.join("\n");
-	}
 
-	return entry;
-}
-function stripEntryToSong(entry, codeType = undefined) {
+function stripEntryToSong(entry: Entry) {
 	const { sampleRate, mode } = entry;
-	let code = null;
-	if (codeType) {
-		code = entry[codeType];
-	}
-	if (code) {
-		return { code, sampleRate, mode };
-	} else {
-		return { sampleRate, mode };
-	}
+	return { sampleRate, mode };
 }
-function createByteSnippet(text, onclick) {
+function stripInlineEntryToSong(entry: Readonly<EntryBase & InlineEntry>, codeType: keyof InlineEntry) {
+	const { sampleRate, mode } = entry;
+	return { code: entry[codeType], sampleRate, mode };
+}
+function createByteSnippet(text: string, onclick: () => void) {
 	const interactElem = document.createElement("button");
 	const codeElem = document.createElement("code");
 	interactElem.title = "Click to play this code";
@@ -30,21 +20,23 @@ function createByteSnippet(text, onclick) {
 	interactElem.append(codeElem);
 	return interactElem;
 }
-function createCodeTypeElem(entry, name) {
+function createCodeTypeElem(entry: Readonly<EntryBase & InlineEntry>, name: keyof InlineEntry) {
+	const code: string = entry[name];
+
 	const codeTypeElem = document.createElement("span");
 	codeTypeElem.className = `library-song-${name}`;
 
-	const fullSongData = stripEntryToSong(entry, name);
-	codeTypeElem.append(createByteSnippet(entry[name], () => setSong(fullSongData)));
+	const fullSongData = stripInlineEntryToSong(entry, name);
+	codeTypeElem.append(createByteSnippet(code, () => setSong(fullSongData)));
 
 	const codeLengthElem = document.createElement("span");
 	codeLengthElem.className = "library-song-info";
-	codeLengthElem.innerText = `${entry[name].length}C`;
+	codeLengthElem.innerText = `${code.length}C`;
 	codeTypeElem.append(" ", codeLengthElem);
 
 	return codeTypeElem;
 }
-function createEntryElem(entry) {
+function createEntryElem(entry: Entry) {
 	const entryElem = document.createElement("li");
 
 	if (entry.description) {
@@ -57,7 +49,7 @@ function createEntryElem(entry) {
 			descriptionElem = document.createElement("span");
 		}
 		descriptionElem.innerHTML = entry.description;
-		const songElems = Array.from(descriptionElem.getElementsByTagName("byte-snippet"));
+		const songElems = Array.from(descriptionElem.getElementsByTagName("byte-snippet")) as HTMLElement[];
 		if (songElems.length) {
 			for (const elem of songElems) {
 				const songData = elem.dataset.songData ? JSON.parse(elem.dataset.songData) : {};
@@ -85,14 +77,12 @@ function createEntryElem(entry) {
 	}
 	if (entry.author) {
 		const authorListElem = document.createElement("span");
-		if (!Array.isArray(entry.author)) {
-			entry.author = [entry.author];
+		let authors = entry.author;
+		if (!(authors instanceof Array)) {
+			authors = [authors];
 		}
-		const authors = entry.author as any[];
-
-		for (let i in authors) {
-			let author = authors[i];
 
+		for (const [i, author] of authors.entries()) {
 			if (typeof author === "string") {
 				authorListElem.append(author);
 			} else {
@@ -119,7 +109,7 @@ function createEntryElem(entry) {
 
 		if (entry.remixed.url) {
 			const urlElem = document.createElement("a");
-			urlElem.href = entry.url;
+			urlElem.href = entry.url as string;
 			urlElem.target = "_blank";
 			if (entry.description) {
 				urlElem.innerHTML = entry.remixed.description;
@@ -182,10 +172,10 @@ function createEntryElem(entry) {
 		 * "fileCategories": ["minified", "original"]
 		 */
 		for (const fileType of [
-			{ name: "formatted", prop: "fileFormatted" },
-			{ name: "minified", prop: "fileMinified" },
-			{ name: "optimized", prop: "fileOptimized" },
-			{ name: "original", prop: "fileOriginal" },
+			{ name: "formatted", prop: "fileFormatted" as keyof Entry },
+			{ name: "minified", prop: "fileMinified" as keyof Entry },
+			{ name: "optimized", prop: "fileOptimized" as keyof Entry },
+			{ name: "original", prop: "fileOriginal" as keyof Entry },
 		]) {
 			if (entry[fileType.prop]) {
 				const codeFileElem = document.createElement("button");
@@ -204,7 +194,7 @@ function createEntryElem(entry) {
 	}
 
 	{
-		let codeOriginalElem = null;
+		let codeOriginalElem: HTMLSpanElement | undefined;
 		if (entry.codeOriginal) {
 			codeOriginalElem = createCodeTypeElem(entry, "codeOriginal");
 			entryElem.append(codeOriginalElem);
@@ -216,17 +206,17 @@ function createEntryElem(entry) {
 			codeTypeToggleElem.className = "code-type-toggle";
 			codeTypeToggleElem.innerText = "minified";
 
-			if (entry.codeOriginal) {
+			if (codeOriginalElem) {
 				codeOriginalElem.classList.add("disabled");
 				codeTypeToggleElem.addEventListener("click", () => {
 					if (codeTypeToggleElem.innerText === "minified") {
 						codeTypeToggleElem.innerText = "original";
-						codeOriginalElem.classList.remove("disabled");
+						codeOriginalElem!.classList.remove("disabled");
 						codeMinifiedElem.classList.add("disabled");
 					} else {
 						codeTypeToggleElem.innerText = "minified";
 						codeMinifiedElem.classList.remove("disabled");
-						codeOriginalElem.classList.add("disabled");
+						codeOriginalElem!.classList.add("disabled");
 					}
 				});
 				entryElem.insertBefore(codeTypeToggleElem, codeOriginalElem);
@@ -243,7 +233,7 @@ function createEntryElem(entry) {
 	if (entry.children) {
 		let childrenElem = document.createElement("ul");
 		for (let i = 0, len = entry.children.length; i < len; ++i) {
-			let childEntry = parseEntry(entry.children[i]);
+			let childEntry = entry.children[i];
 			childrenElem.append(createEntryElem(childEntry));
 		}
 		entryElem.append(childrenElem);
@@ -257,8 +247,7 @@ for (const id in library) {
    const playlist = library[id];
 	const playlistElem = document.createElement("ul");
 	for (let i = 0, len = playlist.length; i < len; ++i) {
-		let entry = parseEntry(playlist[i]);
-		playlistElem.append(createEntryElem(entry));
+		playlistElem.append(createEntryElem(playlist[i]));
 	}
 	document.getElementById(`library-${id}`).append(playlistElem);
 }