{"id":13804823,"url":"https://github.com/aggre/ullr","last_synced_at":"2025-04-05T00:10:53.122Z","repository":{"id":32543019,"uuid":"136207188","full_name":"aggre/ullr","owner":"aggre","description":"Functional Web Components","archived":false,"fork":false,"pushed_at":"2025-04-03T11:22:52.000Z","size":3383,"stargazers_count":64,"open_issues_count":14,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T12:28:14.107Z","etag":null,"topics":[],"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/aggre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2018-06-05T16:44:46.000Z","updated_at":"2025-02-27T19:49:50.000Z","dependencies_parsed_at":"2024-11-09T14:21:18.869Z","dependency_job_id":"f025352c-0baa-4684-9300-0252689c5165","html_url":"https://github.com/aggre/ullr","commit_stats":{"total_commits":1035,"total_committers":5,"mean_commits":207.0,"dds":"0.45507246376811594","last_synced_commit":"e80d58f73668d5e5da2f0b5b0c9f6fca2663ce7a"},"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aggre%2Fullr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aggre%2Fullr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aggre%2Fullr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aggre%2Fullr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aggre","download_url":"https://codeload.github.com/aggre/ullr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266565,"owners_count":20910836,"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-08-04T01:00:54.320Z","updated_at":"2025-04-05T00:10:53.103Z","avatar_url":"https://github.com/aggre.png","language":"TypeScript","funding_links":[],"categories":["Extensions"],"sub_categories":[],"readme":"Functional Web Components\n\n**Building Web Components with Functional Programming.**\n\n![CI](https://github.com/aggre/ullr/workflows/CI/badge.svg)\n[![Published on npm](https://img.shields.io/npm/v/@aggre/ullr.svg)](https://www.npmjs.com/package/@aggre/ullr)\n\n```\n\n      ___                                       ___\n     /__/\\                                     /  /\\\n     \\  \\:\\                                   /  /::\\\n      \\  \\:\\    ___     ___   ___     ___    /  /:/\\:\\\n  ___  \\  \\:\\  /__/\\   /  /\\ /__/\\   /  /\\  /  /:/~/:/\n /__/\\  \\__\\:\\ \\  \\:\\ /  /:/ \\  \\:\\ /  /:/ /__/:/ /:/___\n \\  \\:\\ /  /:/  \\  \\:\\  /:/   \\  \\:\\  /:/  \\  \\:\\/:::::/\n  \\  \\:\\  /:/    \\  \\:\\/:/     \\  \\:\\/:/    \\  \\::/~~~~\n   \\  \\:\\/:/      \\  \\::/       \\  \\::/      \\  \\:\\\n    \\  \\::/        \\__\\/         \\__\\/        \\  \\:\\\n     \\__\\/                                     \\__\\/\n\n```\n\n---\n\n# Installation\n\nAdd to a lit project:\n\n```bash\nnpm i @aggre/ullr\n```\n\nWhen creating a new project using lit as template and RxJS as the state management:\n\n```bash\nnpm i @aggre/ullr lit rxjs\n```\n\nPartially supports run on Node.js (with jsdom).\n\n# APIs\n\n## `shadow`\n\n`shadow` is a lit directive.\n\nEncapsulate the template with Shadow DOM.\n\n```ts\nimport { html } from 'lit'\nimport { shadow } from '@aggre/ullr'\n\nexport const main = (title: string, desc: string) =\u003e\n\tshadow(html`\n\t\t\u003cstyle\u003e\n\t\t\th1 {\n\t\t\t\tcolor: blue;\n\t\t\t}\n\t\t\u003c/style\u003e\n\t\t\u003cmain\u003e\n\t\t\t\u003ch1\u003e${title}\u003c/h1\u003e\n\t\t\t\u003cp\u003e${desc}\u003c/p\u003e\n\t\t\u003c/main\u003e\n\t`)\n```\n\n| Browser | Node.js                                                                                             |\n| ------- | --------------------------------------------------------------------------------------------------- |\n| ✅      | 🚸 \u003cbr/\u003e Shadow Dom isn't supported. An inside content of Shadow Dom is shown as just an innerHTML. |\n\n---\n\n## `subscribe`\n\n`subscribe` is a lit directive.\n\nSubscribe to `Observable\u003cT\u003e` of RxJS and re-rendering with the passed callback function.\n\nWhen the directive part is removed or the passed observable is changed, the unused subscription will automatically `unsubscribe`.\n\n```ts\nimport { html } from 'lit'\nimport { subscribe } from '@aggre/ullr'\nimport { timer as _timer } from 'rxjs'\n\nexport const timer = (initialDelay: number, period: number) =\u003e\n\tsubscribe(\n\t\t_timer(initialDelay, period),\n\t\t(x) =\u003e html` \u003cp\u003e${x}\u003c/p\u003e `,\n\t\thtml` \u003cp\u003eDefault content\u003c/p\u003e `,\n\t)\n```\n\n| Browser | Node.js |\n| ------- | ------- |\n| ✅      | ✅      |\n\n---\n\n## `createCustomElements`\n\n`createCustomElements` creates a class that can be passed to `customElements.define`.\n\n```ts\nimport { createCustomElements } from '@aggre/ullr'\nimport { main } from './main'\n\nconst observedAttributes = ['title', 'desc']\n\nconst template = ([title, desc]) =\u003e main(title, desc)\n\nwindow.customElements.define(\n\t'x-app',\n\tcreateCustomElements(template, observedAttributes),\n)\n```\n\n| Browser | Node.js |\n| ------- | ------- |\n| ✅      | ❌      |\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faggre%2Fullr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faggre%2Fullr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faggre%2Fullr/lists"}