Lightning Value Provider

my.app

<aura:application >
	<!-- Value Providers -->
	<c:XYZ context="{!this}" />
	<c:valueProvider context="{!this}" name="X" values="{Y: 'y', Z:'z'}" />
	
	<!-- Events -->
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
	<!-- Markup -->
	<!-- Note: this is how simple you can use the values in the markup -->
	{!XYZ.FOO}
	{!XYZ.BAR}
	<br />
	{!X.Y}
	{!X.Z}
</aura:application>

myController.js

({
	doInit: function(cmp, evt, hlp) {
		// Note: this is how simple you use it in your context component (or app)
		console.log(XYZ.FOO);
		console.log(X.Y);
		
		// Note: this is how you could also see the markup value provider.
		console.log(cmp.get("XYZ.BAR"));
	},
})

valueProvider.cmp

<aura:component extensible="true" >
	<aura:attribute name="name" type="String" required="true" />
	<aura:attribute name="values" type="Map" required="true" />
	<aura:attribute name="context" type="Map" required="true"/>
    
	<!-- Events -->
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>

valueProviderController.js

({
	doInit: function(cmp, evt, hlp) {
		const providerName = cmp.get("v.name");
		const values = cmp.get("v.values");
		
		// Note: add the markup porvider to the context component
		cmp.get("v.context").addValueProvider(providerName, {
			get: (key) => values[key]
		});
		
		// Note: add the javascript provider to the window
		Object.defineProperty(window, providerName, {
			writable: true,
			value: values
		});
	},
})

XYZ.cmp

<aura:component extends="c:valueProvider">
	<aura:set attribute="name" value="XYZ" />
	<aura:set attribute="values" value="{FOO:'Foo', BAR: 'Bar'}" />
</aura:component>