@webqit/oohtml 3.0.1-0 → 3.0.1-2

package/README.md

@@ -38,13 +38,13 @@ This project pursues an object-oriented approach to HTML and implicitly revisits
 
 ## Modular HTML
 
-Modular HTML is a markup pattern that lets us write arbitrary markup as self-contained objects - with each *encapsulating* its own structure, styling and logic - as against the regular idea of having everything converge and conflict on one global scope!
+Modular HTML is a markup pattern that lets us write arbitrary markup as self-contained objects - with each *encapsulating* their own structure, styling and logic!
 
 OOHTML makes this possible in just simple conventions - via two new attributes: `namespace` and `scoped`!
 
 ### Namespacing
 
-Naming things is hard! That's especially so where there's one global namespace and a miriad of potential conflicts - as is the case with HTML!
+Naming things is hard! That's especially so where you have one global namespace and a miriad of potentially conflicting names to coordinate!
 
 Here, we get the `namespace` attribute for designating an element as own naming context for identifiers instead of the global namespace:
 
@@ -148,9 +148,18 @@ Here, we get the `scoped` attribute for *scoping* said element-specific styleshe
 let { styleSheets, scripts } = user; // APIs that are analogous to the document.styleSheets, document.scripts properties
 ```
 
+<details><summary>Learn more</summary>
+
+The `scoped` has two effects on the `<script>` element:
+
++ The `this` keyword is a reference to the script's host element
++ The `<script>` element is executed again on each re-insertion to the DOM
+
+</details>
+
 ## HTML Imports
 
-HTML Imports is a realtime module system for HTML written in HTML! Something like it is the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) and [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) system in SVG.
+HTML Imports is a realtime module system for HTML that speaks HTML! Something like it is the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) and [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use) system in SVG.
 
 OOHTML makes this possible in just simple conventions - via a new `def` attribute and a complementary new `<import>` element!
 
@@ -570,7 +579,7 @@ console.log(localOrGlobalImport2); // { value: div }
 
 ## Data Binding
 
-Data binding is the concept of having a mechanism that declaratively drives the UI from application data, ensuring that the relevant parts of the UI are *automatically* updated as application state changes.
+Data binding is about declaratively binding the UI to application data, ensuring that the relevant parts of the UI are *automatically* updated as application state changes.
 
 OOHTML makes this possible in just simple conventions - via a new comment-based data-binding syntax `<?{ }?>` and a complementary new `binding` attribute! And there's one more: Quantum Scripts which brings the most advanced form of reactivity to HTML!
 
@@ -681,7 +690,75 @@ Generated item elements are automatically assigned a corresponding index with a
 
 ### Quantum Scripts
 
-*[TODO]*
+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.
+
+Here, from the same `<script>` element we write everyday, we get a direct upgrade path to reactive programming in just an attribute: `quantum`:
+
+```html
+<script quantum>
+  // Code here
+  console.log(this); // window
+</script>
+```
+
+```html
+<script type="module" quantum>
+  // Code here
+  console.log(this); // undefined
+</script>
+```
+
+**-->** *which adds up really well with the idea of scoping*:
+
+```html
+<main>
+
+  <script scoped quantum>
+    // Code here
+    console.log(this); // main
+  </script>
+
+</main>
+```
+
+```html
+<main>
+
+  <script type="module" scoped quantum>
+    // Code here
+    console.log(this); // main
+  </script>
+
+</main>
+```
+
+**-->** *with content being whatever you normally would write in a `<script>` element*:
+
+```html
+<main>
+
+  <script type="module" scoped quantum>
+    import { someAPI } from 'some-module';
+
+    let clickCount = 0;
+    console.log(clickCount);
+    someAPI(clickCount);
+
+    this.addEventListener('click', e => clickCount++);
+  </script>
+
+</main>
+```
+
+<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.
+
+<details>
 
 ## Data Plumbing
 

package/package.json

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