From a3aa72ccdb5c4c19a42f624dcfe7f5d7b3fac5e1 Mon Sep 17 00:00:00 2001
From: James Prevett <jp@jamespre.dev>
Date: Wed, 16 Oct 2024 11:29:11 -0500
Subject: [PATCH] Allow empty lines in fstab Changed from `eval` to async
 function Add scroll to lists Use @ts-check Moved built-in FS to common.ts

---
 commands/cat.js         |  3 +-
 commands/cd.js          |  5 ++-
 commands/chmod.js       |  4 +-
 commands/cp.js          |  3 +-
 commands/echo.js        |  3 +-
 commands/help.js        |  3 +-
 commands/lib.d.ts       | 33 +++++++++++++---
 commands/ln.js          |  3 +-
 commands/ls.js          |  7 +++-
 commands/mkdir.js       |  3 +-
 commands/mv.js          |  3 +-
 commands/open-editor.js |  3 +-
 commands/pwd.js         |  3 +-
 commands/rm.js          |  3 +-
 commands/touch.js       |  3 +-
 package-lock.json       |  8 ++--
 package.json            |  2 +-
 src/common.ts           | 41 ++++++++++++++++++--
 src/config.ts           | 27 +++++++------
 src/editor.ts           |  2 +-
 src/explorer.ts         |  4 +-
 src/index.html          | 44 +++++++++++----------
 src/shell.ts            | 84 ++++++++++++++++-------------------------
 src/styles.css          | 16 +++++++-
 24 files changed, 192 insertions(+), 118 deletions(-)

diff --git a/commands/cat.js b/commands/cat.js
index 9eaf829..60a70b9 100755
--- a/commands/cat.js
+++ b/commands/cat.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (!args[1]) {
 	throw 'No path provided';
 }
diff --git a/commands/cd.js b/commands/cd.js
index 3d5e81a..16a78c6 100755
--- a/commands/cd.js
+++ b/commands/cd.js
@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
-cd(args[1] || path.resolve('.'), true);
+/// <reference types="./lib.d.ts" />
+// @ts-check
+__open(args[1] || path.resolve('.'), true);
diff --git a/commands/chmod.js b/commands/chmod.js
index 2aa19b9..4ed797a 100755
--- a/commands/chmod.js
+++ b/commands/chmod.js
@@ -1,4 +1,6 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
+
 const [command, mode, filePath] = args;
 
 // Helper to translate permission letters (r, w, x, etc.) to octal
diff --git a/commands/cp.js b/commands/cp.js
index f096ed4..e1aa350 100755
--- a/commands/cp.js
+++ b/commands/cp.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (args.length != 3) {
 	throw 'Incorrect number of arguments';
 }
diff --git a/commands/echo.js b/commands/echo.js
index 2e76c74..283664a 100755
--- a/commands/echo.js
+++ b/commands/echo.js
@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 terminal.writeln(args.slice(1).join(' '));
diff --git a/commands/help.js b/commands/help.js
index 30e0366..be76c02 100755
--- a/commands/help.js
+++ b/commands/help.js
@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 terminal.writeln('Some unix commands available, ls /bin to see them.');
diff --git a/commands/lib.d.ts b/commands/lib.d.ts
index 8a170a9..f287150 100644
--- a/commands/lib.d.ts
+++ b/commands/lib.d.ts
@@ -1,6 +1,27 @@
-declare const fs: typeof import('@zenfs/core').fs;
-declare const path: typeof import('@zenfs/core/emulation/path.js');
-declare const chalk: typeof import('chalk').default;
-declare const terminal: import('@xterm/xterm').Terminal;
-declare const args: string[];
-declare const utilium: typeof import('utilium');
+import type { fs as _fs } from '@zenfs/core';
+import type * as _path from '@zenfs/core/emulation/path.js';
+import type _chalk from 'chalk';
+import type { Terminal } from '@xterm/xterm';
+import type * as _utilium from 'utilium';
+
+declare global {
+	const args: string[];
+	const terminal: Terminal;
+	const fs: typeof _fs;
+	const path: typeof _path;
+	const chalk: typeof _chalk;
+	const utilium: typeof _utilium;
+	function __editor_open(path: string): Promise<void>;
+	function __open(path: string, dirOnly?: boolean): void;
+}
+
+export interface ExecutionLocals {
+	args: string[];
+	terminal: Terminal;
+	fs: typeof _fs;
+	path: typeof _path;
+	chalk: typeof _chalk;
+	utilium: typeof _utilium;
+	__editor_open(this: void, path: string): Promise<void>;
+	__open(this: void, path: string, dirOnly?: boolean): void;
+}
diff --git a/commands/ln.js b/commands/ln.js
index 64ee4ba..900e46b 100755
--- a/commands/ln.js
+++ b/commands/ln.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 
 // Argument parsing
 const positionals = args.filter(arg => !arg.startsWith('-')).slice(1);
diff --git a/commands/ls.js b/commands/ls.js
index 8dd581e..3a7ff2f 100755
--- a/commands/ls.js
+++ b/commands/ls.js
@@ -1,4 +1,7 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+/// <reference lib="esnext" />
+// @ts-check
+
 const { S_IFREG, S_IFDIR, S_IFCHR, S_IFBLK, S_IFIFO, S_IFLNK, S_IFSOCK, S_IFMT } = fs.constants;
 
 function formatPermissions(mode) {
@@ -52,7 +55,9 @@ const colors = [
 function colorize(text, stats) {
 	let colorize = chalk;
 	for (const [mask, color] of colors) {
+		// @ts-expect-error
 		if ((stats.mode & mask) == mask) {
+			// @ts-expect-error
 			colorize = utilium.getByString(colorize, color);
 		}
 	}
diff --git a/commands/mkdir.js b/commands/mkdir.js
index 6de27b7..78a7721 100755
--- a/commands/mkdir.js
+++ b/commands/mkdir.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (!args[1]) {
 	throw 'No path provided';
 }
diff --git a/commands/mv.js b/commands/mv.js
index c77df88..74060eb 100755
--- a/commands/mv.js
+++ b/commands/mv.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (args.length != 3) {
 	throw 'Incorrect number of arguments';
 }
diff --git a/commands/open-editor.js b/commands/open-editor.js
index 59783a8..b80368c 100755
--- a/commands/open-editor.js
+++ b/commands/open-editor.js
@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 __editor_open(args[1]);
diff --git a/commands/pwd.js b/commands/pwd.js
index 9529c0d..993e78c 100755
--- a/commands/pwd.js
+++ b/commands/pwd.js
@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 terminal.writeln(path.cwd);
diff --git a/commands/rm.js b/commands/rm.js
index 7f750ec..44b30d5 100755
--- a/commands/rm.js
+++ b/commands/rm.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (!args[1]) {
 	throw 'No path provided';
 }
diff --git a/commands/touch.js b/commands/touch.js
index 7f62b28..993f666 100755
--- a/commands/touch.js
+++ b/commands/touch.js
@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (!args[1]) {
 	throw 'No path provided';
 }
diff --git a/package-lock.json b/package-lock.json
index 78ea4d4..37f6dbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
 				"@zenfs/zip": "^0.5.1",
 				"chalk": "^5.3.0",
 				"jquery": "^3.7.1",
-				"utilium": "^0.8.7"
+				"utilium": "^0.8.8"
 			},
 			"devDependencies": {
 				"@eslint/js": "^9.12.0",
@@ -2958,9 +2958,9 @@
 			}
 		},
 		"node_modules/utilium": {
-			"version": "0.8.7",
-			"resolved": "https://registry.npmjs.org/utilium/-/utilium-0.8.7.tgz",
-			"integrity": "sha512-CxVInR0KdTzMdClVYRyi1jHDdtw5ENiEctL6yRrt7QEV/w7TP0BQKPBrDGGIwi02XT8qVdkVPWrZ4AgH+xKLRA==",
+			"version": "0.8.8",
+			"resolved": "https://registry.npmjs.org/utilium/-/utilium-0.8.8.tgz",
+			"integrity": "sha512-u9IiV0yWciXiwSsNe+w7ufvbA7MLCad0wz1RilexnzIwDKAqYBpx2ITz2Dc/0ULAHER3MrM2k2M8NbGXNFri4w==",
 			"license": "MIT",
 			"dependencies": {
 				"eventemitter3": "^5.0.1"
diff --git a/package.json b/package.json
index f9a2f3e..4076b58 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
 		"@zenfs/zip": "^0.5.1",
 		"chalk": "^5.3.0",
 		"jquery": "^3.7.1",
-		"utilium": "^0.8.7"
+		"utilium": "^0.8.8"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.12.0",
diff --git a/src/common.ts b/src/common.ts
index aca8436..dad0eb8 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -1,9 +1,44 @@
 import $ from 'jquery';
 import { update as updateExplorer } from './explorer.js';
 import { cd, cwd, resolve } from '@zenfs/core/emulation/path.js';
-import { fs } from '@zenfs/core';
+import { fs, configure, encode, IndexFS } from '@zenfs/core';
 import * as editor from './editor.js';
 
+class _BuiltinFS extends IndexFS {
+	public async ready(): Promise<void> {
+		if (this._isInitialized) {
+			return;
+		}
+		await super.ready();
+
+		if (this._disableSync) {
+			return;
+		}
+
+		/**
+		 * Iterate over all of the files and cache their contents
+		 */
+		for (const [path, stats] of this.index.files()) {
+			await this.getData(path);
+		}
+	}
+	protected getData(path: string): Promise<Uint8Array> {
+		return Promise.resolve(encode($commands[path]));
+	}
+	protected getDataSync(path: string): Uint8Array {
+		return encode($commands[path]);
+	}
+}
+
+const _builtinFS = new _BuiltinFS($commands_index);
+await _builtinFS.ready();
+
+await configure({
+	mounts: {
+		'/bin': _builtinFS,
+	},
+});
+
 export function switchTab(name: string): void {
 	$('.tab').hide();
 	$('#' + name)
@@ -18,7 +53,7 @@ export function switchTab(name: string): void {
 	}
 }
 
-export function openPath(path: string, fromShell: boolean = false): void {
+export function openPath(path: string, dirOnly: boolean = false): void {
 	if (fs.statSync(path).isDirectory()) {
 		cd(path);
 		$('#location').val(cwd);
@@ -26,7 +61,7 @@ export function openPath(path: string, fromShell: boolean = false): void {
 		return;
 	}
 
-	if (fromShell) {
+	if (dirOnly) {
 		throw new Error(`Error: ENOTDIR: File is not a directory, '${resolve(path)}'`);
 	}
 
diff --git a/src/config.ts b/src/config.ts
index 431f472..a6560b7 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -187,7 +187,7 @@ function createNewMountConfig() {
 	for (const { backend } of backends) {
 		$('<option />').text(backend.name).val(backend.name).appendTo(select);
 	}
-	li.appendTo('#config');
+	li.appendTo('#config ul');
 	return li;
 }
 
@@ -207,22 +207,25 @@ function toFSTable(configs: Record<string, string>[]): string {
 }
 
 function fromFSTable(table: string): Record<string, string>[] {
-	return table.split('\n').map<Record<string, string>>(line => {
-		const [id, path, backend, options] = line.split(/\s+/);
+	return table
+		.split('\n')
+		.filter(line => !/^\s*$/.test(line))
+		.map<Record<string, string>>(line => {
+			const [id, path, backend, options] = line.split(/\s+/);
 
-		return {
-			...(Object.fromEntries(options.split(',').map(entry => entry.split('='))) as object),
-			id,
-			path,
-			backend,
-		};
-	});
+			return {
+				...(Object.fromEntries(options.split(',').map(entry => entry.split('='))) as object),
+				id,
+				path,
+				backend,
+			};
+		});
 }
 
 function parseConfig(): Record<string, string>[] {
 	const configs: Record<string, string>[] = [];
 
-	$('#config')
+	$('#config ul')
 		.find('li')
 		.each((i: number, li: HTMLLIElement) => {
 			configs[i] = {};
@@ -236,7 +239,7 @@ function parseConfig(): Record<string, string>[] {
 }
 
 function loadConfig(configs: Record<string, string>[]): void {
-	$('#config').find('li').remove();
+	$('#config ul').find('li').remove();
 
 	for (const config of configs) {
 		const li = createNewMountConfig();
diff --git a/src/editor.ts b/src/editor.ts
index 59d26f0..845b8b9 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -21,7 +21,7 @@ function updateButtons() {
 	}
 }
 
-export async function open(path?: string | void) {
+export async function open(this: void, path?: string | void) {
 	path ??= await prompt('Open file');
 	if (!path) {
 		return;
diff --git a/src/explorer.ts b/src/explorer.ts
index 7c04afa..dc62433 100644
--- a/src/explorer.ts
+++ b/src/explorer.ts
@@ -57,7 +57,7 @@ function createEntry(name: string) {
 		return false;
 	});
 
-	li.appendTo('#explorer');
+	li.appendTo('#explorer ul');
 
 	return entry;
 }
@@ -99,7 +99,7 @@ function removeEntry(entry: Entry) {
 }
 
 export function update() {
-	$('#explorer li.entry').remove();
+	$('#explorer ul li.entry').remove();
 
 	for (const name of fs.readdirSync(cwd)) {
 		createEntry(name);
diff --git a/src/index.html b/src/index.html
index c1b0b7e..49d4e1b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,22 +15,24 @@
 			<input id="location" value="/" placeholder="Path" />
 		</div>
 
-		<ul id="config" class="tab">
+		<div id="config" class="tab">
 			<div class="top">
 				<p><strong>Configuration</strong></p>
 				<input type="checkbox" name="auto-load" class="auto-load" />
 				<label for="autoload">Auto-load</label>
 			</div>
 
-			<template id="mount">
-				<li class="mount">
-					<input type="hidden" name="id" />
-					<input type="text" name="path" placeholder="Mount path" />
-					<select name="backend" placeholder="">
-						<option value="" disabled selected>Select backend</option>
-					</select>
-				</li>
-			</template>
+			<ul>
+				<template id="mount">
+					<li class="mount">
+						<input type="hidden" name="id" />
+						<input type="text" name="path" placeholder="Mount path" />
+						<select name="backend" placeholder="">
+							<option value="" disabled selected>Select backend</option>
+						</select>
+					</li>
+				</template>
+			</ul>
 
 			<button class="add">+</button>
 			<div class="manage">
@@ -38,9 +40,9 @@
 				<button class="download">Download</button>
 				<button class="save">Save</button>
 			</div>
-		</ul>
+		</div>
 
-		<ul id="explorer" class="tab" style="display: none">
+		<div id="explorer" class="tab" style="display: none">
 			<div class="top">
 				<p><strong>Explorer</strong></p>
 				<div>
@@ -63,13 +65,15 @@
 				<p class="mtime">Modified</p>
 			</li>
 
-			<template id="entry">
-				<li class="entry">
-					<p class="name"></p>
-					<p class="size"></p>
-					<p class="mtime"></p>
-				</li>
-			</template>
+			<ul>
+				<template id="entry">
+					<li class="entry">
+						<p class="name"></p>
+						<p class="size"></p>
+						<p class="mtime"></p>
+					</li>
+				</template>
+			</ul>
 
 			<dialog class="create">
 				<div class="inputs">
@@ -88,7 +92,7 @@
 				<button class="create">Create</button>
 				<button class="cancel">Cancel</button>
 			</dialog>
-		</ul>
+		</div>
 
 		<div id="editor" class="tab" style="display: none">
 			<div class="top">
diff --git a/src/shell.ts b/src/shell.ts
index f8aed33..24f4387 100644
--- a/src/shell.ts
+++ b/src/shell.ts
@@ -1,54 +1,19 @@
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import { Terminal } from '@xterm/xterm';
-import { configure, encode, fs, IndexFS } from '@zenfs/core';
-import { X_OK } from '@zenfs/core/emulation/constants.js';
+import { fs } from '@zenfs/core';
 import * as path from '@zenfs/core/emulation/path.js';
 import chalk from 'chalk';
 import $ from 'jquery';
-import { createShell } from 'utilium/shell.js';
-import { openPath } from './common.js';
 import * as utilium from 'utilium';
+import { createShell } from 'utilium/shell.js';
+import { openPath as __open } from './common.js';
 import { open as __editor_open } from './editor.js';
-
+import { X_OK } from '@zenfs/core/emulation/constants.js';
+import type { ExecutionLocals } from '../commands/lib.js';
 chalk.level = 2;
 
-class _BuiltinFS extends IndexFS {
-	public async ready(): Promise<void> {
-		if (this._isInitialized) {
-			return;
-		}
-		await super.ready();
-
-		if (this._disableSync) {
-			return;
-		}
-
-		/**
-		 * Iterate over all of the files and cache their contents
-		 */
-		for (const [path, stats] of this.index.files()) {
-			await this.getData(path);
-		}
-	}
-	protected getData(path: string): Promise<Uint8Array> {
-		return Promise.resolve(encode($commands[path]));
-	}
-	protected getDataSync(path: string): Uint8Array {
-		return encode($commands[path]);
-	}
-}
-
-const _builtinFS = new _BuiltinFS($commands_index);
-await _builtinFS.ready();
-
-await configure({
-	mounts: {
-		'/bin': _builtinFS,
-	},
-});
-
-const terminal = new Terminal({
+export const terminal = new Terminal({
 	convertEol: true,
 	rows: 48,
 });
@@ -59,13 +24,16 @@ terminal.write('\x1b[4h'); // Insert mode
 terminal.open($('#terminal-container')[0]);
 fitAddon.fit();
 
-const __locals = { fs, path, utilium, openPath, __editor_open };
+const AsyncFunction = async function () {}.constructor as (...args: string[]) => (...args: unknown[]) => Promise<void>;
+
+async function wait(n: number): Promise<void> {
+	const { promise, resolve } = Promise.withResolvers<void>();
+	setTimeout(resolve, n);
+	return promise;
+}
 
-export function exec(__cmdLine: string): void {
-	/* eslint-disable @typescript-eslint/no-unused-vars */
-	const { fs, path, utilium, openPath: cd, __editor_open } = __locals;
+export async function exec(__cmdLine: string): Promise<void> {
 	const args = __cmdLine.trim().split(' ');
-	/* eslint-enable @typescript-eslint/no-unused-vars */
 
 	if (!args[0]) {
 		return;
@@ -83,7 +51,20 @@ export function exec(__cmdLine: string): void {
 		return;
 	}
 
-	eval(fs.readFileSync(__filename, 'utf8'));
+	await AsyncFunction(
+		'{ fs, path, utilium, terminal, __open, __editor_open, args, wait }',
+		fs.readFileSync(__filename, 'utf8')
+	)({
+		fs,
+		path,
+		chalk,
+		utilium,
+		terminal,
+		__open,
+		__editor_open,
+		args,
+		wait,
+	} satisfies ExecutionLocals | object);
 }
 
 const shell = createShell({
@@ -94,15 +75,14 @@ const shell = createShell({
 	/**
 	 * @todo output to history file
 	 */
-	onLine(line) {
-		try {
-			exec(line);
-		} catch (error) {
+	async onLine(line) {
+		await exec(line).catch((error: Error | string) => {
 			terminal.writeln('Error: ' + ((error as Error).message ?? error));
 			if ($('#terminal input.debug').is(':checked')) {
+				// eslint-disable-next-line @typescript-eslint/only-throw-error
 				throw error;
 			}
-		}
+		});
 	},
 });
 Object.assign(globalThis, { shell, fs, chalk });
diff --git a/src/styles.css b/src/styles.css
index 09e034d..162ed4f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -100,9 +100,15 @@ dialog {
 		top: 0.5em;
 	}
 
+	ul {
+		position: absolute;
+		inset: 6em 1em 0;
+		overflow-x: hidden;
+		overflow-y: scroll;
+		padding-left: 0;
+	}
+
 	li {
-		position: relative;
-		top: 6em;
 		border-radius: 0.25em;
 		padding: 0.25em;
 	}
@@ -126,6 +132,10 @@ dialog {
 #explorer {
 	padding: 1em;
 
+	ul {
+		inset: 8em 1em 0;
+	}
+
 	li {
 		display: flex;
 		align-items: center;
@@ -155,6 +165,8 @@ dialog {
 
 	li.header {
 		font-weight: bold;
+		position: relative;
+		top: 6em;
 	}
 
 	li.entry {