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

@@ -1,4 +1,5 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 if (!args[1]) {
 	throw 'No path provided';
 }

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);

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

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';
 }

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(' '));

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.');

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;
+}

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);

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);
 		}
 	}

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';
 }

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';
 }

commands/open-editor.js

@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 __editor_open(args[1]);

commands/pwd.js

@@ -1,2 +1,3 @@
-/// <reference file="./lib.d.ts" >
+/// <reference types="./lib.d.ts" />
+// @ts-check
 terminal.writeln(path.cwd);

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';
 }

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';
 }

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",

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,15 +53,15 @@ 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);
 		updateExplorer();
 		return;
 	}
 
-	if (fromShell) {
+	if (dirOnly) {
 		throw new Error(`Error: ENOTDIR: File is not a directory, '${resolve(path)}'`);
 	}
 

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();

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;

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);

src/index.html

@@ -15,32 +15,34 @@
 			<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">
 				<button class="upload">Upload</button>
 				<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">