{"id":46109585,"url":"https://github.com/ialiaslani/caf","last_synced_at":"2026-03-13T17:00:47.432Z","repository":{"id":338752821,"uuid":"965531031","full_name":"ialiaslani/caf","owner":"ialiaslani","description":"clean architecture frontend","archived":false,"fork":false,"pushed_at":"2026-02-16T15:17:36.000Z","size":775,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-16T15:25:02.937Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ialiaslani.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-13T11:22:47.000Z","updated_at":"2026-02-16T15:17:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ialiaslani/caf","commit_stats":null,"previous_names":["ialiaslani/caf"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ialiaslani/caf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ialiaslani%2Fcaf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ialiaslani%2Fcaf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ialiaslani%2Fcaf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ialiaslani%2Fcaf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ialiaslani","download_url":"https://codeload.github.com/ialiaslani/caf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ialiaslani%2Fcaf/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30471114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-13T11:00:43.441Z","status":"ssl_error","status_checked_at":"2026-03-13T11:00:23.173Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-03-01T22:00:55.627Z","updated_at":"2026-03-13T17:00:47.415Z","avatar_url":"https://github.com/ialiaslani.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Primitives"],"readme":"# CAF — Clean Architecture Frontend\n\n**Clean Architecture Frontend** — domain-agnostic primitives for building frontend applications with Clean Architecture. Works with React, Vue, Angular, or any future framework. [npm](https://www.npmjs.com/search?q=%40c-a-f) · [GitHub](https://github.com/ialiaslani/caf) · [**Documentation**](https://docs-caf.vercel.app/)\n\n---\n\n## Contents\n\n- [Try online](#try-online)\n- [What is CAF?](#what-is-caf)\n- [Packages](#packages)\n- [Getting started](#getting-started)\n- [Setting up a project](#setting-up-a-project)\n- [Architecture](#architecture)\n- [Development](#development)\n- [Docs \u0026 examples](#docs--examples)\n\n---\n\n## Try online\n\n| Example | Link |\n|--------|------|\n| **React** | [Open in StackBlitz](https://stackblitz.com/github/ialiaslani/caf/tree/main/examples/example-react?file=README.md) |\n| **Angular + WebSocket** | [Open in StackBlitz](https://stackblitz.com/github/ialiaslani/caf/tree/main/examples/example-angular-websocket) |\n| **Vue + GraphQL** | [Open in StackBlitz](https://stackblitz.com/github/ialiaslani/caf/tree/main/examples/example-vue-graphql) |\n\n---\n\n## What is CAF?\n\nCAF is a **core library** of framework-agnostic primitives and interfaces for Clean Architecture on the frontend. Same domain and use cases can run in React, Vue, or Angular by swapping adapters.\n\n- **Framework-agnostic** — Write business logic once, use in any framework  \n- **Clean Architecture** — Domain, application, infrastructure layers  \n- **Reactive primitives** — Pulse for state; Ploc for presentation logic  \n- **Pluggable adapters** — Routing, HTTP, UI per framework  \n- **TypeScript** — Full type support  \n\n**Vision:** Pulse (reactive state), Request (server connection), and Routing are defined as interfaces in the core; each framework implements them. So domain and use cases stay framework-free.\n\n---\n\n## Packages\n\n| Package | Description |\n|---------|-------------|\n| **`@c-a-f/core`** | Primitives: `UseCase`, `Ploc`, `Pulse`, `ApiRequest`, `RouteManager`. [README](packages/core/README.md) |\n| **`@c-a-f/workflow`** | Workflow/state machine on top of Ploc. [README](packages/workflow/README.md) |\n| **`@c-a-f/infrastructure-react`** | React: `useRouteManager`, `useRouteRepository` |\n| **`@c-a-f/infrastructure-vue`** | Vue: same composables |\n| **`@c-a-f/infrastructure-angular`** | Angular: `injectRouteManager`, `injectRouteRepository`, `RouteHandler` |\n| **`@c-a-f/validation`** | Validation interfaces + Zod/Yup adapters |\n| **`@c-a-f/permission`** | Permission interfaces (RBAC, CASL, etc.) |\n| **`@c-a-f/i18n`** | i18n interfaces and adapters |\n\nExamples (not published): `examples/example-react`, `example-vue`, `example-vue-graphql`, `example-angular`, `example-angular-websocket`. Each has its own `caf/` folder (domain, application, infrastructure).\n\n---\n\n## Getting started\n\n**Quick start (CLI)**  \nWindows: `npm install -g @c-a-f/cli` then `caf-init`.  \nUnix/Mac: `npx @c-a-f/cli`.  \nThen: `npm install @c-a-f/core @c-a-f/infrastructure-react` (or `-vue` / `-angular`).  \n[Windows npx note](packages/cli/WINDOWS_NPX_ISSUE.md)\n\n**Install manually**\n\n```bash\nnpm install @c-a-f/core\nnpm install @c-a-f/infrastructure-react   # or -vue, -angular\n# optional: @c-a-f/validation, zod or yup\n```\n\n**Minimal usage**\n\n```typescript\nimport { UseCase, Ploc, pulse } from '@c-a-f/core';\n\nclass GetUsers implements UseCase\u003c[], User[]\u003e {\n  async execute(): Promise\u003cRequestResult\u003cUser[]\u003e\u003e {\n    // ... return { loading, data, error } with pulse()\n  }\n}\n\nclass UsersPloc extends Ploc\u003cUser[]\u003e {\n  constructor(private getUsers: GetUsers) { super([]); }\n  async loadUsers() {\n    const result = await this.getUsers.execute();\n    this.changeState(result.data.value);\n  }\n}\n```\n\nFull usage: [documentation](https://docs-caf.vercel.app/) and [packages/core/README.md](packages/core/README.md).\n\n---\n\n## Setting up a project\n\nProject layout: `caf/` (domain, application, infrastructure) + `src/` (framework-specific UI). Step-by-step guide with code: **[docs/SETUP.md](docs/SETUP.md)**.\n\n---\n\n## Architecture\n\n```\nPresentation (React/Vue/Angular) → Application (UseCase, Ploc) → Domain (entities, interfaces)\n                                       ↑\nInfrastructure (repositories, HTTP, routing adapters) ─────────┘\n```\n\nDependencies point inward. Domain has zero framework dependencies. See [docs/API.md](docs/API.md) and [docs/PACKAGES.md](docs/PACKAGES.md).\n\n---\n\n## Development\n\nMonorepo (Yarn workspaces). Node 18+.\n\n```bash\nyarn install\nyarn core:build\n# Examples\nyarn example:react:dev    # or vue, vue-graphql, angular\n```\n\nTests: `yarn test`. Individual: `yarn core:test`, `yarn workspace @c-a-f/workflow test`, etc.\n\n---\n\n## Docs \u0026 examples\n\n| Resource | Link |\n|----------|------|\n| **Docs site** | [docs-caf.vercel.app](https://docs-caf.vercel.app/) |\n| **Core usage** | [packages/core/README.md](packages/core/README.md) |\n| **Setup guide** | [docs/SETUP.md](docs/SETUP.md) |\n| **API** | [docs/API.md](docs/API.md) |\n| **Custom routing** | [docs/guides/custom-routing.md](docs/guides/custom-routing.md) |\n| **Publishing / versioning** | [docs/PUBLISHING.md](docs/PUBLISHING.md), [docs/VERSIONING.md](docs/VERSIONING.md) |\n| **Changelog** | [CHANGELOG.md](CHANGELOG.md) |\n\n**Examples** — Run locally: `yarn example:react:dev`, `yarn example:vue:dev`, `yarn example:vue-graphql:dev`, `yarn example:angular:dev`. Or use the [Try online](#try-online) StackBlitz links above.\n\n---\n\n## License\n\nMIT · [github.com/ialiaslani/caf](https://github.com/ialiaslani/caf)\n\n---\n\n\u003cdetails\u003e\n\u003csummary\u003eFor maintainers: discoverability (GitHub, npm)\u003c/summary\u003e\n\n- **GitHub:** Description: `Clean Architecture Frontend (CAF) — framework-agnostic primitives for React, Vue, Angular. Domain, application, infrastructure layers.` Topics: `clean-architecture`, `clean-architecture-frontend`, `frontend`, `react`, `vue`, `angular`, `typescript`, `architecture`, `domain-driven-design`, `usecase`, `ploc`\n- **npm:** Packages use keywords/descriptions with \"clean-architecture-frontend\". Re-publish to refresh.\n- **GitHub Packages:** Workflow \"Publish to GitHub Packages\" publishes `@ialiaslani/caf-*`. Install with `@ialiaslani:registry=https://npm.pkg.github.com` in `.npmrc`.\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fialiaslani%2Fcaf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fialiaslani%2Fcaf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fialiaslani%2Fcaf/lists"}