createchildexample.ts

import createApp from 'dojo-app/createApp';
import createStatefulChildrenMixin from 'dojo-widgets/mixins/createStatefulChildrenMixin';
import createParentListMixin from 'dojo-widgets/mixins/createParentListMixin';
import createCachedRenderMixin from 'dojo-widgets/mixins/createCachedRenderMixin';
import createRenderableChildrenMixin from 'dojo-widgets/mixins/createRenderableChildrenMixin';
import createWidget from 'dojo-widgets/createWidget';
import createMemoryStore from 'dojo-widgets/util/createMemoryStore';

const widgetStore = createMemoryStore({
	data: [
		{ id: 'parent', children: [] }
	]
});

const app = createApp({
	defaultWidgetStore: widgetStore
});

const createParentWidget = createCachedRenderMixin
	.mixin(createParentListMixin)
	.mixin({
		mixin: createStatefulChildrenMixin,
		initialize(instance) {
			instance
				.createChild(createWidget, { state: { label: 'child widget' } })
				.catch((err) => {
					console.error(err);
				});
		}
	})
	.mixin(createRenderableChildrenMixin);

app.loadDefinition({
	widgets: [
		{ id: 'parent', factory: createParentWidget }
	]
});

app.realize(document.body)
	.catch((err) => {
		console.error(err);
	});