smallorange-react-async-prefetcher v1.0.0

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 (
				<ul>
					{_.map(asyncs, (value, key) => (
						<li key={key}>{key} - {value}</li>
					))}
				</ul>
			);
		}
	}

	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 (
				<section>
					<ul>
						{_.map(asyncs, (value, key) => (
							<li key={key}>{key} - {value}</li>
						))}
					</ul>
					
					{Child ? <Child/> : null}

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

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/>); // Component with prefetched data from asyncs and resolved dependencies
		});

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

	renderToStaticMarkup(<ContainerApp/>);