16 | Open you browser devtools console... and start clicking on buttons ;) 17 |
18 |19 | Clicked: {counterService.value} times{' '} 20 | {' '} 21 | {' '} 22 | {' '} 25 | 28 |
29 |(Component: ComponentType
) => 7 | Component.displayName || 8 | Component.name || 9 | (Component.constructor && Component.constructor.name) || 10 | 'Component' 11 | 12 | export const createHOCName =
(
13 | Wrapper: ComponentType
15 | ) =>
16 | `${getComponentDisplayName(Wrapper)}(${getComponentDisplayName(
17 | WrappedComponent
18 | )})`
19 |
20 | // tslint:disable-next-line:no-empty
21 | export const noop = () => {}
22 |
23 | export const tuple = {repo.description}
16 | Clicked: {counterService.value} times{' '}
17 | {' '}
18 | {' '}
19 | {' '}
22 |
25 | Clicked: {counterService.state.count} times
18 |
19 |
20 |
23 |
26 | There are no messages in store... & {
25 | WrappedComponent: OriginalComponent
26 | }
27 |
28 | export type InstanceTypes
48 | Count:
49 | 0
50 |
19 | Open you browser devtools console... and start clicking on buttons ;)
20 |
72 | Count:
73 | 0
74 | Count: {counterService.state.count} Count: {counterService.state.count}
90 | Clicked: {counterService.state.count} times
91 |
92 |
93 |
96 |
99 |
12 |
30 | )
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/examples/counter-with-multiple-injectors/src/app/counter.tsx:
--------------------------------------------------------------------------------
1 | // tslint:disable:jsx-no-lambda
2 |
3 | import { Inject } from '@martin_hotell/rea-di'
4 | import { Component, createElement, Fragment } from 'react'
5 |
6 | import { CounterService } from './counter.service'
7 |
8 | type Props = {}
9 | export class Counter extends Component@{username} Repos
13 |
16 |
27 | ))}
28 |
17 | {repo.html_url && (
18 |
26 |
19 | {repo.name}
20 |
21 | )}
22 | {repo.description && (
23 |
18 |
25 | )
26 | }
27 |
28 | if (username) {
29 | return `Loading... ${username}`
30 | }
31 | }}
32 |
19 |
21 |
22 |
24 |
16 |
28 | )}
29 |
12 | {bio.avatar_url && (
13 |
32 | )
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/examples/tour-of-heroes/src/app/messages/messages.tsx:
--------------------------------------------------------------------------------
1 | // tslint:disable:jsx-no-lambda
2 |
3 | import { Inject } from '@martin_hotell/rea-di'
4 | import React, { Component } from 'react'
5 |
6 | import './messages.css'
7 |
8 | import { MessageService } from './messages.service'
9 |
10 | export class Messages extends Component {
11 | render() {
12 | return (
13 |
14 | )}
15 |
16 |
17 | {bio.name &&
31 |
14 |
37 | )
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/config/helpers.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | camelCaseToDash,
3 | dashToCamelCase,
4 | toUpperCase,
5 | pascalCase,
6 | normalizePackageName,
7 | getOutputFileName,
8 | }
9 |
10 | /**
11 | *
12 | * @param {string} myStr
13 | */
14 | function camelCaseToDash(myStr) {
15 | return myStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
16 | }
17 |
18 | /**
19 | *
20 | * @param {string} myStr
21 | */
22 | function dashToCamelCase(myStr) {
23 | return myStr.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
24 | }
25 |
26 | /**
27 | *
28 | * @param {string} myStr
29 | */
30 | function toUpperCase(myStr) {
31 | return `${myStr.charAt(0).toUpperCase()}${myStr.substr(1)}`
32 | }
33 |
34 | /**
35 | *
36 | * @param {string} myStr
37 | */
38 | function pascalCase(myStr) {
39 | return toUpperCase(dashToCamelCase(myStr))
40 | }
41 |
42 | /**
43 | *
44 | * @param {string} rawPackageName
45 | */
46 | function normalizePackageName(rawPackageName) {
47 | const scopeEnd = rawPackageName.indexOf('/') + 1
48 |
49 | return rawPackageName.substring(scopeEnd)
50 | }
51 |
52 | /**
53 | *
54 | * @param {string} fileName
55 | * @param {boolean?} isProd
56 | */
57 | function getOutputFileName(fileName, isProd = false) {
58 | return isProd ? fileName.replace(/\.js$/, '.min.js') : fileName
59 | }
60 |
--------------------------------------------------------------------------------
/scripts/copy.js:
--------------------------------------------------------------------------------
1 | const { writeFileSync, copyFileSync } = require('fs')
2 | const { resolve } = require('path')
3 | const packageJson = require('../package.json')
4 |
5 | main()
6 |
7 | function main() {
8 | const projectRoot = resolve(__dirname, '..')
9 | const distPath = resolve(projectRoot, 'dist')
10 | const distPackageJson = createDistPackageJson(packageJson)
11 |
12 | copyFileSync(
13 | resolve(projectRoot, 'README.md'),
14 | resolve(distPath, 'README.md')
15 | )
16 | copyFileSync(
17 | resolve(projectRoot, 'CHANGELOG.md'),
18 | resolve(distPath, 'CHANGELOG.md')
19 | )
20 | copyFileSync(
21 | resolve(projectRoot, 'LICENSE.md'),
22 | resolve(distPath, 'LICENSE.md')
23 | )
24 | copyFileSync(
25 | resolve(projectRoot, '.npmignore'),
26 | resolve(distPath, '.npmignore')
27 | )
28 | writeFileSync(resolve(distPath, 'package.json'), distPackageJson)
29 | }
30 |
31 | /**
32 | * @param {typeof packageJson} packageConfig
33 | * @return {string}
34 | */
35 | function createDistPackageJson(packageConfig) {
36 | const {
37 | devDependencies,
38 | scripts,
39 | engines,
40 | config,
41 | husky,
42 | 'lint-staged': lintStaged,
43 | ...distPackageJson
44 | } = packageConfig
45 |
46 | return JSON.stringify(distPackageJson, null, 2)
47 | }
48 |
--------------------------------------------------------------------------------
/examples/github-user/src/app/user.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@martin_hotell/axios-http'
2 | import { Injectable } from 'injection-js'
3 |
4 | import { Stateful } from '@martin_hotell/rea-di'
5 | import { GithubUserRepo } from './repo.model'
6 | import { GithubUser } from './user.model'
7 |
8 | const endpointPath = 'users'
9 |
10 | type State = ReadonlyMessages
15 |
16 |
36 | {message}
28 | ))}
29 |
30 | ) : (
31 |
27 |
44 |
45 | )
46 | }
47 |
48 | componentDidMount() {
49 | this.props.heroService
50 | .getHeroes()
51 | // This getHeroes reduces the number of heroes displayed to four (2nd, 3rd, 4th, and 5th).
52 | // tslint:disable-next-line:no-magic-numbers
53 | .then((heroes) => this.setState({ heroes: heroes.slice(1, 5) }))
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/examples/counter-with-multiple-injectors/src/app/counter.service.ts:
--------------------------------------------------------------------------------
1 | import { Stateful } from '@martin_hotell/rea-di'
2 | import { Injectable } from 'injection-js'
3 |
4 | import { getClassName } from './helpers'
5 | import { Logger } from './logger.service'
6 |
7 | type State = ReadonlyTop Heroes
28 |
29 | {heroes.map((hero) => (
30 |
35 |
41 |
42 |
36 |
38 |
39 | ))}
40 | {hero.name}
37 |
18 |
70 |
19 | count module
20 |
21 |
44 |
67 |
45 | Counter
46 |
47 |
17 |
36 |
37 | )
38 | }
39 | private handleSubmit(ev: import('react').FormEvent
51 |
69 | )
70 | }
71 |
72 | componentDidMount() {
73 | this.heroes$.subscribe((heroes) => {
74 | this.setState({ heroes })
75 | })
76 | }
77 | componentWillUnmount() {
78 | this.onUnmount$.complete()
79 | }
80 |
81 | // Push a search term into the observable stream.
82 | private search(term: string) {
83 | this.searchTerms.next(term)
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/examples/counter-with-multiple-injectors/src/app/app.tsx:
--------------------------------------------------------------------------------
1 | import { DependencyProvider } from '@martin_hotell/rea-di'
2 | import { Component, createElement, Fragment } from 'react'
3 |
4 | import { Counter } from './counter'
5 | import { CounterService } from './counter.service'
6 | import { EnhancedLogger } from './enhanced-logger.service'
7 | import { Logger } from './logger.service'
8 | import {
9 | MultiplyCounterConfig,
10 | MultiplyCounterService,
11 | } from './multiply-counter.service'
12 |
13 | export class App extends Component {
14 | render() {
15 | return (
16 | Hero Search
52 |
53 | this.search(this.searchResultRef.current!.value)}
59 | />
60 |
61 |
62 | {heroes.map((hero) => (
63 |
68 |
17 |
68 | )
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "tslint-config-standard",
4 | "tslint-react",
5 | "tslint-config-prettier"
6 | ],
7 | "rules": {
8 | // tslint-react rules
9 | "jsx-no-lambda": true,
10 | "jsx-no-string-ref": true,
11 | "jsx-self-close": true,
12 | "jsx-boolean-value": [
13 | true,
14 | "never"
15 | ],
16 | // core ts-lint rules
17 | "await-promise": true,
18 | "no-unused-variable": true,
19 | "forin": true,
20 | "no-bitwise": true,
21 | "no-console": [
22 | true,
23 | "debug",
24 | "info",
25 | "time",
26 | "timeEnd",
27 | "trace"
28 | ],
29 | "no-construct": true,
30 | "no-debugger": true,
31 | "no-shadowed-variable": true,
32 | "no-string-literal": true,
33 | "no-inferrable-types": [
34 | true
35 | ],
36 | "no-unnecessary-initializer": true,
37 | "no-magic-numbers": true,
38 | "no-require-imports": true,
39 | "no-duplicate-super": true,
40 | "no-boolean-literal-compare": true,
41 | "no-namespace": [
42 | true,
43 | "allow-declarations"
44 | ],
45 | "no-invalid-this": [
46 | true,
47 | "check-function-in-method"
48 | ],
49 | "ordered-imports": [
50 | true
51 | ],
52 | "interface-name": [
53 | false
54 | ],
55 | "newline-before-return": true,
56 | "object-literal-shorthand": true,
57 | "arrow-return-shorthand": [
58 | true
59 | ],
60 | "unified-signatures": true,
61 | "prefer-for-of": true,
62 | "match-default-export-name": true,
63 | "prefer-const": true,
64 | "ban-types": [
65 | true,
66 | [
67 | "Object",
68 | "Avoid using the `Object` type. Did you mean `object`?"
69 | ],
70 | [
71 | "Function",
72 | "Avoid using the `Function` type. Prefer a specific function type, like `() => void`."
73 | ],
74 | [
75 | "Boolean",
76 | "Avoid using the `Boolean` type. Did you mean `boolean`?"
77 | ],
78 | [
79 | "Number",
80 | "Avoid using the `Number` type. Did you mean `number`?"
81 | ],
82 | [
83 | "String",
84 | "Avoid using the `String` type. Did you mean `string`?"
85 | ],
86 | [
87 | "Symbol",
88 | "Avoid using the `Symbol` type. Did you mean `symbol`?"
89 | ],
90 | [
91 | "Array",
92 | "Avoid using the `ArrayCounter app
18 | Counter component with CounterService instance
24 |
27 |
28 |
37 | Counter component with MultiplyCounterService instance
38 |
39 |
40 | multiply by 2 and uses enhanced logger
41 |
42 |
48 |
49 |
58 | Counter component with MultiplyCounterService instance
59 |
60 | multiply by 4
61 |
40 | {hero ? (
41 |
65 | )
66 | }
67 | componentDidMount() {
68 | this.getHero()
69 | }
70 |
71 | private save(hero: Hero) {
72 | this.props.heroService.updateHero(hero).then(() => this.goBack())
73 | }
74 | private getHero(): void {
75 | if (this.state.hero) {
76 | return
77 | }
78 |
79 | const id = Number(this.props.match.params.id)
80 | this.props.heroService.getHero(id).then((hero) => this.setState({ hero }))
81 | }
82 | private goBack() {
83 | this.props.history.goBack()
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/examples/tour-of-heroes/src/app/components/heroes.tsx:
--------------------------------------------------------------------------------
1 | // tslint:disable:jsx-no-lambda
2 | import React, { Component, createRef } from 'react'
3 | import { Link } from 'react-router-dom'
4 |
5 | import { Hero } from '../hero'
6 | import { uppercase } from '../shared'
7 |
8 | import { HeroService } from '../hero.service'
9 | import { HeroDetail } from './hero-detail'
10 | import './heroes.css'
11 |
12 | type Props = {
13 | heroService: HeroService
14 | }
15 | type State = Readonly
42 |
61 | ) : (
62 | 'getting Hero detail...'
63 | )}
64 | {uppercase(hero.name)} Details
43 |
44 | id:
45 | {hero.id}
46 |
47 |
48 |
57 |
58 |
59 |
60 | My Heroes
31 |
32 |
33 |
37 | {/* (click) passes input value to add() and then clears the input */}
38 |
41 |
42 |
43 |
44 | {heroes.map((hero) => (
45 |
59 |
60 | )
61 | }
62 | componentDidMount() {
63 | this.props.heroService.getHeroes().then((heroes) => {
64 | this.setState({ heroes })
65 | })
66 | }
67 |
68 | private delete(hero: Hero) {
69 | const heroesWithoutRemoved = this.state.heroes.filter((h) => h !== hero)
70 |
71 | this.props.heroService.deleteHero(hero).then(() => {
72 | this.setState((prevState) => ({
73 | heroes: [...heroesWithoutRemoved],
74 | }))
75 | })
76 | }
77 |
78 | private add(name: string) {
79 | name = name.trim()
80 | if (!name) {
81 | return
82 | }
83 |
84 | const newHero = { name } as Hero
85 | this.props.heroService.addHero(newHero).then((hero) => {
86 | this.setState(
87 | (prevState) => ({
88 | heroes: [...prevState.heroes, hero],
89 | }),
90 | () => (this.heroNameRef.current!.value = '')
91 | )
92 | })
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/examples/tour-of-heroes/src/app/app.tsx:
--------------------------------------------------------------------------------
1 | // tslint:disable:jsx-no-lambda
2 |
3 | import { DependencyProvider, Inject } from '@martin_hotell/rea-di'
4 | import React, { Component } from 'react'
5 | import {
6 | BrowserRouter as Router,
7 | NavLink,
8 | Redirect,
9 | Route,
10 | Switch,
11 | } from 'react-router-dom'
12 |
13 | import { Dashboard, HeroDetail, Heroes } from './components'
14 | import { HeroService } from './hero.service'
15 | import { HttpClient, HttpClientConfig } from './http-client.service'
16 | import { Messages, MessageService } from './messages'
17 |
18 | export class App extends Component {
19 | title = 'Tour of Heroes'
20 | render() {
21 | return (
22 |
23 |
78 | )
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/debug.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Provider as ProviderConfig,
3 | ReflectiveInjector,
4 | Type,
5 | } from 'injection-js'
6 | import React, { ReactElement, ReactNode } from 'react'
7 |
8 | import { rootInjector } from '../services/injector-context'
9 | import { isProvider, isType } from '../utils/guards'
10 |
11 | export const Debug = (props: {
12 | enable: boolean
13 | parentInjector: ReflectiveInjector
14 | children: ReactNode
15 | registeredProviders: ProviderConfig[]
16 | label?: string
17 | }) => {
18 | const { children, enable, label, registeredProviders, parentInjector } = props
19 |
20 | if (!enable) {
21 | return children as ReactElement
39 |
47 | )
48 |
49 | function json{injectorLabel}
41 |
42 | Registered Providers: {json(registeredProvidersNames)}
43 |
44 |
41 |
95 |
42 | count module
43 |
44 |
68 |
91 |
69 | Counter
70 |
71 |
15 |
21 | )
22 | }
23 | componentDidMount() {
24 | const { logger } = this.props
25 |
26 | logger.log('Counter Logged')
27 | }
28 | }
29 |
30 | export class CounterForHoc extends Component<{
31 | injectables: [Logger, CounterService]
32 | children?: ReactNode
33 | }> {
34 | render() {
35 | // tslint:disable:jsx-no-lambda
36 | const {
37 | injectables: [, counterService],
38 | children,
39 | } = this.props
40 |
41 | return (
42 | Counter
16 |
43 |
49 | )
50 | }
51 | componentDidMount() {
52 | const {
53 | injectables: [logger],
54 | } = this.props
55 |
56 | logger.log('Counter Logged')
57 | }
58 | }
59 |
60 | type ErrorBoundaryState = typeof errorBoundaryInitialState
61 | const errorBoundaryInitialState = {
62 | hasError: false,
63 | error: null as null | Error,
64 | errorInfo: null as null | ErrorInfo,
65 | }
66 |
67 | export class ErrorBoundary extends Component<
68 | { children: ReactChild },
69 | ErrorBoundaryState
70 | > {
71 | readonly state = errorBoundaryInitialState
72 |
73 | // static getDerivedStateFromError(
74 | // error: any
75 | // ): PartialCounter
44 |
95 |
102 | )
103 | }
104 |
105 | // Normally, just render children
106 | return this.props.children
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/config/rollup.config.js:
--------------------------------------------------------------------------------
1 | import { resolve } from 'path'
2 | import sourceMaps from 'rollup-plugin-sourcemaps'
3 | import nodeResolve from 'rollup-plugin-node-resolve'
4 | import json from 'rollup-plugin-json'
5 | import commonjs from 'rollup-plugin-commonjs'
6 | import replace from 'rollup-plugin-replace'
7 | import { uglify } from 'rollup-plugin-uglify'
8 | import { terser } from 'rollup-plugin-terser'
9 | import { getIfUtils, removeEmpty } from 'webpack-config-utils'
10 |
11 | import pkg from '../package.json'
12 | const {
13 | pascalCase,
14 | normalizePackageName,
15 | getOutputFileName,
16 | } = require('./helpers')
17 |
18 | /**
19 | * @typedef {import('./types').RollupConfig} Config
20 | */
21 | /**
22 | * @typedef {import('./types').RollupPlugin} Plugin
23 | */
24 |
25 | const env = process.env.NODE_ENV || 'development'
26 | const { ifProduction } = getIfUtils(env)
27 |
28 | const LIB_NAME = pascalCase(normalizePackageName(pkg.name))
29 | const ROOT = resolve(__dirname, '..')
30 | const DIST = resolve(ROOT, 'dist')
31 |
32 | /**
33 | * Object literals are open-ended for js checking, so we need to be explicit
34 | * @type {{entry:{esm5: string, esm2015: string},bundles:string}}
35 | */
36 | const PATHS = {
37 | entry: {
38 | esm5: resolve(DIST, 'esm5'),
39 | esm2015: resolve(DIST, 'esm2015'),
40 | },
41 | bundles: resolve(DIST, 'bundles'),
42 | }
43 |
44 | /**
45 | * @type {string[]}
46 | */
47 | const external = Object.keys(pkg.peerDependencies) || []
48 |
49 | /**
50 | * @type {Plugin[]}
51 | */
52 | const plugins = /** @type {Plugin[]} */ ([
53 | // Allow json resolution
54 | json(),
55 |
56 | // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
57 | commonjs(),
58 |
59 | // Allow node_modules resolution, so you can use 'external' to control
60 | // which external modules to include in the bundle
61 | // https://github.com/rollup/rollup-plugin-node-resolve#usage
62 | nodeResolve(),
63 |
64 | // Resolve source maps to the original source
65 | sourceMaps(),
66 |
67 | // properly set process.env.NODE_ENV within `./environment.ts`
68 | replace({
69 | exclude: 'node_modules/**',
70 | 'process.env.NODE_ENV': JSON.stringify(env),
71 | }),
72 | ])
73 |
74 | /**
75 | * @type {Config}
76 | */
77 | const CommonConfig = {
78 | input: {},
79 | output: {},
80 | inlineDynamicImports: true,
81 | // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
82 | external,
83 | }
84 |
85 | /**
86 | * @type {Config}
87 | */
88 | const UMDconfig = {
89 | ...CommonConfig,
90 | input: resolve(PATHS.entry.esm5, 'index.js'),
91 | output: {
92 | file: getOutputFileName(
93 | resolve(PATHS.bundles, 'index.umd.js'),
94 | ifProduction()
95 | ),
96 | format: 'umd',
97 | name: LIB_NAME,
98 | sourcemap: true,
99 | },
100 | plugins: removeEmpty(
101 | /** @type {Plugin[]} */ ([...plugins, ifProduction(uglify())])
102 | ),
103 | }
104 |
105 | /**
106 | * @type {Config}
107 | */
108 | const FESMconfig = {
109 | ...CommonConfig,
110 | input: resolve(PATHS.entry.esm2015, 'index.js'),
111 | output: [
112 | {
113 | file: getOutputFileName(
114 | resolve(PATHS.bundles, 'index.esm.js'),
115 | ifProduction()
116 | ),
117 | format: 'es',
118 | sourcemap: true,
119 | },
120 | ],
121 | plugins: removeEmpty(
122 | /** @type {Plugin[]} */ ([...plugins, ifProduction(terser())])
123 | ),
124 | }
125 |
126 | export default [UMDconfig, FESMconfig]
127 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # Examples
2 |
3 | `Read-di` is distributed with a few examples in its source code. Most of these examples are also on `CodeSandbox`.
4 |
5 | All examples use `parcel-js` as this is the easiest way how to boot any demo app ;).
6 |
7 | ## Counter
8 |
9 | Run the [Counter](./counter) example:
10 |
11 | ```
12 | git clone https://github.com/hotell/rea-di.git
13 |
14 | cd rea-di/examples/counter
15 | yarn install
16 | yarn start
17 | ```
18 |
19 | Or check out the [sandbox](https://codesandbox.io/s/github/Hotell/rea-di/tree/master/examples/counter).
20 |
21 | This is the most basic example of using Rea-di for handling state on Service layer with React.
22 |
23 | This example includes tests.
24 |
25 | ## Counter With Logger
26 |
27 | Run the [Counter with Logger app](.) example:
28 |
29 | ```
30 | git clone https://github.com/hotell/rea-di.git
31 |
32 | cd rea-di/examples/counter-with-logger
33 | yarn install
34 | yarn start
35 | ```
36 |
37 | Or check out the [sandbox](https://codesandbox.io/s/github/Hotell/rea-di/tree/master/examples/counter-with-logger).
38 |
39 | This builds on previous counter example and adds `Logger` service which is injected to `CounterService`. With that we get logs into console on every action.
40 |
41 | ## Counter With multiple Injectors and hierarchies
42 |
43 | Run the [Counter with Multiple Injectors and hierarchies app](.) example:
44 |
45 | ```
46 | git clone https://github.com/hotell/rea-di.git
47 |
48 | cd rea-di/examples/counter-with-multiple-injectors
49 | yarn install
50 | yarn start
51 | ```
52 |
53 | Or check out the [sandbox](https://codesandbox.io/s/github/Hotell/rea-di/tree/master/examples/counter-with-multiple-injectors).
54 |
55 | This builds on previous **counter with logger** example and demonstrates multiple child injectors resolution and aliasing by using one common `Counter` component with different service instances injected by the same token resolved via tree hierarchy. Also it adds configurable `MultiplyCounterService`.
56 |
57 | Try to do this without DI framework... Good luck with that 😇
58 |
59 | ## Github User Search
60 |
61 | Run the [Github User Search](./github-user) example:
62 |
63 | ```
64 | git clone https://github.com/hotell/rea-di.git
65 |
66 | cd rea-di/examples/github-user
67 | yarn install
68 | yarn start
69 | ```
70 |
71 | Or check out the [sandbox](https://codesandbox.io/s/github/Hotell/rea-di/tree/master/examples/github-user).
72 |
73 | This demonstrates simple implementation of DI and shows usage of both `Something went wrong.
96 |
97 | {this.state.error && this.state.error.toString()}
98 |
101 |
99 | {this.state.errorInfo.componentStack}
100 |
18 |
21 | )
22 | }
23 | }
24 | const CounterModuleEnhanced = withDependencyProvider(Logger, CounterService)(
25 | CounterModule
26 | )
27 |
28 | const CounterEnhanced = withInjectables({
29 | logger: Logger,
30 | counterService: CounterService,
31 | })(Counter)
32 |
33 | const App = () => {
34 | return (
35 | {this.props.title}
19 | {JSON.stringify(props)}
128 | }
129 |
130 | const InjectConsumerEnhanced = withInjectables({
131 | car: Car,
132 | engine: optional(Engine),
133 | })(InjectConsumer)
134 |
135 | it(`should properly resolve optional injection on component level`, () => {
136 | const Test = withDependencyProvider(Car)(() => {
137 | return (
138 |
20 |
31 | )
32 | }
33 | }
34 |
35 | const App = () => {
36 | return (
37 | {this.props.title}
21 |
102 |
150 |
108 |
115 |
146 | )
147 | }}
148 |
119 |
144 |
125 |
132 |
139 |
140 | )
141 | }}
142 | {JSON.stringify(props.car)}
219 | }
220 |
221 | const App = () => {
222 | return (
223 |
231 |
234 | )
235 | }}
236 | {JSON.stringify(engine)}
232 | {JSON.stringify(props.car)}
251 | }
252 |
253 | const App = () => {
254 | return (
255 | `
187 |
188 | Abstract class which implements `setState` on your service class. If you wanna handle state within your service you need to extend from this Base class and implement `state`, exactly like you would with `React.Component`
189 |
190 | ```ts
191 | const initialState = {
192 | count: 0,
193 | }
194 |
195 | @Injectable()
196 | class CounterService extends Stateful
257 |
549 |
550 | ---
551 |
552 | ### State management within service layer
553 |
554 | For developers with Angular background, storing state within Service is a must have. While that makes sense in Angular ( because handling state within Angular component is a mess ) in React this abstraction isn't needed that much as React component state is mostly sufficient for that purpose.
555 |
556 | With `rea-di`, you can handle state on service layer although we encourage you to handle state internally in `Component.state` or via some store state management library ( like Redux ).
557 |
558 | > For those familiar with `Unstated`, with `rea-di`, you got all unstated library power at your disposal within service layer and much more 🌻.
559 |
560 | Ok let's look at our previous example. We handle users array state within `Users` Component. We can make our `UserService` state aware and make it handle our state and with that remove any state from our components.
561 |
562 | ```tsx
563 | // app/services.ts
564 | import { Stateful } from 'rea-di'
565 |
566 | // (1) we define State type and initialState which needs to be implemented when we extend WithState
567 | type State = typeof ReadonlyBuilding a github user search
258 |
259 | Let's build a simple github user search app, by leveraging `rea-di`.
260 |
261 | This is what we're gonna build: 
262 |
263 | And this is how DI tree will look like 
264 |
265 | > For complete implementation/demo checkout [examples](./examples/github-user)
266 |
267 | 1. Implementing GithubUserService
268 |
269 | We need implement our service, which is a pure javascript class with to encapsulate logic for fetching user data from github. To make it work with `rea-di` and `injection-js` we need to annotate our class with `@Injectable()` decorator. Now we can leverage dependency injection via constructor injection, and inject an `HttpClient` [axios-http](https://github.com/Hotell/axios-http), which will be used for XHR.
270 |
271 | We will implement 3 methods, for getting user info, user repos and one aggregated method for getting both.
272 |
273 | ```tsx
274 | // user.service.ts
275 | import { HttpClient } from '@martin_hotell/axios-http'
276 | import { Injectable } from 'injection-js'
277 |
278 | import { GithubUserRepo } from './repo.model'
279 | import { GithubUser } from './user.model'
280 |
281 | const endpointPath = 'users'
282 |
283 | @Injectable()
284 | export class GithubUserService {
285 | constructor(private http: HttpClient) {}
286 | getRepos(username: string) {
287 | return this.http.get
321 |
334 | )
335 | }
336 | }
337 | ```
338 |
339 | Quite a lot happening there, let's go step by step
340 |
341 | So we are using `GitHub User Search 👀
322 |
523 |
530 | )
531 | }
532 |
533 | // if username only is set, that means we are in submitting phase
534 | if (username) {
535 | return `Loading... ${username}`
536 | }
537 | }}
538 |
524 |
526 |
527 |
529 |
609 | {service.state.users ? (
610 | 'Loading users...'
611 | ) : (
612 |
615 | )
616 | }
617 | componentDidMount() {
618 | // we only trigger HTTP call via our injected service. State will be handled and updated internally in that service
619 | this.props.service.getUsers()
620 | }
621 | }
622 | ```
623 |
624 | ### Writing tests
625 |
626 | Testing belongs to one of the main areas where DI framework shines!
627 |
628 | How to test our components with rea-di ?
629 |
630 | You just provide mocks of your services for both unit and integration tests and you're good to go 👌. Old good React ❤️
631 |
632 | ```tsx
633 | import { DependencyProvider } from 'rea-di'
634 |
635 | const DATA: Users[] = [{ name: 'Martin' }, { name: 'John' }]
636 |
637 | class UserServiceMock extends UserService {
638 | getUsers = jest.fn(() => this.setState(() => ({ users: DATA })))
639 | }
640 |
641 | describe('
