{"id":22534040,"url":"https://github.com/ppenter/caff.js","last_synced_at":"2025-03-28T05:44:50.003Z","repository":{"id":240495624,"uuid":"798976387","full_name":"ppenter/caff.js","owner":"ppenter","description":"Fully Fullstack Framework (React, API, Websocket) With File-based Routing","archived":false,"fork":false,"pushed_at":"2024-05-25T17:26:30.000Z","size":2670,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T06:42:09.987Z","etag":null,"topics":["api","framework","full-stack","react","ssr","websocket"],"latest_commit_sha":null,"homepage":"https://caff-js.onrender.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ppenter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-05-10T21:43:47.000Z","updated_at":"2024-05-29T08:49:25.000Z","dependencies_parsed_at":"2024-05-19T10:29:21.792Z","dependency_job_id":"5e3b58e4-2615-4038-9854-73e48edd2e60","html_url":"https://github.com/ppenter/caff.js","commit_stats":null,"previous_names":["ppenter/caff.js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppenter%2Fcaff.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppenter%2Fcaff.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppenter%2Fcaff.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ppenter%2Fcaff.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ppenter","download_url":"https://codeload.github.com/ppenter/caff.js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245978233,"owners_count":20703677,"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":["api","framework","full-stack","react","ssr","websocket"],"created_at":"2024-12-07T09:11:33.911Z","updated_at":"2025-03-28T05:44:49.977Z","avatar_url":"https://github.com/ppenter.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/ec559a9f6bfd399b82bb44393651661b08aaf7ba/icons/folder-markdown-open.svg\" width=\"100\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003ch1 align=\"center\"\u003eCAFF.JS\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003cem\u003eCaff.js: Brewing Real-time Web Experiences\u003c/em\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/license/ppenter/caff.js?style=flat\u0026color=0080ff\" alt=\"license\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/last-commit/ppenter/caff.js?style=flat\u0026logo=git\u0026logoColor=white\u0026color=0080ff\" alt=\"last-commit\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/languages/top/ppenter/caff.js?style=flat\u0026color=0080ff\" alt=\"repo-top-language\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/languages/count/ppenter/caff.js?style=flat\u0026color=0080ff\" alt=\"repo-language-count\"\u003e\n\u003cp\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003cem\u003eDeveloped with the software and tools below.\u003c/em\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/esbuild-FFCF00.svg?style=flat\u0026logo=esbuild\u0026logoColor=black\" alt=\"esbuild\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=flat\u0026logo=JavaScript\u0026logoColor=black\" alt=\"JavaScript\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Sass-CC6699.svg?style=flat\u0026logo=Sass\u0026logoColor=white\" alt=\"Sass\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/YAML-CB171E.svg?style=flat\u0026logo=YAML\u0026logoColor=white\" alt=\"YAML\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Nodemon-76D04B.svg?style=flat\u0026logo=Nodemon\u0026logoColor=white\" alt=\"Nodemon\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/React-61DAFB.svg?style=flat\u0026logo=React\u0026logoColor=black\" alt=\"React\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Axios-5A29E4.svg?style=flat\u0026logo=Axios\u0026logoColor=white\" alt=\"Axios\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/SemVer-3F4551.svg?style=flat\u0026logo=SemVer\u0026logoColor=white\" alt=\"SemVer\"\u003e\n\t\u003cbr\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Lodash-3492FF.svg?style=flat\u0026logo=Lodash\u0026logoColor=white\" alt=\"Lodash\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Flat-3481FE.svg?style=flat\u0026logo=Flat\u0026logoColor=white\" alt=\"Flat\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/TypeScript-3178C6.svg?style=flat\u0026logo=TypeScript\u0026logoColor=white\" alt=\"TypeScript\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/tsnode-3178C6.svg?style=flat\u0026logo=ts-node\u0026logoColor=white\" alt=\"tsnode\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Buffer-231F20.svg?style=flat\u0026logo=Buffer\u0026logoColor=white\" alt=\"Buffer\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Nx-143055.svg?style=flat\u0026logo=Nx\u0026logoColor=white\" alt=\"Nx\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Express-000000.svg?style=flat\u0026logo=Express\u0026logoColor=white\" alt=\"Express\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/JSON-000000.svg?style=flat\u0026logo=JSON\u0026logoColor=white\" alt=\"JSON\"\u003e\n\u003c/p\u003e\n\u003chr\u003e\n\n## Quick Links\n\n\u003e - [ Overview](#-overview)\n\u003e - [ Features](#-features)\n\u003e - [ Repository Structure](#-repository-structure)\n\u003e - [ Modules](#-modules)\n\u003e - [ Getting Started](#-getting-started)\n\u003e - [ Installation](#-installation)\n\u003e - [Running caff.js](#-running-caff.js)\n\u003e - [ Tests](#-tests)\n\u003e - [ Project Roadmap](#-project-roadmap)\n\u003e - [ Contributing](#-contributing)\n\u003e - [ License](#-license)\n\u003e - [ Acknowledgments](#-acknowledgments)\n\n---\n\n## Overview\n\nThe `caff.js` project serves as a full-stack framework that enables seamless development of web applications with real-time capabilities. It offers a robust WebSocket communication system, integrated with a dynamic server and CLI functionality. Developers can easily set up servers, handle incoming requests, and implement interactive features such as collaborative drawing and message broadcasting. With hot reload functionality and a structured layout system, `caff.js` streamlines the development process, fostering efficient server-side and client-side rendering. This project empowers developers to create engaging real-time applications with ease, enhancing user experience and interaction.\n\n---\n\n## Features\n\n| | Feature | Description |\n|----|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|\n| ⚙️ | **Architecture** | Relies on various external libraries and utilities for functionality. Uses a modular structure for better organization and code maintenance. |\n| | |`Work on progress`\n\n\n---\n\n## Repository Structure\n\n```sh\n└── caff.js/\n ├── README.md\n ├── examples\n │ └── websocket\n │ ├── caff.config.js\n │ ├── package.json\n │ ├── src\n │ │ └── app\n │ │ ├── @api\n │ │ ├── @websocket\n │ │ ├── _components\n │ │ ├── _document.tsx\n │ │ ├── layout.tsx\n │ │ ├── page.tsx\n │ │ └── style.css\n │ └── tsconfig.json\n ├── nx.json\n ├── package.json\n ├── packages\n │ ├── caff\n │ │ ├── .gitignore\n │ │ ├── README.md\n │ │ ├── package.json\n │ │ ├── src\n │ │ │ ├── cli.tsx\n │ │ │ ├── commands\n │ │ │ │ ├── build.ts\n │ │ │ │ ├── dev.ts\n │ │ │ │ ├── index.ts\n │ │ │ │ └── start.ts\n │ │ │ ├── core\n │ │ │ │ └── server\n │ │ │ ├── index.ts\n │ │ │ ├── sub\n │ │ │ │ ├── context\n │ │ │ │ ├── hooks\n │ │ │ │ ├── logger\n │ │ │ │ └── types\n │ │ │ ├── utils\n │ │ │ │ ├── files.ts\n │ │ │ │ ├── global.ts\n │ │ │ │ ├── hooks.ts\n │ │ │ │ ├── matchPath.ts\n │ │ │ │ └── rewritePath.ts\n │ │ │ └── variables\n │ │ │ └── index.ts\n │ │ └── tsconfig.json\n │ ├── caff-logger\n │ │ ├── .gitignore\n │ │ ├── README.md\n │ │ ├── package.json\n │ │ ├── src\n │ │ │ └── index.ts\n │ │ └── tsconfig.json\n │ ├── create-caff-app\n │ │ ├── .gitignore\n │ │ ├── package.json\n │ │ ├── src\n │ │ │ └── index.ts\n │ │ └── tsconfig.json\n └── yarn.lock\n```\n\n---\n\n## Modules\n\n\u003cdetails closed\u003e\u003csummary\u003e.\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [nx.json](https://github.com/ppenter/caff.js/blob/master/nx.json) | Code snippet in caff.js repository:** Located at `packages/caff/src/commands/dev.ts` **Role:** Executes development server **Features:** Configures and starts development server with hot reload functionality. |\n| [yarn.lock](https://github.com/ppenter/caff.js/blob/master/yarn.lock) | Summary:** This code snippet in the `websocket` example within the `caff.js` repository manages configurations for websocket connections, enhancing real-time communication capabilities. |\n| [package.json](https://github.com/ppenter/caff.js/blob/master/package.json) | Code Summary:**The code snippet in `packages/caff/src/commands/start.ts` initializes core server functionality for the `caff.js` repository, enabling application startup and handling incoming requests. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [package.json](https://github.com/ppenter/caff.js/blob/master/examples/websocket/package.json) | Code snippet in `examples/websocket/package.json` orchestrates build, start, and dev tasks via `caff` commands for a React app incorporating WebSocket functionality. Key dependencies include `react`, `react-router-dom`, and `react-use-websocket`. |\n| [tsconfig.json](https://github.com/ppenter/caff.js/blob/master/examples/websocket/tsconfig.json) | Code in `examples/websocket/tsconfig.json` compiles React JSX to directory `dist`, ensuring strict typing \u0026 module resolution. |\n| [caff.config.js](https://github.com/ppenter/caff.js/blob/master/examples/websocket/caff.config.js) | Code in `caff.config.js` sets WebSocket server port to 3001. Enables WebSocket communication in the `caff` system. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket.src.app\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [_document.tsx](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/_document.tsx) | Role:** `Document` component in `WebSocket` example**Function:** Renders minimal HTML structure for React app with child components in parent's React framework architecture. |\n| [layout.tsx](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/layout.tsx) | Code Summary:** `layout.tsx` in `examples/websocket/src/app` renders a structured layout for Caff.js web app with key navigation links and a footer, enhancing user experience. |\n| [style.css](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/style.css) | Code snippet in style.css sets font styles for h1, h2, and h3 elements in the websocket app. Enhances visual presentation and user experience in the specified sections. |\n| [page.tsx](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/page.tsx) | Code in `page.tsx` renders Caff.js’s landing page with key features and call-to-action buttons. It showcases React, API, Websocket, and emphasize Caff.js as a fullstack framework. Simple, engaging user interface. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket.src.app.@api\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [route.ts](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/@api/route.ts) | Role:** Implements a basic GET route handler. **Features:** Handles GET requests with Hello world response. **Architecture:** Part of WebSocket example in caff.js repository. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket.src.app._components\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [collabZone.tsx](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/_components/collabZone.tsx) | This code snippet implements a collaborative drawing zone using WebSocket for real-time interactions within the caff.js repository. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket.src.app.@websocket.messages\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [ping.ts](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/@websocket/messages/ping.ts) | Code in caff.js/examples/websocket/src/app/@websocket/messages/ping.ts sends a PONG message via WebSocket. It plays a crucial role in handling message responses within the WebSocket feature of the caff.js repository. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket.src.app.@websocket.messages.update.[x].[y]\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [call.ts](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/@websocket/messages/update/[x]/[y]/call.ts) | Code in caff.js/examples/websocket/src/app/@websocket/messages/update/[x]/[y]/call.ts broadcasts updates to all clients in the WebsocketContext using parameters x and y. |\n| [close.ts](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/@websocket/messages/update/[x]/[y]/close.ts) | Code in `close.ts` in `/examples/websocket/src/app/@websocket/messages/update/[x]/[y]/` logs WebSocket close event with client ID. It leverages `WebsocketContext` for data. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003eexamples.websocket.src.app.@websocket.events\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [close.ts](https://github.com/ppenter/caff.js/blob/master/examples/websocket/src/app/@websocket/events/close.ts) | Code Summary:** `close.ts`An event handler emitting a close signal to WebSocket clients with an active connection, utilizing a provided context. Facilitates WebSocket communication in the `caff` repository architecture. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [package.json](https://github.com/ppenter/caff.js/blob/master/packages/caff/package.json) | Code snippet in `caff` package achieves CLI functionality by executing build and dev scripts for TypeScript compilation, enabling project setup and code modification.** |\n| [tsconfig.json](https://github.com/ppenter/caff.js/blob/master/packages/caff/tsconfig.json) | Role:** `packages/caff/tsconfig.json` configures TypeScript compilation settings for the `caff` package in the repository.**Key Features:** Enable React JSX, strict mode, ES module interoperability, and output to `./dist`. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [cli.tsx](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/cli.tsx) | Code Summary:**The `cli.tsx` file in the `caff` package dynamically registers and executes commands using the `commander` library, enhancing the CLI functionality of the parent repository's architecture. |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/index.ts) | Summary:**The code snippet in `caff/src/index.ts` exposes `createServer` from `core/server` to build servers, a critical feature for handling backend functionalities in the CAFF.js repository architecture. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.core.server\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [server.tsx](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/core/server/server.tsx) | Summary: The code snippet implements a Node.js server using Express with WebSocket capabilities. It handles routing, middleware, static file serving, and WebSocket connections based on specified options and configurations. |\n| [template.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/core/server/template.ts) | Code Summary:** `template.ts` in `caff` core server handles route rendering for server-side and client-side React applications, embracing a hierarchical layout system. It orchestrates route creation with predefined configurations. |\n| [build.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/core/server/build.ts) | Code Summary:**The code in `build.ts` orchestrates a build process for a Caff server, handling file generation, route management, and server and client build tasks based on configuration, using templates and plugins. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.core.server.plugins\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [native-node.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/core/server/plugins/native-node.ts) | Code Summary:**Code in `native-node.ts` plugin resolves and loads.node files efficiently using virtual namespaces in the parent repo's core server architecture, enhancing module integration. |\n| [babel-remove-unuse.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/core/server/plugins/babel-remove-unuse.ts) | Code summary: **babel-remove-unuse.ts** optimizes the codebase by removing unused Babel plugins. It boosts build performance and reduces bundle size, aligning with the repository's modular architecture. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.core.server.components\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [html.tsx](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/core/server/components/html.tsx) | Code in `html.tsx` (packages/caff/src/core/server/components) provides a base HTML structure for Neat.js, rendering child components. It establishes the main layout for the web application. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.utils\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [matchPath.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/utils/matchPath.ts) | Code snippet in `matchPath.ts` validates and extracts params from routes based on input path. Enhances route matching functionality in the Caff project architecture. |\n| [rewritePath.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/utils/rewritePath.ts) | Code Summary:**`rewritePath` function efficiently rewrites URL paths based on specified rules in `PathRewriteRule` format. Enhances routing flexibility and customization within the `caff` repository structure. |\n| [global.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/utils/global.ts) | Global Access Module:**Path: packages/caff/src/utils/global.tsEnhances global object access for repository modules efficiently. |\n| [hooks.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/utils/hooks.ts) | Code snippet in `hooks.ts` assists in migrating file paths to route paths. It performs path transformations based on config settings, ensuring proper route extraction and API file identification within the `caff` repository. |\n| [files.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/utils/files.ts) | Code snippet summary:**Generates routes dynamically based on file structure. Imports and builds components. Supports nested directories. Enhances route generation for React applications within the repository. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.sub.types\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/sub/types/index.ts) | Code Summary:**Enhances websocket functionality in the caff package. Defines WebSocket interfaces and context for message handling and client management. Aligns with broader architecture of the caff.js repository. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.sub.context\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/sub/context/index.ts) | Code Summary:**The code snippet in `/packages/caff/src/sub/context/index.ts` manages request context using `AsyncLocalStorage`. It retrieves the request data within the architecture. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.sub.logger\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/sub/logger/index.ts) | Role:** Integrates logger module from caff-logger package. Enhances logging functionality across the caff project. Improves development monitoring and debugging capabilities. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.sub.hooks\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/sub/hooks/index.ts) | Role:** Facilitates routing functionality in caff.js architecture.**Features:** Exports useRouter hook for navigating paths efficiently.**Relationship:** Serves as integral part within caff.js repository's routing system. |\n| [useRouter.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/sub/hooks/useRouter.ts) | Code Summary:**Located in `packages/caff/src/sub/hooks/useRouter.ts`, this code snippet enables routing functionality by leveraging React Router's `useLocation` and `useNavigate`. It provides methods for navigation, accessing pathname and query parameters, and handling page refresh. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.variables\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/variables/index.ts) | Code snippet in `packages/caff/src/variables/index.ts` fetches configuration from `caff.config.js` and merges it with default settings, supplying `ICaffConfig` for repository's file structure and variable setup. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff.src.commands\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [dev.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/commands/dev.ts) | Code snippet in `dev.ts` manages server restarts and file changes using nodemon and chokidar, facilitating continuous development. It maintains WebSocket connections and initiates server updates. |\n| [start.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/commands/start.ts) | Summary: Code in packages/caff/src/commands/start.ts initiates production server with WebSocket support in Caff.js. Manages server lifecycle and WebSocket connections, offering version info and run details. |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/commands/index.ts) | Role:** Entry point for CLI commands in caff.js.**Features:** Exports build, start, dev commands for CLI functionality. Integrates commands in parent repository's architecture. |\n| [build.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff/src/commands/build.ts) | Summary:**The `build.ts` code snippet in `caff` repo's `commands` creates a build command using the Commander library to trigger a project build via `createBuild` function from the server's core. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.create-caff-app\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [package.json](https://github.com/ppenter/caff.js/blob/master/packages/create-caff-app/package.json) | Code Summary: create-caff-app**Creates Caff projects with logging and CLI handling. Uses Node.js, TypeScript, and Commander for project scaffolding. Key features include project setup, logging integration, and CLI interaction. |\n| [tsconfig.json](https://github.com/ppenter/caff.js/blob/master/packages/create-caff-app/tsconfig.json) | create-caff-app Role**: Compiles React JSX to NodeNext in `dist` dir, enforcing strict type checking, esModuleInterop, and excluding tests, nodes in `node_modules`. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.create-caff-app.src\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/create-caff-app/src/index.ts) | Summary:****Code snippet creates Caff.js project structure with essential components: `app` folder, `layout`, `page`, `api`, and `websocket`. Config and scripts setup for Caff.js project initialization.** |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff-logger\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [package.json](https://github.com/ppenter/caff.js/blob/master/packages/caff-logger/package.json) | Code Summary:** Code in `packages/caff-logger` facilitates logging via `ora` and `prompts` with TypeScript support. It offers build automation and development watch modes. |\n| [tsconfig.json](https://github.com/ppenter/caff.js/blob/master/packages/caff-logger/tsconfig.json) | Code snippet in `/packages/caff-logger/index.ts` enhances logging functionality in the repository's server core. Integrated with structured logging, it ensures detailed monitoring and error tracking across the application. |\n\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\u003csummary\u003epackages.caff-logger.src\u003c/summary\u003e\n\n| File | Summary |\n| --- | --- |\n| [index.ts](https://github.com/ppenter/caff.js/blob/master/packages/caff-logger/src/index.ts) | Code snippet in caff-logger enhances logging and interactive prompts. Facilitates dynamic log level configuration and interactive user input. Supports Winston logging with colorful console output. |\n\n\u003c/details\u003e\n\n---\n\n## Getting Started\n\n***Requirements***\n\nEnsure you have the following dependencies installed on your system:\n\n* **TypeScript**: `version x.y.z`\n\n### Installation\n\n1. Use create-caff-app cli:\n\n```sh\nyarn create caff-app@latest \u003cproject-name\u003e\n```\n\n2. Change to the project directory:\n\n```sh\ncd \u003cproject-name\u003e\n```\n\n3. Install the dependencies:\n\n```sh\nyarn\n```\n\n### Running `caff.js`\n\nUse the following command to run caff.js:\n\n```sh\nyarn dev\n```\n\n---\n\n## Project Roadmap\n\n- [X] `► FULLSTACK_BASIC`\n- [ ] `► REALTIME_FRAMEWORK`\n- [ ] `► ALPHA-TEST`\n\n---\n\n## Contributing\n\nContributions are welcome! Here are several ways you can contribute:\n\n- **[Submit Pull Requests](https://github.com/ppenter/caff.js/blob/main/CONTRIBUTING.md)**: Review open PRs, and submit your own PRs.\n- **[Join the Discussions](https://github.com/ppenter/caff.js/discussions)**: Share your insights, provide feedback, or ask questions.\n- **[Report Issues](https://github.com/ppenter/caff.js/issues)**: Submit bugs found or log feature requests for the `caff.js` project.\n\n\u003cdetails closed\u003e\n \u003csummary\u003eContributing Guidelines\u003c/summary\u003e\n\n1. **Fork the Repository**: Start by forking the project repository to your github account.\n2. **Clone Locally**: Clone the forked repository to your local machine using a git client.\n ```sh\n git clone https://github.com/ppenter/caff.js\n ```\n3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name.\n ```sh\n git checkout -b new-feature-x\n ```\n4. **Make Your Changes**: Develop and test your changes locally.\n5. **Commit Your Changes**: Commit with a clear message describing your updates.\n ```sh\n git commit -m 'Implemented new feature x.'\n ```\n6. **Push to GitHub**: Push the changes to your forked repository.\n ```sh\n git push origin new-feature-x\n ```\n7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations.\n\nOnce your PR is reviewed and approved, it will be merged into the main branch.\n\n\u003c/details\u003e\n\n---\n\n## License\n\nThis project is protected under the [GNU AGPLv3](https://choosealicense.com/licenses) License. For more details, refer to the [LICENSE](https://choosealicense.com/licenses/) file.\n\n---\n\n## Acknowledgments\n\n- List any resources, contributors, inspiration, etc. here.\n\n[**Return**](#-quick-links)\n\n---\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppenter%2Fcaff.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fppenter%2Fcaff.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fppenter%2Fcaff.js/lists"}