web-terminal-lite/main.js

A lightweight in-browser terminal that simulates a shell-like experience

import { Terminal } from 'xterm';
import 'xterm/css/xterm.css';

const term = new Terminal();
term.open(document.getElementById("terminal"));

const fs = {
  '/': ['home', 'usr', 'var'],
  '/home': ['user', 'docs'],
  '/home/user': ['file.txt'],
};

let currentDir = '/home';

const prompt = () => {
  term.write(`\r\n${currentDir} $ `);
};

term.writeln("Welcome to the fake Linux shell.");
prompt();

let command = '';

term.onKey(({ key, domEvent }) => {
  const char = key;

  if (domEvent.key === 'Enter') {
    term.writeln('');
    handleCommand(command.trim());
    command = '';
    prompt();
  } else if (domEvent.key === 'Backspace') {
    if (command.length > 0) {
      command = command.slice(0, -1);
      term.write('\b \b');
    }
  } else {
    command += char;
    term.write(char);
  }
});

function handleCommand(cmd) {
  const [base, ...args] = cmd.split(' ');
  switch (base) {
    case 'pwd':
      term.writeln(currentDir);
      break;
    case 'ls':
      const files = fs[currentDir] || [];
      term.writeln(files.join('  '));
      break;
    case 'cd':
      const newPath = args[0] === '..'
        ? currentDir.split('/').slice(0, -1).join('/') || '/'
        : currentDir + '/' + args[0];
      if (fs[newPath]) {
        currentDir = newPath;
      } else {
        term.writeln('No such directory');
      }
      break;
    case 'clear':
      term.clear();
      break;
    default:
      term.writeln(`${base}: command not found`);
  }
}