VS Code-like IDE for Doh.js

A VS Code-like integrated development environment built on top of Monaco Editor and integrated with Doh.js features like Dohball management and real-time file system access.

Features

• 🎨 Monaco Editor Core: Leverages the powerful editor that powers VS Code, providing syntax highlighting, IntelliSense (where available), and various editing features.
• 📁 Enhanced File Explorer:
  • Tree view for navigating directories.
  • Create, rename, and delete files and folders.
  • File icons based on type/extension.
  • Expand/collapse folders with lazy-loading content.
  • Context menu for file/folder operations.
  • Indicators for Git ignored files.
  • Dohball Integration: Special icons, version info, update indicators, and remote host tooltips for Dohball folders. Context menu option to view Dohball details.
• 📑 Multiple Editor Tabs:
  • Work with multiple files simultaneously.
  • Close tabs individually or all at once.
  • Modification indicators for auto-saved changes.
  • Tab context menu for quick actions.
• 🖥️ Integrated Terminal:
  • Built-in terminal using xterm.js.
  • Support for multiple terminal tabs.
  • Connects to a real server-side PTY process (PowerShell on Windows, Bash on Unix-like).
  • Resizable terminal panel.
• 🌿 Source Control (Git):
  • Dedicated sidebar panel for Git operations.
  • Automatically detects Git repositories within the workspace.
  • View staged and unstaged changes in a tree format.
  • File status indicators (Modified, Added, Deleted, Untracked).
  • Actions: Stage/Unstage (All/Single), Commit, Push, Pull, Refresh.
  • View file diffs in a dedicated diff editor tab.
  • Branch management (View current branch, basic checkout planned).
  • Initialize new Git repositories.
• ⚽ Dohball Management Integration:
  • View details of Dohball packages directly within the IDE in a dedicated tab.
  • Perform actions like install, update, and remove Dohballs via the UI (requires dohball_manager module).
  • Visual indicators for Dohballs in the File Explorer.
• 🎯 Status Bar: Provides contextual information like current file path, language mode, theme, Git branch, and Dohball details.
• 🎭 Theming: Supports multiple themes including doh_dark (default), vscode_dark, vscode, and vscode_high_contrast.
• 💾 Real File System Access: Interacts directly with the server-side file system via a WebSocket connection for listing, reading, writing, and deleting files/folders.
• 💾 State Persistence: Remembers open files, editor layout (sidebar width, terminal height), and active sidebar view across sessions using localStorage.
• ✨ Resizable Layout: Adjust the width of the sidebar and the height of the terminal panel.
• 🔍 Search Panel: Basic placeholder for future search functionality.
• 🔔 Notifications: Simple notification system for feedback on operations.

Installation

The module will automatically install the required dependencies when loaded:

doh install ide

Entry Point

The module includes an entry point at index.html that provides a standalone IDE interface. You can access it at:

http://localhost:3000/doh_modules/ide

Basic Usage

// Load the IDE module
const {IDE} = await Doh.load('ide');

// Initialize the IDE in a container
const ide = IDE.init('ide-container', {
  theme: 'doh_dark',
  fontSize: 14,
  tabSize: 2,
  wordWrap: 'off',
  minimap: true,
  lineNumbers: true,
  workspacePath: '/'  // Root directory for file explorer
});

// Open a file from the file system
ide.openRealFile('/path/to/file.js');

// List directory contents
ide.listDirectory('/path/to/directory');

// Change the theme
ide.setTheme('vscode_light');

Configuration Options

The IDE accepts the following configuration options during initialization (IDE.init):

// Default options (can be overridden)
const options = {
  theme: 'doh_dark',       // Editor theme ('doh_dark', 'vscode_dark', 'vscode', 'vscode_high_contrast')
  fontSize: 14,            // Font size in pixels
  tabSize: 2,              // Tab size in spaces
  wordWrap: 'off',         // Word wrap ('off', 'on', 'wordWrapColumn', 'bounded')
  minimap: true,           // Show editor minimap
  lineNumbers: true,       // Show line numbers in editor
  files: [],               // Initial files to load (Not fully implemented for restoration)
  workspacePath: '/',      // Root directory for file explorer
  sidebarWidth: 250,       // Default sidebar width in pixels
  terminalHeight: 200,     // Default terminal height in pixels
};

API Reference

IDE.init(container, options)

Initializes the IDE in the specified container.

• container: The container element or ID
• options: Configuration options
• Returns: The IDE instance

IDE.openRealFile(filePath, activate = true)

Opens a file from the server's file system in the editor.

• filePath: Path to the file (relative to Doh project root).
• activate: (Optional) Whether to make the new tab active. Defaults to true.
• Returns: The editor information object or null if an error occurs.

IDE.listDirectory(dirPath)

Lists the contents of a directory in the file explorer.

• dirPath: Path to the directory

IDE.createNewFile(dirPath)

Creates a new file in the specified directory.

• dirPath: Path where to create the file (defaults to current workspace path)

IDE.createNewFolder(dirPath)

Creates a new folder in the specified directory.

• dirPath: Path where to create the folder (defaults to current workspace path)

IDE.deleteFile(filePath)

Deletes a file.

• filePath: Path to the file to delete

IDE.deleteFolder(folderPath)

Deletes a folder and all its contents.

• folderPath: Path to the folder to delete

IDE.saveCurrentFile()

Saves the content of the currently open file.

IDE.getActiveEditor()

Gets the currently active Monaco editor instance.

• Returns: The Monaco editor instance or null if none is active

IDE.getActiveFile()

Gets the currently active file.

• Returns: The file object or null if no file is active

IDE.setTheme(theme)

Changes the editor theme.

• theme: The theme name ('doh_dark', 'vscode_dark', 'vscode', 'vscode_high_contrast')

IDE.viewDohballDetails(dohballPath, activate = true)

Opens a special tab displaying details for the specified Dohball. Requires the dohball_manager module.

• dohballPath: Path to the Dohball folder.
• activate: (Optional) Whether to make the new tab active. Defaults to true.
• Returns: The editor information object for the Dohball view or null if an error occurs.

IDE.createNewTerminal()

Creates and opens a new terminal instance and tab. Requires a server-side component (ide_server).

• Returns: A Promise resolving to the terminal information object or rejecting on error.

IDE.activateTerminal(terminalId)

Activates the terminal tab with the specified ID.

• terminalId: The ID of the terminal to activate.

IDE.closeTerminal(terminalId)

Closes the terminal instance and tab with the specified ID.

• terminalId: The ID of the terminal to close.

IDE.viewGitDiff(repoPath, filePath, isStaged)

Opens a diff editor tab showing changes for a file within a Git repository. Requires a server-side component (ide_server) and git.

• repoPath: The path to the root of the Git repository.
• filePath: The path to the file within the repository.
• isStaged: Boolean indicating whether to diff the staged version (true) or the working directory version (false).

IDE.showNotification(type, message, duration = 3000)

Displays a temporary notification message.

• type: Type of notification ('info', 'success', 'error', 'warning').
• message: The message text to display.
• duration: (Optional) How long the notification stays visible in milliseconds. Defaults to 3000.