{"id":13493336,"url":"https://github.com/xripcsu/rxjs-watcher","last_synced_at":"2025-03-28T11:32:26.437Z","repository":{"id":41583697,"uuid":"158289610","full_name":"xripcsu/rxjs-watcher","owner":"xripcsu","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-22T08:43:20.000Z","size":2636,"stargazers_count":270,"open_issues_count":6,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-01T19:46:12.381Z","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/xripcsu.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-19T21:01:42.000Z","updated_at":"2024-05-10T00:30:13.000Z","dependencies_parsed_at":"2022-09-16T16:44:41.419Z","dependency_job_id":null,"html_url":"https://github.com/xripcsu/rxjs-watcher","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xripcsu%2Frxjs-watcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xripcsu%2Frxjs-watcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xripcsu%2Frxjs-watcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xripcsu%2Frxjs-watcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xripcsu","download_url":"https://codeload.github.com/xripcsu/rxjs-watcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222376246,"owners_count":16974312,"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-07-31T19:01:14.294Z","updated_at":"2024-10-31T07:31:26.451Z","avatar_url":"https://github.com/xripcsu.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# RxJS watcher\n\nSimple devtools extension to visualize Rxjs observables.\n\n## Installation\n\n### Install npm package\n\n`npm i rxjs-watcher --save-dev`\n\n### Install extension\n\nInstall extension for [chrome](https://chrome.google.com/webstore/detail/rxjs-watcher/dfpjfjpfpjjgoeackldilanadoeaciam) or [firefox](https://addons.mozilla.org/en-US/firefox/addon/rxjs-watcher/)\n\n## How to use\n\n### Basic usage\n\nTo see marbles in extension you have to use \"watch\" operator from rxjs-watcher package.\n\nOperator takes 3 arguments:\n\n- marbleName: string (label to show above marble)\n- duration: number (duration in seconds)\n- selector?: function (function that takes emitted value and return different value which we want to show in extension)\n\n```ts\nimport { watch } from \"rxjs-watcher\";\n\ninterval(2000)\n  .pipe(\n    watch(\"Interval (2000)\", 10),\n    filter(v =\u003e v % 2 === 0),\n    watch(\"Filter odd numbers out\", 10),\n  ).subscribe();\n```\n![demo](assets/basic.gif)\n\nIf you have several watchers in main thread for single observable source, it makes sense to have watchers with same duration.\n\nIf you dont want specify same duration parameter for every watch operator you can use helper function \"getWatchers\" which returns array of operators with specified duration\n\n```ts\nimport { getWatchers } from \"rxjs-watcher\";\n\nconst [w10, w20, w30] = getWatchers(10,20,30);\n\ninterval(1000).pipe(\n  w20('Interval(1000)')\n).subscribe()\n\n```\n\n\n\n### Groups\n\nYou can also group your marbles in to sections by using \"getGroup\" functions which returns rxjs operator.\n\ngetGroup function takes 2 arguments:\n\n- groupName: string (name to show for group)\n- duration: number (duration in seconds that will be used for marbles in group, default is 10)\n\n```ts\nconst innerWatch = getGroup(\"Inner\");\ninterval(2000)\n  .pipe(\n    watch(\"Interval (2000)\", 10),\n    switchMap(id =\u003e interval(500).pipe(innerWatch(\"Interval (500)\"))),\n    watch(\"SwitchMap to interval(500)\", 10),\n    take(10)\n  ).subscribe();\n```\n\n![group demo](assets/group.gif)\n\n## Value viewer \n\nOn the right side you can see resizeable panel in which you can see clicked value.\n\nIt allows you to: \n- Expand all nested objects\n- Collapse all nested objects\n- Filter nested properties by their name\n- Resize panel to fit current content (double click on border)\n\n![ui demo](assets/ui.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxripcsu%2Frxjs-watcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxripcsu%2Frxjs-watcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxripcsu%2Frxjs-watcher/lists"}