@webqit/oohtml 2.1.76 → 2.1.78
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.
- package/README.md +18 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ Building Single Page Applications? OOHTML is a special love letter!
|
|
|
19
19
|
|
|
20
20
|
## Motivation
|
|
21
21
|
|
|
22
|
-
Vanilla HTML is
|
|
22
|
+
Vanilla HTML is unsurprisingly becoming a compelling option for an increasing number of developers! But the current authoring experience still leaves much to be desired in how the language lacks modularity, reusability, and other fundamental capabilities like data binding! Authors still have to rely on tools - or, to say the least, do half of the work in HTML and half in JS - to get even basic things working!
|
|
23
23
|
|
|
24
24
|
This project pursues an object-oriented approach to HTML and implicitly revisits much of what inhibits the idea of a *component* architecture for HTML!
|
|
25
25
|
|
|
@@ -71,22 +71,6 @@ let { user } = document.namespace;
|
|
|
71
71
|
let { url, name, email } = user.namespace;
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
<details><summary>Learn more</summary>
|
|
75
|
-
|
|
76
|
-
You want to see how IDs are otherwise exposed as global variables:
|
|
77
|
-
|
|
78
|
-
```html
|
|
79
|
-
<div id="foo"><div>
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
console.log(window.foo); // div
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
[Read more](https://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable)
|
|
87
|
-
|
|
88
|
-
</details>
|
|
89
|
-
|
|
90
74
|
<details><summary>All in Realtime</summary>
|
|
91
75
|
|
|
92
76
|
The Namespace API is designed to always reflect the DOM in real-time. This may be observed using the general-purpose object observability API - [Observer API](https://github.com/webqit/observer):
|
|
@@ -118,6 +102,22 @@ function changeCallback(changes) {
|
|
|
118
102
|
|
|
119
103
|
</details>
|
|
120
104
|
|
|
105
|
+
<details><summary>Learn more</summary>
|
|
106
|
+
|
|
107
|
+
You want to see how IDs are otherwise exposed as global variables:
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<div id="foo"><div>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
```js
|
|
114
|
+
console.log(window.foo); // div
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
[Read more](https://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable)
|
|
118
|
+
|
|
119
|
+
</details>
|
|
120
|
+
|
|
121
121
|
### Scoping
|
|
122
122
|
|
|
123
123
|
We often need a way to keep things like styles and scripts [scoped to a component](https://vuejs.org/guide/scaling-up/sfc.html).
|
|
@@ -144,8 +144,6 @@ Here, we get the `scoped` attribute for *scoping* said element-specific styleshe
|
|
|
144
144
|
let { styleSheets, scripts } = user; // APIs that are analogous to the document.styleSheets, document.scripts properties
|
|
145
145
|
```
|
|
146
146
|
|
|
147
|
-
└ [Modular HTML examples](#modular-html-examples)
|
|
148
|
-
|
|
149
147
|
## HTML Imports
|
|
150
148
|
|
|
151
149
|
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.
|
|
@@ -154,7 +152,7 @@ OOHTML makes this possible in just simple conventions - via a new `def` attribut
|
|
|
154
152
|
|
|
155
153
|
### Module Definition
|
|
156
154
|
|
|
157
|
-
A module here is any piece of markup that
|
|
155
|
+
A module here is any piece of markup that can be reused.
|
|
158
156
|
|
|
159
157
|
Here, we get the `def` attribute for defining those - either as whole *module* or as *fragment*:
|
|
160
158
|
|
|
@@ -566,8 +564,6 @@ console.log(localOrGlobalImport2); // { value: div }
|
|
|
566
564
|
|
|
567
565
|
</details>
|
|
568
566
|
|
|
569
|
-
└ [HTML Imports examples](#html-imports-examples)
|
|
570
|
-
|
|
571
567
|
## Data Binding
|
|
572
568
|
|
|
573
569
|
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.
|