stackblitz-sdk-patterns

# StackBlitz SDK Patterns ## Overview Production patterns for the WebContainer API: singleton boot, file system CRUD, process spawning and management, jsh interactive shell, and the StackBlitz SDK for embedding projects. ## Instructions ### Step 1: Singleton WebContainer Instance ```typescript import { WebContainer } from '@webcontainer/api'; let instance: WebContainer | null = null; export async function getWebContainer(): Promise<WebContainer> { if (!instance) { instance = await WebContainer.boot(); } return instance; } // Teardown export async function teardownWebContainer() { if (instance) { instance.teardown(); instance = null; } } ``` ### Step 2: File System Operations ```typescript const wc = await getWebContainer(); // Write file await wc.fs.writeFile('/src/app.ts', 'export const hello = "world";'); // Read file const content = await wc.fs.readFile('/src/app.ts', 'utf-8'); // Read directory const entries = await wc.fs.readdir('/src', { withFileTypes: true }); entries.forEach(entry => { console.log(`${entry.name} (${entry.isDirectory() ? 'dir' : 'file'})`); }); // Create directory await wc.fs.mkdir('/src/components', { recursive: true }); // Delete file await wc.fs.rm('/src/old.ts'); // Delete directory await wc.fs.rm('/dist', { recursive: true }); // Watch for changes wc.fs.watch('/src', { recursive: true }, (event, filename) => { console.log(`${event}: ${filename}`); }); ``` ### Step 3: Process Management ```typescript // ...