Pimped Proxy is a comprehensive, simple, ES5 compatible, lightweight (~2KB) and universal implementation of Proxy for JavaScript and TypeScript. It is not a replacement of the ES2015 Proxy object but it gives a simplest way to:
- lookup both simple properties and more complex paths
- transform data on the fly without altering objects
- flatten complex nested objects to a single level
- make aggregations (like arithmetical operations) on the fly
- create new full-proxy objects
- give an existing object the capability to proxy some properties
The easiest way is to install pimped-proxy as dependency:
npm install pimped-proxy --savevar Proxy = require('pimped-proxy');
var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, ['brand', 'model', 'power']);
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`);
// Displays "I bought a Peugeot 308 of 112hp"var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, ['brand', 'model', 'power']);
car.power = '250hp'
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`);
// Displays "I bought a Peugeot 308 of 250hp"var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, ['brand', 'model', 'power']);
carProxy.brand = 'Renault';
carProxy.model = 'Clio';
console.log(`I bought a ${car.brand} ${car.model} of ${car.power}`);
// Displays "I bought a Renault Clio of 112hp"var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, ['brand', 'model']);
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power||'??'}`);
// Displays "I bought a Peugeot 308 of ??"Proxying with a path will just retrieve the value from the target object after evaluation of the path
var car = {
brand: 'Peugeot',
model: '308',
engine: {
power: '112hp'
}
};
var carProxy = new Proxy(car, {
brand: 'brand',
model: 'model',
power: 'engine.power'
);
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`);
// Displays "I bought a Peugeot 308 of 112hp"Path resolution uses Lo-Dash like get and set methods.
var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, {
brand: {
get: function (value) {
return value
}
},
model: {
get: function (value) {
return value ' GTI'
}
},
power: {
get: function (value) {
return '270hp'
}
}
});
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`);
// Displays "I bought a Peugeot 308 GTI of 270hp"var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, {
brand: {
set: (value) => {
return String(value).toUpperCase()
}
},
model: {
set: (value) => {
return value ' GTI'
}
},
power: {
set: (value) => {
return '270hp'
}
}
});
carProxy.brand = 'Renault';
carProxy.model = 'Clio';
carProxy.power = '140hp';
console.log(`I bought a ${car.brand} ${car.model} of ${car.power}`);
// Displays "I bought a RENAULT Clio GTI of 270hp"var car = {
brand: 'Peugeot',
model: '308',
engine: {
power: '270hp'
}
};
var carProxy = new Proxy(car, {
brand: 'brand',
model: {
get: function (value) {
return value ' GTI'
}
},
power: 'engine.power'
});
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`);
// Displays "I bought a Peugeot 308 GTI of 270hp"var existingCar = {
name: 'MyCar',
power: '250hp'
};
var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
Proxy.lookup(existingCar, car, ['brand', 'model']);
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power} and I called it ${carProxy.name}`);
// Displays "I bought a Peugeot 308 of 250hp and I called it MyCar"import { Proxy } from 'pimped-proxy'
const car: ICar = {
brand: 'Peugeot',
model: '308',
power: '112hp'
}
const carProxy: ICar = <ICar> new Proxy(car, ['brand', 'model', 'power'])
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`)
// Displays "I bought a Peugeot 308 of 112hp"<script src="pimped-proxy/dist/proxy.browser.js"></script>
<script>
var car = {
brand: 'Peugeot',
model: '308',
power: '112hp'
};
var carProxy = new Proxy(car, ['brand', 'model', 'power']);
console.log(`I bought a ${carProxy.brand} ${carProxy.model} of ${carProxy.power}`);
// Displays "I bought a Peugeot 308 of 112hp"
</script>Code licensed under MIT License.