@arekx/data-flow-js v1.0.11

DataFlowJS

DataFlow JS data binding JS library. It is used to bind multiple HTML elements to a single JSON data object. The idea is to track all changes and to allow user not to worry about updating all places one a single piece of data is changed but to move all of the concerns of rendering to their respective elements to make development easier to handle and debug.

This library is not meant to be a replacement for component management libraries like Angular, VueJS and React. It is meant to be a simple small library which will allow you to handle data better and it can be together with those component libraries (with some additional implementation of course).

You can also use this to get benefits of one-way databinding (two-way databinding is also possible) without having to import the whole library.

If you are developing complex SPA app with routing on the client side with lots of components and it needs to be JS Client App on frontend with REST backend then this probably is not for you. It can be used for this but you will probably have more success using the abovementioned libraries.

If you have a server-side rendered web app which needs to implement a lot of JS interactivity then this is probably a perfect solution to handle lots of complexity brought out by manipulating data.

Simple Usage Example

<span class="my-element"></span>
<span class="my-element"></span>
<span id="nested"></span>

<script src="data-flow.js"></script>
<script>
var flow = DataFlow({
   myBoundData: 'my data',
   nested: {
      data: {
         works: 'too'
      }
   }
}); // new DataFlow(data)" also works if you need to use that.

// Bind all changes to myBoundData to all elements of class my-element
flow.bind({to: '.my-element', path: 'myBoundData'});
flow.bind({to: '#nested', as: 'html', path: 'nested.data.works'});

// All elements of .my-element are not showing my another data
flow.set("myBoundData", "my another data");

// span with id nested now has bold text also works as contents.
flow.set('nested.data.works', "<strong>also works</strong>");
</script>

Installation

Installation is done using npm - npm install --save @arekx/data-flow-js.

Examples

Examples are in html files examples folder.

Building

Run npm install and then run npm run build.

Testing

Run npm install and then npm test to run all Jest tests.

Reference

DataFlow

DataFlow is the main usage function which binds the data json as a DataSource.

When invoking DataFlow({some: 'data'}) it will return instance of DataSource with some additional functions like bind and having access to renderer to configure rendering.

Even though DataFlow implements default renderers for text, html and a function() {} callback, you can pass your own renderer or set a static renderer.

DataFlow accepts two a parameters: object|DataFlow.DataSource and DataFlow.Renderer.

First parameter can be either object (which will get turned to a datasource) or DataFlow.DataSource instance to which the bindings will be set. If DataFlow.Renderer is not defined then new one will be created.

DataFlow returns passed or new instance of DataFlow.DataSource with added bind function and added renderer.

DataFlow.DataSource Reference

DataFlow.Renderer Reference

Also you can set static renderers which will be available on all new instances of DataFlow.Renderer, by calling: Renderer.setStaticRenderer(rendererName, callback) signature is the same as DataFlow.Renderer.set

DataFlow.BoundElement Reference

DataFlow's BoundElement is instantiated when bind function is called, it's an instance which manages updates to an element defined by a selector.

BoundElement configuration