{"id":13673676,"url":"https://github.com/staltz/toy-rx","last_synced_at":"2025-05-07T01:50:06.844Z","repository":{"id":66182277,"uuid":"86154147","full_name":"staltz/toy-rx","owner":"staltz","description":"A tiny implementation of RxJS that actually works, for learning","archived":false,"fork":false,"pushed_at":"2017-03-25T12:09:42.000Z","size":10,"stargazers_count":295,"open_issues_count":0,"forks_count":29,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-01-03T01:17:12.735Z","etag":null,"topics":["observables","reactive","reactive-programming","rx","rxjs","rxjs5"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/staltz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-25T11:59:21.000Z","updated_at":"2024-04-14T20:45:35.000Z","dependencies_parsed_at":"2023-04-11T17:17:35.017Z","dependency_job_id":null,"html_url":"https://github.com/staltz/toy-rx","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/staltz%2Ftoy-rx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staltz%2Ftoy-rx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staltz%2Ftoy-rx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/staltz%2Ftoy-rx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/staltz","download_url":"https://codeload.github.com/staltz/toy-rx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233042729,"owners_count":18616064,"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":["observables","reactive","reactive-programming","rx","rxjs","rxjs5"],"created_at":"2024-08-02T10:00:54.299Z","updated_at":"2025-01-08T14:18:21.661Z","avatar_url":"https://github.com/staltz.png","language":"JavaScript","funding_links":[],"categories":["Frameworks/Libraries"],"sub_categories":["Tools"],"readme":"# Toy RxJS\n\nA tiny implementation of RxJS that actually works, for learning.\n\n## Usage\n\n`npm install toy-rx`\n\n```js\nconst Rx = require('toy-rx')\nRx.Observable.fromEvent = require('toy-rx/fromEvent')\nRx.Observable.prototype.map = require('toy-rx/map')\nRx.Observable.prototype.filter = require('toy-rx/filter')\nRx.Observable.prototype.delay = require('toy-rx/delay')\n\nRx.Observable.fromEvent(document, 'click')\n  .delay(500)\n  .map(ev =\u003e ev.clientX)\n  .filter(x =\u003e x \u003c 200)\n  .subscribe({\n    next: x =\u003e console.log(x),\n    error: e =\u003e console.error(e),\n    complete: () =\u003e {},\n  })\n```\n\n## Why\n\nI made this so people can look into the implementation of a simple RxJS and feel like they can actually understand it. I mean, the implementation is literally this below:\n\n```js\nclass Subscription {\n  constructor(unsubscribe) {\n    this.unsubscribe = unsubscribe;\n  }\n}\n\nclass Subscriber extends Subscription {\n  constructor(observer) {\n    super(function unsubscribe() {});\n    this.observer = observer;\n  }\n\n  next(x) {\n    this.observer.next(x);\n  }\n\n  error(e) {\n    this.observer.error(e);\n    this.unsubscribe();\n  }\n\n  complete() {\n    this.observer.complete();\n    this.unsubscribe();\n  }\n}\n\nclass Observable {\n  constructor(subscribe) {\n    this.subscribe = subscribe;\n  }\n\n  static create(subscribe) {\n    return new Observable(function internalSubscribe(observer) {\n      const subscriber = new Subscriber(observer);\n      const subscription = subscribe(subscriber);\n      subscriber.unsubscribe = subscription.unsubscribe.bind(subscription);\n      return subscription;\n    });\n  }\n}\n\nclass Subject extends Observable {\n  constructor() {\n    super(function subscribe(observer) {\n      this.observers.push(observer);\n      return new Subscription(() =\u003e {\n        const index = this.observers.indexOf(observer);\n        if (index \u003e= 0) this.observers.splice(index, 1);\n      });\n    });\n    this.observers = [];\n  }\n\n  next(x) {\n    this.observers.forEach((observer) =\u003e observer.next(x));\n  }\n\n  error(e) {\n    this.observers.forEach((observer) =\u003e observer.error(e));\n  }\n\n  complete() {\n    this.observers.forEach((observer) =\u003e observer.complete());\n  }\n}\n```\n\nSee? It fit easily in a README and you weren't scared of looking at it even though it's source code. That was `index.js`.\n\nWhere are all the operators? Well, here's `map` for instance:\n\n```js\nfunction map(transformFn) {\n  const inObservable = this;\n  const outObservable = Rx.Observable.create(function subscribe(outObserver) {\n    const inObserver = {\n      next: (x) =\u003e {\n        try {\n          var y = transformFn(x);\n        } catch (e) {\n          outObserver.error(e);\n          return;\n        }\n        outObserver.next(y);\n      },\n      error: (e) =\u003e {\n        outObserver.error(e);\n      },\n      complete: () =\u003e {\n        outObserver.complete();\n      }\n    };\n    return inObservable.subscribe(inObserver);\n  });\n  return outObservable;\n}\n```\n\nWhat about `filter`, and `combineLatest` and all the rest? Just look for yourself, don't be afraid to click on the JS files in this project.\n\n## How is this different to the official RxJS?\n\nThis is just meant for education. It's missing a ton of stuff that the [official RxJS](http://reactivex.io/rxjs/) covers, such as:\n\n- Subscribe supports partial Observer objects\n- Subscribe supports functions as arguments\n- Dozens of useful operators\n- The wonderful and underrated [Lift Architecture](https://github.com/ReactiveX/rxjs/blob/3ced24f2192289e441e88368c02c9df86bcb11e0/src/Observable.ts#L60-L72)\n- Schedulers (and in turn, testing with marble diagrams)\n- Corner cases covered against bugs\n- Thorough documentation and examples\n- Thorough tests\n- TypeScript support\n\nOverall, this project is a simplification of RxJS which describes \"close enough\" how RxJS works, but has a lot of holes and bugs because we deliberately are not taking care of many corner cases in this code.\n\nUse this project to gain confidence peeking into the implementation of a library and get familiar with RxJS internals.\n\n## Contributing\n\nDon't bother submitting PRs for this project to add more operators and more bug safety. Let's just keep this simple enough to read for any developer with a few minutes of free time.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaltz%2Ftoy-rx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstaltz%2Ftoy-rx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaltz%2Ftoy-rx/lists"}