{"id":15022381,"url":"https://github.com/fovea-org/fovea","last_synced_at":"2025-10-23T15:30:17.888Z","repository":{"id":56829176,"uuid":"139253888","full_name":"fovea-org/fovea","owner":"fovea-org","description":"Fovea is a tool for generating tiny, incredibly powerful Web Components.","archived":false,"fork":false,"pushed_at":"2018-11-30T10:59:38.000Z","size":3257,"stargazers_count":9,"open_issues_count":8,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-29T00:38:25.030Z","etag":null,"topics":["cli","compiler","customelements","dom","fovea","shadowdom","template","ui-library","webcomponents","webdevelopment"],"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/fovea-org.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-30T13:59:59.000Z","updated_at":"2023-12-19T20:52:59.000Z","dependencies_parsed_at":"2022-08-29T00:20:32.326Z","dependency_job_id":null,"html_url":"https://github.com/fovea-org/fovea","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fovea-org%2Ffovea","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fovea-org%2Ffovea/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fovea-org%2Ffovea/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fovea-org%2Ffovea/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fovea-org","download_url":"https://codeload.github.com/fovea-org/fovea/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843723,"owners_count":19375192,"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":["cli","compiler","customelements","dom","fovea","shadowdom","template","ui-library","webcomponents","webdevelopment"],"created_at":"2024-09-24T19:57:52.117Z","updated_at":"2025-10-23T15:30:16.679Z","avatar_url":"https://github.com/fovea-org.png","language":"TypeScript","funding_links":["https://www.patreon.com/bePatron?u=11315442"],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"Logo for fovea\" src=\"./documentation/asset/fovea_icon.png\" height=\"200\"\u003e\u003c/img\u003e\u003cbr\u003e\n\u003ca href=\"https://www.npmjs.com/package/@fovea/core\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://badge.fury.io/js/%40fovea%2Fcore.svg\" height=\"20\"\u003e\u003c/img\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/fovea-org/fovea/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/fovea-org%2Ffovea.svg\" height=\"20\"\u003e\u003c/img\u003e\u003c/a\u003e\n\u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg alt=\"MIT License\" src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" height=\"20\"\u003e\u003c/img\u003e\u003c/a\u003e\n\u003ca href=\"https://www.patreon.com/bePatron?u=11315442\"\u003e\u003cimg alt=\"Support on Patreon\" src=\"https://c5.patreon.com/external/logo/become_a_patron_button@2x.png\" height=\"20\"\u003e\u003c/img\u003e\u003c/a\u003e\n\n## Introduction\n\nFovea is a compiler for generating tiny and powerful Web Components, to use in building Web applications.\nBy shifting computations to compile-time, rather than run-time, Fovea enables you to do way more with way less overhead.\nAnd, because components compiled with Fovea are just Web Components, they work in any framework you may choose - or with no framework at all.\nFovea also makes it super easy to build powerful Progressive Web Apps with the [`@fovea/cli`](https://github.com/fovea-org/fovea/blob/master/packages/cli/README.md).\nThere's so much we want to say, but let's take it bit by bit:\n\n## Install\n\n- [Build Progressive Web Apps with Fovea] by leveraging the powerful `@fovea/cli`.\n- [Build reusable Web Components with Fovea] with the `@fovea/compiler` and `@fovea/rollup-plugin-fovea`.\n\n## Examples\n\nA Fovea component looks like a Custom Element - because it _is_ a Custom Element! And, your templates and styles are completely encapsulated within the Shadow DOM.\nHere's a very simple example of a Fovea component:\n\n```typescript\n@templateSrc(\"./my-component.html\")\n@styleSrc([\"./my-component.scss\"])\nclass MyComponent extends HTMLElement {}\n```\n\nThe decorators are just there to help Fovea understand what you want to achieve. They are gone in the compiled output!\nFovea enables you to write your styles in `.css` (or `.scss`) and your template in `.html`, - but it doesn't force you to!\nIf you're a fan of [React], [lit-html] or [Stencil], you can also declare both directly from the component with `template` and/or `styles` accessors, methods or property declarations.\nBecause Fovea is compiled, it doesn't matter how you provide your template and styles. Fovea will figure it out:\n\n```typescript\nclass MyComponent extends HTMLElement {\n  // You can also provide the template from a get accessor or from a method of the same name\n  // In this example, it is provided from a property.\n  template = `\u003ch1\u003eThis is my component!\u003c/h1\u003e`;\n}\n```\n\nBy design, Fovea let's you write as little as possible, and fills out the gaps for you as required. In this example:\n\n- The `MyComponent` Custom Element is automatically registered with the selector `my-component`\n- A Shadow Root is automatically attached to the element\n- The template is compiled into a sequence of blazing fast, secure instructions and attached the Shadow root\n- The styles are run through PostCSS and compiled with SASS if applicable, and attached to the Shadow root\n  But you can manually invoke `customElements.define(...)` if you want, or provide a different selector name. Fovea won't get in your way.\n\nHere's another example of a component that does a little more:\n\n\u003c!-- prettier-ignore --\u003e\n```typescript\n@selector(\"clickey-thingey\")\nclass MyComponent extends HTMLElement {\n  @prop @setOnHost clickAmount: number = 0;\n\n  template = `\n\t\t\u003cbutton on-click=\"${this.clickAmount++}\"\u003e\n\t\tI've been clicked ${this.clickAmount} ${this.clickAmount === 1 ? \"time\" : \"times\"}!\n\t\t\u003c/button\u003e`;\n\n  @onChange(\"clickAmount\")\n  onClickAmountChanged() {\n    if (this.clickAmount \u003e= 10) {\n      console.log(\"You should go play Cookie clicker instead!\");\n    }\n  }\n}\n```\n\nThis example is a bit more involved, but showcase some of the strongest parts of Fovea:\n\n- You can declare `@prop`s which are the properties you'd like to use within your templates and styles. Here, the `prop` `clickAmount` of type `number` is declared (yes, the data type is actually used for coercion!)\n- You can use complex Expressions inside your templates for everything that goes into the `${...}` parts. We call them _Live Expressions_, because they react immediately to changes to the `prop`s that are used within them. You can use _all_ Javascript language features within those.\n- You can automatically sync your `props` with host attributes. Fovea takes care of mapping the names between them. In this example, the `prop` `clickAmount` will be set on the host element as the attribute `click-amount` and update each time the value changes. It also works the other way around - when the attributes change, the `prop` is updated - and coerced into the data type that it is declared with.\n- You can react to changes to your props with the `@onChange` decorator.\n\nBest of all, you don't pay any cost for the features that you don't use. For example, if you never use the `@onChange` decorator, Fovea won't ship the related logic.\nNaturally, Fovea components can do **so** much more, so instead we'll refer you to the [full examples section].\n\n## Contributing\n\nDo you want to contribute? Awesome! Please follow [these recommendations](./CONTRIBUTING.md).\n\n## Maintainers\n\n- \u003ca href=\"https://github.com/wessberg\"\u003e\u003cimg alt=\"Frederik Wessberg\" src=\"https://avatars2.githubusercontent.com/u/20454213?s=460\u0026v=4\" height=\"11\"\u003e\u003c/img\u003e\u003c/a\u003e [Frederik Wessberg](https://github.com/wessberg): _Lead Developer_\n\n## Backers 🏅\n\n[Become a backer](https://www.patreon.com/bePatron?u=11315442) and get your name, logo, and link to your site listed here.\n\n## License 📄\n\nMIT © [Frederik Wessberg](https://github.com/wessberg)\n\n## FAQ\n\n#### Another UI library? Are you serious?\n\nYes, we're quite serious. Remember, you get Web Components out! Fovea is build on standards - we're not trying to build a new ecosystem around yet another framework. Everything\nthat Fovea enables you to produce is compatible with every other framework out there, including the one you might be using right now.\nFovea wants to place itself as something in-between [Stencil] and [Polymer]. Stencil is a compiler as well, but it is closer to `React` in technology (JSX, Virtual DOM) and philosophy (Functional, Reactive) than Fovea is.\nPolymer is built on the same core principles, but it doesn't need a compilation step and comes with the benefits (no tooling required) and constraints (greater runtime cost) that result from it.\n\n#### Is there a way to use Fovea without the compile-step?\n\n**No**. The reason why Fovea is so fast and so small is because it knows everything there is to know about your code before any browser ever gets involved. That enables Fovea to cool things such as convert your templates into assembly-like instructions, as well as use the data types of your props for things like coercion.\nFovea is, and always will be, a compile-time tool.\n\n[react]: https://reactjs.org/\n[stencil]: https://stenciljs.com/\n[polymer]: https://www.polymer-project.org/\n[lit-html]: https://polymer.github.io/lit-html/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffovea-org%2Ffovea","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffovea-org%2Ffovea","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffovea-org%2Ffovea/lists"}