Monorepo for Aesthetic.Computer
aesthetic.computer
1# VS Code Extension Development
2
3## Quick Publish Workflow
4
5```bash
6npm run build # Compile TypeScript + bundle views
7npm run publish # Bump version + package + publish to marketplace
8```
9
10That's it! The `publish` script handles version bumping automatically.
11
12## Scripts Reference
13
14| Script | Description |
15|--------|-------------|
16| `npm run build` | Compile extension (views + esbuild) |
17| `npm run compile` | Alias for build |
18| `npm run publish` | Bump patch version + package + publish |
19| `npm run package` | Create .vsix without publishing |
20| `npm run views` | Generate embedded JS from views/*.js |
21
22## File Structure
23
24- `extension.ts` - Main extension code
25- `views/` - Embedded webview JS (process-tree, ast-tree)
26- `generated-views.ts` - Auto-generated from views/ (don't edit)
27- `out/` - Compiled output (gitignored)
28- `themes/` - Color themes
29- `syntaxes/` - KidLisp syntax highlighting
30
31## Key Webview Functions
32
33- `getWebViewContent()` - Main AC sidebar panel
34- `getKidLispWebViewContent()` - KidLisp.com window
35- `getNewsWebViewContent()` - News window
36- `getWelcomePanelHtml()` - Welcome/architecture panel
37
38## CSP Notes
39
40Each webview needs proper Content-Security-Policy for:
41- `frame-src` / `child-src` - Allow iframes (localhost:8888, aesthetic.computer)
42- `script-src` - Use nonces for inline scripts
43- `connect-src` - For WebSocket/fetch if needed
44
45## Testing Locally
46
471. Press F5 in VS Code to launch Extension Development Host
482. Or install the .vsix: `code --install-extension aesthetic-computer-code-X.X.X.vsix`
49
50## Troubleshooting
51
52- **Marketplace shows old version**: Cache lag, wait 2-5 minutes or bump version again
53- **TypeScript errors**: These are often strict-mode warnings, build still succeeds
54- **Webview blank**: Check CSP frame-src includes the iframe URL