PocketJS 是一个面向浏览器外场景的高性能 JSX UI 运行时，允许开发者使用 Solid 或 Vue Vapor 编写组件，并通过 QuickJS + Rust no_std 核心在 PSP 真机、PPSSPP、浏览器 WASM、macOS 原生窗口和 Headless Bun 等环境运行。它将布局、样式、文本渲染、动画等能力下沉到轻量 Rust 核心，目标是在极低内存预算下实现 60 FPS UI。
适用领域
嵌入式 UI / 游戏主机与掌机 UI / 跨运行时前端框架 / JSX 原生渲染 / Rust + QuickJS 运行时 / WASM UI / SolidJS / Vue Vapor / Tailwind 风格设计系统 / 低内存高性能动画
配置难度
较高。对于熟悉 TypeScript、JSX、Solid 或 Vue 的前端开发者，编写组件本身较容易；但如果要深入 PSP 真机、Rust 核心、QuickJS、WASM 或自定义运行时，学习和调试成本明显较高。
商业价值
PocketJS 的商业价值主要体现在资源受限硬件、复古掌机、嵌入式设备、游戏 UI 和定制运行时领域。它不适合大多数常规 Web SaaS 项目，但对于需要在低内存环境中实现现代化、流畅、高度可控 UI 的团队，具有较高技术差异化价值。MIT 许可证降低了商用门槛，但在正式商用前需要重点评估工具链稳定性、目标硬件适配、社区活跃度和长期维护能力。
01
技术亮点
- 支持在 PSP 真机上以 8 MB 内存预算运行 60 FPS UI。
- 支持 SolidJS 与 Vue Vapor，两者使用显式 framework 配置切换。
- 使用 QuickJS 运行 JS 逻辑，Rust no_std 核心处理布局、样式、文本和动画。
- 支持 PSP、PPSSPP、浏览器 WASM、macOS wgpu 原生窗口和 Headless Bun 多种目标环境。
- 提供类似 Tailwind 的设计系统，但在编译期生成 styles.bin 和 styles.generated.ts，避免运行时 CSS 成本。
- 构建流程会扫描 AST 收集类名和文本字符，只打包应用实际使用的样式与字体字形。
- 提供 Screen、Focusable、FocusScope、ActionHandler、FocusGrid、Portal、Modal、ActionBar 等适合手柄和掌机交互的组件。
- MIT 许可证，商业和个人项目使用限制较少。
- 仓库关注方向清晰，适合研究低资源设备上的现代前端 UI 架构。
02
目标用户
- 希望在 PSP、模拟器或嵌入式设备上构建现代 UI 的开发者
- 熟悉 TypeScript、JSX、Solid 或 Vue 的前端开发者
- 需要低内存、高帧率 UI 渲染方案的游戏或工具开发者
- 研究 QuickJS、Rust no_std、WASM 与原生渲染结合的工程师
- 想为复古硬件或资源受限设备开发 UI 的独立开发者
03
配置要求
- 需要 Bun 运行构建脚本和打包流程。
- 需要 Rust 工具链，因为核心运行时包含 Rust no_std 组件。
- 如需 PSP 真机运行，需要 PSP SDK、PSPLINK 或相关 PSP 工具链。
- 项目需要通过 pocket.config.ts 显式指定 framework: "solid" 或 framework: "vue-vapor"，也可通过构建命令传入 --framework 参数。
- 样式必须使用受支持的 Tailwind 子集，且类名需为可静态分析的完整字符串。
- 不支持 classList、hover: 和模板字符串插值类名，这些会导致编译错误。
- rounded-full 需要在同一个类字符串中同时声明 w-N 和 h-N。
- 字体会按实际使用字符进行烘焙，额外字符可通过 --extra-chars 参数传入。
- TypeScript 类型检查可使用 bunx tsc --noEmit，JSX 转换由 Babel 构建流程处理。
04
适用场景
- 为 Sony PSP 真机或 PPSSPP 模拟器开发菜单、设置页、图库等 UI
- 为小游戏、掌机应用或嵌入式设备构建 60 FPS 交互界面
- 使用 Solid 或 Vue Vapor 编写非浏览器环境下的 JSX UI
- 将 Tailwind 风格的静态样式编译为紧凑的运行时样式表
- 构建带动画、焦点导航、Modal、ActionBar、FocusGrid 的控制器友好界面
- 在浏览器 WASM 或 macOS 原生窗口中预览和调试嵌入式 UI
05
部署与配置
- 安装 Bun、Rust 工具链以及必要的 PSP 工具链；可通过 pocketjs doctor 检查环境。
- 使用 Bun 安装依赖：bun install。
- 构建示例应用：bun scripts/build.ts hero。
- 构建 Vue Vapor 示例：bun scripts/build.ts hero-vue-vapor-main --framework=vue-vapor。
- 也可以安装 CLI：npm i -g @pocketjs/cli。
- 使用 pocketjs doctor 检查 Bun、Rust、PSP 工具链。
- 使用 pocketjs setup 安装缺失依赖。
- 使用 pocketjs create <name> 创建新项目。
- 使用 pocketjs dev、pocketjs build、pocketjs psp、pocketjs hw 或 pocketjs psplink 进行开发、构建和真机调试。
06
风险与注意事项
- 项目仍较新，GitHub 星标约 354，生态和社区规模有限。
- 面向 PSP、QuickJS、Rust no_std 等特殊场景，通用 Web 前端经验不能完全迁移。
- Tailwind 支持的是受限子集，不是完整 Tailwind CSS；动态类名能力受限。
- 如果目标是普通 Web 或移动 App，此项目可能过于底层和专用。
- PSP 真机开发需要额外工具链和调试经验，国内开发者上手成本较高。
- Vue Vapor 生态仍处于相对前沿阶段，稳定性和兼容性需要评估。
- 构建链涉及 Bun、Babel、Rust、QuickJS、PSP SDK、WASM 等多个层面，排错复杂度较高。
- README 展示能力较强，但生产项目中的组件生态、文档完整度、长期维护节奏仍需进一步验证。
2026-07-10
第20名
新收录 · github_search
2026-07-09
第21名
新收录 · github_search
2026-07-08
第23名
新收录 · github_search
