OpenWebContainer

🗺️ Architecture Overview

⚡ Current Progress

✅ Implemented Features

🚧 In Progress

📋 Upcoming Features

🚀 Features

📦 Project Structure

.
├── apps/ # Application packages
│ └── playground/ # Web-based playground
│ ├── src/ 
│ │ ├── components/ # React components
│ │ │ ├── Editor/
│ │ │ ├── FileExplorer/
│ │ │ └── Terminal/
│ │ ├── hooks/ # React hooks
│ │ └── ...
│ └── ...
├── packages/
│ ├── api/ # API interface package
│ │ ├── src/
│ │ │ ├── container/ # Container API
│ │ │ ├── process/ # Process-related types
│ │ │ └── worker/ # Worker bridge implementation
│ │ └── ...
│ └── core/ # Core implementation
│ ├── src/
│ │ ├── filesystem/ # Virtual filesystem implementation
│ │ ├── interfaces/ # Core interfaces
│ │ ├── network/ # Network simulation
│ │ ├── process/ # Process implementation
│ │ │ ├── base/ # Base process classes
│ │ │ ├── executors/ # Process type executors
│ │ │ └── manager/ # Process management
│ │ ├── shell/ # Shell implementation
│ │ │ ├── commands/ # Shell command implementations
│ │ │ └── ...
│ │ └── utils/ # Utility functions
│ └── ...

🛠️ Development Setup

Prerequisites

Installation

# Clone the repository
git clone https://github.com/thecodacus/OpenWebContainer.git
cd OpenWebContainer
# Install dependencies
pnpm install
# Start development
pnpm dev # Start all packages
pnpm playground # Start only the playground

📚 Usage

Using the Core Package

import { OpenWebContainer } from '@open-web-container/core';
async function main() {
 // Create a new container
 const container = new OpenWebContainer();
 // Create a directory and write a JavaScript file
 container.writeFile('/app/hello.js', `
 console.log('Hello from the container!');
 export const message = 'Hello World';
 `);
 // Run a shell command
 const shell = await container.spawn('sh', ['echo', 'Hello', '>', '/app/greeting.txt']);
 
 // Listen for process events
 shell.addEventListener('exit', ({ exitCode }) => {
 console.log('Shell process exited with code:', exitCode);
 });
 // Run a JavaScript file
 const jsProcess = await container.spawn('node', '/app/hello.js');
 
 // Clean up when done
 await container.dispose();
}
main().catch(console.error);

API Examples

File System Operations

// Directory operations
container.createDirectory('/app');
container.listDirectory('/app');
container.deleteDirectory('/app');
// File operations
container.writeFile('/app/script.js', 'console.log("Hello")');
const content = container.readFile('/app/script.js');
container.deleteFile('/app/script.js');

Process Management

// Spawn a shell process
const shell = await container.spawn('sh', ['ls']);
// Spawn a JavaScript process
const process = await container.spawn('node', '/app/script.js');
// Process events
process.addEventListener('start', (data) => { /* ... */ });
process.addEventListener('exit', (data) => { /* ... */ });
process.addEventListener('error', (data) => { /* ... */ });
process.addEventListener('message', (data) => { /* ... */ });

Shell Commands

// Interactive shell
const shell = await container.spawn('sh');
if (shell instanceof ShellProcess) {
 // Execute commands
 await shell.executeCommand('mkdir /app');
 await shell.executeCommand('echo "Hello" > /app/hello.txt');
 await shell.executeCommand('cat /app/hello.txt');
}

🧪 Development Commands

# Start development
pnpm dev # Start all packages
pnpm playground # Start only the playground
pnpm core:dev # Start core package development
# Building
pnpm build # Build all packages
pnpm core:build # Build only core package
# Testing
pnpm test # Run all tests
pnpm lint # Run linter
pnpm format # Format code
# Release
pnpm changeset # Create a changeset
pnpm version-packages # Update versions
pnpm release # Publish to npm

🛠️ Contributing

Areas for Contribution

📝 Roadmap

📄 License

🤝 Acknowledgments

💬 Support

Similar Projects