{"id":17559854,"url":"https://github.com/willybrauner/compose","last_synced_at":"2025-04-28T10:47:05.563Z","repository":{"id":38238351,"uuid":"337246393","full_name":"willybrauner/compose","owner":"willybrauner","description":"Compose is a small and type-safe library that links your javascript to your DOM.","archived":false,"fork":false,"pushed_at":"2024-02-15T17:58:37.000Z","size":881,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-18T15:16:33.976Z","etag":null,"topics":["atomic-design","components","dom","dom-manipulation","page-transitions","query","typescript","vanilla-js"],"latest_commit_sha":null,"homepage":"","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/willybrauner.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,"publiccode":null,"codemeta":null}},"created_at":"2021-02-09T00:15:54.000Z","updated_at":"2024-01-13T17:14:10.000Z","dependencies_parsed_at":"2024-10-04T17:00:17.525Z","dependency_job_id":"76a29f71-3b43-4348-b060-a863a9635f56","html_url":"https://github.com/willybrauner/compose","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willybrauner%2Fcompose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willybrauner%2Fcompose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willybrauner%2Fcompose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willybrauner%2Fcompose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willybrauner","download_url":"https://codeload.github.com/willybrauner/compose/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251298159,"owners_count":21566966,"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":["atomic-design","components","dom","dom-manipulation","page-transitions","query","typescript","vanilla-js"],"created_at":"2024-10-21T11:07:59.146Z","updated_at":"2025-04-28T10:47:05.543Z","avatar_url":"https://github.com/willybrauner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eCompose\u003c/h1\u003e\n\n![](documentation/static/img/logo.png)\n\n![](https://img.shields.io/npm/v/@wbe/compose/latest.svg)\n![](https://img.shields.io/bundlephobia/minzip/@wbe/compose.svg)\n![](https://img.shields.io/npm/dt/@wbe/compose.svg)\n![](https://img.shields.io/npm/l/@wbe/compose.svg)\n\nCompose is a small library that help to links your javascript to your DOM.  \n_⚠️ This library is work in progress, the API is subject to change until the v1.0 release._\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003c/div\u003e\n\n## Summary\n\n- [Installation](#Installation)\n- [Component](#Component)\n  - [add](#add)\n  - [addAll](#addAll)\n  - [find](#find)\n  - [findAll](#findAll)\n- [lifecycle](#lifecycle)\n  - [beforeMount](#beforeMount)\n  - [mounted](#mounted)\n  - [unmounted](#unmounted)\n- [workflow](#Workflow)\n- [Credits](#Credits)\n- [Licence](#Licence)\n\n## Installation\n\n```shell\n$ npm i @wbe/compose\n```\n\n## Component\n\n### add\n\nThis method allows to 'add' new Component instance to the tree.\nIt returns a single instance and associated properties.\n\nAdd component inside the class:\n\n```js\nclass Foo extends Component {\n  bar = this.add(Bar)\n\n  method() {\n    // then, access child Bar instance\n    this.bar.root\n    this.bar.mounted()\n    this.bar.unmounted()\n    // etc...\n  }\n}\n```\n\nThe method accepts a static props parameter which we can access from the new Bar component via `this.props`.\n\n```js\nbar = this.add(Bar, { props: { foo: \"bar\" } })\n```\n\n### addAll\n\n`addAll` will return an array of instances.\n\n```html\n\u003cdiv\u003e\n  \u003cdiv class=\"Bar\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"Bar\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nclass Foo extends Component {\n  bars = this.addAll(Bar)\n  // Returns array of Bar: [Bar, Bar]\n}\n```\n\n### `find`\n\n`find` is a simple `this.root.querySelector()` wrapper.  \nThis method allows retrieving `BEM` element of current $root component.\n\n```html\n\u003cdiv class=\"Bar\"\u003e\n  \u003ch1 class=\"Bar_title\"\u003eHello\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n```js\nclass Bar extends Component {\n  // \u003ch1 class=\"Bar_title\"\u003eHello\u003c/h1\u003e can be query with:\n  $title = this.find(\"_title\")\n  // or\n  $title = this.find(\"Bar_title\")\n}\n```\n\n### `findAll`\n\n`findAll` is a simple `this.$root.querySelectorAll()` wrapper.  \nThis method returns a DOM Element array.\n\n```html\n\u003cdiv class=\"Bar\"\u003e\n  \u003cdiv class=\"Bar_icon\"\u003eicon\u003c/div\u003e\n  \u003cdiv class=\"Bar_icon\"\u003eicon\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nclass Bar extends Component {\n  $icons = this.findAll(\"_icon\")\n  // [div.Bar_icon, div.Bar_icon]\n}\n```\n\n## lifecycle\n\n### beforeMount\n\nEach class extended by `Component` provide a life-cycle methods collection.\nIt's particularly useful when `Stack` class is used.\n\n`beforeMount(): void`\n\nMethod called before class component is mounted, in at begining of class constructor.\n\n### mounted\n\n`mounted(): (()=\u003e void) | void`\n\nMethod called after class component is mounted. Children component instances are now available.\nIt can return a function to be called when the component is unmounted.\n\n### unmounted\n\n`unmounted(): void`\n\nMethod called after class component is unmounted.\nThe parent component observer will called this unmounted method automatically if the current component is removed from DOM.\nAll children component instances are also unmounted after this method is called.\n\n## Workflow\n\n- Clone this repo\n\n```shell\n# install dependencies\npnpm i\n\n# build and watch lib changes\npnpm run build:watch\n\n# start tests and watch\npnpm run test:watch\n\n# start dev server for all examples\npnpm run dev\n\n# Or run a specific example\npnpm run dev --scope {example-name}\n```\n\n## Credits\n\n[© Willy Brauner](https://willybrauner.com)\n\n## Licence\n\n[MIT](./LICENCE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillybrauner%2Fcompose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillybrauner%2Fcompose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillybrauner%2Fcompose/lists"}