You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
svinokot a59d96b117 fix array creation 1 month ago
nbproject add iterator 1 month ago
src fix array creation 1 month ago
test fix array creation 1 month ago
.gitignore v1.6.3 8 months ago
LICENSE v1.6.3 8 months ago
index.js v1.6.3 8 months ago
package-lock.json 2.0.0 beta 1 3 months ago
package.json fix array creation 1 month ago
readme.md readme 2 months ago

readme.md

Wiki

There are many major changes, see changelog

Instalation

  • Git git clone http://git.vovikilelik.com/Clu/lens-js.git

  • Npm npm i @vovikilelik/lens-js

Imports

Web Components

<script type="module" src="lens-js.js"></script>

// or

<script type="module">
    import { Lens } from './lens-js.js';

    /* your code here */
</script>

Webpack

import { Lens } from '@vovikilelik/lens-js';

Introduction

LensJs implement the concept of a functional programming, where the data structure has the form of a directed graph (from the root to the leaves).

Philosofy

Simple to supporting

We believe that the structure and organization of the application state should be clear. You don't need to know the entire organization of the state to understand how it functions.

Simple to implemeting

You don't need to write a lot of code to create a simple object. It doesn't take much to figure out how to write a simple object.

Performance

We think performance is important too (but that's not for sure).

Compatibility

We believe that LensJs can be used in conjunction with other state managers.

Main Features

  • Asynchronous change detection
  • State batch update
  • Full control of state changies
  • Data transform on demand
  • Both scalability (out/up)
  • Object-oriented and functional programming
  • Encapsulation

Using

  • Creation root store
export const lens = LensUtils.createLens({ /* default data */ });
  • Getting deep structure
const deep = lens.go('deep');
const deeper = deep.go('deeper');

// Like "lens.deep.deeper"
  • Reading and writing
const catName = lens.go('cat').go('name');

catName.set('Tom'); // Writing by "lens.cat.name"
const value = catName.get(); // Reading

// Like:
// lens.cat.name = 'Tom';
// const value = lens.cat.name;
  • Getting full state (if needed)
lens.go('basket').go('apples').go('count').set(3);
const state = lens.get();

// "state" is { basket: { apples: { count: 3 } } }
  • Catching changes
const callback = ({ current }) => console.log(current.value);
lens.attach(callback);

lens.set('Hello!') // console: Hello!
  • Singleton pattern able to use for each other node
lens.go('singleton') === lens.go('singleton'); // true
  • Export every node as const
export const appState = lens.go('app');
export const authState = lens.go('auth');
  • Extending
class MyLens extends Lens {
  doRequest(addr) {
    myFetch(addr).then(response => this.set(response));
  }
}

const foo = lens.go('foo', MyLens);
foo.doRequest('https://');
  • Live-transforming
import {transform} from 'lens-utils';

const toHex = transform(
  v => `#${v.toString(16)}`,
  v => parseInt(v.substring(1), 16);
);

const hex = lens.go('color').chain(toHex);
hex.set('#aabbcc');

console.log(lens.get()) // { color: 11189196 } 

For more information look wiki

Comparation with Redux and MobX/MST

Not contrast but nearly

No reducers

LensJs does not deed in redusers or same because it merge data automatically

Redux:

enum ActionType {
  hello;
}

const getHelloAction = (value) => ({
  type: ActionType.hello,
  value
});

const reducer = (state, {type, value}) {
  switch(type) {
    case ActionType.hello:
      return { world: value };

      default: return state;
  }
}

...
dispatch(getHelloAction('Hello!'));

LensJs:

lens.go('world').set('Hello!');

Better encapsulation

Every lens node is root of own subtree. It give passibility to make components whitch is not assign with main form.

Redux:

const Cat = ({ cat }) => <div>{cat.ribbon.color}</div>;
const mapStateToProps = (state, ownProps) =>
  ({cat: state.cats[ownProps.name]});
export default connect(Cat, mapStateToProps);

LensJs:

export const Cat = ({ lens }) => {
  const [ cat ] = useLens(lens);
  return <div>{cat.ribbon.color}</div>;
}

No overcode

It means that lensJs is easier than others (in default)

MobX/MST:

/* Ribbon store */
export const Ribbon = type
  .model("Ribbon", {
    color: type.string
  })
  .actions(self => ({
    setColor(value) {
      self.color = value;
    },
  }));
  
/* Cat store */
export const Cat = type
  .model("Cat", {
    ribbon: type.reference(Ribbon)
  });

LensJs:

const cat = cats.go('murzik');
const ribbon = cat.go('ribbon');

You can make controller like ModX

class MyController extends Lens {
    get id() {
        return this.go('id').get();
    }

    set id(value) {
        this.go('id').set(value, () => doRequest());
    }
}

// Example
const controller = lens.go('page', MyController);
controller.id = 12345;

Lens-Js Wiki