stackblitz-local-dev-loop

# StackBlitz Local Dev Loop ## Overview Set up a Vite-based development environment for WebContainer applications with cross-origin headers, hot module replacement, and Vitest for testing file system operations. ## Instructions ### Step 1: Vite Project with WebContainers ```bash npm create vite@latest wc-app -- --template vanilla-ts cd wc-app npm install @webcontainer/api ``` ### Step 2: Configure Vite Headers ```typescript // vite.config.ts import { defineConfig } from 'vite'; export default defineConfig({ server: { headers: { 'Cross-Origin-Embedder-Policy': 'require-corp', 'Cross-Origin-Opener-Policy': 'same-origin', }, }, }); ``` ### Step 3: Test WebContainer Operations ```typescript // tests/webcontainer.test.ts import { describe, it, expect } from 'vitest'; // Note: WebContainer tests require a browser environment // Use Playwright for full integration tests describe('FileSystemTree Builder', () => { it('creates valid tree from flat paths', () => { const tree = buildFileTree({ 'src/index.ts': 'console.log("hello")', 'package.json': '{"name":"test"}', }); expect(tree['package.json']).toHaveProperty('file'); expect(tree.src).toHaveProperty('directory'); }); }); function buildFileTree(flatFiles: Record<string, string>) { const tree: any = {}; for (const [path, contents] of Object.entries(flatFiles)) { const parts = path.split('/'); let current = tree; for (let i = 0; i < parts.length - 1; i+...