Small Orange Async React Prefetcher

Usage

export class Child extends React.Component {
static asyncs = {
childAsync: Observable.of('child async'),
childAsync2: Observable.of('child async II'),
notAsync: 'notAsync'
};

render() {
const {
asyncs = {}
} = this.props;

return (

{_.map(asyncs, (value, key) => (

• {key} - {value}

))}

);
}
}

export class App extends React.Component {
static asyncs = {
parentAsync: Observable.of('parent async'),
parentAsync2: Observable.of('parent async II'),
notAsync: 'notAsync'
};

static dependencies = {
child: {
component: 'Child'
},
children: [{
component: 'Child'
}, {
component: 'Child'
}]
};

render() {
const {
asyncs = {},
dependencies = {}
} = this.props;

const Child = dependencies.child || null;

return (

{_.map(asyncs, (value, key) => (

• {key} - {value}

))}

{Child ? : null}

{_.map(dependencies.children, (Component, key) => (
Component ? : null
))}

);
}
}

Prefetcher usage

import {
renderToStaticMarkup
} from 'react-dom/server';
import {
Prefetcher,
container
} from 'smallorange-react-async-prefetcher';

import * as components from 'components';

const descriptor = {
app: {
component: 'App' || components.App
},
child: {
component: 'Child' || components.Child
}
};

const prefetcher = new Prefetcher(components / just provide this if you intend to lookup components via strings, in descriptor /);

prefetcher.run(descriptor.app)
.subscribe(response => {
const Component = response;

renderToStaticMarkup(); // Component with prefetched data from asyncs and resolved dependencies
});

// Or via container
const ContainerApp = container(component.App);

renderToStaticMarkup();