Nice Philanthropist Metalhead
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

computed-proxy

1.0.4 • Public • Published

computed-proxy

NPM version build status Downloads js-standard-style experimental

Computed properties with JavaScript Proxy.

Examples

const computed = require('computed-proxy')
 
const person = computed({
  lastName: 'Robinson Young',
  fullName: computed.property('firstName', 'lastName', {
    get (key, previous) {
      return `${this.firstName} ${this.lastName}`
    }
  })
})
 
person.firstName = 'Kyle'
console.log(person.fullName) // Kyle Robinson Young
 
person.firstName = 'Crystal'
console.log(person.fullName) // Crystal Robinson Young

With Arrays

const computed = require('computed-proxy')
 
const restaurant = computed({
  food: ['sushi'],
  menu: computed.property('food', {
    get (key, previous) {
      return this.food.join('')
    }
  })
})
 
console.log(restaurant.menu) // sushi
 
restaurant.food.push('steak')
console.log(restaurant.menu) // sushi, steak

With Nested Properties

const computed = require('computed-proxy')
 
const profile = computed({
  person: computed({
    name: 'Kyle',
    age: 34
  }),
  howOld: computed.property('person.name', 'person.age', {
    get (key, previous) {
      return `${this.person.name} is ${this.person.age} years old`
    }
  })
})
 
console.log(profile.howOld) // Kyle is 34 years old
 
profile.person.name = 'Crystal'
profile.person.age = 33
console.log(profile.howOld) // Crystal is 33 years old

With Properties Nested in Arrays

const computed = require('computed-proxy')
 
const restaurant = computed({
  food: [
    computed({ name: 'sushi', price: 50 })
  ],
  menu: computed.property('food.name', 'food.price', {
    get (key, previous) {
      return this.food.map(function (item) {
        return `${item.name} costs ${item.price}`
      }).join('')
    }
  })
})
 
console.log(restaurant.menu) // sushi costs 50
 
restaurant.food.push(computed({ name: 'steak', price: 60 }))
console.log(restaurant.menu) // sushi costs 50, steak costs 60
 
restaurant.food[0].price = 70
console.log(restaurant.menu) // sushi costs 70, steak costs 60

Volatile

Mark properties as .volatile() to compute them on every get:

const computed = require('computed-proxy')
 
const person = computed({
  firstName: 'Kyle',
  lastName: 'Robinson Young',
  fullName: computed.property({
    get () {
      return `${this.firstName} ${this.lastName}`
    }
  }).volatile()
})
 
person.firstName = 'Crystal'
console.log(person.fullName) // Crystal Robinson Young

Manually Trigger a Binding

If you want to manually mark a property to recompute on next get use .notifyPropertChange():

const computed = require('computed-proxy')
 
const person = computed({
  firstName: 'Kyle',
  lastName: 'Robinson Young',
  fullName: computed.property('lastName', {
    get (key, previous) {
      return `${this.firstName} ${this.lastName}`
    }
  })
})
 
console.log(person.fullName) // Kyle Robinson Young
 
person.firstName = 'Crystal'
// Since fullName isnt bound to firstName, the get doesn't recompute
console.log(person.fullName) // Kyle Robinson Young
 
person.notifyPropertChange('fullName')
console.log(person.fullName) // Crystal Robinson Young

Read Only By Default

All properties are read only by default and will throw an error if you try and set them. If you want your property to be settable, provide a set function:

const computed = require('computed-proxy')
 
const person = computed({
  firstName: 'Kyle',
  lastName: 'Robinson Young',
  upperName: computed.property('firstName', 'lastName', {
    get (key, previous) {
      return `${this.firstName} ${this.lastName}`.toUpperCase()
    },
    set (key, val, previous) {
      return val.toUpperCase()
    }
  })
})
 
console.log(person.upperName) // KYLE ROBINSON YOUNG
 
person.upperName = 'somebody else'
console.log(person.upperName) // SOMEBODY ELSE

Shim

In an environment that doesn't support Proxy? Shim it by including this in your code:

require('computed-proxy/shim')

Similar Projects

license

(c) 2017 Kyle Robinson Young. MIT License

install

npm i computed-proxy

Downloadsweekly downloads

6

version

1.0.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability