# ez-projector

This [ezFlux](https://github.com/goetting/ez-flux) plugin creates a mutable projection of selected state values.  
The projection has a one-way binding with the ezFlux state.  
It will update whenever ezFlux will update.  
However, mutations on the projection will have no influence on the ezFlux state.

-   [Install](#install)
-   [Usage](#usage)
-   [Contributing](#contributing)

# Install

[NPM](https://npmjs.com):

```sh
$ npm install ez-projector --save
```

[Yarn](https://yarnpkg.com/):

```sh
$ yarn add ez-projector
```


# Usage


```JS
import Vue from 'vue';
import EZFlux from 'ez-flux';
import ezProjector form 'ez-project';

// First, add the plugin to an ezFlux. Either on construction or through ezFlux.plug.

const ezFlux = new EZFlux({
  weather: {
    values: { rain: false },
    actions: { setRain: rain => ({ rain }) },
  },
}, {
  plugins: [ezProjector],
});

// In order to project state, a map of stateScopes to value keys has to be passed.

const weather = ezFlux.plugins.project({ weather: ['rain'] });

// lets assume a [Vue](https://vuejs.org/) Component:

Vue.component('weather', {
  data: () => weather,
  template: '<div>It's {{ weather.rain ? 'raining' : 'nice' }} outside</div>'
});

// Your output will be "It's nice outside"
// now lets make it rain:

ezFlux.actions.weather.setRain(true);

// Your output will now automatically become "It's raining outside"


// Once you are sure that you won't need the projection to watch ezFlux state, disconnect it.

weather.disconnectEZProjection();
```

Please note that deeply nested state values are not impacted by this behaviour at all.  
In contrast to state primitives, they will always be a two way binding through default JavaScript referencing!


# Contributing

Contributions of any kind are always welcome!

To run Linter, Flow, Bable and Mocha and have them watch src and test folders respectively:
```sh
$ npm start
```

To run Babel once:
```sh
$ npm run build
```