{"id":26446604,"url":"https://github.com/jinntec/fore","last_synced_at":"2025-04-09T05:11:03.020Z","repository":{"id":37904570,"uuid":"347111615","full_name":"Jinntec/Fore","owner":"Jinntec","description":"Fore - declarative user interfaces in plain HTML","archived":false,"fork":false,"pushed_at":"2025-03-25T16:29:36.000Z","size":73481,"stargazers_count":83,"open_issues_count":15,"forks_count":11,"subscribers_count":13,"default_branch":"dev","last_synced_at":"2025-04-07T03:34:27.292Z","etag":null,"topics":["fontoxpath","form","json","validation","web-components","xml"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Jinntec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-03-12T15:28:20.000Z","updated_at":"2025-03-28T00:34:47.000Z","dependencies_parsed_at":"2023-02-19T09:30:52.748Z","dependency_job_id":"2a05cbe9-9a88-467b-b4b0-a759171deb5d","html_url":"https://github.com/Jinntec/Fore","commit_stats":{"total_commits":1257,"total_committers":13,"mean_commits":96.6923076923077,"dds":0.4120922832140016,"last_synced_commit":"01a6b7fe58a36d8daaa5fa296df9bf3b84b363cc"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinntec%2FFore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinntec%2FFore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinntec%2FFore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jinntec%2FFore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jinntec","download_url":"https://codeload.github.com/Jinntec/Fore/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"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":["fontoxpath","form","json","validation","web-components","xml"],"created_at":"2025-03-18T12:21:13.285Z","updated_at":"2025-04-09T05:11:03.000Z","avatar_url":"https://github.com/Jinntec.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![NPM](https://img.shields.io/npm/l/@jinntec/fore)\n![GitHub Workflow Status](https://img.shields.io/github/workflow/status/jinntec/fore/CI)\n![GitHub Discussions](https://img.shields.io/github/discussions/jinntec/fore)\n![GitHub last commit](https://img.shields.io/github/last-commit/jinntec/fore)\n![GitHub tag (latest SemVer)](https://img.shields.io/github/v/tag/jinntec/fore)\n![GitHub top language](https://img.shields.io/github/languages/top/jinntec/fore)\n\n\n\u003cimg src=\"resources/images/light7.png\" width=\"400\"\u003e\n\n\u003e'situated in front of something else' - Merriam Webster\n\n[![Twitter URL](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Ftwitter.com%2FJinnForeTec)](https://twitter.com/JinnForeTec) \n\n[Homepage](https://jinntec.github.io/Fore/) | \n[Documentation](https://jinntec.github.io/fore-docs/) |\n\n\n# Declarative applications in plain HTML\n\nFore lets you write data-driven front-end applications in a declarative way\njust using HTML5 Web Components. \n\n![todo](resources/images/todo-screen.png)\n\n[Source code](https://github.com/Jinntec/Fore/blob/960e093fadfbc96eb8514721fb7b53462567f1ec/demo/todo2.html) for above example just uses 53 lines of HTML.\n\nThe use cases range from simple to complex forms to full single page\napplications. It can be used standalone or in conjunction with other web \ncomponents or frameworks. \n\nBy using the bare metal of the browser\nplatform, Fore integrates well with any other library you might want to use in\nconjunction with it.\n\n## Features\n\n* implemented as vanilla web components in ES6\n* fully descriptive - just HTML5\n* MVC architecture \n* state engine with dependency tracking for optimized updating\n* lifecycle with detailed state events\n* descriptive actions for data mutations (setvalue, insert, delete)\n* binding for structured data like XML, HTML and JSON\n* group, repeat, dialog + switch container components\n* generic UI control binding any native control or third-party component \n* auto-updating Template Expressions\n* powerful XPath/XQuery 3.1 support in the browser\n* Submission module declaratively wrapping the fetch API\n* efficient partial DOM updates\n* no build (tool) required\n\n\n## An xformish framework in Web Components\n\nFore is a model-driven language that follows the ideas of the XForms 2.0\nStandard but applies those to the world of HTML5 Web Components.\n \nGoing beyond just forms it nicely integrates with Web Components, allowing to configure, \norchestrate and interact with them by binding their properties to data instances.\n\nFore uses XML as it's main data model but allows to use JSON alternatively or at the same time. \n\nThrough the wonderful [fontoXPath library](https://github.com/FontoXML/fontoxpath) Fore is able to process XML in the client with XPath 3.1 and \nXQuery 3.1 support.\n\nBeing as close as possible to the web platform standards available in browsers natively, Fore combines well with any other \nJS framework or component library.\n\n\n## Framework-agnostic\n\nFore focuses on providing a stable processing engine for model-driven\napps. Major premise for a longer-term solution is to stick closely to the features\nof the browser platform and avoid specific frameworks for the implementation.\n\nThat said it's obvious that Fore does not provide a set of controls\nby itself but allows you to use whatever uber-fancy components you have\nfound elsewhere. May it be some material-design date-picker or \nthat nice jquery(sic!) timeline nobody has done better yet. \n\nThat comes to the price of slightly more markup up-front\nbut allows big flexibility and makes it compatible with any framework\nthat plays by the rules of the platform.\n\nTo use whatever component in Fore you wrap it up in the generic\n`fx-control` element.\n\n```\n\u003cfx-control ref=\"boundnode\"\u003e\n    \u003cpaper-input class=\"widget\" label=\"my input\" name=\"foo\"\u003e\n\u003c/fx-control\u003e\n```\n\nThe additional attributes `update-event` and `value-prop` allow to \ncustomize the wiring of the widget you use. \n\n```\n\u003cfx-control ref=\"checked\" update-event=\"change\" value-prop=\"checked\"\u003e\n    \u003cpaper-checkbox class=\"widget\"\u003epaper checkbox\u003c/paper-checkbox\u003e\n\u003c/fx-control\u003e\n```\n\nMore examples are found in the demos (see running)\n\n\n## Development and Contributions\n\nDefault branch of development is 'dev'.\nFeature additions or bugfixes will always there.\n\nThe master branch is only used for releases. \n\nContributions are always welcome.  \n\n### what to contribute\n\nIt's not all about code. \n\nAny feedback is welcome and appreciated. Please use the ['discussions'](https://github.com/Jinntec/Fore/discussions) or\n['issues'](https://github.com/Jinntec/Fore/issues) as appropriate to suggest features or ask your questions.\n\nNew demo files are highly welcome as always something new can be learned. \nThere is a directory called 'template' that contains some blueprints that can be copied to quickly get going.\n\nWhen working on demos it is recommended to copy your file to the 'demo' folder\nand make it work there. If you have additional files you can create\na subdirectory for the new demo.\n\n## Running from CDN\n\nInclude the following snippet at end of body:\n\n```\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/dist/fore-all.js\"\u003e\u003c/script\u003e\n```\n## Installation width npm\n\nRun\n\n```npm install @jinntec/fore```\n\nin your project to install it.\n\n\nImport it in your HTML page like so:\n\n```\n\u003cscript type=\"module\"\u003e\n    import 'node_modules/@jinntec/fore/dist/fore.js';\n\u003c/script\u003e\n```\n\n## Developing\n\nIf you intend to hack it yourself ...\n\n\u003e you need to have node installed on your machine (using 15.1.0)\n    \n* clone this repo to your machine\n* run `npm i` to install dependencies\n\n## Running demos and docs\n\n1. checkout this repo or download the sources\n1. change to the rootfolder and execute following command in your shell\n1. `npm install` to install Fore dependencies\n1. `npm run install-demos` to install Demo dependencies\n1. `npm run start` starts the testserver with 'doc/index.html' as entry page. This will send you to 'doc/demos.html' as an\nentry point. This lists out running examples to learn and copy from.\n\n## Running test suite\n\n`npm run test:watch`\n \nOpen your browser and goto to the URL mentioned in console output to start Karma and hit the button in the upper right to run the full test-suite. Will\ncontinously rerun the test suite while you're changing code.\n\nAlternatively you can run the test suite from the commandline once:\n```\nnpm run test\n```\n\n## Running the integration tests\n\nStart the demo server and open cypress. Choose your browser and run all tests from there.\n\n```\nnpm run start\nnpx cypress open\n```\n\nAlternatively, start the demo server and run the tests headlessly:\n\n```\nnpm run start\nnpx cypress run\n```\n\n\n## Building a package\n\n```npm run build``` creates two bundles in 'dist' directory.\n\n* fore.js - contains just the Fore classes without dependencies and is suitable for creating your own app-specific bundle\n* fore-all.js contains everything in one bundle (incl. dependencies) and is the easiest way to use it in your own project with a single module import. \nThe package is still huge but is expected to shrink massively.\n\nInclude the repective bundle in your webpage with a module import:\n```\n\u003cscript type=\"module\"\u003e\n    import 'dist/fore-all.js';\n\u003c/script\u003e\n```\n\n## Giant shoulders\n\nThe giants that made Fore possible:\n\n* past and current [XForms editors](https://www.w3.org/community/xformsusers/wiki/XForms_2.0) - not all brilliant ideas get traction and fame. Nevertheless a brilliantly worked out state engine.\n* [fontoXPath](https://github.com/FontoXML/fontoxpath) - without this wonderful XPath 3.1 implementation in the browser Fore has never been possible - period.\n* [depGraph](https://github.com/jriecken/dependency-graph) - finding this gem saved a big bunch of work. \n\nThanks to all giants!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjinntec%2Ffore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjinntec%2Ffore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjinntec%2Ffore/lists"}