Composing behavior with resources

Resources can be used in multiple widgets and the cached data will be shared. However, sharing the data is sometimes not sufficient when composing multiple "data-aware" widgets together. There are occasions that multiple widgets want to be able to share the current resource options, such that one widget can set a filter and another widget can react and render the filtered data set. This is where creating a resource with "shared options" come in. Sharing options across widgets is as simple as passing the same options to multiple widgets with along with the resource template.

Note: The widget itself can choose to ignore options that are passed with the template, this should be documented with the widget.

MyComposedWidget.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import { createResourceMiddleware } from '@dojo/framework/core/middleware/resources';

interface ResourceData {
	value: string;
	label: string;
}

const resource = createResourceMiddleware<ResourceData>();

const factory = create({ resource });

export default factory(function MyComposedWidget({ id, middleware: { resource } }) {
	const { createOptions } = resource;
	const options = createOptions(id);

	return (
		<div>
			<Results resource={resource({ template, options })} />
			<Pagination resource={resource({ template, options })} />
		</div>
	);
});