@webqit/oohtml 2.1.35 → 2.1.37
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 +102 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
<span class="badge-npmversion"><a href="https://npmjs.org/package/@webqit/oohtml" title="View this project on NPM"><img src="https://img.shields.io/npm/v/@webqit/oohtml.svg" alt="NPM version" /></a></span> <span class="badge-npmdownloads"><a href="https://npmjs.org/package/@webqit/oohtml" title="View this project on NPM"><img src="https://img.shields.io/npm/dm/@webqit/oohtml.svg" alt="NPM downloads" /></a></span>
|
|
6
6
|
|
|
7
|
-
<!-- /BADGES -->
|
|
7
|
+
<!-- /BADGES -->
|
|
8
8
|
|
|
9
9
|
**[Motivation](#motivation) • [Overview](#an-overview) • [Polyfill](#the-polyfill) • [Documentation](#documentation) • [Getting Involved](#getting-involved) • [License](#license)**
|
|
10
10
|
|
|
@@ -155,17 +155,17 @@ foo.addEventListener('load', loadedCallback);
|
|
|
155
155
|
</body>
|
|
156
156
|
```
|
|
157
157
|
|
|
158
|
+
└ *The HTMLImports API for programmatic module import*:
|
|
159
|
+
|
|
158
160
|
```js
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
console.log(docFragment); // DucmentFragment:/foo#fragment2, received synchronously
|
|
161
|
+
document.import('/foo#fragment1', divElement => {
|
|
162
|
+
console.log(divElement); // module:/foo#fragment2, received synchronously
|
|
162
163
|
});
|
|
163
164
|
```
|
|
164
165
|
|
|
165
166
|
```js
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
console.log(docFragment); // DucmentFragment:/foo/nested#fragment2;
|
|
167
|
+
document.import('/foo/nested#fragment2', divElement => {
|
|
168
|
+
console.log(divElement); // module:/foo/nested#fragment2;
|
|
169
169
|
});
|
|
170
170
|
```
|
|
171
171
|
|
|
@@ -188,15 +188,15 @@ document.import('/foo/nested#fragment2', docFragment => {
|
|
|
188
188
|
|
|
189
189
|
```js
|
|
190
190
|
// Using the HTMLImports API
|
|
191
|
-
document.querySelector('div').import('foo#fragment1',
|
|
192
|
-
console.log(
|
|
191
|
+
document.querySelector('div').import('foo#fragment1', divElement => {
|
|
192
|
+
console.log(divElement); // the local module: foo#fragment1
|
|
193
193
|
});
|
|
194
194
|
```
|
|
195
195
|
|
|
196
196
|
```js
|
|
197
197
|
// Using the HTMLImports API
|
|
198
|
-
document.querySelector('div').import('/foo#fragment1',
|
|
199
|
-
console.log(
|
|
198
|
+
document.querySelector('div').import('/foo#fragment1', divElement => {
|
|
199
|
+
console.log(divElement); // the global module: foo#fragment1
|
|
200
200
|
});
|
|
201
201
|
```
|
|
202
202
|
|
|
@@ -251,24 +251,19 @@ Extended Imports concepts
|
|
|
251
251
|
└ *Remote modules with lazy-loading*:
|
|
252
252
|
|
|
253
253
|
```html
|
|
254
|
+
<!-- Loading doesn't happen until the first time this is being accessed -->
|
|
254
255
|
<template as="foo" src="/foo.html" loading="lazy"></template>
|
|
255
256
|
```
|
|
256
257
|
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
```js
|
|
263
|
-
// On subsequent access, after load
|
|
264
|
-
console.log(foo.modules.m1); // module:m1
|
|
258
|
+
```html
|
|
259
|
+
<body>
|
|
260
|
+
<import ref="/foo#fragment1"></import> <!-- To be resolved after remote module has been loaded -->
|
|
261
|
+
</body>
|
|
265
262
|
```
|
|
266
263
|
|
|
267
264
|
```js
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
document.context.ask(request, response => {
|
|
271
|
-
console.log(response); // module:/foo#m2; module loading triggered on first request and received asynchronously, then synchronously on subsequent requests after loaded
|
|
265
|
+
document.import('/foo#fragment1', divElement => {
|
|
266
|
+
console.log(divElement); // To be received after remote module has been loaded
|
|
272
267
|
});
|
|
273
268
|
```
|
|
274
269
|
|
|
@@ -292,8 +287,8 @@ document.context.ask(request, response => {
|
|
|
292
287
|
|
|
293
288
|
```js
|
|
294
289
|
// Using the HTMLImports API
|
|
295
|
-
document.querySelector('section').import('#fragment2',
|
|
296
|
-
console.log(
|
|
290
|
+
document.querySelector('section').import('#fragment2', divElement => {
|
|
291
|
+
console.log(divElement); // module:/foo/nested#fragment2
|
|
297
292
|
});
|
|
298
293
|
```
|
|
299
294
|
|
|
@@ -316,8 +311,8 @@ document.querySelector('section').import('#fragment2', docFragment => {
|
|
|
316
311
|
|
|
317
312
|
```js
|
|
318
313
|
// Using the HTMLImports API
|
|
319
|
-
document.querySelector('div').import('@context1#fragment2',
|
|
320
|
-
console.log(
|
|
314
|
+
document.querySelector('div').import('@context1#fragment2', divElement => {
|
|
315
|
+
console.log(divElement); // module:/foo/nested#fragment2
|
|
321
316
|
});
|
|
322
317
|
```
|
|
323
318
|
|
|
@@ -358,8 +353,8 @@ document.querySelector('div').import('@context1#fragment2', docFragment => {
|
|
|
358
353
|
|
|
359
354
|
```js
|
|
360
355
|
// Using the HTMLImports API
|
|
361
|
-
document.querySelector('div').import('#fragment2',
|
|
362
|
-
console.log(
|
|
356
|
+
document.querySelector('div').import('#fragment2', divElement => {
|
|
357
|
+
console.log(divElement); // the local module: foo#fragment2, and if not found, resolves from context to the module: /bar/nested#fragment2
|
|
363
358
|
});
|
|
364
359
|
```
|
|
365
360
|
|
|
@@ -482,7 +477,9 @@ Observer.set(element, 'liveProperty'); // Live expressions rerun
|
|
|
482
477
|
|
|
483
478
|
### Put Together
|
|
484
479
|
|
|
485
|
-
All of OOHTML brings to the platform much of the modern UI development paradigms that community-based tools have encoded
|
|
480
|
+
All of OOHTML brings to the platform much of the modern UI development paradigms that community-based tools have long encoded, and that just opens up new ways to leverage the web platform and bank less on abstractions! Here are a few examples in the wide range of use cases these features cover.
|
|
481
|
+
|
|
482
|
+
**--> Example 1:** The following is how something you could call a Single Page Application ([SPA](https://en.wikipedia.org/wiki/Single-page_application)) could be made - with zero tooling:
|
|
486
483
|
|
|
487
484
|
└ *First, two components that are themselves analogous to a Single File Component ([SFC](https://vuejs.org/guide/scaling-up/sfc.html))*:
|
|
488
485
|
|
|
@@ -536,7 +533,7 @@ All of OOHTML brings to the platform much of the modern UI development paradigms
|
|
|
536
533
|
</body>
|
|
537
534
|
```
|
|
538
535
|
|
|
539
|
-
|
|
536
|
+
**--> Example 2:** The following is a Listbox component lifted directively from [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/#sc_label) but with IDs effectively "contained" at different levels within the component using the `namespace` attribute.
|
|
540
537
|
|
|
541
538
|
└ *A Listbox with namespaced IDs*:
|
|
542
539
|
|
|
@@ -603,6 +600,80 @@ As another example - being that a wide range of use cases exists beyond the abov
|
|
|
603
600
|
</div>
|
|
604
601
|
```
|
|
605
602
|
|
|
603
|
+
**--> Example 3:** The following is a custom element that derives its Shadow DOM from an imported `<tenplate>`. The idea is to have different Shadow DOM layouts defined and let the "usage" context decide which variant is imported!
|
|
604
|
+
|
|
605
|
+
└ *First, two layout options defined for the Shadow DOM*:
|
|
606
|
+
|
|
607
|
+
```html
|
|
608
|
+
<template as="vendor1">
|
|
609
|
+
|
|
610
|
+
<template as="components-layout1">
|
|
611
|
+
<template as="magic-button">
|
|
612
|
+
<span id="icon"></span> <span id="text"></span>
|
|
613
|
+
</template>
|
|
614
|
+
</template>
|
|
615
|
+
|
|
616
|
+
<template as="components-layout2">
|
|
617
|
+
<template as="magic-button">
|
|
618
|
+
<span id="text"></span> <span id="icon"></span>
|
|
619
|
+
</template>
|
|
620
|
+
</template>
|
|
621
|
+
|
|
622
|
+
</template>
|
|
623
|
+
```
|
|
624
|
+
|
|
625
|
+
└ *Next, the Shadow DOM creation that let's the context decide what's imported*:
|
|
626
|
+
|
|
627
|
+
```js
|
|
628
|
+
customElements.define('magic-button', class extends HTMLElement {
|
|
629
|
+
connectedCallback() {
|
|
630
|
+
const shadowRoot = this.attachShadow({ mode: 'open' });
|
|
631
|
+
this.import('@vendor1/magic-button', template => {
|
|
632
|
+
shadowRoot.appendChild( template.content.cloneNode(true) );
|
|
633
|
+
});
|
|
634
|
+
}
|
|
635
|
+
});
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
└ *Then, the part where we just drop the component in "layout" contexts*:
|
|
639
|
+
|
|
640
|
+
```html
|
|
641
|
+
<div contextname="vendor1" importscontext="/vendor1/components-layout1">
|
|
642
|
+
|
|
643
|
+
<magic-button></magic-button>
|
|
644
|
+
|
|
645
|
+
<aside contextname="vendor1" importscontext="/vendor1/components-layout2">
|
|
646
|
+
<magic-button></magic-button>
|
|
647
|
+
</aside>
|
|
648
|
+
|
|
649
|
+
</div>
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
**--> Example 4:** The following is a "list" element that derives its list items from a "scoped" `<tenplate>` element. The idea is to have a "self-contained" component that's all markup-based, not class-based!
|
|
653
|
+
|
|
654
|
+
└ *A list component with scoped module system*:
|
|
655
|
+
|
|
656
|
+
```html
|
|
657
|
+
<div namespace>
|
|
658
|
+
|
|
659
|
+
<ul id="list"></ul>
|
|
660
|
+
|
|
661
|
+
<template as="item" scoped>
|
|
662
|
+
<li>
|
|
663
|
+
<a></a>
|
|
664
|
+
</li>
|
|
665
|
+
</template>
|
|
666
|
+
|
|
667
|
+
<script scoped>
|
|
668
|
+
this.import('item', template => {
|
|
669
|
+
const clone = template.content.cloneNode(true);
|
|
670
|
+
this.namespace.list.appendChild(clone);
|
|
671
|
+
});
|
|
672
|
+
</script>
|
|
673
|
+
|
|
674
|
+
</div>
|
|
675
|
+
```
|
|
676
|
+
|
|
606
677
|
## The Polyfill
|
|
607
678
|
|
|
608
679
|
OOHTML is being developed as something to be used today - via a polyfill. This has been helping to facilitate the "release - iterations" loop and its overall evolution.
|