@webqit/oohtml 2.1.73 → 2.1.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +24 -25
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -640,63 +640,62 @@ Here, we get the `binding` attribute for a declarative and neat, key/value data-
640
640
  | :---- | :---- | :---- |
641
641
  | `&` | CSS Property | `<div binding="&color: someColor;"></div>` |
642
642
  | `%` | Class Name | `<div binding="%active: app.isActive;"></div>` |
643
- | `~` | Attribute Name | `<a binding="~href: person.profileUrl + '#bio';"></a>` |
643
+ | `~` | Attribute Name | `<a binding="~href: person.profileUrl+'#bio';"></a>` |
644
+ | | A Toggled Attribute | `<a binding="~required?: formField.required;"></a>` |
644
645
  | `@` | Structural Directive: | *See next table* |
645
646
 
646
647
  | Directive | Meaning | Usage |
647
648
  | :---- | :---- | :---- |
648
- | `@text` | Plain text content | `<span binding="@text: firstName + ' ' + lastName;"></span>` |
649
- | `@html` | Markup content | `<span binding="@html: '<i>' + firstName + '</i>';"></span>` |
649
+ | `@text` | Plain text content | `<span binding="@text: firstName+' '+lastName;"></span>` |
650
+ | `@html` | Markup content | `<span binding="@html: '<i>'+firstName+'</i>';"></span>` |
650
651
  | `@items` | A list, with argument in the following format:<br>`<declaration> <of\|in> <iterable> / <importRef>` | *See next two tables* |
651
652
 
652
- <details><summary>About <code>For ... Of</code> Loops</summary>
653
+ <details><summary><code>For ... Of</code> Loops</summary>
653
654
 
654
655
  | Idea | Usage |
655
656
  | :---- | :---- |
656
657
  | A `for...of` loop over an array/iterable | `<ul binding="@items: value of [1,2,3] / 'foo#fragment';"></ul>` |
657
- | Same as above but with a `key` declaration | `<ul binding="@items: (value, key) of [1,2,3] / 'foo#fragment';"></ul>` |
658
- | Same as above but with different variable names | `<ul binding="@items: (product, id) of store.products / 'foo#fragment';"></ul>` |
659
- | Same as above but with a dynamic `importRef` | `<ul binding="@items: (product, id) of store.products / store.importRef;"></ul>` |
658
+ | Same as above but with a `key` declaration | `<ul binding="@items: (value,key) of [1,2,3] / 'foo#fragment';"></ul>` |
659
+ | Same as above but with different variable names | `<ul binding="@items: (product,id) of store.products / 'foo#fragment';"></ul>` |
660
+ | Same as above but with a dynamic `importRef` | `<ul binding="@items: (product,id) of store.products / store.importRef;"></ul>` |
660
661
 
661
662
  </details>
662
663
 
663
- <details><summary>About <code>For ... In</code> Loops</summary>
664
+ <details><summary><code>For ... In</code> Loops</summary>
664
665
 
665
666
  | Idea | Usage |
666
667
  | :---- | :---- |
667
- | A `for...in` loop over an object | `<ul binding="@items: key in { a: 1, b: 2 } / 'foo#fragment';"></ul>` |
668
- | Same as above but with a `value` and `index` declaration | `<ul binding="@items: (key, value, index) in { a: 1, b: 2 } / 'foo#fragment';"></ul>` |
668
+ | A `for...in` loop over an object | `<ul binding="@items: key in {a:1,b:2} / 'foo#fragment';"></ul>` |
669
+ | Same as above but with a `value` and `index` declaration | `<ul binding="@items: (key,value,index) in {a:1, b:2} / 'foo#fragment';"></ul>` |
669
670
 
670
671
  </details>
671
672
 
672
- **-->** *all of which would give us*:
673
+ <details><summary>All in Realtime</summary>
674
+
675
+ Lists are rendered in realtime, which means that in-place mutations - additions and removals - on the *iteratee* will be automatically reflected on the UI!
676
+
677
+ </details>
678
+
679
+ <details><summary>With SSR Support</summary>
680
+
681
+ Generated item elements are automatically assigned a corresponding index with a `data-index` attribute! This helps in remapping generated item nodes to their respective entry in *iteratee* - universally.
682
+
683
+ </details>
673
684
 
674
685
  ```html
675
686
  <section>
676
687
 
677
688
  <!-- The "items" template -->
678
689
  <template def="item" scoped>
679
- <li binding="@text: index + ': ' + name;"></li>
690
+ <li><a binding="~href: '/animals#'+name;"><?{ index+': '+name }?></a></li>
680
691
  </template>
681
692
 
682
693
  <!-- The loop -->
683
- <ul binding="@items: (name, index) of ['dog','cat','ram'] / 'item';"></ul>
694
+ <ul binding="@items: (name,index) of ['dog','cat','ram'] / 'item';"></ul>
684
695
 
685
696
  </section>
686
697
  ```
687
698
 
688
- <details><summary>All in Realtime</summary>
689
-
690
- Lists are rendered in realtime, which means that in-place mutations - additions and removals - on the *iteratee* will be automatically reflected on the UI!
691
-
692
- </details>
693
-
694
- <details><summary>With SSR Support</summary>
695
-
696
- Generated item elements are automatically assigned a corresponding index with a `data-index` attribute! This helps in remapping generated item nodes to their respective entry in *iteratee* - universally.
697
-
698
- </details>
699
-
700
699
  ## Data Plumbing
701
700
 
702
701
  *[TODO]: The Context API and Bindings API*
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "wicg-proposal"
15
15
  ],
16
16
  "homepage": "https://webqit.io/tooling/oohtml",
17
- "version": "2.1.73",
17
+ "version": "2.1.75",
18
18
  "license": "MIT",
19
19
  "repository": {
20
20
  "type": "git",