async-components.js

const registry = {};

const Async = Ractive.proxy(handle => {
	const proxy = {};
	const outer = handle.proxy.template;
	const name = outer.m.find(a => a.n === 'async-name').f;
	
	let placeholder = (outer.f || []).find(e => e.e === 'loading');
	if (placeholder) placeholder = placeholder.f;
	else placeholder = ['loading...']; // default placeholder
	
	const tpl = [{ e: name, t: outer.t, m: outer.m.filter(a => a.n !== 'async-name'), f: outer.f.filter(e => e.e !== 'loading') }];
	
	if (Ractive.findPlugin(name, 'components', handle.ractive)) {
		proxy.template = tpl;
	}	else {
		proxy.template = placeholder;
		
		loadComponent(name).then(cmp => {
			handle.ractive.components[name] = cmp;
			delete outer.p.content;
			proxy.template = tpl;
			handle.refresh();
		});
	}
	
	return proxy;
}, {});

function loadComponent(name) {
	return new Promise(ok => {
		setTimeout(() => {
			ok(Ractive.extend({
				template: `<h3>Hello from component '${name}'</h3> You said that my 'foo' is "{{foo}}"<h3>What follows is my content:</h3>{{yield}}`
			}));
		}, 5000);
	});
}

new Ractive({
	target: '#target',
	template: '#template',
	proxies: { Async },
	data: {
		bar: 'I am bar at root'
	},
	components: {
		//ComponentA: Ractive.extend({ template: 'sync ComponentA - {{foo}}<br/>{{yield}}' }) /* uncomment this to see what happens if there's already a ComponentA available */
	}
});