{"id":24064753,"url":"https://github.com/jsolly/checkboxes","last_synced_at":"2025-06-21T05:35:41.693Z","repository":{"id":270613750,"uuid":"910911130","full_name":"jsolly/checkboxes","owner":"jsolly","description":"Examples of nested checkboxes in different frameworks and implementations (vanilla js, Vue, React, Alpine, etc)","archived":false,"fork":false,"pushed_at":"2025-06-02T18:08:43.000Z","size":797,"stargazers_count":5,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-20T05:44:06.983Z","etag":null,"topics":["alpine","angular","hyperscript","jquery","react","stimulus","svelte","vue"],"latest_commit_sha":null,"homepage":"https://www.checkboxes.xyz","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsolly.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":"2025-01-01T19:02:55.000Z","updated_at":"2025-06-02T18:08:46.000Z","dependencies_parsed_at":"2025-04-23T19:14:38.352Z","dependency_job_id":"b19a5839-b796-40d4-88d0-087ab4c88115","html_url":"https://github.com/jsolly/checkboxes","commit_stats":null,"previous_names":["jsolly/checkboxes"],"tags_count":0,"template":false,"template_full_name":"jsolly/app-quickstart","purl":"pkg:github/jsolly/checkboxes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsolly%2Fcheckboxes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsolly%2Fcheckboxes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsolly%2Fcheckboxes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsolly%2Fcheckboxes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsolly","download_url":"https://codeload.github.com/jsolly/checkboxes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsolly%2Fcheckboxes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261070297,"owners_count":23105372,"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":["alpine","angular","hyperscript","jquery","react","stimulus","svelte","vue"],"created_at":"2025-01-09T10:40:32.029Z","updated_at":"2025-06-21T05:35:36.680Z","avatar_url":"https://github.com/jsolly.png","language":"Astro","readme":"# Checkboxes.xyz\n\nA collection of checkbox implementations using different frameworks and approaches.\n\n\n## Features\n\n- Multiple implementation examples:\n  - React\n  - Vue.js\n  - Svelte\n  - Alpine.js\n  - Vanilla JavaScript\n  - Hyperscript\n  - CSS Only\n  - jQuery\n- Syntax highlighted collapsible code snippets\n- Performance metrics for each implementation\n\n## Development\n\n```shell\npnpm install\npnpm dev\n```\n\n## Generate performance metrics\n\n```shell\ntouch .env # Create an empty .env file\n# Get your GEMINI_API_KEY from https://makersuite.google.com/app/apikey\n# Add it to .env: GEMINI_API_KEY=your_key_here\n# The API key is used for generating complexity scores\n\n# Run these commands in sequence:\npnpm build           # Build the project\npnpm preview         # Start the preview server (in a separate terminal)\npnpm generate-stats  # Generate performance metrics (in a new terminal)\n```\n\n## Contributing\n\n### Adding a New Framework Implementation\n\n1. **Create Framework Files**\n   - Create a new directory in `src/components` with your framework name\n   - Add two required files:\n     - `src/your-framework/your-framework\u003c.tsx/jsx/etc\u003e` - The checkbox implementation\n     - `src/your-framework/your-framework-container.astro` - The display wrapper\n\n2. **Add Framework Logo**\n   - Add your framework's logo as an SVG file to `src/assets/logos/`\n   - Name it consistently (e.g., `your-framework.svg`)\n   - Example logo import in your container:\n     ```astro\n     ---\n     import yourFrameworkLogo from \"../../assets/logos/your-framework.svg\";\n     // ... other imports\n     ---\n     ```\n\n3. **Update Framework Configuration**\n   - Add the framework to `src/config/frameworks.ts`:\n     ```typescript\n     export const FRAMEWORKS = {\n       yourFramework: {\n         displayName: \"Your Framework\",  // Name shown in the UI\n       },\n       // ... existing frameworks\n     };\n     ```\n\n4. **Add Framework Integration**\n   - Install framework dependencies:\n     ```bash\n     pnpm add @astrojs/your-framework your-framework\n     ```\n   - Update `astro.config.mjs` to add the framework integration:\n     ```javascript\n     import yourFramework from '@astrojs/your-framework';\n\n     export default defineConfig({\n       integrations: [\n         // ... existing integrations\n         yourFramework(),\n       ],\n     });\n     ```\n\n5. **Update Test Page**\n   - Modify `src/pages/test/[framework].astro` to include your framework:\n     ```astro\n     ---\n     import YourFramework from \"../../components/your-framework/your-framework\";\n     // ... existing imports\n     ---\n     \n     \u003cdiv class=\"framework-container\"\u003e\n       {/* Add your framework */}\n       {frameworkId === \"yourFramework\" \u0026\u0026 \u003cYourFramework client:only=\"your-framework\" /\u003e}\n       {/* ... existing frameworks */}\n     \u003c/div\u003e\n     ```\n\n6. **Add Framework Stats**\n   - Update `src/config/stats.ts` if your framework needs special handling:\n     ```typescript\n     SUPPORTED_EXTENSIONS: [\n       \".tsx\", \n       \".jsx\", \n       \".astro\", \n       \".vue\", \n       \".svelte\",\n       \".your-extension\"  // Add if needed\n     ],\n     ```\n   - Generate framework stats:\n     ```shell\n     pnpm generate-stats\n     ```\n\nAt this point, you could open a PR. For full framework integration, see the [Astro Framework Integration Guide](https://docs.astro.build/en/guides/integrations-guide/). This usually involves modifying the `astro.config.mjs` file to add the framework and its configuration.\n\nIf you want to generate performance metrics for your new implementation, see the [Generate performance metrics](#generate-performance-metrics) section.\n\n### Troubleshooting Setup\n\n- If `generate-stats` fails, ensure:\n  - Your GEMINI_API_KEY is valid and properly set in .env\n  - You've run `pnpm build` before running `pnpm preview`\n  - The preview server is running when you run `generate-stats`\n  - You have Node.js 16+ installed\n- For framework integration issues, check:\n  - Required dependencies are installed\n  - Framework is properly configured in astro.config.mjs\n  - TypeScript types are updated if needed\n  - For stats generation issues, verify your implementation file matches the expected extension in `SUPPORTED_EXTENSIONS` within `src/config/stats.ts`\n\n## Project Structure\n\n```\nsrc/\n├── components/\n│   ├── react/\n│   │   ├── ReactNestedCheckboxes.tsx\n│   │   └── ReactContainer.astro\n│   ├── alpine/\n│   │   ├── alpine.astro\n│   │   └── AlpineContainer.astro\n│   ├── [other-frameworks]/     # Similar structure for other frameworks\n│   │   └── ...\n│   └── CodeBlock.astro         # Shared code display component\n├── layouts/\n│   └── Layout.astro            # Base layout\n└── pages/\n    └── index.astro            # Main page\n```\n\n## Future Enhancements\n\n- [ ] Add more frameworks (Angular, Solid.js)\n- [x] Add performance comparisons\n- [ ] Create interactive playground\n- [ ] Add more complex checkbox scenarios\n\n## Notes on Performance Metrics\n\nEach framework implementation is evaluated on two key metrics:\n\n### Bundle Size\n- Measured in kilobytes (KB)\n- Calculated by monitoring network requests during page load\n- Only includes JavaScript resources (`type: \"Script\"`)\n- Represents the compressed (encoded) size of all JS assets\n- Lower scores are better\n\n### Complexity Score\n- Scored from 0-100 (whole numbers)\n- Evaluated using AI analysis of the implementation code\n- Weighted based on three criteria:\n  1. **State Management (40%)**: How state is stored and updated\n  2. **Event Handling (35%)**: Parent-child checkbox interactions\n  3. **Code Overhead (25%)**: Boilerplate and framework abstractions\n- Lower scores indicate simpler implementations\n\nBoth metrics are normalized using z-scores to provide relative performance indicators, displayed as colored badges:\n- 🟢 Excellent (z-score \u003c -1.5)\n- 🟢 Good (z-score \u003c -0.5)\n- 🟡 Average (-0.5 ≤ z-score \u003c 0.5)\n- 🟠 Below Average (0.5 ≤ z-score \u003c 1.5)\n- 🔴 Poor (z-score ≥ 1.5)\n\n## Demo\nCheck out the live demo at [checkboxes.xyz](https://checkboxes.xyz)\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Prerequisites\n\n- Node.js 16+\n- pnpm\n- A Google Cloud account (for Gemini API access to generate complexity scores)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsolly%2Fcheckboxes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsolly%2Fcheckboxes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsolly%2Fcheckboxes/lists"}