{"id":22382351,"url":"https://github.com/jcoreio/meteor-immutable-observer","last_synced_at":"2025-07-31T03:31:43.641Z","repository":{"id":57295850,"uuid":"42254845","full_name":"jcoreio/meteor-immutable-observer","owner":"jcoreio","description":"Autoupdating Immutable.js views of Meteor live queries (useful for React pure render components!)","archived":false,"fork":false,"pushed_at":"2016-10-31T22:41:51.000Z","size":57,"stargazers_count":18,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-08T10:51:22.549Z","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/jcoreio.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":"2015-09-10T15:56:52.000Z","updated_at":"2021-03-07T16:19:31.000Z","dependencies_parsed_at":"2022-08-30T22:30:37.024Z","dependency_job_id":null,"html_url":"https://github.com/jcoreio/meteor-immutable-observer","commit_stats":null,"previous_names":["mindfront/meteor-immutable-observer"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/jcoreio/meteor-immutable-observer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Fmeteor-immutable-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Fmeteor-immutable-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Fmeteor-immutable-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Fmeteor-immutable-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/meteor-immutable-observer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Fmeteor-immutable-observer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267983365,"owners_count":24176058,"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","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-12-05T00:12:37.398Z","updated_at":"2025-07-31T03:31:43.373Z","avatar_url":"https://github.com/jcoreio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# meteor-immutable-observer\n\n**(work in progress!)**\n\nThis uses [`Mongo.Cursor.observe`](http://docs.meteor.com/#/full/observe)  and `Mongo.Cursor.observeChanges`\nto provide [Immutable.js](http://facebook.github.io/immutable-js/) views of the collection and its documents.\nThis is especially handy to pass to React pure render components; when documents are changed, a custom\n`updateDeep` method is used so that objects/arrays inside them that didn't change will still be `===` their\nprevious values.\n\n## Installation\n\n### Node/Webpack/Browserify/jspm/HTML9 Responsive Boilerstrap JS\n```\nnpm install meteor-immutable-observer\n```\nThen `var ImmutableObserver = require('meteor-immutable-observer')`\n\nThere are Webpack UMDs in the `lib/umd` folder (they rely on `immutable` being in a commons chunk)\n\n### Meteor Package *(not deployed here yet)*\n```\nmeteor add mindfront:immutable-observer\n```\nThis will put `ImmutableObserver` in the package scope.\n\n## API\n\n**Note**: this doesn't seem to work properly when you `Meteor.subscribe()` to your collection within the same reactive computation.  I haven't yet investigated exactly why.  Right now I just `subscribe()` outside of any reactive computation.\n\n### `ImmutableObserver.Map(cursor: Mongo.Cursor)`\n\nBegins a live query via `cursor.observeChanges`, and tracks changes in an `Immutable.Map` of documents indexed by `_id`.\n\nTheoretically this should perform better than `ImmutableObserver.List`, since it doesn't keep track of document order.\n\n**This should not be called within a reactive computation.**  Since its `observeChanges` can trigger dependency\nchanges, it could cause an infinite autorun loop.\n\n*Make sure you `stop()` the observer when done with it.*\n\n###### Example:\n\n```javascript\nvar Players = new Meteor.Collection('players');\nvar observer = ImmutableObserver.Map(Players.find({}, {limit: 10}));\n...\nobserver.stop();\n```\n\n#### Methods\n\n##### `documents(): Immutable.Map`\n\nReturns an `Immutable.Map` of the currently available documents, indexed by `_id`.\n\nAlso registers a dependency on the underlying live query.\n\n##### `stop()`\n\nStops the live query (calls `stop()` on what `observeChanges` returned)\n\n### `ImmutableObserver.List(cursor: Mongo.Cursor)`\n\nBegins a live query via `cursor.observe`, and tracks changes in an `Immutable.List` of documents in order.\n\n**This should not be called within a reactive computation.**  Since its `observe` can trigger dependency\nchanges, it could cause an infinite autorun loop.\n\n*Make sure you `stop()` the observer when done with it.*\n\n###### Example:\n\n```javascript\nvar Players = new Meteor.Collection('players');\nvar observer = ImmutableObserver.List(Players.find({}, {sort: {score: 1}, limit: 10}));\n...\nobserver.stop();\n```\n\n#### Methods\n\n##### `documents(): Immutable.List`\n\nReturns an `Immutable.List` of the currently available documents.\n\nAlso registers a dependency on the underlying live query.\n\n##### `stop()`\n\nStops the live query (calls `stop()` on what `observe` returned)\n\n## Example (not tested)\n\n```jsx\nimport React from 'react';\nimport classNames from 'classnames';\nimport ImmutableObserver from 'meteor-immutable-observer';\nimport shouldPureComponentUpdate from 'react-pure-render/function';\n\nclass Post extends React.Component {\n  shouldComponentUpdate = shouldPureComponentUpdate\n  render() {\n    var {post} = this.props;\n    return \u003cdiv className=\"panel\"\u003e\n      \u003cdiv className=\"panel-heading\"\u003e\n        \u003ch3 className=\"panel-title\"\u003e{post.get('title')}\u003c/h3\u003e\n        \u003cbutton\u003e\u003ci className={post.get('isLiked') ? \"glyphicon glyphicon-heart\" : \"glyphicon glyphicon-heart-empty\"}/\u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"panel-body\"\u003e\n        {post.get('content')}\n      \u003c/div\u003e\n    \u003c/div\u003e;\n  }  \n}\n\nclass PostList extends React.Component {\n  shouldComponentUpdate = shouldPureComponentUpdate\n  render() {\n    var {posts} = this.props;\n    var postComponents = [];\n    posts.forEach(post =\u003e postComponents.push(\u003cPost post={post}/\u003e));\n    return \u003cdiv className=\"posts\"\u003e\n      {postComponents}\n    \u003c/div\u003e;\n  }\n}\n\nexport default React.createClass({\n  mixins: [ReactMeteorData], \n  componentWillMount() {\n    this.subscription = Meteor.subscribe('posts');\n    this.postsObserver = ImmutableObserver.List(Posts.find({}, {sort: {createdDate: 1}}));\n  }\n  componentWillUnmount() {\n    this.subscription.stop();\n    this.postsObserver.stop();\n  }\n  getMeteorData() {\n    return {\n      posts: postsObserver.documents(),\n    };\n  },\n  render() {\n    return \u003cPostList {...this.props} {...this.data}/\u003e;\n  }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Fmeteor-immutable-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Fmeteor-immutable-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Fmeteor-immutable-observer/lists"}