@webqit/oohtml 3.0.1-2 → 3.0.1-4

package/README.md

@@ -651,7 +651,7 @@ Here, we get the `binding` attribute for a declarative and neat, key/value data-
 | `%`  | Class Name | `<div binding="% active:app.isActive; % expanded:app.isExpanded;"></div>` |
 | `~`  | Attribute Name | `<a binding="~ href:person.profileUrl+'#bio'; ~ title:'Click me';"></a>` |
 |   | Boolean Attribute | `<a binding="~ ?required:formField.required; ~ ?aria-checked: formField.checked"></a>` |
-| `@`  | Structural Directive: | *See next table* |
+| `@`  | Structural Directive: | *See below* |
 | `@text`   | Plain text content | `<span binding="@text:firstName+' '+lastName;"></span>` |
 | `@html`   | Markup content | `<span binding="@html: '<i>'+firstName+'</i>';"></span>` |
 |  `@items`  | A list, with argument in the following format:<br>`<declaration> <of\|in> <iterable> / <importRef>` | *See next two tables* |
@@ -690,9 +690,9 @@ Generated item elements are automatically assigned a corresponding index with a
 
 ### Quantum Scripts
 
-We often still need to write more serious reactive logic on the UI than a declarative data-binding language can provide. But we shouldn't need to reach for special tooling or some "serious" programming paradigm on top of JavaScript.
+We often still need to write more serious reactive logic on the UI than a declarative data-binding language can provide for. But we shouldn't need to reach for special tooling or some "serious" programming paradigm on top of JavaScript.
 
-Here, from the same `<script>` element we write everyday, we get a direct upgrade path to reactive programming in just an attribute: `quantum`:
+Here, from the same `<script>` element we already write, we get a direct upgrade path to reactive programming in just an attribute: `quantum`:
 
 ```html
 <script quantum>
@@ -732,7 +732,7 @@ Here, from the same `<script>` element we write everyday, we get a direct upgrad
 </main>
 ```
 
-**-->** *with content being whatever you normally would write in a `<script>` element*:
+**-->** *with content being whatever you normally would write in a `<script>` element, but without the "manual" work for reactivity*:
 
 ```html
 <main>
@@ -750,15 +750,48 @@ Here, from the same `<script>` element we write everyday, we get a direct upgrad
 </main>
 ```
 
+**-->** *within which other "live" APIs, like the Namespace API above, fit seamlessly*:
+
+```html
+<main namespace>
+
+  <script scoped quantum>
+    if (this.namespace.specialButton) {
+      console.log('specialButton present!');
+    } else {
+      console.log('specialButton not present!');
+    }
+    let specialButton = this.namespace.specialButton;
+    console.log(specialButton);
+  </script>
+
+</main>
+```
+
+```js
+const main = document.querySelector('main');
+const button = document.createElement('button');
+button.id = 'specialButton';
+
+const addButton = () => {
+  main.appendChild(button);
+  setTimeout(removeButton, 5000);
+};
+const removeButton = () => {
+  button.remove();
+  setTimeout(addButton, 5000);
+};
+```
+
 <details><summary>Details</summary>
 
 It's Imperative Reactive Programming ([IRP](https://en.wikipedia.org/wiki/Reactive_programming#Imperative)) right there and it's the [Quantum](https://github.com/webqit/quantum-js) runtime extension to JavaScript!
 
 Here, the runtime executes your code in a special execution mode that gets literal JavaScript expressions to statically reflect changes. This makes a lot of things possible on the UI! The [Quantum JS](https://github.com/webqit/quantum-js) documentation has a detailed run down.
 
-Now, in each case above, reactivity is stopped on script's removal from the DOM.
+Now, in each case above, reactivity terminates on script's removal from the DOM. But of course, DOM event handlers bound via `addEventListener()` would still need to be terminated in their own way.
 
-<details>
+</details>
 
 ## Data Plumbing
 

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "3.0.1-2",
+  "version": "3.0.1-4",
   "license": "MIT",
   "repository": {
     "type": "git",