A bunch of utilities that enable accessor-based reactivity for JavaScript objects.
\n\n\n\n
\n \n
\n\n
\n\n\n\n
\n\n\nIt can be installed via NPM:\n```\nnpm i defi\n```\n```js\nconst { bindNode, calc } = require('defi');\n\nbindNode(obj, 'key', node)\n```\n\nOr [downloaded to use as a global variable](https://github.com/defijs/defi/tree/gh-pages)\n\n```js\n// use defi as a global variable\ndefi.bindNode(obj, 'key', node)\n```\n\n\n## How would I use it?\n\nAs a simple task let's say you want to define a simple form with first name and last name input, where while you type a greeting appears.\n\n```html\n\n\n\n```\n\n```js\n// default data\nconst obj = {\n first: 'John',\n last: 'Doe'\n};\n\n// let's listen for first and last name changes\ndefi.on(obj, 'change:first', () => console.log('First name is changed'));\ndefi.on(obj, 'change:last', () => console.log('Last name is changed'));\n\n// we would like to re-calculate 'greeting' property every time\n// when the first or last are changed\ndefi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`);\n\n// and we want to set up a two-way data binding between the props\n// and corresponding DOM nodes\ndefi.bindNode(obj, {\n first: '.first',\n last: '.last',\n greeting: '.greeting'\n});\n```\n\nIf `first` or `last` is changed then event handlers print info about that to console, `greeting` property is updated, `.greeting` element is populated by calculated data (by default \"Hello, John Doe\"). And it happens every time when these properties are changed and it doesn't matter which way. You can do `obj.first = 'Jane'` or you can type text into its field, and everything will happen immediately.\n\nThat's the real accessor-based reactiveness! Check the example above [here](https://jsbin.com/hakunotaqo/edit?html,js,console,output) and try to type `obj.first = 'Jane'` at the \"Console\" tab.\n\nNote that if you want to use a custom HTML element (at the example above we use ``
![](\"https://defijs.github.io/assets/logo.svg\"){kind=logo}
\n\n\n![](\"https://defijs.github.io/assets/defi_demo.gif\")
\n![\"npm](\"https://badge.fury.io/js/defi.svg\"){kind=icon}
![\"Build](\"https://travis-ci.org/defijs/defi.svg\")
![\"Coverage](\"https://coveralls.io/repos/github/defijs/defi/badge.svg?branch=master\"){kind=icon}