immutable-di
Simple, dependency injection container with some state handling functions.
General
- Install:
npm install --save immutable-di immutable-di-react
- Tests:
npm test
- Examples:
npm run dev.examples
Why not *-flux?
Our main focus make Flux-like API as less and simple as possible. Which with less words you can express more. The ideas behind similar to the redux, baobab, nuclear-js, but implementation based on dependency injection. And of course you can use dependency injection as standalone.
Usecases
React all-in example
; const cursor = tis: a: 1 b: 2 const container = cursor var abbaFacet = { return a + 10;} var ChangeAction = { return { // Here will be all mutate state logic. for example server side request // communication with API layer and etc. ; $ }}; @@Component { thisprops; } { return <div onClick=thishandleClick>Bloom: thispropsabba</div> } { React;}
Define dependency
// A, B - functions or classes with di definitions // For functions:C // resolve functions A, B and pass them as arguments to CC // resolve functions A, B and pass them as object {a, b} to C //Facet - same as Factory, but do not cache factory return value // For classes:@ { } // or { } A BC // or@ { } // for State@ { }
Working with state
const cursor = config: logger: opt1: 'test1' mod2: opt1: 'test2' // define di container with state:const container = cursor // dep 1: { return 'data'}MyFaset // dep 2: { console} // bind listener:const listener = container // trigger my handercursor // path config.logger not affected, myHandler is not triggeredcursor // unbind listener:container
Di factory example
const cursor = config: logger: opt1: 'test1' const container = cursor { return { console }}ConsoleOutputDriver @ { this_outputDriver = outputDriver this_config = config } { this } { return 'dep'}SomeDep { return { logger }}App container'test' // outputs: val: testdep, opt: test1
Cache example
const cursor = config: myModule: opt1: 'test1' const container = cursor { console return { console }}MyModule container // outputs init test1container // no outputs, return from cacheconst cursor = cursor cursor // outputs test2container // no outputs: return from cache container'test3' // outputs out test2, val test3
React example
// my-faset.js { return todos} 'todoApp' 'todos'myFaset
// todo-list.js // set container from props to context:@// bind to setState:@Component { return <div> <div> <h3>Mapped todo ids:</h3> mapped </div> <ul> todos </ul> </div> }
// todo-list-item.js { return <li className='todos-list-item'> todotitle </li> } actions: TodoActions
// todo-actions.js @ { this_cursor = cursor } { this_cursor }
// index.js // define di container with state:const cursor = todoApp: todos: query: const container = cursor const initialProps = cursorReact
Initial debug support
Factoryextend = MonitorFactory { console} const action = { return { }} const cursor = tis: a: 1 b: 2 const container = cursorconst listener = container container123// Will produce:/*[ { "displayName": "MyAction", "id": 11, "args": [ 123 ], "diff": {} }]*/container
NativeCursor:diff used for diff generation, this dummy, but NativeCursor can be extended.