{"id":15046847,"url":"https://github.com/henriquelimas/osagai","last_synced_at":"2025-10-28T07:31:13.464Z","repository":{"id":57316435,"uuid":"158037368","full_name":"HenriqueLimas/osagai","owner":"HenriqueLimas","description":"🀄️A tiny library for creating WebComponents in a Functional way","archived":false,"fork":false,"pushed_at":"2020-07-01T19:57:03.000Z","size":1493,"stargazers_count":52,"open_issues_count":3,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-01T12:44:13.352Z","etag":null,"topics":["functional-programming","tiny-library","webcomponents"],"latest_commit_sha":null,"homepage":"https://osagai.js.org","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/HenriqueLimas.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}},"created_at":"2018-11-18T00:40:00.000Z","updated_at":"2024-11-09T08:05:51.000Z","dependencies_parsed_at":"2022-08-25T21:11:05.875Z","dependency_job_id":null,"html_url":"https://github.com/HenriqueLimas/osagai","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenriqueLimas%2Fosagai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenriqueLimas%2Fosagai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenriqueLimas%2Fosagai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HenriqueLimas%2Fosagai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HenriqueLimas","download_url":"https://codeload.github.com/HenriqueLimas/osagai/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238614372,"owners_count":19501446,"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":["functional-programming","tiny-library","webcomponents"],"created_at":"2024-09-24T20:53:39.355Z","updated_at":"2025-10-28T07:31:07.538Z","avatar_url":"https://github.com/HenriqueLimas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Osagai 🀄️ [![Build Status](https://travis-ci.com/HenriqueLimas/osagai.svg?branch=master)](https://travis-ci.com/HenriqueLimas/osagai)\n\nA tiny library in a functional and browser way.\n\n## Why?\n\nCreating WebComponent shouldn't be limited to extending `class`es. It should be easy to create and in a functional way.\nIt should be able to be framework-agnostic and be reused in different libraries. Updating components should be fast and it should\nuse native solutions without VirtualDOM and data binding magics. It should not need build processes for compiling non\nnative solution (JSX) and take advantage in what the language has. ([Template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals))\n\n- [Documentation](https://osagai.js.org/docs/)\n\n## Install\n\nYou can get it on npm.\n\n```\nnpm install osagai\n```\n\nOr import from unpkg\n\n```js\nimport { define } from \"https://unpkg.com/osagai/osagai.mjs\";\nimport { on } from \"https://unpkg.com/osagai/events.mjs\";\n```\n\n## Define a Web component\n\nOsagai comes with a function called `define` that defines a new custom element that you can use in your application.\n`define` receives the name of the custom element (it must contain a hyphen) and the Osagai component.\nThe Osagai component is a function that returns a Template with a string representing the layout of the web component.\n\n```javascript\nimport { define } from 'osagai'\n\nfunction MyComponent() {\n\treturn () =\u003e `\u003ch1\u003eHi 👋!\u003c/h1\u003e`\n}\n\ndefine('waving-hand', MyComponent)\n\n```\n\nNow, you just need to use your new custom element in your application.\n\n```html\n\u003cwaving-hand\u003e\u003c/waving-hand\u003e\n```\n\n## Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003ctitle\u003eOsagai demo\u003c/title\u003e\n\n  \u003cx-items\u003e\u003c/x-items\u003e\n\n  \u003cscript type=\"module\"\u003e\n    import { define } from \"https://unpkg.com/osagai/osagai.mjs\";\n    import { on } from \"https://unpkg.com/osagai/events.mjs\";\n    import { update } from \"https://unpkg.com/osagai/dom.mjs\";\n\n    function Items({ element, query }) {\n      const initialState = {\n        items: []\n      };\n\n      on(\"click\", query(\".btn\"), () =\u003e {\n        update(element, ({ items } = initialState) =\u003e {\n          items.push({\n            name: `Item nr ${items.length + 1}`\n          });\n\n          return {\n            items\n          };\n        });\n      });\n\n      return ({ items } = initialState) =\u003e `\n        \u003cdiv\u003e\n          \u003cbutton class=\"btn\"\u003eAdd item\u003c/button\u003e\n          \u003cul class=\"list\"\u003e\n            ${items.map(item =\u003e `\u003cli\u003e${item.name}\u003c/li\u003e`).join(\"\")}\n          \u003c/ul\u003e\n        \u003c/div\u003e`;\n    }\n\n    define(\"x-items\", Items);\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n- Hacker News PWA example: https://github.com/HenriqueLimas/osagai-hn\n\n## Project status\n\nOsagai is still under development and it needs some feedback from the community. If you want to collaborate, please\nadd an [issue](https://github.com/HenriqueLimas/osagai/issues) or [PR](https://github.com/HenriqueLimas/osagai/pulls) with\nyour suggestions or concerns.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriquelimas%2Fosagai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenriquelimas%2Fosagai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriquelimas%2Fosagai/lists"}