31:T5d3,md`Introduce the notation: x = y to describe the situation that x = .. is run in one cell, and y is run in another cell. We now have the situation that (viewof x).value.v += 20; (viewof x).value = x; is disallowed, whereas (viewof x).value.v += 20; (viewof x).value = x; is indeed allowed. This is kind of logical, as the principle that x and viewof x can't co-occur, as any other javascript language principle, is enforced on lexical scope. However, whereas (viewof x).value.v += 20; (viewof x).value = x; is allowed, ((y) => { (viewof x).value.v += 20; (viewof x).value = y; })(x) is not. So we see that really with the principle introduced above, the cell scope is a new kind of lexical scope. I'm not sure about the coherence / logic of this all, it's a bit complicated. But it does seems a bit awkward to me, and seems to break another implicit principle in which we should have the behavioral equalities S; T = S; T = S; T = S; T for cells, i.e. you should be able to think of them as if they were glue-able, i.e. they don't introduce a new notion of scope, other than the imaginable function scope necessary for a reactivity interpretation, i.e. it's just a (wonderfully imagined and well-designed) UI for a library such as Knockout.`32:[] 2f:{"title":"Mutable Values?","cells":[{"id":0,"value":"md`# Mutable Values?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`I'm going to play the devil's advocate for a bit, bear with me...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof x = mutab({ v: 0}) // Define a mutable and set its initial value.","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`The current value of *x* is: ${x.v}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`Being able to use viewof x in javascript expressions allows you to reference and change both the value of x, as well as the view of x:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"{\n var i = 0;\n const button = html``;\n button.onclick = () => { (viewof x).textContent += `..`; }\n //button.onclick = () => { (viewof x).value.v += 2; (viewof x).value = x; }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`We can also set the value of *x* using \\`viewof x.value\\` instead of \\`x\\`. This is non-reactive: changing the value of *x* won’t trigger a re-evaluation of a cell that references \\`viewof x\\`, and thus this cell is not a circular definition.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"{\n const button = html` with (viewof x).value = { v: (viewof x).value.v + 1 }

Does increment, and also triggers, due to the absence of any explicit reference of x itself in the entire cell.

`;\n button.onclick = () => { (viewof x).value = { v: (viewof x).value.v + 1 }; }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"{\n const button = html` with (viewof x).value.v++; (viewof x).value = x;

Does increment, but then fails on the second statement due to x is not defined.
It seems cells that contain viewof x remove the possiblity to reference x.

`;\n //button.onclick = () => { (viewof x).value = { v: x.v + 1 }; }\n button.onclick = () => { (viewof x).value.v++; (viewof x).value = x; }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"(function increment () {\n (viewof x).value.v += 20; (viewof x).value = x;\n})()","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"md`^ Here we explicitly see this principle at work`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`This is indeed an important principle, for the reason mentioned above: removing circularity.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`But of course we can trick the system:
[x.v = ${x.v}]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"function increment (y) {\n (viewof x).value.v += 20; (viewof x).value = y;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"{\n const button = html` with increment(x);`;\n button.onclick = () => { increment(x); }\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"md`However:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"{ ((y) => { (viewof x).value.v += 20; (viewof x).value = y; })(x) }","pinned":true,"hidden":false,"mode":"ojs"},{"id":543,"value":"md`But, we do have circularity:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"viewof A = mutab({ v: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"function incrementA (B) {\n (viewof A).value.v += 20; (viewof A).value = B;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"incrementA(A)","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"md`^ Wait, no, maybe this is just gibberish. If the cell is the unit of reactivity, then it is to be expected that the above holds, and the 'behavioral glueing equalities' do not. Though a bit paradoxical, it is in fact expected.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`## Implementation of mutable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"function mutab(value) {\n const id = '['+Math.floor(Math.random()*1000)+']';\n const view = html`

`; // TODO Proper inspection…\n  view.textContent = `Mutable ${id} = ${JSON.stringify(value)}`;\n  Object.defineProperty(view, \"value\", {\n    get: () => value,\n    set: nextValue => {\n      view.textContent = `Mutable ${id} = ${JSON.stringify(value = nextValue)}`;\n      view.dispatchEvent(new CustomEvent(\"input\"));\n      return value;\n    }\n  });\n  return view;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}