New features and fixes

 * Add drag-and-drop support (import user files)
 * Improve help
 * Add an EmptyFS (like NullFS but allows directories listing)
 * Fix path resolution issue

Author: Minigugus

README.md

@@ -12,7 +12,7 @@ This projects aims to contribute to the discussion about [WebContainer specifica
 
 This is a bash-like shell but that runs in the browser. It comes with a lightweight kernel implementation (supports process and filesystem management):
  * Every process runs in its own dedicated worker
- * [Extensible filesystem](public/index.js#L30-48)
+ * [Extensible filesystem](public/index.js#L56-L62)
  * Performant (heavily rely on postMessage and Transferable objects - reduce minimize the amount of copy)
  * Supports commands pipes (eg. `echo Hello world! | tee README`)
 
@@ -26,10 +26,13 @@ Interesting files:
  * [ ] Serve filesystem via Service Worker
  * [ ] Let the app works offline with a Service Worker
  * [X] Move shell features into a dedicated a process (enable nested shells)
+ * [ ] Add signals support (for SIGINT and SIGKILL)
  * [ ] Add jobs support (enables detached commands)
  * [ ] Add network support (TCP, UNIX socket, UDP)
- * [ ] Add multi-tabs support (cross-tabs kernel)
+ * [ ] Add multi-tabs support (one container per tab)
+ * [ ] Add a [WASI](https://wasi.dev) runtime (a `wasi [wasm-file]` command for instance)
+   * [ ] Add integration with [WAPM](https://wapm.io/interface/wasi)
  * [ ] Add `ps` and `kill` commands
  * [ ] Add docs about APIs and kernel design
- * [ ] Add a `deno` command (redirect ops to the in-browser kernel)
+ * [ ] Add a `deno` command (shim the Rust part with a wrapper around this lib's API)
  * [ ] `iframe`-based process ? (enable `electron`-like apps)

public/index.js

@@ -54,12 +54,33 @@ Type \x1B[1;3mhelp\x1B[0m to get started\n`)
 filesystem
   .mount([], root)
   .mount(['root'], filesystem)
+  .mount(['mnt'], new fs.EmptyFS())
   .mount(['dev'], new fs.NullFS()) // TODO dedicated driver
   .mount(['sys'], new fs.NullFS()) // TODO dedicated driver
   .mount(['proc'], new fs.NullFS()) // TODO dedicated driver
   .mount(['bin'], new fs.HTTPFS(new URL('./command/', import.meta.url).href))
   .mount(['tmp'], new fs.MemFS());
 
+document.body.addEventListener('drop', async (e) => {
+  e.preventDefault();
+  const dirs = [];
+  // @ts-ignore
+  for (const item of e.dataTransfer.items) {
+    if (item.kind === 'file') {
+      const entry = await item.getAsFileSystemHandle();
+      if (entry.kind === 'directory') {
+        try {
+          filesystem.mount(['mnt', entry.name], new fs.NativeFS(entry));
+          dirs.push(` - /mnt/${entry.name}: OK`);
+        } catch (err) {
+          dirs.push(` - /mnt/${entry.name}: ERROR: ${(err instanceof Error && err.message) || err}`);
+        }
+      }
+    }
+  }
+  alert(`Imported directories:\n${dirs.join('\n')}`)
+});
+
 try {
   const bash = await webcontainer.run({
     entrypoint: 'bash', // will be resolved using the PATH environment variable

rollup.config.js

@@ -42,7 +42,7 @@ export default [
       const [, description = '', usage = ''] = /\/\*\*((?:.|\n)+?)(?:@usage\s([^\n]+?)\s+)?\*\//.exec(content) ?? [];
       commands[name] = {
         usage: usage.split(' ').filter(x => x),
-        description: description.replace(/^\s(?:\n|\*\s+)/gm, '').trim()
+        description: description.replace(/^(?:\n|\s\*\s)/gm, '').trim()
       };
       return ({
         input: {

src/command/bash.ts

@@ -2,6 +2,13 @@
 
 /**
  * The shell that powers this terminal
+ * Builtin commands:
+ *  - cd: change current directory
+ *  - pwd: print current directory
+ *  - exit: close the session
+ *  - user: prints/change the current user (same as USER=username)
+ *  - hostname: prints/change the current user (same as HOST=hostname)
+ *  - unset: delete an environment variable
  */
 
 if (typeof webcontainer !== 'function')

src/command/help.ts

@@ -18,8 +18,11 @@ webcontainer(async function help(process) {
         'Content-Type': 'application/json'
       }
     }).json();
-    for (const [name, { usage, description }] of Object.entries<{ usage: string[], description: string }>(cmds))
-      await print(`${[`\x1B[1m${name}\x1B[0m`, ...usage.map(a => `\x1B[4m${a}\x1B[0m`)].join(' ')}\n\t${description || '(no help available)'}\n`);
+    for (const [name, { usage, description }] of Object.entries<{ usage: string[], description: string }>(cmds)) {
+      let desc = description || '(no help available)';
+      desc = desc.split('\n').map(x => '\t' + x).join('\n');
+      await print(`${[`\x1B[1m${name}\x1B[0m`, ...usage.map(a => `\x1B[4m${a}\x1B[0m`)].join(' ')}\n${desc}\n`);
+    }
   } catch (err) {
     await printErr(`\x1B[1;31mCommands list not available (${(err instanceof Error && err.message) ?? err})\x1B[0m`);
     await print('');
@@ -31,6 +34,7 @@ webcontainer(async function help(process) {
   await print('  \x1B[1m     TAB\x1B[0m : DOES NOTHING (no auto-compelte yet)');
   await print('');
   await print("Commands can be piped together with a | character (eg. \x1B[4mecho Hello world! | tee README\x1B[0m). && and || doesn't work yet.");
-  // await print('');
-  // await print('TIP: Drop here a directory from your computer to make it accessible via this terminal.');
+  await print("Environment variables are also supported. Play with \x1B[4menv\x1B[0m command for more.");
+  await print('');
+  await print('You can also drop a directory from your computer here to make it accessible via this terminal.');
 });

src/command/tee.ts

@@ -1,7 +1,7 @@
 /// <reference path="../userspace/index.d.ts" />
 
 /**
- * Redirects stdin to stdout and to all files passed at parameters
+ * Redirects stdin to stdout and to all files passed as parameters
  * @usage <file1> <file2> ... <fileN>
  */
 

src/kernelspace/fs/empty.ts

@@ -0,0 +1,28 @@
+import type { FileSystemDriver, FileSystemNode } from './index';
+
+export class EmptyFS implements FileSystemDriver {
+  async resolveUri(path: string[]): Promise<string> {
+    throw new Error(path.length ? 'ENOTFOUND' : 'EISDIR');
+  }
+  async access(path: string[]): Promise<boolean> {
+    return !path.length;
+  }
+  async readDir(path: string[]): Promise<ReadableStream<FileSystemNode>> {
+    if (path.length)
+      throw new Error('ENOTFOUND');
+    return new ReadableStream({
+      start(c) {
+        c.close();
+      }
+    });
+  }
+  async readFile(path: string[], offset?: number, length?: number): Promise<ReadableStream<Uint8Array>> {
+    throw new Error(path.length ? 'ENOTFOUND' : 'EISDIR');
+  }
+  async writeFile(path: string[], offset: 'before' | 'after' | 'override', create: boolean): Promise<WritableStream<Uint8Array>> {
+    throw new Error(path.length ? 'EACCESS' : 'EISDIR');
+  }
+  async deleteNode(path: string[], recursive: boolean): Promise<void> {
+    throw new Error(path.length ? 'ENOTFOUND' : 'EBUSY');
+  }
+}

src/kernelspace/fs/http.ts

@@ -17,7 +17,7 @@ export class HTTPFS implements FileSystemDriver {
     const url = new URL(path.join('/'), this.#root);
     url.hash = '';
     url.search = '';
-    const response = await fetch(url.href, { method: 'HEAD' });
+    const response = await fetch(url.href, { method: 'HEAD', cache: 'force-cache' });
     switch (response.status) {
       case 200:
       case 201:
@@ -38,7 +38,7 @@ export class HTTPFS implements FileSystemDriver {
     const url = new URL(path.join('/'), this.#root);
     url.hash = '';
     url.search = '';
-    const response = await fetch(url.href);
+    const response = await fetch(url.href, { cache: 'force-cache' });
     switch (response.status) {
       case 200:
         break;

src/kernelspace/index.ts

@@ -8,6 +8,7 @@ import { OverlayFS } from './fs/overlay';
 import { NativeFS } from './fs/native';
 import { MemFS } from './fs/memfs';
 import { HTTPFS } from './fs/http';
+import { EmptyFS } from './fs/empty';
 import { NullFS } from './fs/null';
 import { CustomTransferable, TO_TRANSFORABLES } from '../rpc';
 
@@ -16,6 +17,7 @@ export const fs = {
   NativeFS,
   MemFS,
   HTTPFS,
+  EmptyFS,
   NullFS,
 }
 
@@ -77,7 +79,7 @@ class Kernel {
         }
       }
     } else if (/^\.?\.?\//.test(info.entrypoint))
-      info.entrypoint = new URL(info.entrypoint, 'file://' + info.cwd).pathname;
+      info.entrypoint = new URL(info.entrypoint, 'file://' + info.cwd + '/').pathname;
     const process = await KernelProcess.spawn(this, {
       ...info,
       entrypoint: info.entrypoint,

src/userspace/index.ts

@@ -260,7 +260,7 @@ class LocalProcessController {
   ): Promise<void> {
     const kernel = KERNEL_PROCESS_ENDPOINT.attach(channel);
     channel.start();
-    const resolved = new URL(info.entrypoint, 'file://' + info.cwd);
+    const resolved = new URL(info.entrypoint, 'file://' + info.cwd + '/');
     const entrypointUrl = resolved.protocol === 'file:'
       ? await kernel.resolveUri(segments(resolved.pathname))
       : resolved.href;