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.
- example source, demo
- todomvc benchmark
- fiddle example with loading and error handling demo.
- 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
npm install --save reactive-di lom_atom babel-plugin-transform-metadata
Example .babelrc:
{
"presets": [
"flow",
"react",
["es2015", {"loose": true}]
],
"plugins": [
"transform-metadata",
"transform-decorators-legacy",
["transform-react-jsx", {"pragma": "lom_h"}]
]
}
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.
Build rdi and copy to ../app-project/node_modules/reactive-di
npm run watch --reactive-di:dest=../app-project
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.
// @flow
import {ReactAtom, mem, action} from 'lom_atom'
import {createReactWrapper, createCreateElement} from 'reactive-di'
import {render, h, Component} from 'preact'
function ErrorableView({error}: {error: Error}) {
return <div>
{!(error instanceof Error)
? <div>
Loading...
</div>
: <div>
<h3>Fatal error !</h3>
<div>{error.message}</div>
<pre>
{error.stack.toString()}
</pre>
</div>
}
</div>
}
const lomCreateElement = createCreateElement(
createReactWrapper(
Component,
ErrorableView,
ReactAtom
),
(h: React$CreateElement)
)
global['lom_h'] = lomCreateElement
Usage:
import {mem} from 'lom_atom'
import {props} from 'reactive-di'
import {render} from 'preact'
interface IHelloProps {
name: string;
}
class HelloContext {
@mem name: string
@props set props({name}: IHelloProps) {
this.name = name
}
}
export function HelloView(
_: IHelloProps,
{context}: {context: HelloContext}
) {
return <div>
Hello, {context.name}
<br/><input value={context.name} onInput={({target}) => {
context.name = (target: any).value
}} />
</div>
}
render(<HelloView name="John" />, document.body)
// @flow
import {Reaction} from 'mobx'
import {createReactWrapper, createCreateElement, createMobxReaction} from 'reactive-di'
import {createElement, Component} from 'react'
import {render} from 'react-dom'
function ErrorableView({error}: {error: Error}) {
return <div>
{!(error instanceof Error)
? <div>
Loading...
</div>
: <div>
<h3>Fatal error !</h3>
<div>{error.message}</div>
<pre>
{error.stack.toString()}
</pre>
</div>
}
</div>
}
const lomCreateElement = createCreateElement(
createReactWrapper(
Component,
ErrorableView,
createMobxReaction(Reaction)
),
createElement
)
global['lom_h'] = lomCreateElement
Usage:
import {observable} from 'mobx'
import {props} from 'reactive-di'
import {render} from 'preact'
interface IHelloProps {
name: string;
}
class HelloContext {
@observable name: string
@props set props({name}: IHelloProps) {
this.name = name
}
}
export function HelloView(
_: IHelloProps,
{context}: {context: HelloContext}
) {
return <div>
Hello, {context.name}
<br/><input value={context.name} onInput={({target}) => {
context.name = (target: any).value
}} />
</div>
}
render(<HelloView name="John" />, document.body)
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
export function HelloView(
_: IHelloProps,
{context}: {context: HelloContext}
) { ... }
Or
function HelloView(
_: {},
context: HelloComponent
) {
/// ...
}
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:
HelloView.deps = [{context: HelloContext}]
Injector in createElement (lom_h) automatically initializes HelloContext and pass it to HelloView in
render(<HelloView prefix="Hello" />, document.body)
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.
All errors are isolated in components. They do not breaks whole application. You don't need to manually catch errors via componentDidCatch.
class HelloContext {
@mem get name() {
throw new Error('oops')
}
}
function HelloView(
_: {},
{context}: {context: HelloContext}
) {
return <input value={context.name} onInput={({target}: Event) => {
context.name = (target: any).value
}} />
}
Exception in get name
intercepted by try/catch in HelloView wrapper and displays by default ErrorableView, registered in ReactiveDI setup:
// ...
function ErrorableView({error}: {error: Error}) {
return <div>
{!(error instanceof Error)
? <div>
Loading...
</div>
: <div>
<h3>Fatal error !</h3>
<div>{error.message}</div>
<pre>
{error.stack.toString()}
</pre>
</div>
}
</div>
}
const lomCreateElement = createCreateElement(
createReactWrapper(
Component,
ErrorableView,
ReactAtom
),
h
)
global['lom_h'] = lomCreateElement
You can provide custom error component handler:
function HelloView(
_: {},
{context}: {context: HelloContext}
) {
let name: string
try {
name = context.name
} catch (e) {
name = 'Error:' + e.message
}
return <input value={name} onInput={{target}: Event) => {
context.name = (target: any).value
}} />
}
HelloView.onError = ({error: Error}) => (
<div>{error.message}</div>
)
Or manually handle error:
function HelloView(
_: {},
{context}: {context: HelloContext}
) {
let name: string
try {
name = context.name
} catch (e) {
name = 'Error:' + e.message
}
return <input value={name} onInput={{target}: Event) => {
context.name = (target: any).value
}} />
}
In ReactiveDI pending/complete status realized via Promise exception.
function ErrorableView({error}: {error: Error | Promise<*>}) {
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.
class HelloContext {
@mem set name(next: string | Error) {}
@mem get name(): string {
// fetch some data and update name
throw new AtomWait()
}
}
On fetch complete fetch().then((data: string) => {this.name = data})
sets new data and render HelloView instead of ErrorableView.
Class SomeAbstract used somewhere in the application, but at ReactiveDI setup you can redefine them to SomeConcrete class instance with same interface.
class SomeAbstract {}
class SomeConcrete extends SomeAbstract {}
class C {
a: SomeAbstract
constructor(a: SomeAbstract) {
this.a = a
}
}
const injector = new Injector(
[
[SomeAbstract, new SomeConcrete()]
]
)
injector.value(SomeAbstract).a instanceof SomeConcrete
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.
import {cloneComponent} from 'reactive-di'
class FirstCounterService {
@mem value = 0
}
function CounterMessageView({value}: {value: string}) {
return <div>count: {value}</div>
}
function FirstCounterView(
_: {},
counter: FirstCounterService
) {
return <div>
<CounterMessageView value={counter.value}/>
<button id="FirstCounterAddButton" onClick={() => { counter.value++ }}>Add</button>
</div>
}
class SecondCounterService {
@mem value = 1
}
// Create FirstCounterView copy, but remove FirstCounterAddButton and replace FirstCounterService to SecondCounterService.
const SecondCounterView = cloneComponent(FirstCounterView, [
[FirstCounterService, SecondCounterService],
['FirstCounterAddButton', null],
], '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.
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.
class SharedService {}
function Parent(
props: {},
context: {sharedService: SharedService}
) {
return <Child parentService={context.sharedService} />
}
function Child(
_: {},
context: {sharedService: SharedService}
) {
// context.sharedService instance cached in parent
}
If only Child component depends on SharedService, DI creates separated SharedService instance per Child.
class SharedService {}
function Parent() {
return <Child/>
}
function Child(
props: {},
context: {sharedService: SharedService}
) {
// sharedService - cached in child
}
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
import {ReactAtom, mem, defer} from 'lom_atom'
import {JssSheetManager, createReactWrapper, createCreateElement, Injector} from 'reactive-di'
import {h, Component} from 'preact'
import {create as createJss} from 'jss'
import ErrorableView from './ErrorableView'
const jss = new JssSheetManager(createJss(), defer.add)
/*
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 = createCreateElement(
createReactWrapper(
Component,
ErrorableView,
ReactAtom,
new Injector([], jss)
),
h
)
global['lom_h'] = lomCreateElement
Reactive style usage:
import {mem} from 'lom_atom'
import {theme} from 'reactive-di'
class ThemeVars {
@mem color = 'red'
}
class MyTheme {
vars: ThemeVars
constructor(vars: ThemeVars) {
this._vars = vars
}
@mem @theme get css() {
return {
wrapper: {
backgroundColor: this._vars.color
}
}
}
}
function MyView(
props: {},
{theme: {css}, vars}: {theme: MyTheme, vars: ThemeVars}
) {
return <div class={css.wrapper}>...
<button onClick={() => vars.color = '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.
import {theme} from 'reactive-di'
class MyTheme {
@theme get css() {
return {
wrapper: {
backgroundColor: 'red'
}
}
}
}
function MyView(
props: {},
{theme: {css}, vars}: {theme: MyTheme}
) {
return <div class={css.wrapper}>...</div>
}
By default one css block generated per component. But you can generate unique css block per component instance too. Just use theme.self
decorator:
import {mem} from 'lom_atom'
import {props, theme} from 'reactive-di'
interface MyProps {
color: string;
}
class MyTheme {
@mem @props _props: MyProps
@mem @theme.self get css() {
return {
wrapper: {
backgroundColor: this.props.color
}
}
}
}
function MyView(
props: MyProps,
{theme: {css}}: {theme: MyTheme}
) {
return <div class={css.wrapper}>...
</div>
}
<MyView color="red"/>
<MyView color="blue"/>
You can pass component properties to its dependencies via prop
decorator.
import {mem} from 'lom_atom'
import {props} from 'reactive-di'
interface MyProps {
some: string;
}
class MyViewService {
@props _props: MyProps;
// @mem @props _props: MyProps; // for reactive props
@mem get some(): string {
return this._props.some + '-suffix'
}
}
function MyView(
props: MyProps,
{service}: {service: MyViewService}
) {
return <div>{service.some}</div>
}
If you need to react on props changes - just use combination @mem
and @props
decorators.
class MyViewService {
@mem @props _props: MyProps;
// @mem @props _props: MyProps; // for reactive props
@mem get some(): string {
return this._props.some + '-suffix'
}
}
You can use any react/preact/inferno components together with rdi components.
Not ReactiveDI part, in state management libraries you can monitor state changes and user actions.
Console logger in lom_atom:
import {defaultContext, BaseLogger, ConsoleLogger} from 'lom_atom'
import type {ILogger} from 'lom_atom'
defaultContext.setLogger(new ConsoleLogger())
For custom loggers, implement interface ILogger.
Experimental feature - you can restore state on client side by providing data to class map in Injector.
// @flow
import {mem} from 'lom_atom'
import {Injector} from 'reactive-di'
const defaultDeps = []
const injector = new Injector([], undefined, {
SomeService: {
name: 'test',
id: 123
}
})
class SomeService {
// setup babel-plugin-transform-metadata or define displayName, if js-uglify used
static displayName = 'SomeService'
@mem name = ''
id = 0
}
const someService: SomeService = injector.value(SomeService)
someService.name === 'test'
someService.id === 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:
{
"presets": [
"flow",
"react",
["es2015", {"loose": true}]
],
"plugins": [
["transform-metadata", {"addDisplayName": true}],
"transform-decorators-legacy",
["transform-react-jsx", {"pragma": "lom_h"}]
]
}
- 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.