import createReflectiveCounter from './createReflectiveCounter.js';

let prim = 1945; // a primitive

let myObj = { // an object

foo: 1945,

bar: 1945,

};

// diagnostic probes monitoring html-snippet invocations

const fooProbe = createReflectiveCounter('myObj.foo section fired');

const barProbe = createReflectiveCounter('myObj.bar section fired');

const primProbe = createReflectiveCounter('prim section fired');

function resetProbes() {

[fooProbe, barProbe, primProbe].forEach( (probe) => probe.reset() );

}

function incrementFooIndirectly(obj) {

obj.foo++;

// myObj=myObj; // ... need this to reflex

}

function reducer(obj) {

myObj = {...myObj, foo:1945};

}

</script>

<b>Reactive Triggers</b>

<i>... showing JS Identity Semantics</i>

<div class="container">

<div class="item"><mark>{$primProbe}:</mark> prim: {primProbe.monitor() || prim}</div>

<div class="item"><mark>{$fooProbe}:</mark> myObj.foo: {fooProbe.monitor() || myObj.foo}</div>

<div class="item"><mark>{$barProbe}:</mark> myObj.bar: {barProbe.monitor() || myObj.bar}</div>

</div>

<small>... reflexive counts shown in <mark>yellow</mark></small>