├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── package.json ├── src ├── app.js └── runtime.js └── test └── test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | .idea 3 | node_modules 4 | test-compiled 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Krzysztof Kaczor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # babel-plugin-proxy 2 | [![JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) 3 | 4 | Use ES6 proxies today! 5 | 6 | ## Installation 7 | 8 | npm install babel-plugin-proxy --save-dev 9 | 10 | ## Motivation 11 | 12 | Proxies are awesome feature of ES2015 that enables redefining some language operations. For example we can intercept every object property access with our own function. 13 | 14 | The problem is that proper proxy implementation requires native browser support (currently it works in Firefox and Edge). This plugin is proof of concept that proxies can be implemented with ES5 features. It is not suitable for production environments because performance impact is huge. 15 | 16 | ## How does it work? 17 | 18 | We are intercepting every property access (except these connected with function invocation) and property assignment with custom interceptor functions that performs runtime check if object is proxied. 19 | 20 | proxy.foo = 5; 21 | proxy.foo; 22 | 23 | becomes: 24 | 25 | globalSetInterceptor(proxy, "foo", 5); 26 | globalGetInterceptor(proxy, 'foo'); 27 | 28 | These interceptors performs runtime check if object should be proxied. You can check out whole runtime [here](https://github.com/krzkaczor/babel-plugin-proxy/blob/master/src/runtime.js) 29 | 30 | ## Example 31 | Proxies for example allow us to create objects that will warn us when `undefined` key is being accessed. 32 | 33 | var proxy = new Proxy({}, { 34 | get: function(target, propKey) { 35 | if (!(propKey in target)) { 36 | console.log("Accessing undefined key!"); 37 | } 38 | 39 | return target[propKey]; 40 | } 41 | }); 42 | 43 | proxy.a = 5; 44 | console.log(proxy.a); 45 | console.log(proxy.b); 46 | 47 | output: 48 | 49 | 5 50 | Accessing undefined key! 51 | undefined -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "babel-plugin-proxy", 3 | "version": "1.0.6", 4 | "description": "Use ES2015 proxies today!", 5 | "main": "build/app.js", 6 | "scripts": { 7 | "compile": "babel -d build/ src/", 8 | "prestart": "npm run compile", 9 | "start": "node build/app.js", 10 | "pretest": "npm run compile", 11 | "prepublish": "npm run compile", 12 | "lint": "standard \"src/app.js\" \"test/**/*.js\"", 13 | "test": "npm run lint && mocha --compilers js:babel-register" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/krzkaczor/babel-plugin-proxy.git" 18 | }, 19 | "author": "Krzysztof Kaczor", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/krzkaczor/babel-plugin-proxy/issues" 23 | }, 24 | "homepage": "https://github.com/krzkaczor/babel-plugin-proxy", 25 | "dependencies": { 26 | "babel-preset-es2015": "6.3.13", 27 | "babel-traverse": "6.3.26", 28 | "babylon": "6.3.26", 29 | "babel-cli": "6.3.17", 30 | "babel-core": "6.3.26" 31 | }, 32 | "devDependencies": { 33 | "babel-register": "6.11.6", 34 | "chai": "3.5.0", 35 | "mocha": "2.5.3", 36 | "standard": "7.1.2" 37 | }, 38 | "standard": { 39 | "env": [ "mocha" ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const babylon = require('babylon') 3 | 4 | function attachRuntime (programPath) { 5 | // get and parse runtime - i think that there should be better ways to do this... 6 | // addHelper is internal thing that's why i didn't use it 7 | const runtimeSourceCode = fs.readFileSync(require.resolve('./runtime')).toString() 8 | const runtimeAst = babylon.parse(runtimeSourceCode) 9 | 10 | programPath.unshiftContainer('body', runtimeAst.program.body) 11 | } 12 | 13 | export default function ({ types: t }) { 14 | const proxyNodes = { 15 | MemberExpression (path) { 16 | if (this.disableGetTrap[ this.disableGetTrap.length - 1 ]) return 17 | 18 | path.replaceWith( 19 | t.callExpression(t.identifier('globalGetInterceptor'), [ path.node.object, t.stringLiteral(path.node.property.name) ]) 20 | ) 21 | }, 22 | 23 | AssignmentExpression (path) { 24 | if (t.isMemberExpression(path.node.left)) { 25 | if (this.disableSetTrap[ this.disableSetTrap.length - 1 ]) return 26 | 27 | const memberExpr = path.node.left 28 | path.replaceWith( 29 | t.callExpression(t.identifier('globalSetInterceptor'), [ 30 | memberExpr.object, 31 | t.stringLiteral(memberExpr.property.name), 32 | path.node.right 33 | ]) 34 | ) 35 | } 36 | }, 37 | 38 | NewExpression: { 39 | enter (path) { 40 | if (path.node.callee.name === 'Proxy') { 41 | this.disableGetTrap.push(true) 42 | this.disableSetTrap.push(true) 43 | } 44 | }, 45 | 46 | exit (path) { 47 | if (path.node.callee.name === 'Proxy') { 48 | this.disableGetTrap.pop() 49 | this.disableSetTrap.pop() 50 | } 51 | } 52 | } 53 | } 54 | 55 | return { 56 | visitor: { 57 | Program (path) { 58 | path.traverse(proxyNodes, { disableGetTrap: [], disableSetTrap: [] }) 59 | 60 | attachRuntime(path) 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/runtime.js: -------------------------------------------------------------------------------- 1 | var defaultHandler = { 2 | get: (obj, propName) => obj[propName], 3 | set: (obj, propName, val) => { obj[propName] = val; } 4 | }; 5 | 6 | var Proxy = function(target, handler) { 7 | this.target = target; 8 | this.handler = handler; 9 | this.handler.get = this.handler.get || defaultHandler.get; 10 | this.handler.set = this.handler.set || defaultHandler.set; 11 | }; 12 | 13 | Proxy.prototype.getTrap = function(propertyName) { 14 | return this.handler.get(this.target, propertyName); 15 | }; 16 | 17 | Proxy.prototype.setTrap = function(propertyName, value) { 18 | this.handler.set(this.target, propertyName, value); 19 | }; 20 | 21 | 22 | function globalGetInterceptor(object, propertyName) { 23 | if (object instanceof Proxy) { 24 | return object.getTrap(propertyName); 25 | } 26 | var value = defaultHandler.get(object, propertyName); 27 | if (typeof value === 'function') { 28 | return value.bind(object) 29 | } else { 30 | return value 31 | } 32 | } 33 | 34 | function globalSetInterceptor(object, propertyName, value) { 35 | if (object instanceof Proxy) { 36 | return object.setTrap(propertyName, value); 37 | } 38 | defaultHandler.set(propertyName, value); 39 | } -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | const expect = require('chai').expect 2 | const babel = require('babel-core') 3 | 4 | describe('babel-plugin-proxy', function () { 5 | it('should trap property get', function () { 6 | const code = ` 7 | var a = new Proxy({}, { 8 | get: function(obj, key) { 9 | console.log("Accessing " + key) 10 | return obj[key]; 11 | }, 12 | }); 13 | a.b 14 | ` 15 | 16 | const runLogs = compileAndRun(code) 17 | expect(runLogs.length).to.be.eq(1) 18 | expect(runLogs[0]).to.be.eq('Accessing b') 19 | }) 20 | 21 | it('should trap property get and set', function () { 22 | const code = ` 23 | var a = new Proxy({}, { 24 | get: function(obj, key) { 25 | if (obj[key] === undefined) { 26 | console.log("Accessing undefined of an object!") 27 | } 28 | return obj[key]; 29 | }, 30 | set: function(obj, key, value) { 31 | console.log("Setting " + key + " of " + JSON.stringify(obj)); 32 | obj[key] = value; 33 | } 34 | }); 35 | a.b = "abc"; 36 | console.log(a.b); 37 | console.log(a.c); 38 | ` 39 | const runLogs = compileAndRun(code) 40 | expect(runLogs[0]).to.be.eq('Setting b of {}') 41 | expect(runLogs[1]).to.be.eq('abc') 42 | expect(runLogs[2]).to.be.eq('Accessing undefined of an object!') 43 | }) 44 | 45 | it('should work with methods', function () { 46 | const code = ` 47 | const proxy = new Proxy({}, { 48 | get: (target, property) => 49 | (test) => [JSON.stringify(target), property, test] 50 | }); 51 | 52 | console.log(typeof proxy.func); 53 | console.log(proxy.func('123'));` 54 | 55 | const runLogs = compileAndRun(code) 56 | expect(runLogs[0]).to.be.eq('function') 57 | expect(runLogs[1].toString()).to.be.eq('{},func,123') 58 | }) 59 | }) 60 | 61 | function compileAndRun (code) { 62 | const pluginPath = require.resolve('../build/app.js') 63 | const output = babel.transform(code, { 64 | plugins: [ pluginPath ] 65 | }) 66 | 67 | const logs = [] 68 | 69 | /* eslint-disable */ 70 | const console = { 71 | log: (val) => logs.push(val) 72 | } 73 | eval(output.code) 74 | /* eslint-enable */ 75 | 76 | return logs 77 | } 78 | --------------------------------------------------------------------------------