Csdrhrt

To implement something like a public ValueProvider I implemented a component combining the features out there to have static values available in js and markup. Now I'm having trouble using the addValueProvider Feature (used for the markup side) since there is no documentation out there.

To make static values accessible for any component, I need to reference the value providing component in the concrete component like:

<!-- Value Providers -->

<c:THINGS context="{!this}" />

THINGS.cmp looks like:

<aura:component >

    <aura:attribute name="context" type="Map" required="true"/>



    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

</aura:component>

THINGSController.js

({

    doInit: function(cmp, evt, hlp) {

        const things = { FOO: "Foo", BAR: "Bar"};



        cmp.get("v.context").addValueProvider("THINGS", {get: ()=>things});

    }

})

Now I should be able to reference FOO like this:

<!-- Value Providers -->

<c:THINGS context="{!this}" />



<!-- Markup -->

<p>{!THINGS.FOO}</p>

The problem I encountered here is, that THINGS.FOO returns the whole Map, what renders to [object Object].

When I discovered this, I started playing around and figured out, that THINGS behaves really weird.

An init handler on my concrete component looks like this:

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

ctrl (JSON.parse&stringify to get around the proxy issue):

doInit: function(cmp, evt, hlp) {

    JSON.parse(JSON.stringify( cmp.get("THINGS.value") ));

    JSON.parse(JSON.stringify( cmp.get("THINGS.FOO") ));

    JSON.parse(JSON.stringify( cmp.get("THINGS.x") ));

    JSON.parse(JSON.stringify( cmp.get("THINGS.value.FOO") ));

    JSON.parse(JSON.stringify( cmp.get("THINGS.asdasd.asdasd.asdd.ads") ));

}

The weird thing here is, that they all returned {FOO: "Foo", BAR: "Bar"}

cmp.get("THINGS") leads to an error message, not knowing what THINGS means.

Conclusion:

Value providers do only work on single values, (or maybe even lists, when we decide to iterate the result.)

cmp.addValueProvider("FOO", {get: ()=>"Foo"});

I hope you agree that this isn't a value provider, it's just a complex way to store a single value.

Quesion:

How are we supposed to use the setValueProvider feature? all I found was this answer that doesn't seem to be fully accurate.

Is there a chance to store simple key value pairs in these providers? if not, why? And where except the Aura Documentation is it documented? All it states is

Adds Custom ValueProviders to a component

Parameters key : String string by which to identify the
valueProvider. Used in expressions in markup, etc.

valueProvider : Object the object to request data from. Must
implement .get(expression), can implement .set(key,value).

Update:

Thanks to Jonathon I was able to solve the mystery and created this gist to share my generic value Provider:

Lightning Value Provider

I decided to make provider names capitalized, so where ever I use it, it does not look like a component, but represents static finals. In our product I use it to port Enums or similar constructs from apex into lightning.

The value provider's get method requires a key to retrieve the value from the map/object. So with your value providers get method returning the entire map you will always get the output of [object Object]. By changing your get method in the addValueProvider function to .addValueProvider("THINGS", {get: (k)=>things[k]});,
when retrieving {!THINGS.FOO} you will get Foo and likewise with {!THINGS.BAR} you would get Bar

Additionally if you also want to be able to update or add new values to the value provider you need to also include a set method.
.addValueProvider("THINGS", {get: (k)=>things[k], set: (k, v)=>things[k]=v});