{"id":17617652,"url":"https://github.com/ximing/rab","last_synced_at":"2026-03-14T13:51:43.332Z","repository":{"id":18688114,"uuid":"82441033","full_name":"ximing/rab","owner":"ximing","description":":rabbit2: 支持响应式和依赖注入的状态管理框架","archived":false,"fork":false,"pushed_at":"2025-04-20T09:43:21.000Z","size":6406,"stargazers_count":10,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T16:09:36.181Z","etag":null,"topics":["framework","ioc","rab","react","reactjs","redux","router"],"latest_commit_sha":null,"homepage":"https://ximing.github.io/rab/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ximing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-19T06:49:07.000Z","updated_at":"2025-04-11T07:18:39.000Z","dependencies_parsed_at":"2024-06-19T05:31:52.628Z","dependency_job_id":"7e7f653d-b6d3-4128-ab11-78edb5f4ff12","html_url":"https://github.com/ximing/rab","commit_stats":{"total_commits":208,"total_committers":5,"mean_commits":41.6,"dds":0.3125,"last_synced_commit":"7dee1236384af77274cc34b9e1780af480780fa9"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Frab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Frab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Frab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Frab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ximing","download_url":"https://codeload.github.com/ximing/rab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251342724,"owners_count":21574245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","ioc","rab","react","reactjs","redux","router"],"created_at":"2024-10-22T19:14:54.293Z","updated_at":"2026-02-13T08:29:33.253Z","avatar_url":"https://github.com/ximing.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RAB - 响应式状态管理库\n\n\u003cdiv align=\"center\"\u003e\n\n![TypeScript](https://img.shields.io/badge/TypeScript-5.8+-blue)\n![Node.js](https://img.shields.io/badge/Node.js-%3E%3D20.19.0-green)\n![pnpm](https://img.shields.io/badge/pnpm-10.22.0-orange)\n![License](https://img.shields.io/badge/License-MIT-green)\n\n**现代化、高性能的响应式状态管理解决方案**\n\n观察者模式 | 服务容器 | React 集成 | TypeScript 优先\n\n\u003c/div\u003e\n\n## 🚀 项目简介\n\nRAB 是一个专业的 monorepo 项目，为现代前端应用提供高质量的响应式状态管理解决方案。核心产品包括**观察者库**、**服务容器**和**React 集成方案**，为前端应用开发提供坚实的基础。\n\n### ✨ 核心特性\n\n- 🎯 **响应式观察者** - 高效的观察者模式实现，支持细粒度追踪\n- 🔌 **服务容器** - 灵活的服务管理容器，支持装饰器和依赖注入\n- ⚛️ **React 集成** - 与 React 深度集成的状态管理方案\n- 📦 **Monorepo 管理** - 基于 pnpm + Turborepo 的高效包管理\n- 🎯 **TypeScript 优先** - 完整的类型安全和开发体验\n- 🧪 **高质量测试** - Jest 测试框架，完整的测试覆盖\n- 📚 **完整文档** - 详细的 API 文档和使用指南\n\n## 📦 项目结构\n\n```\nrab/\n├── packages/                      # 📦 核心包\n│   ├── observer/                  # 观察者库 (@rabjs/observer)\n│   ├── service/                   # 服务容器 (@rabjs/service)\n│   └── react/                     # React 集成 (@rabjs/react)\n├── examples/                      # 📚 示例项目\n│   └── reactive-state/            # 响应式状态示例应用\n├── configs/                       # ⚙️ 共享配置\n│   ├── eslint-config-custom/      # ESLint 规则\n│   └── tsconfig/                  # TypeScript 配置\n├── website/                       # 📖 文档网站\n└── scripts/                       # 🔧 构建和发布脚本\n```\n\n## 🚀 快速开始\n\n### 环境要求\n\n- **Node.js**: \u003e= 20.19.0\n- **pnpm**: 10.22.0\n- **Git**: 任意版本\n\n### 安装依赖\n\n```bash\n# 克隆仓库\ngit clone \u003crepository-url\u003e\ncd rab\n\n# 安装依赖\npnpm install\n```\n\n### 开发模式\n\n```bash\n# 启动所有包的开发模式\npnpm dev\n\n# 仅开发示例应用\ncd examples/reactive-state \u0026\u0026 pnpm dev\n```\n\n### 构建项目\n\n```bash\n# 构建所有包\npnpm build\n\n# 清理构建产物\npnpm clean\n```\n\n## 📚 核心库介绍\n\n### 1. @rabjs/observer - 观察者库\n\n高效的观察者模式实现，提供细粒度的响应式追踪和自动更新机制。\n\n**主要特性**:\n\n- 细粒度响应式追踪\n- 自动依赖收集\n- 高性能更新机制\n- 完整的 TypeScript 支持\n- 内存泄漏防护\n\n**使用示例**:\n\n```typescript\nimport { observable, observer } from '@rabjs/observer';\n\nconst state = observable({ count: 0 });\nconst dispose = observer(() =\u003e {\n  console.log('Count:', state.count);\n});\n\nstate.count = 5; // 自动触发观察者\ndispose(); // 清理观察者\n```\n\n### 2. @rabjs/service - 服务容器\n\n灵活的服务管理容器，支持装饰器、依赖注入和生命周期管理。\n\n**主要特性**:\n\n- 装饰器支持（@Injectable、@Inject 等）\n- 类型安全的依赖注入\n- 生命周期管理\n- 事件系统集成\n- 循环依赖检测\n\n**使用示例**:\n\n```typescript\nimport { Injectable, Inject, Container } from '@rabjs/service';\n\n@Injectable()\nclass UserService {\n  getUser(id: number) {\n    return { id, name: 'User' };\n  }\n}\n\n@Injectable()\nclass UserController {\n  constructor(@Inject(UserService) private userService: UserService) {}\n\n  getUser(id: number) {\n    return this.userService.getUser(id);\n  }\n}\n\nconst container = new Container();\ncontainer.register(UserService);\ncontainer.register(UserController);\nconst controller = container.get(UserController);\n```\n\n### 3. @rabjs/react - React 集成\n\n与 React 深度集成的状态管理方案，提供 Hooks 和组件级别的状态管理。\n\n**主要特性**:\n\n- React Hooks 支持（useObserver、useLocalObservable 等）\n- 自动组件更新\n- 性能优化\n- 服务容器集成\n- 开发者工具支持\n\n**使用示例**:\n\n```typescript\nimport { useLocalObservable, observer } from '@rabjs/react';\n\nconst Counter = observer(() =\u003e {\n  const state = useLocalObservable(() =\u003e ({\n    count: 0,\n    increment() {\n      this.count++;\n    }\n  }));\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eCount: {state.count}\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e state.increment()}\u003eIncrement\u003c/button\u003e\n    \u003c/div\u003e\n  );\n});\n```\n\n## 🧪 测试和质量保证\n\n### 测试要求\n\n- **覆盖率**: 最低 80% (分支、函数、行、语句)\n- **测试框架**: Jest + ts-jest\n- **测试超时**: 30 秒\n- **CI/CD**: 自动化测试和发布\n\n### 运行测试\n\n```bash\n# 运行所有测试\npnpm test\n\n# 使用 Turbo 并行测试\npnpm test:turbo\n\n# 监听模式\ncd packages/observer \u0026\u0026 npm run test:watch\n\n# 覆盖率报告\ncd packages/observer \u0026\u0026 npm run test:coverage\n```\n\n## 🔄 版本管理和发布\n\n本项目使用 [Changesets](https://github.com/changesets/changesets) 进行版本管理：\n\n### 发布流程\n\n```bash\n# 1. 创建变更集\npnpm changeset\n\n# 2. 版本升级\npnpm version-packages\n\n# 3. 发布检查\npnpm publish:check\n\n# 4. 发布到 mnpm\npnpm publish:mnmp\n\n# 5. 提交代码\ngit push origin \u003cbranch\u003e\n```\n\n### 发布配置\n\n- **Access**: public\n- **License**: MIT\n\n## 🛠️ 开发工具和命令\n\n### 根级命令\n\n```bash\n# 开发\npnpm dev                    # 启动所有包的开发模式\n\n# 构建\npnpm build                  # 构建所有包\npnpm clean                  # 清理构建产物\npnpm clean:node-modules     # 删除所有 node_modules\n\n# 代码质量\npnpm lint                   # 代码检查\npnpm lint:turbo             # 使用 Turbo 并行检查\npnpm lint:fix               # 自动修复\npnpm lint:error             # 仅显示错误\npnpm lint:error:fix         # 修复错误\npnpm format                 # 代码格式化\n\n# 测试\npnpm test                   # 运行测试\npnpm test:turbo             # 使用 Turbo 并行测试\n\n# 版本管理\npnpm changeset              # 创建变更集\npnpm version-packages       # 版本升级\npnpm publish:check          # 发布检查\npnpm publish:mnmp           # 发布到 mnpm\n```\n\n### 单个包开发\n\n```bash\n# 进入特定包目录进行开发\ncd packages/observer \u0026\u0026 npm run dev        # 开发模式\ncd packages/observer \u0026\u0026 npm run build      # 构建\ncd packages/observer \u0026\u0026 npm run test       # 测试\ncd packages/observer \u0026\u0026 npm run test:watch # 监听模式\n```\n\n## 📋 代码规范\n\n### TypeScript 配置\n\n- **严格模式**: 启用所有严格检查\n  - `strict: true`\n  - `noImplicitAny: true`\n  - `strictNullChecks: true`\n  - `noImplicitReturns: true`\n  - `noUncheckedIndexedAccess: true`\n\n### 代码风格\n\n- **Linter**: ESLint 9.17.0\n- **Formatter**: Prettier 2.8.8\n- **提交规范**: Conventional Commits\n- **Git Hooks**: Husky 9.1.7 + lint-staged 16.2.6\n\n### 开发规范\n\n1. **类型安全**: 优先使用 TypeScript，避免 `any` 类型\n2. **测试覆盖**: 新功能必须包含测试，保持 80% 覆盖率\n3. **代码风格**: 遵循 ESLint 和 Prettier 配置\n4. **提交规范**: 使用 [Conventional Commits](https://conventionalcommits.org/)\n5. **文档更新**: 重要变更需要更新相关文档\n\n## 🤝 贡献指南\n\n### 提交流程\n\n```bash\n# 1. 创建功能分支\ngit checkout -b feature/new-feature\n\n# 2. 开发和测试\npnpm dev\npnpm test\n\n# 3. 代码检查和格式化\npnpm lint:fix\npnpm format\n\n# 4. 提交代码\ngit add .\ngit commit -m \"feat: add new feature\"\n\n# 5. 创建变更集\npnpm changeset\n\n# 6. 提交 PR\ngit push origin feature/new-feature\n```\n\n## 📊 包依赖关系\n\n```\n@rabjs/observer (观察者库)\n    ↓\n@rabjs/service (服务容器)\n    ↓\n@rabjs/react (React 集成)\n```\n\n## 🔧 关键配置文件\n\n### 根级配置\n\n- `package.json` - Monorepo 脚本和依赖\n- `turbo.json` - Turborepo 任务配置\n- `pnpm-workspace.yaml` - 工作区定义\n- `tsconfig.json` - 根 TypeScript 配置\n- `eslint.config.js` - ESLint 规则\n\n### 包级配置\n\n- `package.json` - 包信息和脚本\n- `tsconfig.json` - 包特定的 TypeScript 配置\n- `jest.config.js` - 测试配置\n- `build.config.ts` - 构建配置\n\n## 📈 性能和优化\n\n### 构建性能\n\n- **并行构建**: Turborepo 自动并行化依赖构建\n- **增量构建**: 智能缓存和依赖分析\n- **按需加载**: 包按需加载和初始化\n- **优化输出**: 支持 CJS、ESM 和 TypeScript 类型\n\n### 开发体验\n\n- **快速启动**: 秒级开发服务器启动\n- **监听模式**: 自动重新构建\n- **错误隔离**: 包错误不影响其他包\n- **类型提示**: 完整的 TypeScript 智能提示\n\n## 🛡️ 生产状态\n\n### ✅ 生产就绪\n\n- ✅ @rabjs/observer - 观察者库\n- ✅ @rabjs/service - 服务容器\n- ✅ @rabjs/react - React 集成方案\n\n### 📚 文档\n\n- 📖 各包目录下的 README.md\n- 📋 API 文档和使用示例\n- 🔍 源代码注释和类型定义\n- 📚 完整的文档网站（website 目录）\n\n## 📄 许可证\n\nMIT License - 详见 [LICENSE](./LICENSE) 文件\n\n## 🙋‍♂️ 支持和反馈\n\n- **Issues**: 提交问题和建议\n- **讨论**: 参与项目讨论\n- **文档**: 查看各包的 README 和文档\n- **示例**: 查看 examples/reactive-state 目录\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**RAB - 现代化的响应式状态管理库** ❤️\n\n[📚 文档](./website) | [🔧 开发指南](#开发工具和命令) | [🚀 快速开始](#快速开始) | [🤝 贡献](#贡献指南)\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fximing%2Frab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fximing%2Frab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fximing%2Frab/lists"}