{"id":16531975,"url":"https://github.com/shama/computed-proxy","last_synced_at":"2025-09-14T10:31:25.204Z","repository":{"id":57205042,"uuid":"93773308","full_name":"shama/computed-proxy","owner":"shama","description":"Computed properties with JavaScript Proxy","archived":false,"fork":false,"pushed_at":"2017-06-09T03:57:07.000Z","size":23,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-03T04:52:10.878Z","etag":null,"topics":["computed-properties","proxy"],"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/shama.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":"2017-06-08T17:06:18.000Z","updated_at":"2022-03-22T02:32:46.000Z","dependencies_parsed_at":"2022-09-08T06:13:15.786Z","dependency_job_id":null,"html_url":"https://github.com/shama/computed-proxy","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/shama%2Fcomputed-proxy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fcomputed-proxy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fcomputed-proxy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shama%2Fcomputed-proxy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shama","download_url":"https://codeload.github.com/shama/computed-proxy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232968247,"owners_count":18604250,"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":["computed-properties","proxy"],"created_at":"2024-10-11T18:11:19.620Z","updated_at":"2025-01-08T03:20:18.273Z","avatar_url":"https://github.com/shama.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# computed-proxy\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![Downloads][downloads-image]][downloads-url]\n[![js-standard-style][standard-image]][standard-url]\n![experimental][experimental-image]\n\nComputed properties with [JavaScript Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).\n\n### Examples\n\n```js\nconst computed = require('computed-proxy')\n\nconst person = computed({\n  lastName: 'Robinson Young',\n  fullName: computed.property('firstName', 'lastName', {\n    get (key, previous) {\n      return `${this.firstName} ${this.lastName}`\n    }\n  })\n})\n\nperson.firstName = 'Kyle'\nconsole.log(person.fullName) // Kyle Robinson Young\n\nperson.firstName = 'Crystal'\nconsole.log(person.fullName) // Crystal Robinson Young\n```\n\n#### With Arrays\n\n```js\nconst computed = require('computed-proxy')\n\nconst restaurant = computed({\n  food: ['sushi'],\n  menu: computed.property('food', {\n    get (key, previous) {\n      return this.food.join(', ')\n    }\n  })\n})\n\nconsole.log(restaurant.menu) // sushi\n\nrestaurant.food.push('steak')\nconsole.log(restaurant.menu) // sushi, steak\n```\n\n#### With Nested Properties\n\n```js\nconst computed = require('computed-proxy')\n\nconst profile = computed({\n  person: computed({\n    name: 'Kyle',\n    age: 34\n  }),\n  howOld: computed.property('person.name', 'person.age', {\n    get (key, previous) {\n      return `${this.person.name} is ${this.person.age} years old`\n    }\n  })\n})\n\nconsole.log(profile.howOld) // Kyle is 34 years old\n\nprofile.person.name = 'Crystal'\nprofile.person.age = 33\nconsole.log(profile.howOld) // Crystal is 33 years old\n```\n\n#### With Properties Nested in Arrays\n\n```js\nconst computed = require('computed-proxy')\n\nconst restaurant = computed({\n  food: [\n    computed({ name: 'sushi', price: 50 })\n  ],\n  menu: computed.property('food.name', 'food.price', {\n    get (key, previous) {\n      return this.food.map(function (item) {\n        return `${item.name} costs ${item.price}`\n      }).join(', ')\n    }\n  })\n})\n\nconsole.log(restaurant.menu) // sushi costs 50\n\nrestaurant.food.push(computed({ name: 'steak', price: 60 }))\nconsole.log(restaurant.menu) // sushi costs 50, steak costs 60\n\nrestaurant.food[0].price = 70\nconsole.log(restaurant.menu) // sushi costs 70, steak costs 60\n```\n\n#### Volatile\n\nMark properties as `.volatile()` to compute them on every get:\n\n```js\nconst computed = require('computed-proxy')\n\nconst person = computed({\n  firstName: 'Kyle',\n  lastName: 'Robinson Young',\n  fullName: computed.property({\n    get () {\n      return `${this.firstName} ${this.lastName}`\n    }\n  }).volatile()\n})\n\nperson.firstName = 'Crystal'\nconsole.log(person.fullName) // Crystal Robinson Young\n```\n\n#### Manually Trigger a Binding\n\nIf you want to manually mark a property to recompute on next get use `.notifyPropertChange()`:\n\n```js\nconst computed = require('computed-proxy')\n\nconst person = computed({\n  firstName: 'Kyle',\n  lastName: 'Robinson Young',\n  fullName: computed.property('lastName', {\n    get (key, previous) {\n      return `${this.firstName} ${this.lastName}`\n    }\n  })\n})\n\nconsole.log(person.fullName) // Kyle Robinson Young\n\nperson.firstName = 'Crystal'\n// Since fullName isnt bound to firstName, the get doesn't recompute\nconsole.log(person.fullName) // Kyle Robinson Young\n\nperson.notifyPropertChange('fullName')\nconsole.log(person.fullName) // Crystal Robinson Young\n```\n\n#### Read Only By Default\n\nAll properties are read only by default and will throw an error if you try and\nset them. If you want your property to be settable, provide a set function:\n\n```js\nconst computed = require('computed-proxy')\n\nconst person = computed({\n  firstName: 'Kyle',\n  lastName: 'Robinson Young',\n  upperName: computed.property('firstName', 'lastName', {\n    get (key, previous) {\n      return `${this.firstName} ${this.lastName}`.toUpperCase()\n    },\n    set (key, val, previous) {\n      return val.toUpperCase()\n    }\n  })\n})\n\nconsole.log(person.upperName) // KYLE ROBINSON YOUNG\n\nperson.upperName = 'somebody else'\nconsole.log(person.upperName) // SOMEBODY ELSE\n```\n\n#### Shim\n\nIn an environment that doesn't support `Proxy`? Shim it by including this in your code:\n\n```js\nrequire('computed-proxy/shim')\n```\n\n### Similar Projects\n\n* [npmjs.com/computed](https://www.npmjs.com/package/computed)\n* [Ember.js Computed Property](https://emberjs.com/api/classes/Ember.ComputedProperty.html)\n\n# license\n(c) 2017 Kyle Robinson Young. MIT License\n\n[npm-image]: https://img.shields.io/npm/v/computed-proxy.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/computed-proxy\n[travis-image]: https://img.shields.io/travis/shama/computed-proxy/master.svg?style=flat-square\n[travis-url]: https://travis-ci.org/shama/computed-proxy\n[downloads-image]: http://img.shields.io/npm/dm/vel.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/computed-proxy\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard-url]: https://github.com/feross/standard\n[experimental-image]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshama%2Fcomputed-proxy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshama%2Fcomputed-proxy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshama%2Fcomputed-proxy/lists"}