Black Playground¶
一个基于 SvelteKit 和 Pyodide 的在线 Black 代码格式化工具。直接在浏览器里跑 Python，格式化你的代码，无需服务器。
Info
这是我用 Pyodide 把 Black 带到浏览器的一个小项目。灵感来自 José Padilla 的原版，但用 WASM 实现，让一切都在客户端完成。
功能¶
- 输入 Python 代码，实时格式化输出
- Monaco 编辑器，支持语法高亮和自动补全
- 纯前端，无需上传代码到服务器
实现¶
用 SvelteKit 搭框架，Pyodide 加载 Black wheel，Monaco 做编辑器。Vite 打包，UnoCSS 样式。关键是 Pyodide 让浏览器能跑 Python，格式化直接在内存里完成。
深入洞见¶
仓库实现把 black 放在浏览器运行：src/lib/pyodide/init.py 通过 micropip.install('black')（或加载 wheel）把 Black 可用性注入 Pyodide，并在 JS/TS 侧用 src/lib/format.ts 包装 pyodide 的 callable（例如 black.format_str），这样 UI 层只需把源码交给 format 调用并显示结果。控件和缓存逻辑（format.ts）把 pyodide 调用做成单例/缓存，以降低 cold start 成本，使得浏览器端 format 成为可复用、低延迟的客户端服务。
参考源码：src/lib/pyodide/init.py · src/lib/format.ts · src/routes/+page.svelte
此外，项目集成了 AI 代码生成功能，通过 promplate 和 OpenAI API 允许用户重新生成代码片段，扩展了基本格式化之外的原型用途。架构使用 SvelteKit 提供响应式 UI，Monaco 编辑器支持语法高亮，UnoCSS 处理样式，模块化分离 Python 运行时初始化、格式化逻辑和 AI 提示处理。依赖更新由 Renovate 自动化管理，确保安全和兼容性。设置模态暴露 Black 的完整配置选项，支持不同 Python 版本和行长度定制。
我的巧思¶
- 浏览器原生 Python：Pyodide 避开服务器成本和扩展问题。想象热重载 playground 会话？
- 依赖更新自动化：Renovate 自动更新 ESLint 和 Svelte，保持新鲜。
- 可扩展：类似工具可以加更多 linter 或 formatter。
相关项目¶
- subwaymatch/black-code-formatter-serverless：AWS Lambda 版 Black API。
- jpadilla/black-playground：原版 JS playground。
- pyodide.org/en/stable/usage/playground.html：Pyodide 官方 demo。