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 3dead5dd64 Debounce 1 month ago
nbproject readme 6 months ago
test lens-js 1.5.0 2 months ago
.gitignore readme 6 months ago
LICENSE license 5 months ago
index.d.ts Debounce 1 month ago
index.js npm 1.1.0 6 months ago
package-lock.json lens-js 1.5.0 2 months ago
package.json lens-js 1.5.0 2 months ago
readme.md lens-js 1.5.0 2 months ago
tsconfig.json refactor 6 months ago
webpack.config.js npm 1.2.3 5 months ago

readme.md

Wiki

Lens TS

It is the typings for lens-js

It is the simple state manager for web apps with TS typings. It is implementation of Object-relative method of data organizing. So, let try...

Initialize

Connecting

import { Lens, LensUtils } from '@vovikilelik/lens-ts';
  • Lens - base lens class;
  • LensUtils - some usefull functions for fun;

Creation

// Create interface first
interface State {
    name: string;
    color: number;
    basket: any[];
}

// Initialize store and create lens
const store = { lens: { /* lens data here */ } }

const lens = new Lens<State>(
  () => store.lens,
  (value) => { store.lens = value; }
);

Using

Base operations

// Moving to node
const basketLens = lens.go('basket');

// Getting values
const nameLens = lens.go('name');
console.log(nameLens.get());

// ...and setting values
nameLens.set('New Name');

Arrays

// getting array
const basket = lens.go('basket').get();

// getting an element
const element = lens.go('basket').go(0).get();

// Inserting elements
const basketLens = lens.go('basket');
basketLens.set([...basketLens.get(), {id: 1}]);

// ...and removing
basketLens.set(basketLens.get().filter(({id}) => id !== 1));

Extending

class MyLens extends Lens { /* implementation */ }

// Full structure
const myLens = new MyLens(/* implementation */);

// Self structure
const factory = (ownFactory) => (key, parent) => {
    // ownLens needs for connecting your lens with root tree
    const ownLens = ownFactory(key, parent);
    return new MyLens(/* implementation */);
}
const myNode = lens.go('anyNode', factory);

Event model

Trace stack

const node = lens.go('one').go('two').go('three');
node.set('value');

  ________triggered_________
  |       |       |        |
lens --> one --> two --> three -- four -- ...

Attaching and detaching

// attaching events
const nameLens = lens.go('name');
const callback = e => console.log('Node has changed');
nameLens.attach(callback);

// triggering
nameLens.set('Some Name');

// ...and detaching
nameLens.detach(callback);

For more help, please look this repository