{"id":21004610,"url":"https://github.com/rangerrick/rff","last_synced_at":"2026-04-28T13:07:48.392Z","repository":{"id":231085186,"uuid":"745549359","full_name":"RangerRick/rff","owner":"RangerRick","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-19T15:22:58.000Z","size":248,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-20T10:13:45.105Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/RangerRick.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}},"created_at":"2024-01-19T15:22:55.000Z","updated_at":"2024-01-19T15:23:02.000Z","dependencies_parsed_at":"2024-04-02T11:59:19.232Z","dependency_job_id":"c424841e-a77e-4d1e-bb0a-4c8983eb9fff","html_url":"https://github.com/RangerRick/rff","commit_stats":null,"previous_names":["rangerrick/rff"],"tags_count":0,"template":false,"template_full_name":"Himmlisch-Studios/alcata-framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RangerRick%2Frff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RangerRick%2Frff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RangerRick%2Frff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RangerRick%2Frff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RangerRick","download_url":"https://codeload.github.com/RangerRick/rff/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243419425,"owners_count":20287890,"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":[],"created_at":"2024-11-19T08:37:03.412Z","updated_at":"2025-12-29T13:26:18.922Z","avatar_url":"https://github.com/RangerRick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alcata Framework\n\nBuild cross-platform applications with the technologies you love!\n\nLossely coupled, zero-fat, lightweight, vanilla-flavored 🍦 yet featureful \u0026 opinionated JavaScript framework 🔥\n\nIt features:\n\n- **Cross-Platform Integration** thanks to [Capacitor](https://capacitorjs.com/).\n- **Reactivity** thanks to [AlpineJS](https://github.com/alpinejs/alpine).\n- **Routing** with [Pinecone Router](https://github.com/pinecone-router/router).\n- **Partials** with [Alpine Component](https://github.com/markmead/alpinejs-component).\n- **Storage** with [Alpine Persist](https://alpinejs.dev/plugins/persist).\n- **Localization** with [Alpine i18n](https://github.com/rehhouari/alpinejs-i18n).\n- **Validation** with [Iodine](https://github.com/caneara/iodine).\n- **Security** with [JS Obfuscator](https://github.com/javascript-obfuscator/javascript-obfuscator) and [Encrypt Storage](https://github.com/michelonsouza/encrypt-storage).\n\nWith tailored helpers and configurations for a smooth development.\n\n# Project Structure\n\n```\n├── dist/\n├── src/\n│   ├── css/\n│   │   ├── base.css\n│   │   └── style.css\n│   │\n│   ├── js/\n│   │   ├── alpine.js\n│   │   ├── app.js\n│   │   ├── bootstrap/\n│   │   │   ├── alcata.js\n│   │   │   └── providers/\n│   │   │       ├── components.js\n│   │   │       ├── mobile.js\n│   │   │       ├── router.js\n│   │   │       └── translation.js\n│   │   │\n│   │   ├── lang/\n│   │   │   └── locale.json  # Language files\n│   │   │\n│   │   ├── stores/\n│   │   │   └── app.js\n│   │   │\n│   │   ├── routes.js\n│   │   └── storage.js\n│   │\n│   ├── components/ # HTML partials go here\n│   │\n│   ├── views/ # HTML pages go here\n│   │\n│   └── index.html\n│\n├── capacitor.config.json\n├── tailwind.config.js\n├── vite.config.ts\n└── vite.util.ts\n```\n\nThe entry point for Alcata is `/src/js/app.js`:\n\n```js\nimport { System } from \"./bootstrap/alcata\";\nimport { Alpine } from \"./alpine\";\nimport app from \"./stores/app\";\n\nAlpine.store('app', app);\n\nSystem.boot();\n```\n\nHere, an Alpine instance with loaded plugins and custom magics is imported to load stores, `x-data` components, and everything you may need.  Then, the system is booted.\n\nThe `src/js/bootstrap/` directory, contains files that you shouldn't modify besides some configurations on the providers. \n\nThe file `src/js/bootstrap/alcata.js` is where the Service Providers and Alpine are registered and initialized.\n\n# Service Providers\n\nService Providers are small JavaScript objects that provide to Alcata, some extra functionality on top of the stack of libraries that the framework is built-on. They consist of two functions:\n- A `register()` function, that runs before `Alpine.init()`.\n- A `boot()` function, that runs after `Alpine.init()`.\n\nThey're meant to be left mostly unchanged, with the possibility of tweaking some configurations.\n\n## Translation Provider\n\nAn example of this, is the TranslationProvider, that boots up [Alpine i18n](https://github.com/rehhouari/alpinejs-i18n), with the given locale and fallback locale:\n\n```js\nimport locale from '../../lang/locale.json';\n\nexport const TranslationProvider = {\n    locale: 'en',\n    fallbackLocale: 'en',\n    boot() {\n        window.AlpineI18n.fallbackLocale = this.fallbackLocale;\n        window.AlpineI18n.create(this.locale, locale);\n    }\n}\n```\n\n## Mobile Provider\n\nAdds the option to set the `window.onback`, on your views to handle mobile back button events.\n\n# Routing\n\nYou can define routes over `src/js/routes.js`. In any of the following ways:\n\n```js\nexport default {\n    '/': '/views/home.html',\n    '/about/:redirect?': {\n        handlers: [\n            (context) =\u003e {\n                if(context.params.redirect){\n                    return context.redirect(context.params.redirect);\n                }\n            }\n        ],\n        view: ['/views/about.html']\n    },\n    notfound(context) {\n        return context.redirect('/');\n    }\n};\n```\n\n- A string path to fetch a view.\n- An object, with several options such `handlers` or `view`, specially useful for creating routes with Middlewares.\n- A `Handler`, a method with the `Context` instance.\n\nThe routes will be loaded by the `RouterProvider`.\n\nYou can find more documentation over [Pinecone Router](https://github.com/pinecone-router/router). \n\n# State Management\n\nAlcata comes with an `app` Alpine Store by default. And can be accessed through the magic function `$app`.\n\n## Local Storage\n\nYou can save data easily using Alpine Persist. Just wrap the store property with `Alpine.$persist`  and an optional storage key with `as()`.\n\n```js\n{\n    _firstTimeAt: Alpine.$persist(null).as('app:firstTimeAt'),\n}\n```\n\n### Storage drivers\n\nOn `src/js/storage.js` you'll find very useful storage drivers for Alpine Persist.\n\n```js\nimport { EncryptStorage as encryption } from \"./storage\";\nimport { CompressionStorage as compression } from \"./storage\";\n\n{\n    _secretValue: Alpine.$persist(null).as('app:secret').using(encryption),\n    _compressedValue: Alpine.$persist(null).as('app:compressed').using(compression)\n}\n```\n\nThe `EncryptStorage` will use the `VITE_KEY` (set on your `.env` file), to encrypt the data using [encrypt-storage](https://github.com/michelonsouza/encrypt-storage). This is useful when you want to prevent the client reading/writing on the Local Storage as easily.\n\nThe `CompressionStorage` will compress the data using the LZ Algorithm. Useful for fighting the browser's Local Storage constraints.\n\n# Components\n\n**WIP**\n\n# Localization\n\n**WIP**\n\n# Building\n\n**WIP**\n\n# Contributors\n\n- [@LuanHimmlisch](https://github.com/LuanHimmlisch)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangerrick%2Frff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frangerrick%2Frff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frangerrick%2Frff/lists"}