|  | 
|  | 1 | +# Contributing to FeatureHub JavaScript SDK | 
|  | 2 | + | 
|  | 3 | +Thank you for your interest in contributing to the FeatureHub JavaScript SDK! This guide will help you get started with development, testing, and contributing to the project. | 
|  | 4 | + | 
|  | 5 | +## 📋 Prerequisites | 
|  | 6 | + | 
|  | 7 | +- **Node.js**: v20.0.0 or higher | 
|  | 8 | +- **pnpm**: v10.12 or higher | 
|  | 9 | +- **Docker**: For building container images | 
|  | 10 | +- **Make**: For running development commands | 
|  | 11 | + | 
|  | 12 | +## 🏗️ Project Structure | 
|  | 13 | + | 
|  | 14 | +This is a monorepo containing multiple packages and examples: | 
|  | 15 | + | 
|  | 16 | +``` | 
|  | 17 | +├── packages/           # SDK Libraries (published to npm) | 
|  | 18 | +│   ├── js/            # Core JavaScript SDK | 
|  | 19 | +│   ├── node/          # Node.js-specific SDK | 
|  | 20 | +│   ├── react/         # React hooks and components | 
|  | 21 | +│   ├── solid/         # SolidJS bindings | 
|  | 22 | +│   └── tsconfig/      # Shared TypeScript configuration | 
|  | 23 | +├── examples/          # Example applications | 
|  | 24 | +│   ├── todo-backend-typescript/     # Express API server | 
|  | 25 | +│   ├── todo-frontend-react-typescript/ # React frontend | 
|  | 26 | +│   └── todo-server-tests/          # Integration tests | 
|  | 27 | +└── Makefile          # Development commands | 
|  | 28 | +``` | 
|  | 29 | + | 
|  | 30 | +## 🚀 Getting Started | 
|  | 31 | + | 
|  | 32 | +### 1. Clone and Install | 
|  | 33 | + | 
|  | 34 | +```bash | 
|  | 35 | +git clone https://github.com/featurehub-io/featurehub-javascript-sdk.git | 
|  | 36 | +cd featurehub-javascript-sdk | 
|  | 37 | +pnpm install | 
|  | 38 | +``` | 
|  | 39 | + | 
|  | 40 | +### 2. Build All Packages | 
|  | 41 | + | 
|  | 42 | +```bash | 
|  | 43 | +pnpm run build:packages | 
|  | 44 | +# or | 
|  | 45 | +make image  # Build packages in Docker | 
|  | 46 | +``` | 
|  | 47 | + | 
|  | 48 | +## 🛠️ Development Commands | 
|  | 49 | + | 
|  | 50 | +We use a Makefile to consolidate common development tasks: | 
|  | 51 | + | 
|  | 52 | +### Building | 
|  | 53 | + | 
|  | 54 | +```bash | 
|  | 55 | +make image                    # Build packages Docker image | 
|  | 56 | +make image-backend            # Build full-stack backend Docker image | 
|  | 57 | +``` | 
|  | 58 | + | 
|  | 59 | +### Running Examples | 
|  | 60 | + | 
|  | 61 | +```bash | 
|  | 62 | +make start-backend            # Start TypeScript backend (full integration) | 
|  | 63 | +make start-backend-qa         # Start backend (QA mode, no FeatureHub) | 
|  | 64 | +``` | 
|  | 65 | + | 
|  | 66 | +### Testing | 
|  | 67 | + | 
|  | 68 | +```bash | 
|  | 69 | +make test-server              # Run integration tests (full FeatureHub) | 
|  | 70 | +make test-server-qa           # Run API-only tests (no FeatureHub) | 
|  | 71 | +make test-server-tags TAGS=@smoke    # Run tests with specific tags | 
|  | 72 | +make test-server-qa-tags TAGS=@api   # Run QA tests with tags | 
|  | 73 | +``` | 
|  | 74 | + | 
|  | 75 | +### Package-Specific Commands | 
|  | 76 | + | 
|  | 77 | +```bash | 
|  | 78 | +pnpm run build:js            # Build JS package only | 
|  | 79 | +pnpm run build:react         # Build React package only | 
|  | 80 | +pnpm run test:packages       # Test all packages | 
|  | 81 | +pnpm run lint                # Lint all code | 
|  | 82 | +pnpm run typecheck           # Type check all packages | 
|  | 83 | +``` | 
|  | 84 | + | 
|  | 85 | +## 🧪 Testing | 
|  | 86 | + | 
|  | 87 | +### Unit Tests | 
|  | 88 | + | 
|  | 89 | +Each package has its own test suite: | 
|  | 90 | + | 
|  | 91 | +```bash | 
|  | 92 | +pnpm --filter './packages/js' run test | 
|  | 93 | +pnpm --filter './packages/react' run test | 
|  | 94 | +``` | 
|  | 95 | + | 
|  | 96 | +### Integration Tests | 
|  | 97 | + | 
|  | 98 | +The `todo-server-tests` example provides end-to-end integration testing: | 
|  | 99 | + | 
|  | 100 | +- **Full Integration**: Tests with FeatureHub server running | 
|  | 101 | +- **QA Mode**: Tests API endpoints only (faster, no external dependencies) | 
|  | 102 | + | 
|  | 103 | +### Running the Full Test Suite | 
|  | 104 | + | 
|  | 105 | +```bash | 
|  | 106 | +# Start the backend | 
|  | 107 | +make start-backend | 
|  | 108 | + | 
|  | 109 | +# In another terminal, run integration tests | 
|  | 110 | +make test-server | 
|  | 111 | +``` | 
|  | 112 | + | 
|  | 113 | +## 🐳 Docker Development | 
|  | 114 | + | 
|  | 115 | +The project includes optimized multi-stage Dockerfiles: | 
|  | 116 | + | 
|  | 117 | +### Package Libraries Only | 
|  | 118 | + | 
|  | 119 | +```bash | 
|  | 120 | +make image | 
|  | 121 | +``` | 
|  | 122 | + | 
|  | 123 | +### Full-Stack Application (Backend + Frontend) | 
|  | 124 | + | 
|  | 125 | +```bash | 
|  | 126 | +make image-backend | 
|  | 127 | +docker run -p 8099:8099 featurehub/js-sdk-backend:latest | 
|  | 128 | +``` | 
|  | 129 | + | 
|  | 130 | +The backend serves both: | 
|  | 131 | + | 
|  | 132 | +- **API endpoints**: `/todo/*`, `/health/liveness` | 
|  | 133 | +- **Static frontend**: React SPA with client-side routing | 
|  | 134 | + | 
|  | 135 | +## 📝 Code Style and Quality | 
|  | 136 | + | 
|  | 137 | +### Linting and Formatting | 
|  | 138 | + | 
|  | 139 | +```bash | 
|  | 140 | +pnpm run lint          # Check for linting issues | 
|  | 141 | +pnpm run lint:fix      # Auto-fix linting issues | 
|  | 142 | +pnpm run format        # Check formatting | 
|  | 143 | +pnpm run format:fix    # Auto-fix formatting | 
|  | 144 | +``` | 
|  | 145 | + | 
|  | 146 | +### TypeScript | 
|  | 147 | + | 
|  | 148 | +All packages use strict TypeScript configuration: | 
|  | 149 | + | 
|  | 150 | +- Extends `@tsconfig/strictest` | 
|  | 151 | +- Shared configuration in `packages/tsconfig/` | 
|  | 152 | +- ESLint flat config for modern linting | 
|  | 153 | + | 
|  | 154 | +## 🔧 Adding New Packages | 
|  | 155 | + | 
|  | 156 | +1. Create package directory under `packages/` | 
|  | 157 | +2. Add package.json with workspace dependencies | 
|  | 158 | +3. Update root package.json scripts for building | 
|  | 159 | +4. Add to Docker builds if needed | 
|  | 160 | +5. Update this CONTRIBUTING.md | 
|  | 161 | + | 
|  | 162 | +### Package Dependencies | 
|  | 163 | + | 
|  | 164 | +- Use `workspace:*` for internal dependencies | 
|  | 165 | +- Use `catalog:` for shared external dependencies | 
|  | 166 | +- Follow semantic versioning | 
|  | 167 | + | 
|  | 168 | +## 🎯 Working with Examples | 
|  | 169 | + | 
|  | 170 | +### Backend Example (`todo-backend-typescript`) | 
|  | 171 | + | 
|  | 172 | +- **Express 5.x** server with FeatureHub integration | 
|  | 173 | +- **Static file serving** for React frontend | 
|  | 174 | +- **Health checks** and proper error handling | 
|  | 175 | +- **Environment variables** for configuration | 
|  | 176 | + | 
|  | 177 | +### Frontend Example (`todo-frontend-react-typescript`) | 
|  | 178 | + | 
|  | 179 | +- **React + TypeScript** with Vite | 
|  | 180 | +- **Auto-generated API client** from OpenAPI spec | 
|  | 181 | +- **FeatureHub React hooks** for feature flags | 
|  | 182 | + | 
|  | 183 | +### Integration Tests (`todo-server-tests`) | 
|  | 184 | + | 
|  | 185 | +- **Cucumber/Gherkin** test scenarios | 
|  | 186 | +- **Environment-specific** configurations | 
|  | 187 | +- **Tag-based** test filtering | 
|  | 188 | + | 
|  | 189 | +## 📦 Release Process | 
|  | 190 | + | 
|  | 191 | +1. **Update versions**: Bump package versions appropriately | 
|  | 192 | +2. **Build packages**: `pnpm run build:packages` | 
|  | 193 | +3. **Run tests**: `pnpm run test` | 
|  | 194 | +4. **Lint code**: `pnpm run lint` | 
|  | 195 | +5. **Type check**: `pnpm run typecheck` | 
|  | 196 | +6. **Create PR**: Submit for review | 
|  | 197 | +7. **Release**: Maintainers handle npm publishing | 
|  | 198 | + | 
|  | 199 | +## 🤝 Pull Request Guidelines | 
|  | 200 | + | 
|  | 201 | +### Before Submitting | 
|  | 202 | + | 
|  | 203 | +- [ ] Tests pass (`pnpm run test`) | 
|  | 204 | +- [ ] Linting passes (`pnpm run lint`) | 
|  | 205 | +- [ ] TypeScript compiles (`pnpm run typecheck`) | 
|  | 206 | +- [ ] Documentation updated if needed | 
|  | 207 | + | 
|  | 208 | +### PR Description | 
|  | 209 | + | 
|  | 210 | +- Clear description of changes | 
|  | 211 | +- Link to related issues | 
|  | 212 | +- Include test plan | 
|  | 213 | +- Note any breaking changes | 
|  | 214 | + | 
|  | 215 | +### Review Process | 
|  | 216 | + | 
|  | 217 | +- At least one maintainer review required | 
|  | 218 | +- CI checks must pass | 
|  | 219 | +- Documentation updates reviewed | 
|  | 220 | + | 
|  | 221 | +## 🐛 Reporting Issues | 
|  | 222 | + | 
|  | 223 | +When reporting bugs: | 
|  | 224 | + | 
|  | 225 | +1. **Environment**: Node.js version, OS, browser (if applicable) | 
|  | 226 | +2. **Reproduction**: Minimal steps to reproduce | 
|  | 227 | +3. **Expected vs Actual**: What should happen vs what actually happens | 
|  | 228 | +4. **Logs**: Include relevant error messages/stack traces | 
|  | 229 | + | 
|  | 230 | +## 💡 Feature Requests | 
|  | 231 | + | 
|  | 232 | +For new features: | 
|  | 233 | + | 
|  | 234 | +1. **Use case**: Describe the problem you're solving | 
|  | 235 | +2. **Proposed solution**: How you envision it working | 
|  | 236 | +3. **Alternatives**: Other approaches you considered | 
|  | 237 | +4. **Breaking changes**: Impact on existing APIs | 
|  | 238 | + | 
|  | 239 | +## 📚 Additional Resources | 
|  | 240 | + | 
|  | 241 | +- [FeatureHub Documentation](https://docs.featurehub.io) | 
|  | 242 | +- [JavaScript SDK Documentation](https://docs.featurehub.io/sdks/javascript) | 
|  | 243 | +- [TypeScript Handbook](https://www.typescriptlang.org/docs/) | 
|  | 244 | +- [pnpm Workspace Guide](https://pnpm.io/workspaces) | 
|  | 245 | + | 
|  | 246 | +## ❓ Getting Help | 
|  | 247 | + | 
|  | 248 | +- **GitHub Issues**: Bug reports and feature requests | 
|  | 249 | +- **GitHub Discussions**: Questions and community support | 
|  | 250 | +- **Documentation**: Check existing docs first | 
|  | 251 | +- **Examples**: Reference the example applications | 
|  | 252 | + | 
|  | 253 | +--- | 
|  | 254 | + | 
|  | 255 | +Thank you for contributing to FeatureHub! 🚀 | 
0 commit comments