{"id":20513801,"url":"https://github.com/webreflection/qsa-observer","last_synced_at":"2025-04-14T00:01:28.183Z","repository":{"id":53854420,"uuid":"284249321","full_name":"WebReflection/qsa-observer","owner":"WebReflection","description":"handle elements lifecycle through CSS selectors","archived":false,"fork":false,"pushed_at":"2023-03-04T19:40:07.000Z","size":118,"stargazers_count":43,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T03:46:08.298Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/WebReflection.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}},"created_at":"2020-08-01T11:46:22.000Z","updated_at":"2024-11-04T06:24:26.000Z","dependencies_parsed_at":"2024-02-17T06:31:34.659Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/qsa-observer","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"b1770400603ece4f3717fd15dd9097c7ad85ce4f"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fqsa-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fqsa-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fqsa-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fqsa-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/qsa-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799931,"owners_count":21163403,"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-11-15T21:13:20.886Z","updated_at":"2025-04-14T00:01:28.125Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# qsa-observer\n\n![bird watch](./qsa-observer-head.jpg)\n\n\u003csup\u003e**Social Media Photo by [Kevin Maillefer](https://unsplash.com/@kmaillefer) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\n\nGiven an array of selectors, handles any matching element that was either connected, or disconnected, from an observed element, or document.\n\n\n### Differently from MutationObserver\n\n  * each element is granted to be handled, whenever it's observed via one, or more, selectors\n  * all observed elements will pass through `handle(element, connected, selector)` utility, per each matching selector\n  * elements injected through `innerHTML`, or created offline, will be handled too once live\n\n\n### Example\n\n```js\nimport QSAO from 'qsa-observer';\n\n// an Array of CSS selectors to observe\nconst query = ['div'];\n\n// where to observe mutations, document by default\nconst root = document;\n\nconst {\n  drop,     // an utility to drop a list of elements from being considered live\n  flush,    // an utility to flush synchronously all queued mutations\n  observer, // the MutationObserver created by QSAO(...)\n  parse     // an utility to parse new elements\n            // (i.e. after adding a selector to the query list)\n} = QSAO({\n  query,  // list of selectors to observe\n  root,   // optional, as it's document by default\n\n  // the method that receives all elements that match one or more\n  // selectors in the query, and are either connected or disconnected\n  handle(element, connected, selector) {\n    const event = connected ? 'connected' : 'disconnected';\n    console.log(element, event, selector);\n  }\n});\n\n// example: add another selector to observe and pass through the handle\nconst observeMore = selector =\u003e {\n  if (!query.includes(selector)) {\n    query.push(selector);\n    parse(root.querySelectorAll(selector));\n  }\n};\n\n// example: watch 'p' nodes too after a second\nsetTimeout(observeMore, 1000, 'p');\n```\n\n\n### Libraries based on qsa-observer\n\n  * [custom-elements-ie](https://github.com/WebReflection/custom-elements-ie#readme)\n  * [custom-elements-builtin](https://github.com/WebReflection/custom-elements-builtin#readme)\n  * [as-custom-element](https://github.com/WebReflection/as-custom-element#readme)\n  * [wicked-elements](https://github.com/WebReflection/wicked-elements#readme)\n  * [hooked-elements](https://github.com/WebReflection/hooked-elements#readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fqsa-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fqsa-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fqsa-observer/lists"}