From 3fc585d012fb9a817b95822c468225ad6b286fe6 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Mon, 4 Dec 2023 18:28:18 +0100
Subject: [PATCH] :memo: update scopes documentation

---
 docs/p05-scopes.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/p05-scopes.html b/docs/p05-scopes.html
index cc87757..0171ca0 100644
--- a/docs/p05-scopes.html
+++ b/docs/p05-scopes.html
@@ -115,7 +115,7 @@ function component(){
 	});
 	return el("p", textContent, onclickChange);
 }
-</code></div><script>Flems(document.getElementById("code-example-1-5am55s7aitw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, empty } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(component),\\n\\tel(\\\"button\\\", {\\n\\t\\ttextContent: \\\"Remove\\\",\\n\\t\\tonclick: ()=> empty(document.body),\\n\\t\\ttype: \\\"button\\\"\\n\\t})\\n);\\nimport { on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nimport { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nfunction component(){\\n\\tconst textContent= O(\\\"Click to change text.\\\");\\n\\n\\tconst onclickChange= on(\\\"click\\\", function redispatch(){\\n\\t\\ttextContent(\\\"Text changed! \\\"+(new Date()).toString())\\n\\t});\\n\\treturn el(\\\"p\\\", textContent, onclickChange);\\n}\\n\"}],\"toolbar\":false}"));</script><p>The text content of the paragraph is changing when the value of the observable <code>textContent</code> is changed. Internally, there is association between <code>textContent</code> and the paragraph similar to using <code>S.on(textContent, /* update the paragraph */)</code>.</p><p>This listener must be removed when the component is removed from the DOM. To do it, the library assign internally <code>on.disconnect(/* remove the listener */)(host())</code> to the host element.</p><p class="notice">The library DOM API and observables works ideally when used declaratively. It means, you split your app logic into three parts as it was itroduced in <a href="http://localhost:40911/docs/p04-observables#h-introducing-observables">Observables</a>.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">/* PSEUDO-CODE!!! */
+</code></div><script>Flems(document.getElementById("code-example-1-5am55s7aitw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, empty } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(component),\\n\\tel(\\\"button\\\", {\\n\\t\\ttextContent: \\\"Remove\\\",\\n\\t\\tonclick: ()=> empty(document.body),\\n\\t\\ttype: \\\"button\\\"\\n\\t})\\n);\\nimport { on } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nimport { O } from \\\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js\\\";\\nfunction component(){\\n\\tconst textContent= O(\\\"Click to change text.\\\");\\n\\n\\tconst onclickChange= on(\\\"click\\\", function redispatch(){\\n\\t\\ttextContent(\\\"Text changed! \\\"+(new Date()).toString())\\n\\t});\\n\\treturn el(\\\"p\\\", textContent, onclickChange);\\n}\\n\"}],\"toolbar\":false}"));</script><p>The text content of the paragraph is changing when the value of the observable <code>textContent</code> is changed. Internally, there is association between <code>textContent</code> and the paragraph similar to using <code>S.on(textContent, /* update the paragraph */)</code>.</p><p>This listener must be removed when the component is removed from the DOM. To do it, the library assign internally <code>on.disconnected(/* remove the listener */)(host())</code> to the host element.</p><p class="notice">The library DOM API and observables works ideally when used declaratively. It means, you split your app logic into three parts as it was itroduced in <a href="http://localhost:40911/docs/p04-observables#h-introducing-observables">Observables</a>.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">/* PSEUDO-CODE!!! */
 import { el } from "deka-dom-el";
 import { O } from "deka-dom-el/observables";
 function component(){