Reactive DI
Typesafe dependency injection container for react-like components.
- With this DI you can buit pure component based architecture.
- With this DI you can forget about HOC and any decorators around component.
- Atomatic isolated error and loading status handling for each component.
- ReactiveDI helps you to follow open/closed principle via slots (like vue slots).
- Hierarchical Dependency Injectors.
- ReactiveDI easily integrates some state management libraries: MobX, lom_atom.
- Framework agnostic, vendor lock-in free: no static dependencies from React, MobX, etc.
- Easily integrates css-in-js solutions like jss.
- Tiny size about 10kb reactive-di.min.js.
Links
- example source, demo
- todomvc benchmark
- fiddle example with loading and error handling demo.
TOC
- Install
- Debug
- Hello world
- Features
- Typesafe context in components
- State management based on lom_atom or mobx
- Automatic error handling
- Custom error handler
- Loading status handling
- Redefine default dependencies
- Components cloning and slots
- Hierarchical dependency injection
- Optional css-in-js support
- Multiple css instances
- Passing component props to its depenendencies
- React compatible
- Logging
- Map config to objects
- Credits
Install
npm install --save reactive-di lom_atom babel-plugin-transform-metadata
Example .babelrc:
babel-plugin-transform-metadata is optional, used for metadata generation. ReactiveDI use type annotations for dependency resolving, without this plugin you will need to provide metadata manually.
Debug
Build rdi and copy to ../app-project/node_modules/reactive-di
npm run watch --reactive-di:dest=../app-project
Hello world
ReactiveDI has no static dependencies and not a zero-setup library. Setup is usually about 30-50 SLOC, but you do it once per application. But you can integrate into ReactiveDI any component react-like, state management and css-in-js library via adapters.
Setup with preact and lom_atom
// @flow { return <div> !error instanceof Error ? <div> Loading... </div> : <div> <h3>Fatal error !</h3> <div>errormessage</div> <pre> errorstack </pre> </div> </div>} const lomCreateElement = global'lom_h' = lomCreateElement
Usage:
interface IHelloProps name: string; @mem name: string @props { thisname = name } { return <div> Hello contextname <br/><input value=contextname onInput= { contextname = target: anyvalue } /> </div>}
Setup with react and mobx
// @flow { return <div> !error instanceof Error ? <div> Loading... </div> : <div> <h3>Fatal error !</h3> <div>errormessage</div> <pre> errorstack </pre> </div> </div>} const lomCreateElement = global'lom_h' = lomCreateElement
Usage:
interface IHelloProps name: string; @observable name: string @props { thisname = name } { return <div> Hello contextname <br/><input value=contextname onInput= { contextname = target: anyvalue } /> </div>}
Features
Typesafe context in components
You can use context in stateless functional components. With babel-plugin-transform-metadata you do not need to provide metadata (like Button.contextTypes = {color: PropTypes.string};
).
Context signature generated from second argument:
// @flow { ... }
Or
{ /// ...}
Class definitions used as keys for dependency resolving. For generation dependency metadata ReactiveDI do not use any library (like props-types), raw metadata only expose function arguments to injector. Without plugin, you will need to provide them manually:
HelloViewdeps = context: HelloContext
Injector in createElement (lom_h) automatically initializes HelloContext and pass it to HelloView in
State management based on lom_atom or mobx
ReactiveDI is state management agnostic library. You can use mobx or lom_atom (like mobx, but much simpler and with some killer features). In ReactiveDI all components are pure functional.
Automatic error handling
All errors are isolated in components. They do not breaks whole application. You don't need to manually catch errors via componentDidCatch.
@mem { throw 'oops' } { return <input value=contextname onInput= { contextname = target: anyvalue } />}
Exception in get name
intercepted by try/catch in HelloView wrapper and displays by default ErrorableView, registered in ReactiveDI setup:
// ... { return <div> !error instanceof Error ? <div> Loading... </div> : <div> <h3>Fatal error !</h3> <div>errormessage</div> <pre> errorstack </pre> </div> </div>} const lomCreateElement = global'lom_h' = lomCreateElement
Custom error handler
You can provide custom error component handler:
{ let name: string try name = contextname catch e name = 'Error:' + emessage return <input value=name onInput=target: Event) contextname = target: anyvalue />}HelloView <div>errormessage</div>
Or manually handle error:
{ let name: string try name = contextname catch e name = 'Error:' + emessage return <input value=name onInput=target: Event) contextname = target: anyvalue />}
Loading status handling
In ReactiveDI pending/complete status realized via Promise exception.
{ return <div> !error instanceof Error ? <div> Loading... </div> : ... </div>}
In component model throw new Promise()
catched in HelloComponent wrapper and default ErrorableView shows Loading...
instead of HelloView.
@mem {} @mem get : string // fetch some data and update name throw
On fetch complete fetch().then((data: string) => {this.name = data})
sets new data and render HelloView instead of ErrorableView.
Redefine default dependencies
Class SomeAbstract used somewhere in the application, but at ReactiveDI setup you can redefine them to SomeConcrete class instance with same interface.
{} {} a: SomeAbstract { thisa = a } const injector = SomeAbstract injectorvalueSomeAbstracta instanceof SomeConcrete
Components cloning and slots
In vue you can use content distribution with slots. ReactiveDI helps you to do same thing in react-applications. Slot is a component itself or its id.
Create slightly modified component, based on FirstCounterView.
@mem value = 0 { return <div>count: value</div>} { return <div> <CounterMessageView value=countervalue/> <button id="FirstCounterAddButton" onClick= { countervalue++ }>Add</button> </div>} @mem value = 1 // Create FirstCounterView copy, but remove FirstCounterAddButton and replace FirstCounterService to SecondCounterService. const SecondCounterView =
Works like inheritance in classes, but you don't need to extract each component detail in methods. Any component part is open for extension bу default. Be careful, do not violate Liskov substitution principle.
Hierarchical dependency injection
Each component instance has an own injector. Injector - is a type to instance map, which types described in component context.
When Parent and Child components depends on on same SharedService - DI injects one instance to them. And this instance live while Parent component mounted to DOM.
{} { return <Child parentService=contextsharedService />} { // context.sharedService instance cached in parent}
If only Child component depends on SharedService, DI creates separated SharedService instance per Child.
{} { return <Child/>} { // sharedService - cached in child}
Optional css-in-js support
Css-in-js with reactivity and dependency injection power. ReactiveDI not statically depended on Jss, you can integrate another css-in-js solution, realizing described below interface.
Setup:
// @flow const jss = deferadd/*jss must implements IProcessor interface: export interface IProcessor { createStyleSheet<V: Object>(_cssObj: V, options: any): ISheet<V>;} export interface ISheet<V: Object> { attach(): ISheet<V>; classes: {+[id: $Keys<V>]: string};}*/const lomCreateElement = global'lom_h' = lomCreateElement
Reactive style usage:
@mem color = 'red' vars: ThemeVars { this_vars = vars } @mem @theme { return wrapper: backgroundColor: this_varscolor } { return <div class=csswrapper>... <button onClick= varscolor = 'green'>Change color</button> </div>}
Styles automatically mounts/unmounts together with component. Changing vars.color
automatically rebuilds and remounts css.
With mobx, unmount feature does not works at current moment. But still no memory leaks, due to unique theme id.
Without any state management library works only css mounting without reactivity updates.
@theme { return wrapper: backgroundColor: 'red' } { return <div class=csswrapper>...</div>}
Multiple css instances
By default one css block generated per component. But you can generate unique css block per component instance too. Just use theme.self
decorator:
interface MyProps color: string; @mem @props _props: MyProps @mem @themeself { return wrapper: backgroundColor: thispropscolor } { return <div class=csswrapper>... </div>} <MyView color="red"/><MyView color="blue"/>
Passing component props to its depenendencies
You can pass component properties to its dependencies via prop
decorator.
interface MyProps some: string; @props _props: MyProps; // @mem @props _props: MyProps; // for reactive props @mem get : string return this_propssome + '-suffix' { return <div>servicesome</div>}
If you need to react on props changes - just use combination @mem
and @props
decorators.
@mem @props _props: MyProps; // @mem @props _props: MyProps; // for reactive props @mem get : string return this_propssome + '-suffix'
React compatible
You can use any react/preact/inferno components together with rdi components.
Logging
Not ReactiveDI part, in state management libraries you can monitor state changes and user actions.
Console logger in lom_atom:
defaultContext
For custom loggers, implement interface ILogger.
Map config to objects
Experimental feature - you can restore state on client side by providing data to class map in Injector.
// @flow const defaultDeps = const injector = undefined SomeService: name: 'test' id: 123 // setup babel-plugin-transform-metadata or define displayName, if js-uglify used static displayName = 'SomeService' @mem name = '' id = 0 const someService: SomeService = injectorvalueSomeService someServicename === 'test'someServiceid === 123
displayName in class used as a key for data mapping. babel-plugin-transform-metadata can generate displayName. To enable it, add ["transform-metadata", {"addDisplayName": true}]
into .babelrc.
Example .babelrc:
Credits
- mol OORP ideas
- Ninject best dependency injector, writen in C#.
- inversify.io nice try of reimplementing Ninject in typescript.
- angular2 ideas of hierarchical injectors.
- babel-plugin-angular2-annotations ideas of metadata for resolving dependencies.